/* V10: slim moving bazar duty navbar + stronger mobile profile/manage layout */
    body.auth-locked .duty-marquee-navbar {
      display: none !important;
    }

    .duty-marquee-navbar {
      position: sticky;
      top: var(--app-header-height);
      z-index: 96;
      width: 100%;
      height: 38px;
      border-bottom: 1px solid rgba(255, 130, 67, .14);
      background: var(--accent);
      color: #fff;
      box-shadow: 0 10px 26px rgba(255, 130, 67, .13);
      overflow: hidden;
    }

    [data-theme="dark"] .duty-marquee-navbar {
      background: var(--surface2);
      border-bottom-color: rgba(255, 255, 255, .08);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
    }

    .duty-marquee-shell {
      height: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      padding: 0 clamp(12px, 2.4vw, 28px);
    }

    .duty-marquee-label {
      height: 25px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .03em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .duty-marquee-label i {
      font-size: .9rem;
    }

    .duty-marquee-viewport {
      min-width: 0;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }

    .duty-marquee-track {
      width: max-content;
      display: inline-flex;
      align-items: center;
      gap: 38px;
      white-space: nowrap;
      will-change: transform;
      animation: dutyTickerMove 32s linear infinite;
    }

    .duty-marquee-track:hover {
      animation-play-state: paused;
    }

    .duty-marquee-track span {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .duty-marquee-date {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .20);
      margin-right: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: .76rem;
      font-weight: 900;
    }

    .duty-marquee-name {
      font-weight: 900;
    }

    .duty-marquee-role {
      opacity: .95;
      font-size: .72rem;
      font-weight: 900;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(17, 24, 39, .18);
      border: 1px solid rgba(255, 255, 255, .16);
    }

    .duty-marquee-sep {
      opacity: .65;
      font-weight: 900;
    }

    @keyframes dutyTickerMove {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .duty-marquee-track {
        animation: none !important;
      }
    }

    @media (min-width: 901px) {
      body:not(.auth-locked) .duty-marquee-shell {
        padding-left: calc(var(--sidebar-collapsed) + clamp(12px, 2vw, 24px));
      }
    }

    @media (max-width: 900px) {
      .duty-marquee-navbar {
        height: 32px;
        top: var(--app-header-height);
      }

      .duty-marquee-shell {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 0 10px;
      }

      .duty-marquee-label {
        height: 22px;
        padding: 0 8px;
        font-size: .58rem;
        gap: 5px;
      }

      .duty-marquee-label i {
        font-size: .78rem;
      }

      .duty-marquee-track {
        gap: 28px;
        animation-duration: 24s;
      }

      .duty-marquee-track span {
        gap: 10px;
        font-size: .70rem;
      }

      .duty-marquee-date {
        font-size: .64rem;
        padding: 3px 7px;
        margin-right: 4px;
      }

      .duty-marquee-role {
        font-size: .58rem;
        padding: 2px 6px;
      }
    }

    @media (max-width: 420px) {
      .duty-marquee-shell {
        grid-template-columns: 1fr;
        gap: 0;
        padding-inline: 8px;
      }

      .duty-marquee-label {
        display: none !important;
      }

      .duty-marquee-track {
        animation-duration: 20s;
      }
    }

    /* Mobile profile: keep name and identifier in separate full-width rows */
    @media (max-width: 900px) {

      #profileModal .profile-info-grid .profile-info-item:nth-child(1),
      #profileModal .profile-info-grid .profile-info-item:nth-child(2),
      #moderatorInfoModal .profile-info-grid .profile-info-item:nth-child(1),
      #moderatorInfoModal .profile-info-grid .profile-info-item:nth-child(2) {
        grid-column: 1 / -1 !important;
      }

      #profileModal .profile-info-grid .profile-info-item:nth-child(1),
      #moderatorInfoModal .profile-info-grid .profile-info-item:nth-child(1) {
        background: linear-gradient(135deg, rgba(255, 130, 67, .11), rgba(255, 192, 203, .08)) !important;
        border-color: rgba(255, 130, 67, .22) !important;
      }

      #profileModal .profile-info-grid .profile-info-item:nth-child(2),
      #moderatorInfoModal .profile-info-grid .profile-info-item:nth-child(2) {
        background: linear-gradient(135deg, rgba(6, 148, 148, .10), rgba(255, 130, 67, .06)) !important;
        border-color: rgba(6, 148, 148, .20) !important;
      }

      #profileModal .profile-avatar-top {
        grid-template-columns: auto minmax(0, 1fr) !important;
      }

      #profileModal .profile-avatar-top>div:last-child {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
      }

      #profileModal .profile-edit-card .modal-grid .form-group:nth-child(1),
      #profileModal .profile-edit-card .modal-grid .form-group:nth-child(2),
      #profileModal .profile-edit-card .modal-grid .form-group:nth-child(4) {
        grid-column: 1 / -1 !important;
      }

      #profileModal .profile-edit-card .modal-grid .form-group:nth-child(3) {
        grid-column: 1 / -1 !important;
      }
    }

    /* Manage Mess mobile: role pill and action buttons get enough official space */
    @media (max-width: 900px) {
      #messRoleModal .modal {
        width: min(100%, 760px) !important;
      }

      #messRoleModal .mess-member-item {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
        background: linear-gradient(145deg, var(--surface), var(--surface2)) !important;
      }

      #messRoleModal .mess-member-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
      }

      #messRoleModal .mess-member-main strong {
        min-width: 0 !important;
        font-size: .88rem !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
      }

      #messRoleModal .role-pill,
      #messRoleModal .role-pill.moderator,
      #messRoleModal .role-pill.member {
        min-width: 104px !important;
        max-width: 100% !important;
        min-height: 30px !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
        line-height: 1.05 !important;
        font-size: .68rem !important;
        box-shadow: 0 8px 18px rgba(6, 148, 148, .10) !important;
      }

      #messRoleModal .role-pill.moderator {
        background: linear-gradient(135deg, rgba(6, 148, 148, .18), rgba(6, 148, 148, .10)) !important;
        border-color: rgba(6, 148, 148, .45) !important;
        color: var(--green) !important;
      }

      #messRoleModal .manager-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: stretch !important;
      }

      #messRoleModal .manager-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 8px 8px !important;
        border-radius: 11px !important;
        font-size: .70rem !important;
      }

      #messRoleModal .manager-actions .manager-icon-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
      }

      #messRoleModal .actual-member-toggle {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        justify-content: center !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        text-align: center !important;
      }

      #messRoleModal .mess-summary-card .action-row {
        grid-template-columns: 1fr 1fr !important;
      }

      #messRoleModal #managerMessNameInput {
        grid-column: 1 / -1 !important;
      }
    }

    @media (max-width: 430px) {
      #messRoleModal .mess-member-main {
        grid-template-columns: 1fr !important;
        align-items: start !important;
      }

      #messRoleModal .role-pill,
      #messRoleModal .role-pill.moderator,
      #messRoleModal .role-pill.member {
        width: fit-content !important;
        min-width: 116px !important;
      }

      #messRoleModal .manager-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }