*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ═══════════════════════════════════════════════════════════════ */
    /* THEME — Windows 11 / Ghost Spectre / Ubuntu Yaru                */
    /* Anchored to SMCS Roughrider royal #0033cc                       */
    /* ═══════════════════════════════════════════════════════════════ */
    :root {
      /* Royal — sampled from the SMCS Roughrider logo */
      --royal:      #0033cc;
      --royal-lt:   #2956e6;
      --royal-dk:   #0028a3;
      --royal-deep: #001f80;
      --royal-glow: #5a7dff;
      --royal-dim:  rgba(0,51,204,0.13);
      --royal-glass:rgba(0,51,204,0.06);

      /* Supporting accent — amber */
      --gold:       #fbbf24;
      --gold-lt:    #fcd34d;
      --gold-dk:    #d97706;
      --gold-dim:   rgba(251,191,36,0.12);

      /* Status */
      --green:      #22c55e;
      --green-dim:  rgba(34,197,94,0.12);
      --red:        #ef4444;
      --red-dim:    rgba(239,68,68,0.12);
      --orange:     #f97316;
      --purple:     #8b5cf6;

      /* Dark surface — cooler, Ghost Spectre palette, consistent tonal scale */
      --bg:         #0b0d14;
      --bg-2:       #10131c;
      --card:       rgba(22,25,35,0.85);
      --card-2:     rgba(28,31,42,0.68);
      --card-solid: #161925;
      --card-elev:  #1a1d2a;
      --border:     rgba(255,255,255,0.055);
      --border-2:   rgba(255,255,255,0.10);
      --border-3:   rgba(255,255,255,0.16);
      --text-1:     #edeff5;
      --text-2:     #a0a5b8;
      --text-3:     #656a7e;
      --text-4:     #464a5c;

      /* Shadow scale — less heavy, more Windows-11-like */
      --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
      --shadow-sm:  0 2px 6px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(255,255,255,0.04);
      --shadow:     0 4px 16px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.04);
      --shadow-lg:  0 16px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.05);
      --shadow-xl:  0 28px 72px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.06);

      --input-bg:   rgba(255,255,255,0.03);
      --input-bg-2: rgba(255,255,255,0.05);
      --glass:      rgba(18,21,30,0.75);
      --glass-blur: blur(40px) saturate(180%);
      --radius:     10px;
      --radius-lg:  16px;
      --radius-sm:  7px;
      --radius-xs:  5px;

      /* W11 Acrylic nav */
      --nav-acrylic: rgba(12,14,22,0.6);
      --nav-border:  rgba(255,255,255,0.06);
      --nav-hover:   rgba(255,255,255,0.05);
      --nav-active-bg: rgba(0,51,204,0.32);
      --nav-active-fg: #ffffff;
      --nav-active-border: rgba(0,51,204,0.55);

      --card-gradient: var(--card-solid);
      --glow-royal: 0 0 20px rgba(0,51,204,0.25);
      --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
      --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

      /* Ubuntu Yaru-inspired accent stripe */
      --accent-stripe: linear-gradient(180deg, transparent 0%, var(--royal-lt) 18%, var(--royal) 45%, var(--gold-dk) 75%, transparent 95%);
    }

    html.light {
      --bg:         #f3f4f9;
      --bg-2:       #e7e9f1;
      --card:       rgba(255,255,255,0.96);
      --card-2:     rgba(245,246,252,0.92);
      --card-solid: #ffffff;
      --card-elev:  #ffffff;
      --border:     rgba(15,22,44,0.06);
      --border-2:   rgba(15,22,44,0.11);
      --border-3:   rgba(15,22,44,0.18);
      --text-1:     #0e1424;
      --text-2:     #525a70;
      --text-3:     #8389a0;
      --text-4:     #a9aec1;

      --shadow-xs:  0 1px 2px rgba(15,22,44,0.04);
      --shadow-sm:  0 1px 3px rgba(15,22,44,0.05), 0 0 0 0.5px rgba(15,22,44,0.03);
      --shadow:     0 2px 10px rgba(15,22,44,0.06), 0 0 0 0.5px rgba(15,22,44,0.04);
      --shadow-lg:  0 10px 32px rgba(15,22,44,0.08), 0 0 0 0.5px rgba(15,22,44,0.05);
      --shadow-xl:  0 20px 56px rgba(15,22,44,0.12), 0 0 0 0.5px rgba(15,22,44,0.06);

      --input-bg:   rgba(15,22,44,0.025);
      --input-bg-2: rgba(15,22,44,0.04);
      --glass:      rgba(255,255,255,0.82);
      --royal-glass:rgba(0,51,204,0.04);

      --nav-acrylic: rgba(252,253,255,0.72);
      --nav-border:  rgba(15,22,44,0.07);
      --nav-hover:   rgba(15,22,44,0.04);
      --nav-active-bg: rgba(0,51,204,0.09);
      --nav-active-fg: var(--royal-dk);
      --nav-active-border: rgba(0,51,204,0.28);

      --card-gradient: var(--card-solid);
      --glow-royal: 0 0 16px rgba(0,51,204,0.13);
    }

    html, body {
      height: 100%;
      font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI Variable', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text-1);
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    ::selection { background: rgba(0,51,204,0.35); color: #fff; }
    html.light ::selection { background: rgba(0,51,204,0.18); color: #0e1424; }

    /* Scrollbars */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
    html.light ::-webkit-scrollbar-thumb { background: rgba(15,22,44,0.1); }
    html.light ::-webkit-scrollbar-thumb:hover { background: rgba(15,22,44,0.2); }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slideInLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
    @keyframes popIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
    @keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(6px) scale(0.97); } }
    @keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes slideDown { from { transform:translateY(-100%); } to { transform:translateY(0); } }

    .animate-in   { animation: slideIn 0.32s var(--ease-out) both; }
    .animate-in-1 { animation: slideIn 0.32s var(--ease-out) 0.04s both; }
    .animate-in-2 { animation: slideIn 0.32s var(--ease-out) 0.08s both; }
    .animate-in-3 { animation: slideIn 0.32s var(--ease-out) 0.12s both; }
    .animate-in-4 { animation: slideIn 0.32s var(--ease-out) 0.16s both; }
    .animate-in-5 { animation: slideIn 0.32s var(--ease-out) 0.20s both; }
    .pop-in { animation: popIn 0.25s var(--ease-out) both; }
    .slide-up { animation: slideIn 0.32s var(--ease-out) both; }

    /* ── Scrolling background ── */
    .scroll-bg {
      position: fixed; inset: 0; z-index: 0;
      overflow: hidden; pointer-events: none;
      opacity: 0.075;
      display: flex; flex-direction: column;
      justify-content: space-around; filter: blur(2px);
    }
    html.light .scroll-bg { opacity: 0.055; filter: blur(1.5px); }
    .scroll-row {
      display: flex; white-space: nowrap; line-height: 1;
      font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
      font-size: 26px; letter-spacing: 6px; text-transform: uppercase;
      color: var(--gold); padding: 6px 0; flex-shrink: 0; will-change: transform;
    }
    .scroll-right { color: var(--royal-lt); }
    html.light .scroll-right { color: var(--royal); }
    .scroll-row span { padding-right: 56px; }

    .vignette {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 55% 60% at 50% 50%, transparent 35%, var(--bg) 95%),
        linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%);
    }
    html.light .vignette {
      background:
        radial-gradient(ellipse 55% 60% at 50% 50%, transparent 40%, var(--bg) 100%),
        linear-gradient(to bottom, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
    }

    /* Screens */
    .screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: stretch; }
    .screen.hidden { display: none !important; }
    #access-denied-screen { align-items: center; justify-content: center; padding: 20px; }

    /* ══════════════════════════════════════════════════════════════ */
    /* LANDING — hero left + choice panel right                        */
    /* ══════════════════════════════════════════════════════════════ */

    /* Hero scroll rows — rAF driven */
    .auth-hero-scroll {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      justify-content: space-evenly;
      overflow: hidden; pointer-events: none;
      opacity: 0.12; filter: blur(0.6px);
    }
    .hero-scroll-row {
      display: flex; white-space: nowrap; flex-shrink: 0;
      font-family: inherit; font-weight: 900;
      font-size: 18px; letter-spacing: 4px; text-transform: uppercase;
      color: #fff; will-change: transform; height: 28px; line-height: 28px;
    }
    .hero-scroll-row span { padding-right: 52px; }

    /* ── Right panel ── */
    .lc-panel {
      flex: 1; position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: #22263a;
    }
    html.light .lc-panel { background: #edf0f7; }
    /* Dot-grid texture */
    .lc-panel::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(circle, rgba(0,51,204,0.055) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    html.light .lc-panel::before {
      background-image: radial-gradient(circle, rgba(0,51,204,0.055) 1px, transparent 1px);
    }
    /* Left-edge gradient bleed */
    .lc-panel::after {
      content: ''; position: absolute;
      top: 0; left: 0; bottom: 0; width: 180px;
      background: linear-gradient(to right, rgba(0,15,90,0.82) 0%, rgba(0,30,150,0.42) 35%, rgba(0,30,200,0.14) 65%, transparent 100%);
      pointer-events: none; z-index: 1;
    }
    html.light .lc-panel::after {
      background: linear-gradient(to right, rgba(0,30,100,0.25) 0%, rgba(0,51,204,0.1) 40%, rgba(0,51,204,0.03) 70%, transparent 100%);
    }
    .lc-theme-btn { position: absolute; top: 18px; right: 18px; z-index: 20; }

    /* ── Right-panel decorative border frame ── */
    .rp-frame {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 15;
      /* Subtle inset glow: blue top-left, gold bottom-right */
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.065),
        inset 3px 3px 18px rgba(0,51,204,0.09),
        inset -3px -3px 18px rgba(251,191,36,0.05);
    }
    /* TOP stripe — the same blue-to-gold bar as the sign-in panel */
    .rp-frame::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg,
        var(--royal) 0%,
        var(--royal-lt) 30%,
        var(--royal-dk) 55%,
        var(--gold-dk) 78%,
        var(--gold) 100%
      );
      opacity: 0.9;
    }
    /* RIGHT edge — 1px gradient line, gold at top fading to royal blue */
    .rp-frame::after {
      content: '';
      position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
      background: linear-gradient(180deg,
        rgba(251,191,36,0.55) 0%,
        rgba(251,191,36,0.22) 18%,
        rgba(0,51,204,0.28) 52%,
        rgba(0,30,180,0.1) 82%,
        transparent 100%
      );
    }
    html.light .rp-frame {
      box-shadow:
        inset 0 0 0 1px rgba(15,22,44,0.07),
        inset 3px 3px 14px rgba(0,51,204,0.05),
        inset -3px -3px 14px rgba(215,160,0,0.04);
    }
    html.light .rp-frame::before { opacity: 1; }
    html.light .rp-frame::after {
      background: linear-gradient(180deg,
        rgba(215,160,0,0.7) 0%,
        rgba(215,160,0,0.28) 18%,
        rgba(0,51,204,0.28) 52%,
        rgba(0,30,180,0.12) 82%,
        transparent 100%
      );
    }
    /* auth-form-panel already has its own ::before top stripe — suppress duplicate */
    .auth-form-panel .rp-frame::before { display: none; }
    @media (max-width: 768px) { .rp-frame { display: none; } }
    /* ── Body: the whole centered column ── */
    .lc-body {
      position: relative; z-index: 2;
      width: min(440px, 88%);
      display: flex; flex-direction: column; gap: 0;
    }

    /* ── Header ── */
    .lc-header { margin-bottom: 28px; }
    .lc-header-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      color: var(--royal-glow); margin-bottom: 8px;
    }
    html.light .lc-header-kicker { color: var(--royal); }
    .lc-header-title {
      font-size: 28px; font-weight: 800; letter-spacing: -0.6px;
      color: var(--text-1); line-height: 1.2; margin: 0;
    }

    /* ── Cards ── */
    .lc-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }

    .lc-card {
      position: relative; overflow: hidden;
      border-radius: 16px; cursor: pointer;
      padding: 22px 22px 22px 22px;
      display: flex; align-items: center; gap: 18px;
      transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s;
      text-align: left; border: none; font-family: inherit; width: 100%;
      outline: none; -webkit-tap-highlight-color: transparent;
    }
    .lc-card:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
    .lc-card--cal {
      background: linear-gradient(135deg, #0026d4 0%, #0033cc 55%, #1545e8 100%);
      box-shadow: 0 6px 28px rgba(0,51,204,0.38), 0 2px 6px rgba(0,0,0,0.2),
                  inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .lc-card--signin {
      background: linear-gradient(135deg, #00052a 0%, #000e72 55%, #0022cc 100%);
      box-shadow: 0 6px 28px rgba(0,14,100,0.5), 0 2px 6px rgba(0,0,0,0.28),
                  inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .lc-card::before {
      content: ''; position: absolute;
      top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 50%, transparent);
    }
    /* Hover: lift only, NO scale — scale causes sub-pixel text blur */
    .lc-card--cal:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 44px rgba(0,51,204,0.48), 0 4px 12px rgba(0,0,0,0.22),
                  inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .lc-card--signin:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 44px rgba(0,14,100,0.6), 0 4px 12px rgba(0,0,0,0.3),
                  inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .lc-card:active { transform: translateY(-1px); transition-duration: 0.08s; }
    .lc-card::after {
      content: ''; position: absolute; inset: 0; opacity: 0;
      transition: opacity 0.35s; pointer-events: none;
    }
    .lc-card--cal::after {
      background: radial-gradient(ellipse 90% 80% at 85% 50%, rgba(100,150,255,0.22) 0%, transparent 65%);
    }
    .lc-card--signin::after {
      background: radial-gradient(ellipse 90% 80% at 85% 50%, rgba(251,191,36,0.1) 0%, transparent 65%);
    }
    .lc-card:hover::after { opacity: 1; }

    .lc-chip {
      width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center; color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
      transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
      position: relative; z-index: 1;
    }
    .lc-card:hover .lc-chip { transform: scale(1.1); background: rgba(255,255,255,0.22); }

    .lc-card-text { flex: 1; position: relative; z-index: 1; }
    .lc-eyebrow {
      font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,0.42); margin-bottom: 3px; transition: color 0.3s;
    }
    .lc-card--cal:hover .lc-eyebrow    { color: rgba(255,255,255,0.72); }
    .lc-card--signin:hover .lc-eyebrow  { color: var(--gold); }
    .lc-title {
      font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
      color: #fff; line-height: 1.15; margin-bottom: 3px;
    }
    .lc-desc {
      font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.5;
      transition: color 0.3s;
    }
    .lc-card:hover .lc-desc { color: rgba(255,255,255,0.72); }

    .lc-arrow {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.18);
      display: flex; align-items: center; justify-content: center; color: #fff;
      transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s, border-color 0.3s;
      position: relative; z-index: 1;
    }
    .lc-card:hover .lc-arrow { transform: translateX(3px); background: rgba(255,255,255,0.2); }
    .lc-card--signin:hover .lc-arrow { background: rgba(251,191,36,0.22); border-color: rgba(251,191,36,0.4); }

    /* ── Info strip ── */
    .lc-info-strip {
      display: flex; align-items: center;
      padding: 11px 16px;
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
      gap: 0; overflow: hidden;
    }
    html.light .lc-info-strip {
      background: #fff;
      border-color: rgba(15,22,44,0.09);
      box-shadow: 0 2px 8px rgba(15,22,44,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .lc-info-item {
      flex: 1; display: flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 600; color: var(--text-2);
      justify-content: center; white-space: nowrap;
      min-width: 0;
    }
    .lc-info-item svg { color: var(--royal-glow); flex-shrink: 0; }
    html.light .lc-info-item svg { color: var(--royal); }
    .lc-info-sep {
      width: 1px; height: 18px; background: var(--border-2); flex-shrink: 0; margin: 0 2px;
    }
    /* ══════════════════════════════════════════════════════════════ */
    /* AUTH SPLIT — login screen (kept)
                                */
    /* ══════════════════════════════════════════════════════════════ */


    .auth-split {
      display: flex; width: 100%; height: 100%;
      animation: fadeIn 0.35s var(--ease-out) both;
      overflow: hidden;
      position: relative;
      align-items: stretch;
    }

    /* ════════════════════════════════════════════ */
    /* LEFT HERO (login screen)                     */
    /* ════════════════════════════════════════════ */
    .auth-hero {
      flex: 0 0 46%;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column;
    }
    /* Feather the hero's right edge so it dissolves instead of cutting */
    .auth-hero::after {
      content: ''; position: absolute;
      top: 0; right: 0; bottom: 0; width: 80px;
      background: linear-gradient(to right, transparent 0%, rgba(0,20,120,0.55) 60%, rgba(0,10,80,0.85) 100%);
      pointer-events: none; z-index: 5;
    }
    .auth-hero-bg {
      position: absolute; inset: 0;
      background: linear-gradient(145deg, #000e42 0%, #001ec8 35%, #0033cc 65%, #0a1fb8 100%);
    }
    .auth-hero-bg::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 20% 15%, rgba(255,255,255,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 85% 85%, rgba(251,191,36,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 75% 15%, rgba(77,117,255,0.18) 0%, transparent 50%);
    }

    /* Login hero scroll reuses .auth-hero-scroll class */
    .auth-hero-scroll {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      gap: 0;
      overflow: hidden; pointer-events: none;
      opacity: 0.11; filter: blur(0.8px);
      /* Distribute rows evenly without stretching them */
      justify-content: space-evenly;
    }

    /* ── Scroll rows ── */
    .auth-scroll-row {
      display: flex; white-space: nowrap; flex-shrink: 0;
      font-family: inherit; font-weight: 900;
      font-size: 19px; letter-spacing: 4px; text-transform: uppercase;
      color: #fff; height: 32px; align-items: center;
      will-change: transform;
    }
    .auth-scroll-row span { padding-right: 54px; }

    /* Hero content — centered vertically */
    .auth-hero-content {
      position: relative; z-index: 2;
      flex: 1; display: flex; flex-direction: column;
      justify-content: center;
      padding: 52px 52px 32px;
    }
    .auth-hero-logo {
      width: 100px; height: 100px; margin-bottom: 24px;
      border-radius: 12px; overflow: hidden;
      background: transparent;
    }
    .auth-hero-logo img {
      width: 100%; height: 100%; object-fit: contain;
      mix-blend-mode: normal;
      filter: drop-shadow(0 2px 12px rgba(0,51,204,0.4)) brightness(1.05);
    }
    .auth-hero-title {
      font-size: 56px; font-weight: 900; line-height: 1.0;
      color: #fff; letter-spacing: -1.5px;
      margin: 0 0 14px;
    }
    .auth-hero-title span { color: var(--gold); display: block; }
    .auth-hero-tagline {
      font-size: 15px; color: rgba(255,255,255,0.55);
      font-weight: 500; letter-spacing: 0.1px;
    }
    .auth-hero-footer {
      position: relative; z-index: 2;
      padding: 16px 52px;
      font-size: 11.5px; color: rgba(255,255,255,0.32);
      font-weight: 500;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    /* ════════════════════════════════════════════ */
    /* RIGHT FORM PANEL                             */
    /* ════════════════════════════════════════════ */
    .auth-form-panel {
      flex: 1;
      display: flex; flex-direction: column;
      background: #22263a;
      overflow-y: auto; position: relative;
      border-left: none;
    }
    html.light .auth-form-panel {
      background: #f1f3f8;
      border-left: none;
      background-image: radial-gradient(circle, rgba(0,51,204,0.04) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    /* Top accent stripe */
    .auth-form-panel::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--royal) 0%, var(--royal-lt) 35%, var(--royal-dk) 60%, var(--gold-dk) 80%, var(--gold) 100%);
      z-index: 2;
    }
    /* Left-edge gradient bleed */
    .auth-form-panel::after {
      content: ''; position: absolute;
      top: 0; left: 0; bottom: 0; width: 180px;
      background: linear-gradient(to right, rgba(0,15,90,0.82) 0%, rgba(0,30,150,0.42) 35%, rgba(0,30,200,0.14) 65%, transparent 100%);
      pointer-events: none; z-index: 0;
    }
    html.light .auth-form-panel::after {
      background: linear-gradient(to right, rgba(0,30,100,0.22) 0%, rgba(0,51,204,0.09) 45%, rgba(0,51,204,0.03) 70%, transparent 100%);
    }

    .auth-form-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 40px; flex-shrink: 0;
      position: relative; z-index: 2;
    }
    .auth-back-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 14px; border-radius: 8px;
      border: 1px solid var(--border-2); background: var(--card-2);
      font-family: inherit; font-size: 12px; font-weight: 600;
      color: var(--text-2); cursor: pointer;
      transition: border-color 0.16s, color 0.16s, background 0.16s;
    }
    html.light .auth-back-btn { background: rgba(255,255,255,0.7); border-color: rgba(15,22,44,0.12); }
    .auth-back-btn:hover { border-color: var(--royal); color: var(--royal-glow); background: var(--royal-dim); }
    html.light .auth-back-btn:hover { color: var(--royal); }

    .auth-form-body {
      flex: 1; display: flex; flex-direction: column;
      justify-content: center;
      padding: 20px 52px 52px;
      max-width: 460px; width: 100%; margin: 0 auto;
      position: relative; z-index: 2;
    }

    .auth-welcome { margin-bottom: 28px; }
    .auth-welcome-title {
      font-size: 34px; font-weight: 800; letter-spacing: -0.7px;
      color: var(--text-1); margin-bottom: 6px;
    }
    .auth-welcome-sub { font-size: 14px; color: var(--text-2); line-height: 1.5; font-weight: 500; }

    /* Info strip — fills the empty space above buttons */
    .auth-info-strip {
      display: flex; flex-direction: column; gap: 10px;
      margin-bottom: 28px;
      padding: 18px 20px;
      background: var(--card-solid);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    html.light .auth-info-strip {
      background: #fff;
      border-color: rgba(15,22,44,0.09);
      box-shadow: 0 1px 4px rgba(15,22,44,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .auth-info-card {
      display: flex; align-items: center; gap: 14px;
      padding: 8px 4px;
    }
    .auth-info-card + .auth-info-card {
      border-top: 1px solid var(--border);
      padding-top: 12px;
      margin-top: 2px;
    }
    .auth-info-card svg {
      color: var(--royal-glow); flex-shrink: 0; opacity: 0.85;
      background: var(--royal-dim); padding: 6px; border-radius: 8px;
      width: 30px; height: 30px; box-sizing: content-box;
    }
    html.light .auth-info-card svg { color: var(--royal); }
    .auth-info-label { font-size: 12px; font-weight: 700; color: var(--text-1); margin-bottom: 1px; }
    .auth-info-val { font-size: 11px; color: var(--text-3); }

    /* ── Landing action buttons — both same height/style ── */
    .auth-action-btn {
      width: 100%; display: flex; align-items: center; gap: 16px;
      padding: 18px 22px; border-radius: 14px; margin-bottom: 14px;
      border: 1px solid var(--border-2);
      background: var(--card-solid);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
      cursor: pointer; font-family: inherit; text-align: left;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
      position: relative; overflow: hidden;
    }
    html.light .auth-action-btn:not(.auth-action-btn--royal) {
      background: #fff;
      box-shadow: 0 2px 8px rgba(15,22,44,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-color: rgba(15,22,44,0.11);
    }
    .auth-action-btn::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 50%, transparent);
    }
    html.light .auth-action-btn:not(.auth-action-btn--royal)::before {
      background: linear-gradient(90deg, transparent, rgba(15,22,44,0.05) 50%, transparent);
    }
    .auth-action-btn:last-child { margin-bottom: 0; }
    .auth-action-btn:hover {
      border-color: rgba(0,51,204,0.3);
      box-shadow: 0 6px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
      transform: translateY(-2px);
    }
    html.light .auth-action-btn:not(.auth-action-btn--royal):hover {
      box-shadow: 0 6px 20px rgba(15,22,44,0.1), inset 0 1px 0 rgba(255,255,255,0.95);
    }
    /* Royal (primary) variant */
    .auth-action-btn--royal {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      border-color: transparent;
      box-shadow: 0 4px 18px rgba(0,51,204,0.45), 0 1px 4px rgba(0,0,0,0.2),
                  inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18);
    }
    html.light .auth-action-btn--royal {
      box-shadow: 0 4px 18px rgba(0,51,204,0.42), 0 1px 4px rgba(0,0,0,0.15),
                  inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14);
    }
    .auth-action-btn--royal::before {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
    }
    .auth-action-btn--royal:hover {
      border-color: transparent;
      filter: brightness(1.07);
      box-shadow: 0 8px 28px rgba(0,51,204,0.55), 0 2px 6px rgba(0,0,0,0.22),
                  inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .auth-action-btn--royal .auth-action-title { color: #fff; }
    .auth-action-btn--royal .auth-action-sub { color: rgba(255,255,255,0.68); }
    .auth-action-btn--royal .auth-action-arrow { color: rgba(255,255,255,0.55); }
    .auth-action-icon {
      width: 44px; height: 44px; border-radius: 11px;
      background: var(--royal-dim); color: var(--royal-glow);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0,51,204,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    html.light .auth-action-btn:not(.auth-action-btn--royal) .auth-action-icon { color: var(--royal); }
    .auth-action-btn--royal .auth-action-icon {
      background: rgba(255,255,255,0.16); color: #fff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .auth-action-text { flex: 1; }
    .auth-action-title { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 3px; letter-spacing: -0.1px; }
    .auth-action-sub { font-size: 12px; color: var(--text-2); }
    .auth-action-arrow {
      color: var(--text-3); flex-shrink: 0;
      transition: transform 0.2s;
    }
    .auth-action-btn:hover .auth-action-arrow { transform: translateX(3px); }

    /* ── Login tabs — pill style ── */
    .auth-tabs {
      display: flex; gap: 6px; margin-bottom: 24px;
    }
    .auth-tab {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 10px 14px; border-radius: 10px;
      border: 1px solid var(--border-2); background: var(--card-2);
      font-family: inherit; font-size: 13px; font-weight: 600;
      color: var(--text-2); cursor: pointer;
      transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s;
    }
    html.light .auth-tab:not(.active) { background: rgba(255,255,255,0.7); border-color: rgba(15,22,44,0.12); }
    .auth-tab:hover { color: var(--text-1); border-color: var(--border-3); }
    .auth-tab.active {
      background: var(--royal);
      border-color: var(--royal);
      color: #fff;
      box-shadow: 0 2px 10px rgba(0,51,204,0.38), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .auth-tab-panel { animation: fadeIn 0.2s ease; }

    /* ── Google sign-in section ── */
    .auth-google-wrap {
      display: flex; flex-direction: column; gap: 16px;
      padding: 22px 24px;
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.03);
      text-align: center;
    }
    html.light .auth-google-wrap {
      background: #fff;
      box-shadow: 0 2px 8px rgba(15,22,44,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
      border-color: rgba(15,22,44,0.10);
    }
    .auth-google-desc {
      font-size: 13px; color: var(--text-2); line-height: 1.55;
    }
    .auth-google-desc strong { color: var(--text-1); }
    .auth-google-btn {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      width: 100%; padding: 14px 18px;
      border-radius: 10px; border: 1px solid var(--border-2);
      background: var(--card-2);
      font-family: inherit; font-size: 14px; font-weight: 700;
      color: var(--text-1); cursor: pointer;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    html.light .auth-google-btn {
      background: #fff; border-color: rgba(15,22,44,0.13);
      box-shadow: 0 1px 4px rgba(15,22,44,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .auth-google-btn:hover {
      border-color: rgba(66,133,244,0.4);
      box-shadow: 0 4px 14px rgba(66,133,244,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
      transform: translateY(-1px);
    }
    html.light .auth-google-btn:hover {
      box-shadow: 0 4px 14px rgba(66,133,244,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .auth-google-note {
      font-size: 11px; color: var(--text-3); font-style: italic;
    }

    /* ── Form footer link ── */
    .auth-form-footer {
      margin-top: 22px; padding-top: 18px;
      border-top: 1px solid var(--border);
      text-align: center;
    }
    .auth-form-footer button {
      background: none; border: none; font-family: inherit;
      font-size: 12px; color: var(--text-3); cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      transition: color 0.15s, background 0.15s;
    }
    .auth-form-footer button:hover { color: var(--text-1); background: var(--input-bg); }

    /* ── Legacy Google/btn-google kept for backward compat ── */
    .btn-google {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 13px 16px; border: 1px solid var(--border-2); border-radius: 12px;
      background: var(--card-solid);
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03);
      font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-1);
      cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
      margin-bottom: 14px;
    }
    html.light .btn-google { background: #fff; border-color: rgba(15,22,44,0.12); }
    .btn-google:hover { border-color: rgba(66,133,244,0.35); box-shadow: 0 5px 18px rgba(66,133,244,0.15); transform: translateY(-1px); }

    /* ── Mobile responsive ── */
    @media (max-width: 768px) {
      .auth-split { flex-direction: column; }
      .auth-hero { flex: 0 0 auto; min-height: 240px; }
      .auth-hero-content { padding: 28px 28px 20px; }
      .auth-hero-title { font-size: 36px; }
      .auth-hero-logo { width: 60px; height: 60px; margin-bottom: 16px; }
      .auth-hero-tagline { display: none; }
      .auth-form-body { padding: 20px 24px 36px; max-width: 100%; }
      .auth-form-header { padding: 14px 24px; }
      .auth-hero-footer { padding: 10px 28px; }
      .auth-hero::after { display: none; }
      .lc-panel::after { display: none; }
      .auth-form-panel::after { display: none; }
    }
    @media (max-width: 960px) and (min-width: 769px) {
      .auth-hero { flex: 0 0 42%; }
      .auth-hero-content { padding: 44px 36px; }
      .auth-hero-title { font-size: 42px; }
      .auth-form-body { padding: 20px 36px 48px; }
    }


    /* ── Form inputs ── */
    .form-group { margin-bottom: 16px; }
    .form-label {
      display: block; font-size: 10.5px; font-weight: 700; color: var(--text-3);
      margin-bottom: 6px; letter-spacing: 0.5px; text-transform: uppercase;
    }
    .form-input, .form-select, .form-textarea {
      width: 100%; padding: 10px 14px;
      border: 1px solid var(--border-2); border-radius: 8px;
      font-family: inherit; font-size: 14px; color: var(--text-1);
      background: var(--input-bg); outline: none;
      transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    }
    html.light .form-input,
    html.light .form-select,
    html.light .form-textarea {
      background: #ffffff;
      border-color: rgba(15,22,44,0.14);
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--royal);
      box-shadow: 0 0 0 3px rgba(0,51,204,0.12);
      background: var(--card-solid);
    }
    html.light .form-input:focus, html.light .form-select:focus, html.light .form-textarea:focus {
      box-shadow: 0 0 0 3px rgba(0,51,204,0.1);
      background: #ffffff;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: calc(100% - 12px) center;
      padding-right: 36px; cursor: pointer;
    }
    .form-select option { background: var(--card-solid); color: var(--text-1); }
    html.light .form-select option { background: #ffffff; color: #0e1424; }
    /* Custom dropdown */
    .cust-select { position: relative; }
    .cust-select-trigger {
      width: 100%; padding: 10px 36px 10px 14px;
      border: 1px solid var(--border-2); border-radius: 8px;
      font-family: inherit; font-size: 14px; color: var(--text-1);
      background: var(--input-bg); outline: none; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
      user-select: none; min-height: 42px;
    }
    .cust-select-trigger:hover { border-color: var(--border-3); }
    .cust-select-trigger.open {
      border-color: var(--royal);
      box-shadow: 0 0 0 3px rgba(0,51,204,0.12);
      background: var(--card-solid);
    }
    html.light .cust-select-trigger { background: #fff; border-color: rgba(15,22,44,0.14); }
    html.light .cust-select-trigger.open { background: #fff; }
    .cust-select-trigger.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
    .cust-select-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cust-select-val.placeholder { color: var(--text-3); }
    .cust-select-arrow {
      flex-shrink: 0; width: 16px; height: 16px;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s var(--ease-out);
      color: var(--text-3);
    }
    .cust-select-trigger.open .cust-select-arrow { transform: rotate(180deg); }
    .cust-select-dropdown {
      position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 9500;
      background: var(--card-solid); border: 1px solid var(--border-2);
      border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.16);
      overflow: hidden; animation: scaleIn 0.14s var(--ease-out) both;
      transform-origin: top center; max-height: 260px; overflow-y: auto;
    }
    html.light .cust-select-dropdown { background: #fff; border-color: rgba(15,22,44,0.12); box-shadow: 0 8px 32px rgba(15,22,44,0.12); }
    .cust-select-dropdown::-webkit-scrollbar { width: 4px; }
    .cust-select-dropdown::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
    .cust-select-opt {
      padding: 10px 14px; font-size: 13.5px; font-family: inherit;
      color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 10px;
      transition: background 0.1s, color 0.1s;
    }
    .cust-select-opt:hover { background: var(--royal-glass); color: var(--text-1); }
    .cust-select-opt.selected { color: var(--royal-glow); font-weight: 600; background: var(--royal-dim); }
    html.light .cust-select-opt.selected { color: var(--royal); }
    .cust-select-opt.placeholder-opt { color: var(--text-3); font-style: italic; }
    .cust-select-check { width: 14px; flex-shrink: 0; }
    .form-textarea { resize: vertical; min-height: 80px; }
    .form-row { display: flex; gap: 12px; margin-bottom: 14px; }
    .form-row .form-group { flex: 1; margin-bottom: 0; }
    .form-checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; cursor: pointer; }
    .form-checkbox-row input { width: 16px; height: 16px; accent-color: var(--royal); cursor: pointer; border-radius: 4px; }
    .form-checkbox-row label { font-size: 13px; color: var(--text-2); cursor: pointer; font-weight: 500; }

    .form-input.invalid, .form-select.invalid, .form-textarea.invalid {
      border-color: var(--red) !important;
      box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
    }
    .field-error { font-size: 11px; color: var(--red); margin-top: 3px; display: none; font-weight: 500; }
    .field-error.show { display: block; }

    /* ══════════════════════════════════════════════════════════════ */
    /* BUTTONS                                                        */
    /* ══════════════════════════════════════════════════════════════ */
    .btn-primary {
      width: 100%; padding: 13px 16px;
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      color: #fff; border: none; border-radius: 8px;
      font-family: inherit; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: filter 0.18s, box-shadow 0.18s, transform 0.18s;
      margin-top: 4px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      position: relative; overflow: hidden; letter-spacing: -0.1px;
      box-shadow: 0 2px 12px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .btn-primary:hover {
      filter: brightness(1.08);
      box-shadow: 0 6px 22px rgba(0,51,204,0.52), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.22);
      transform: translateY(-1px);
    }
    .btn-primary:active { transform: translateY(0); filter: brightness(0.97); }
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
    .btn-primary .spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
      border-radius: 50%; animation: spin 0.7s linear infinite; display: none;
    }
    .btn-primary.loading .spinner { display: block; }
    .btn-primary.loading .btn-label { opacity: 0.7; }

    @keyframes dotPulse { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }
    .loading-dots { display: flex; gap: 4px; align-items: center; justify-content: center; padding: 24px 0; }
    .loading-dots span {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--royal); animation: dotPulse 1.4s ease-in-out infinite;
    }
    .loading-dots span:nth-child(2) { animation-delay: 0.16s; }
    .loading-dots span:nth-child(3) { animation-delay: 0.32s; }

    .btn-ghost {
      padding: 10px 20px; border: 1px solid var(--border-2);
      border-radius: 8px; background: transparent; font-family: inherit;
      font-size: 13px; font-weight: 600; color: var(--text-2);
      cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .btn-ghost:hover {
      border-color: var(--royal); color: var(--royal-glow); background: var(--royal-dim);
      box-shadow: 0 0 0 1px rgba(0,51,204,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    html.light .btn-ghost:hover { color: var(--royal); box-shadow: 0 0 0 1px rgba(0,51,204,0.1); }

    .btn-sm {
      padding: 8px 16px; border-radius: 8px;
      font-family: inherit; font-size: 12px; font-weight: 700;
      cursor: pointer; border: 1px solid transparent;
      transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
      letter-spacing: -0.05px;
    }
    .btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-sm-ghost { background: transparent; border-color: var(--border-2); color: var(--text-2); }
    .btn-sm-ghost:hover { border-color: var(--border-3); color: var(--text-1); background: var(--input-bg); }
    .btn-sm-approve {
      background: linear-gradient(180deg, #2dd464 0%, var(--green) 55%, #16a34a 100%);
      border-color: transparent; color: #fff;
      box-shadow: 0 2px 8px rgba(34,197,94,0.35), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .btn-sm-approve:hover:not(:disabled) {
      filter: brightness(1.08);
      box-shadow: 0 4px 14px rgba(34,197,94,0.45), inset 0 1px 0 rgba(255,255,255,0.28);
      transform: translateY(-1px);
    }
    .btn-sm-approve:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }
    .btn-sm-deny { background: var(--red-dim); border-color: rgba(239,68,68,0.22); color: var(--red); }
    .btn-sm-deny:hover { background: rgba(239,68,68,0.2); }
    .btn-sm-primary {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      color: #fff; border-color: transparent;
      box-shadow: 0 2px 8px rgba(0,51,204,0.38), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18);
    }
    .btn-sm-primary:hover:not(:disabled) {
      filter: brightness(1.08);
      box-shadow: 0 4px 14px rgba(0,51,204,0.48), inset 0 1px 0 rgba(255,255,255,0.25);
      transform: translateY(-1px);
    }
    .btn-sm-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); }

    .divider { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--text-3); font-size: 12px; }
    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-2); }
    .error-msg { display: none; background: var(--red-dim); border: 1px solid rgba(239,68,68,0.22); color: var(--red); font-size: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
    html.light .error-msg { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
    .error-msg.show { display: block; }
    .staff-note { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 14px; line-height: 1.5; }
    .back-link {
      display: flex; align-items: center; justify-content: center;
      margin: 16px auto 0; width: 34px; height: 34px; border-radius: 50%;
      border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
      cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .back-link:hover { border-color: var(--royal); color: var(--royal-glow); background: var(--royal-dim); }
    html.light .back-link:hover { color: var(--royal); }

    .denied-card {
      background: var(--card-solid); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--border-2);
      width: 100%; max-width: 380px; padding: 36px 28px; text-align: center;
      animation: modalIn 0.35s ease both;
    }
    .denied-icon {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--red-dim); display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      box-shadow: inset 0 0 0 1px rgba(239,68,68,0.2);
    }
    .denied-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
    .denied-msg { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
    .denied-email {
      display: inline-block;
      font-size: 12px; color: #fff; font-weight: 600;
      background: var(--royal);
      padding: 4px 12px; border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0,51,204,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
    }

    .theme-toggle {
      width: 34px; height: 34px; border-radius: 50%;
      background: transparent; border: 1px solid var(--border-2); color: var(--text-2);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: border-color 0.2s, color 0.2s, background 0.2s; flex-shrink: 0;
    }
    .theme-toggle:hover { border-color: var(--gold-dk); color: var(--gold); background: var(--gold-dim); }

    /* ══════════════════════════════════════════════════════════════ */
    /* APP SHELL                                                      */
    /* ══════════════════════════════════════════════════════════════ */
    #app-shell { position: fixed; inset: 0; display: none; flex-direction: row; background: transparent; z-index: 20; overflow: hidden; }
    #app-shell.visible { display: flex; }

    /* ══════════════════════════════════════════════════════════════ */
    /* SIDE NAV — W11 Acrylic × Ghost Spectre × Ubuntu Yaru           */
    /* ══════════════════════════════════════════════════════════════ */
    .side-nav {
      width: 252px; flex-shrink: 0;
      background: var(--nav-acrylic);
      backdrop-filter: blur(48px) saturate(180%);
      -webkit-backdrop-filter: blur(48px) saturate(180%);
      border-right: 1px solid var(--nav-border);
      display: flex; flex-direction: column;
      overflow: hidden;
      transition: width 0.32s var(--ease-out);
      position: relative; z-index: 10;
    }
    .side-nav::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 80% 40% at 0% 0%, rgba(0,51,204,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 60% 30% at 100% 100%, rgba(251,191,36,0.035) 0%, transparent 55%);
    }
    html.light .side-nav::before {
      background:
        radial-gradient(ellipse 80% 40% at 0% 0%, rgba(0,51,204,0.04) 0%, transparent 55%),
        radial-gradient(ellipse 60% 30% at 100% 100%, rgba(245,158,11,0.025) 0%, transparent 55%);
    }
    .side-nav::after {
      content: ''; position: absolute; top: 0; left: 0; bottom: 0;
      width: 2px; z-index: 2; pointer-events: none;
      background: var(--accent-stripe);
      opacity: 0.65;
    }
    /* Top accent stripe — matches the landing/login rp-frame top bar */
    .side-nav-header::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg,
        var(--royal) 0%, var(--royal-lt) 30%, var(--royal-dk) 55%,
        var(--gold-dk) 78%, var(--gold) 100%
      );
      opacity: 0.8; z-index: 4;
    }
    .side-nav.nav-glass { background: rgba(12,14,22,0.45) !important; }
    html.light .side-nav.nav-glass { background: rgba(252,253,255,0.6) !important; }
    .side-nav.nav-solid { background: var(--card-solid) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
    html.light .side-nav.nav-solid { background: #ffffff !important; }
    .side-nav.collapsed { width: 68px; }

    .side-nav-header {
      display: flex; align-items: center; padding: 0 14px;
      gap: 11px; flex-shrink: 0; border-bottom: 1px solid var(--border);
      height: 62px; position: relative; z-index: 3;
      transition: padding 0.32s var(--ease-out), gap 0.32s var(--ease-out);
    }
    .side-nav.collapsed .side-nav-header { padding: 0; justify-content: center; gap: 0; }

    .side-nav-logo {
      width: 36px; height: 36px; flex-shrink: 0; object-fit: contain;
      background: transparent;
      border-radius: 10px; padding: 2px;
      transition: transform 0.2s, filter 0.2s;
      cursor: pointer;
      filter: drop-shadow(0 2px 6px rgba(0,51,204,0.35));
    }
    .side-nav-logo:hover {
      transform: scale(1.07);
      filter: drop-shadow(0 3px 10px rgba(0,51,204,0.5));
    }

    .side-nav-title { flex: 1; min-width: 0; overflow: hidden; transition: opacity 0.22s, max-width 0.32s var(--ease-out); white-space: nowrap; max-width: 200px; }
    .side-nav.collapsed .side-nav-title { opacity: 0; max-width: 0; pointer-events: none; }
    .side-nav-title-main { font-size: 14px; font-weight: 800; color: var(--text-1); text-transform: uppercase; letter-spacing: 1.2px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .side-nav-title-sub { font-size: 10px; color: var(--text-3); font-weight: 600; white-space: nowrap; margin-top: 2px; letter-spacing: 0.3px; }

    .side-nav-collapse-btn {
      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
      background: var(--card-2); border: 1px solid var(--border-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-3);
      transition: background 0.18s, color 0.18s, border-color 0.18s;
    }
    .side-nav-collapse-btn:hover {
      background: var(--royal-dim); color: var(--royal-glow);
      border-color: rgba(0,51,204,0.3);
    }
    html.light .side-nav-collapse-btn:hover { color: var(--royal); }
    .side-nav-collapse-btn svg { width: 13px; height: 13px; }
    .side-nav.collapsed .side-nav-header .header-collapse { display: none; }
    .side-nav.collapsed #notif-bell { display: none !important; }
    .side-nav-collapse-bottom { display: none; flex-shrink: 0; padding: 10px 0; justify-content: center; }
    .side-nav.collapsed .side-nav-collapse-bottom { display: flex; }

    .side-nav-items {
      flex: 1; overflow-y: auto; overflow-x: hidden;
      padding: 10px 10px; display: flex; flex-direction: column; gap: 2px;
      position: relative; z-index: 2;
    }
    .side-nav-items::-webkit-scrollbar { width: 3px; }
    .side-nav-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 2px; }
    .side-nav-items:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
    html.light .side-nav-items::-webkit-scrollbar-thumb { background: rgba(15,22,44,0.06); }
    html.light .side-nav-items:hover::-webkit-scrollbar-thumb { background: rgba(15,22,44,0.15); }
    .side-nav.collapsed .side-nav-items { padding: 10px 0; align-items: center; }

    .side-nav-section-label {
      font-size: 9.5px; font-weight: 800; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 1.1px;
      padding: 14px 10px 6px; flex-shrink: 0;
      display: flex; align-items: center; gap: 8px;
    }
    .side-nav-section-label::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
    }
    .side-nav.collapsed .side-nav-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }

    .side-nav-item {
      display: flex; align-items: center;
      width: 100%; height: 40px; padding: 0 12px; gap: 12px;
      background: transparent; border: 1px solid transparent; border-radius: 9px;
      font-family: inherit; font-size: 13.5px; font-weight: 500;
      color: var(--text-2); cursor: pointer;
      transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s;
      text-align: left; white-space: nowrap; overflow: hidden; position: relative; flex-shrink: 0;
      letter-spacing: 0.05px;
    }
    .side-nav-item:hover {
      background: var(--nav-hover); color: var(--text-1);
      border-color: rgba(255,255,255,0.04);
    }
    html.light .side-nav-item:hover { border-color: rgba(15,22,44,0.04); }
    .side-nav-item.active {
      color: var(--nav-active-fg);
      background: var(--nav-active-bg);
      border-color: var(--nav-active-border);
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,51,204,0.22);
      padding-left: 15px;
    }
    html.light .side-nav-item.active {
      color: var(--nav-active-fg);
      border-color: var(--nav-active-border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,51,204,0.12);
    }
    .side-nav-item.active::before {
      content: ''; position: absolute; left: 5px; top: 28%; height: 44%;
      width: 3px; border-radius: 3px;
      background: #fff;
      box-shadow: 0 0 10px rgba(255,255,255,0.6);
    }
    html.light .side-nav-item.active::before {
      background: var(--royal);
      box-shadow: 0 0 8px rgba(0,51,204,0.55);
    }
    .side-nav-item svg { flex-shrink: 0; width: 17px; height: 17px; opacity: 0.85; transition: opacity 0.16s; }
    .side-nav-item.active svg, .side-nav-item:hover svg { opacity: 1; }
    .side-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s, width 0.3s; }

    .side-nav.collapsed .side-nav-item { justify-content: center; padding: 0; width: 44px; height: 44px; margin: 0; border-radius: 11px; }
    .side-nav.collapsed .side-nav-item.active::before { display: none; }
    .side-nav.collapsed .side-nav-item.active {
      background: linear-gradient(145deg, #1a4dff 0%, var(--royal) 60%, var(--royal-dk) 100%);
      color: #fff;
      border-color: var(--nav-active-border);
      box-shadow: 0 2px 10px rgba(0,51,204,0.45), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .side-nav.collapsed .side-nav-label { opacity: 0; width: 0; overflow: hidden; position: absolute; }

    .side-nav.collapsed .side-nav-item::after {
      content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
      background: #1c202e; color: #eef0f6; font-size: 12px; font-weight: 600;
      padding: 7px 13px; border-radius: 8px; white-space: nowrap; z-index: 100;
      pointer-events: none; opacity: 0; transition: opacity 0.14s;
      box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
    }
    html.light .side-nav.collapsed .side-nav-item::after { background: #1f2533; color: #f3f4f6; box-shadow: 0 4px 14px rgba(15,22,44,0.16); }
    .side-nav.collapsed .side-nav-item:hover::after { opacity: 1; }
    .side-nav:not(.collapsed) .side-nav-item::after { display: none; }

    .side-nav-badge {
      flex-shrink: 0; background: var(--red); color: #fff;
      font-size: 10px; font-weight: 700; border-radius: 10px;
      padding: 1px 6px; min-width: 18px; text-align: center; display: none;
      box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
    }
    .side-nav-badge.show { display: inline-block; }
    .side-nav.collapsed .side-nav-badge { position: absolute; top: 3px; right: 3px; min-width: 15px; padding: 0 4px; font-size: 9px; height: 15px; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 1.5px var(--bg); }
    .side-nav.collapsed .side-nav-badge.show { display: inline-flex; }
    /* TOS check in nav — hide text/badge flow when collapsed, show as absolute dot */
    .side-nav.collapsed .tos-check {
      position: absolute; top: 3px; right: 3px;
      width: 8px !important; height: 8px !important;
      margin-left: 0 !important;
      border-radius: 50%;
      background: var(--green) !important;
      overflow: hidden;
    }
    .side-nav.collapsed .tos-check svg { display: none; }
    .side-nav:not(.collapsed) .tos-check { position: relative; }

    .side-nav-divider { height: 1px; margin: 8px 10px; flex-shrink: 0; background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%); }
    .side-nav.collapsed .side-nav-divider { margin: 6px 14px; }

    .side-nav-bottom {
      flex-shrink: 0; border-top: 1px solid var(--border);
      padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
      position: relative; z-index: 2;
    }
    .side-nav.collapsed .side-nav-bottom { padding: 8px 0; align-items: center; }

    .side-nav-user {
      display: flex; align-items: center; gap: 11px;
      padding: 10px 10px; overflow: hidden; min-height: 52px;
      border-radius: 10px;
      transition: background 0.16s, border-color 0.16s;
      background: var(--input-bg);
      border: 1px solid var(--border);
      margin-top: 4px;
    }
    .side-nav-user:hover { background: var(--nav-hover); border-color: var(--border-2); }
    .side-nav.collapsed .side-nav-user { justify-content: center; padding: 6px 0; min-height: 44px; width: 44px; height: 44px; border-radius: 11px; background: transparent; border: none; margin: 0; }
    .side-nav-user-info { flex: 1; overflow: hidden; transition: opacity 0.2s, width 0.3s; }
    .side-nav.collapsed .side-nav-user-info { opacity: 0; width: 0; position: absolute; }
    .side-nav-user-name { font-size: 13px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .side-nav-user-role { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700; white-space: nowrap; margin-top: 1px; }
    .side-nav-signout {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
      background: transparent; border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-3);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .side-nav-signout:hover { background: rgba(239,68,68,0.1); color: var(--red); border-color: rgba(239,68,68,0.3); }
    .side-nav.collapsed .side-nav-signout { display: none; }

    .user-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--royal);
      color: #fff; font-size: 11px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
      box-shadow: 0 0 0 2px rgba(0,51,204,0.2), 0 1px 4px rgba(0,51,204,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .user-avatar img { width: 100%; height: 100%; object-fit: cover; }

    .side-nav-copyright { padding: 8px 16px 10px; font-size: 9.5px; font-weight: 600; color: var(--text-3); letter-spacing: 0.4px; opacity: 0.6; border-top: 1px solid var(--border); }
    .side-nav.collapsed .side-nav-copyright { padding: 8px 0; text-align: center; }
    .side-nav.collapsed .side-nav-copyright .side-nav-label { display: none; }

    .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: transparent; }
    .app-main.feed-active { background: transparent; }

    /* ══════════════════════════════════════════════════════════════ */
    /* DASHBOARD                                                      */
    /* ══════════════════════════════════════════════════════════════ */
    .dashboard { flex: 1; overflow-y: auto; padding: 32px 36px; background: transparent; }
    .dash-header { margin-bottom: 28px; }
    .dash-greeting { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--text-1); }
    .dash-greeting span {
      color: #4472ff;
      display: inline;
      background: none; padding: 0; border-radius: 0; box-shadow: none;
    }
    html.light .dash-greeting span { color: var(--royal); }
    .dash-subtitle { font-size: 13px; color: var(--text-2); margin-top: 6px; font-weight: 500; }
    .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 32px; }
    .dash-stat {
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 14px; padding: 18px 20px;
      display: flex; flex-direction: column;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      position: relative; overflow: hidden;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.055);
    }
    html.light .dash-stat { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,22,44,0.03); }
    /* Subtle top shine */
    .dash-stat::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 50%, transparent);
      pointer-events: none;
    }
    html.light .dash-stat::before { background: linear-gradient(90deg, transparent, rgba(15,22,44,0.06) 50%, transparent); }
    .dash-stat:hover {
      border-color: var(--border-2); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
      transform: translateY(-2px);
    }
    html.light .dash-stat:hover { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8); }
    .navy-card {
      background: var(--card-solid); border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    html.light .navy-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
    .dash-stat-icon {
      width: 46px; height: 46px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    html.light .dash-stat-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
    .dash-stat-icon.blue  { background: var(--royal-dim); color: var(--royal-glow); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(0,51,204,0.18); }
    html.light .dash-stat-icon.blue  { color: var(--royal); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(0,51,204,0.12); }
    .dash-stat-icon.gold  { background: var(--gold-dim); color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(251,191,36,0.2); }
    .dash-stat-icon.green { background: var(--green-dim); color: var(--green); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(34,197,94,0.2); }
    .dash-stat-icon.red   { background: var(--red-dim); color: var(--red); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(239,68,68,0.2); }
    .dash-stat-num { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: var(--text-1); }
    .dash-stat-label { font-size: 10.5px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; }
    .dash-section-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .dash-section-title svg { color: var(--text-3); }
    .dash-today-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
    .dash-event-card {
      display: flex; gap: 0; background: var(--card-solid); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }
    html.light .dash-event-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); }
    .dash-event-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.035); transform: translateY(-1px); }
    html.light .dash-event-card:hover { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.75); }
    .dash-event-accent { width: 3px; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
    .dash-event-body { flex: 1; padding: 12px 16px; min-width: 0; }
    .dash-event-title { font-size: 14px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dash-event-meta { font-size: 12px; color: var(--text-2); margin-top: 3px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .dash-event-meta svg { flex-shrink: 0; }
    .dash-event-time { display: flex; flex-direction: column; align-items: center; padding: 12px 16px; flex-shrink: 0; }
    .dash-event-time-start { font-size: 13px; font-weight: 700; color: var(--text-1); }
    .dash-event-time-end { font-size: 11px; color: var(--text-3); }
    .dash-empty { text-align: center; padding: 40px; color: var(--text-3); font-size: 13px; }

    /* ══════════════════════════════════════════════════════════════ */
    /* CALENDAR                                                       */
    /* ══════════════════════════════════════════════════════════════ */
    #app-cal-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; background: var(--bg); }
    .cal-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
      gap: 12px; flex-wrap: wrap; min-height: 58px;
      background: var(--glass);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
    .cal-toolbar-left { display: flex; align-items: center; gap: 8px; }
    .cal-toolbar-center { display: flex; align-items: center; gap: 6px; }
    .cal-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cal-nav-btn {
      width: 32px; height: 32px; border-radius: 8px;
      border: 1px solid var(--border-2); background: transparent;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-2);
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .cal-nav-btn:hover { border-color: var(--royal); color: var(--royal-glow); background: var(--royal-dim); }
    html.light .cal-nav-btn:hover { color: var(--royal); }
    .cal-month-label { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; min-width: 200px; text-align: center; color: var(--text-1); }
    .cal-today-btn {
      padding: 7px 16px; border-radius: 8px;
      border: 1px solid var(--border-2); background: transparent;
      font-family: inherit; font-size: 12px; font-weight: 600;
      color: var(--text-2); cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      letter-spacing: 0.2px;
    }
    .cal-today-btn:hover { border-color: var(--royal); color: var(--royal-glow); background: var(--royal-dim); }
    html.light .cal-today-btn:hover { color: var(--royal); }

    .cal-view-toggle {
      display: flex; background: var(--bg-2);
      border-radius: 8px; padding: 3px; gap: 2px;
      border: 1px solid var(--border-2);
    }
    html.light .cal-view-toggle {
      background: rgba(15,22,44,0.06);
      border-color: rgba(15,22,44,0.14);
    }
    .cal-view-btn {
      padding: 6px 18px; border: none; background: transparent;
      border-radius: 6px; font-family: inherit;
      font-size: 12px; font-weight: 600; color: var(--text-3);
      cursor: pointer; transition: background 0.16s, color 0.16s;
    }
    .cal-view-btn:hover { color: var(--text-1); background: rgba(255,255,255,0.06); }
    html.light .cal-view-btn:hover { background: rgba(15,22,44,0.06); color: var(--text-1); }
    .cal-view-btn.active {
      background: var(--royal);
      color: #fff;
      box-shadow: 0 1px 4px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    html.light .cal-view-btn.active {
      background: var(--royal);
      color: #fff;
      box-shadow: 0 1px 4px rgba(0,51,204,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    }

    /* Notifications dropdown rows */
    .notif-item {
      padding: 12px 16px; cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.16s, padding 0.16s; position: relative;
    }
    .notif-item::before {
      content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
      width: 2px; border-radius: 0 2px 2px 0;
      background: var(--royal); opacity: 0; transition: opacity 0.15s;
    }
    .notif-item:hover { background: var(--royal-glass); padding-left: 18px; }
    .notif-item:hover::before { opacity: 0.6; }
    .notif-item:last-child { border-bottom: none; }

    /* Filter bar */
    .cal-filter-bar {
      padding: 8px 16px; border-bottom: 1px solid var(--border);
      background: var(--card-solid);
      animation: filterSlideDown 0.2s ease;
      position: relative; z-index: 1;
    }
    @keyframes filterSlideDown { from { opacity:0; max-height:0; padding:0 16px; } to { opacity:1; max-height:200px; padding:8px 16px; } }
    .cal-filters { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .cal-filter-group {
      display: flex; align-items: center; gap: 3px;
      padding: 3px 4px; border-radius: 10px;
      background: var(--input-bg);
      border: 1px solid var(--border);
    }
    .cal-filter-group-label { font-size: 9px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; padding: 0 6px 0 4px; white-space: nowrap; }
    .cal-filter-chip {
      display: flex; align-items: center; gap: 4px;
      padding: 4px 10px; border-radius: 16px;
      border: 1px solid transparent; background: transparent;
      font-family: inherit; font-size: 11px; font-weight: 600;
      color: var(--text-3); cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .cal-filter-chip:hover { background: var(--input-bg-2); color: var(--text-2); }
    .cal-filter-chip.active {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      border-color: var(--royal);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 1px 6px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .cal-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.08); }
    html.light .cal-filter-dot { box-shadow: 0 0 0 1.5px rgba(15,22,44,0.06); }
    .cal-filter-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
    .cal-filter-toggle-btn {
      display: flex; align-items: center; gap: 4px;
      padding: 6px 12px; border-radius: 8px;
      border: 1px solid var(--border-2); background: transparent;
      font-family: inherit; font-size: 11px; font-weight: 600;
      color: var(--text-3); cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      position: relative;
    }
    .cal-filter-toggle-btn:hover { border-color: var(--royal); color: var(--royal-glow); }
    html.light .cal-filter-toggle-btn:hover { color: var(--royal); }
    .cal-filter-toggle-btn.active {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      border-color: var(--royal);
      color: #fff;
      box-shadow: 0 1px 6px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .cal-filter-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--royal); color: #fff; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

    .cal-wrap { flex: 1; overflow-y: auto; padding: 0; background: var(--bg); }
    /* Grid uses auto rows — each row takes the height of its tallest cell.
       Since ALL cells in a row share the same height (CSS grid), we fix the
       cell height and clip overflow instead of letting events push it open. */
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      /* Each content row is a fixed height. DOW header row is auto. */
      grid-auto-rows: auto;
      border-left: 1px solid var(--border);
      background: var(--bg);
    }
    .cal-grid .cal-day {
      /* Fixed height — all cells in a row stay the same size */
      height: 120px;
    }
    @media (min-height: 700px) {
      .cal-grid .cal-day { height: 140px; }
    }
    @media (min-height: 900px) {
      .cal-grid .cal-day { height: 160px; }
    }
    .cal-dow {
      padding: 9px 8px; text-align: center;
      font-size: 10px; font-weight: 800; color: var(--text-3);
      letter-spacing: 0.8px; text-transform: uppercase;
      border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
      background: var(--card-solid);
      position: sticky; top: 0; z-index: 2;
    }
    .cal-day {
      /* Height set by .cal-grid .cal-day above — no min-height here */
      padding: 4px 4px 0;
      border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
      background: var(--bg); position: relative;
      transition: background 0.16s;
      display: flex; flex-direction: column; overflow: hidden;
    }
    /* Events area fills remaining space after day number */
    .cal-day-events {
      flex: 1; overflow: hidden;
      display: flex; flex-direction: column;
      gap: 1px;
      min-height: 0;
    }
    .cal-day:hover { background: var(--royal-glass); }
    .cal-day.other-month { opacity: 0.15; pointer-events: none; background: var(--bg-2); }
    .cal-day.today { background: rgba(0,51,204,0.06); }
    html.light .cal-day.today { background: rgba(0,51,204,0.05); }
    .cal-day-num { font-size: 11px; font-weight: 700; color: var(--text-2); padding: 1px 4px 2px; margin-bottom: 2px; display: inline-block; line-height: 1.2; }
    .cal-day.today .cal-day-num {
      background: var(--royal); color: #fff; border-radius: 50%;
      width: 22px; height: 22px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800;
      box-shadow: 0 2px 8px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    }

    .cal-event {
      display: block; width: 100%; text-align: left;
      padding: 3px 6px 3px; margin-bottom: 0;
      border-radius: 5px; border: none; font-family: inherit;
      cursor: pointer; color: #fff; font-size: 10px;
      transition: filter 0.15s, transform 0.15s;
      overflow: hidden; line-height: 1.3;
      background: var(--royal); position: relative;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      flex-shrink: 0;
    }
    .cal-event:hover { filter: brightness(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.25); z-index: 5; position: relative; }
    .cal-event-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
    .cal-event-time { font-size: 9px; opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .cal-event-room { font-size: 9px; opacity: 0.68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Hide room line in short cells to keep events clean */
    @media (max-height: 750px) {
      .cal-grid .cal-day { height: 110px; }
      .cal-event-room { display: none; }
    }
    .cal-event.confidential { background: var(--card-2) !important; border: 1px solid var(--border-2) !important; color: var(--text-3) !important; box-shadow: none !important; }
    .cal-event.pending { background: transparent !important; border: 1.5px dashed rgba(100,116,139,0.6) !important; color: var(--text-3) !important; box-shadow: none !important; }
    .cal-event.past .cal-event-title { text-decoration: line-through; }
    .cal-event.past { filter: grayscale(0.55) brightness(0.85); }
    .cal-more {
      font-size: 9.5px; font-weight: 700; color: var(--royal-glow);
      padding: 2px 4px; cursor: pointer; display: block;
      text-align: left; border: none;
      background: transparent;
      border-radius: 4px; margin-top: 1px; width: 100%;
      font-family: inherit; transition: color 0.14s, background 0.14s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .cal-more:hover { color: var(--gold); background: rgba(0,51,204,0.06); }
    html.light .cal-more { color: var(--royal); }
    html.light .cal-more:hover { color: var(--royal-dk); background: rgba(0,51,204,0.05); }

    /* Week view */
    .week-grid { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
    .week-header { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card-solid); position: sticky; top: 0; z-index: 10; }
    .week-header-blank { padding: 8px; border-right: 1px solid var(--border); }
    .week-header-day { padding: 8px; text-align: center; border-right: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.3px; }
    .week-header-day .week-day-num { font-size: 22px; font-weight: 800; color: var(--text-1); line-height: 1.1; display: block; margin-bottom: 2px; }
    .week-header-day.today { background: var(--royal-glass); }
    .week-header-day.today .week-day-num {
      background: var(--royal); color: #fff; border-radius: 50%;
      width: 34px; height: 34px; display: inline-flex;
      align-items: center; justify-content: center;
      box-shadow: 0 2px 10px rgba(0,51,204,0.4);
    }
    .week-body { display: grid; grid-template-columns: 60px repeat(7, 1fr); flex: 1; overflow-y: auto; background: var(--bg); }
    .week-time-col { border-right: 1px solid var(--border); }
    .week-time-slot { height: 48px; padding: 2px 8px; font-size: 10px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); text-align: right; letter-spacing: 0.1px; background: var(--bg); }
    .week-day-col { border-right: 1px solid var(--border); position: relative; background: var(--bg); }
    .week-day-slot { height: 48px; border-bottom: 1px solid var(--border); background: var(--bg); }
    .week-event {
      position: absolute; left: 2px; right: 2px;
      border-radius: 6px; font-size: 11px; font-weight: 600;
      color: #fff; cursor: pointer; overflow: hidden;
      z-index: 1; padding: 3px 6px;
      transition: filter 0.14s, transform 0.14s, z-index 0s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.22);
      border-left: 3px solid rgba(255,255,255,0.28) !important;
    }
    .week-event:hover { filter: brightness(1.08); transform: translateY(-1px); z-index: 10; box-shadow: 0 3px 12px rgba(0,0,0,0.3); }
    .week-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
    .week-event-time { font-size: 9.5px; opacity: 0.82; margin-top: 1px; }

    /* Day view */
    .day-grid { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
    .day-header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--card-solid); flex-shrink: 0; }
    .day-header-date { font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--text-1); }
    .day-body { flex: 1; overflow-y: auto; background: var(--bg); }
    .day-time-row { display: flex; min-height: 60px; border-bottom: 1px solid var(--border); background: var(--bg); }
    .day-time-label { width: 70px; flex-shrink: 0; padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--text-3); border-right: 1px solid var(--border); text-align: right; }
    .day-time-events { flex: 1; padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
    .day-event { padding: 7px 12px; border-radius: 6px; font-size: 12px; color: #fff; cursor: pointer; transition: filter 0.12s, transform 0.12s; box-shadow: 0 1px 3px rgba(0,0,0,0.22); }
    .day-event:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .day-event-title { font-weight: 700; }
    .day-event-meta { font-size: 11px; opacity: 0.85; margin-top: 2px; }

    /* ══════════════════════════════════════════════════════════════ */
    /* FEED VIEW — FLAT cards, no gradient sweeps                     */
    /* ══════════════════════════════════════════════════════════════ */
    .feed-wrap { flex: 1; overflow-y: auto; padding: 28px 32px; background: transparent; }
    .feed-inner { max-width: 760px; margin: 0 auto; }
    .feed-header { margin-bottom: 24px; }
    .feed-title { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-1); }
    .feed-subtitle { font-size: 13px; color: var(--text-2); margin-top: 3px; }
    .feed-date-group { margin-bottom: 28px; }
    .feed-date-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .feed-date-badge {
      background: var(--royal); color: #fff;
      font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
      padding: 4px 12px; border-radius: 20px; white-space: nowrap;
      box-shadow: 0 1px 6px rgba(0,51,204,0.3);
    }
    .feed-date-line { flex: 1; height: 1px; background: var(--border); }

    .feed-card {
      display: flex; gap: 0;
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 14px; overflow: hidden; margin-bottom: 10px;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; cursor: pointer;
      position: relative;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.055);
    }
    html.light .feed-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,22,44,0.03); }
    .feed-card::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 50%, transparent);
      pointer-events: none;
    }
    html.light .feed-card::before { background: linear-gradient(90deg, transparent, rgba(15,22,44,0.06) 50%, transparent); }
    .feed-card:hover {
      border-color: var(--border-2);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.035);
      transform: translateY(-2px);
    }
    html.light .feed-card:hover { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8); }
    .feed-card-accent { width: 4px; flex-shrink: 0; box-shadow: 0 0 12px currentColor; }
    .feed-card-body { flex: 1; padding: 14px 16px; min-width: 0; }
    .feed-card-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
    .feed-card-meta { font-size: 12px; color: var(--text-2); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 12px; }
    .feed-card-meta-item { display: flex; align-items: center; gap: 5px; }
    .feed-card-desc { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }
    .feed-card-time { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 16px; flex-shrink: 0; }
    .feed-card-time-start { font-size: 13px; font-weight: 700; color: var(--text-1); }
    .feed-card-time-end { font-size: 11px; color: var(--text-3); }
    .feed-empty { text-align: center; padding: 60px 20px; color: var(--text-3); font-size: 14px; }

    /* ══════════════════════════════════════════════════════════════ */
    /* MY REQUESTS — FLAT cards, restored pill tabs                    */
    /* ══════════════════════════════════════════════════════════════ */
    .my-requests { flex: 1; overflow-y: auto; padding: 28px 32px; background: transparent; }
    .my-requests-inner { max-width: 860px; margin: 0 auto; }
    .my-req-header { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
    .my-req-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-1); }
    .my-req-filters { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
    .my-req-tab {
      padding: 7px 16px; border-radius: 20px;
      border: 1px solid var(--border-2); background: transparent;
      font-family: inherit; font-size: 12px; font-weight: 600;
      color: var(--text-2); cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      letter-spacing: 0.1px;
    }
    .my-req-tab:hover { border-color: rgba(0,51,204,0.25); color: var(--text-1); }
    .my-req-tab.active {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      border-color: var(--royal);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 1px 6px rgba(0,51,204,0.42), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14);
    }
    html.light .my-req-tab.active { color: #fff; border-color: var(--royal); }

    .my-req-card {
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 14px; padding: 16px 20px;
      margin-bottom: 10px; cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      position: relative; overflow: hidden;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.055);
    }
    html.light .my-req-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,22,44,0.03); }
    .my-req-card::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 50%, transparent);
      pointer-events: none;
    }
    html.light .my-req-card::before { background: linear-gradient(90deg, transparent, rgba(15,22,44,0.06) 50%, transparent); }
    .my-req-card:hover {
      border-color: var(--border-2);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.035);
      transform: translateY(-2px);
    }
    html.light .my-req-card:hover { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8); }
    .my-req-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .my-req-card-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); }
    .my-req-card-details { font-size: 12px; color: var(--text-2); margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }

    /* ══════════════════════════════════════════════════════════════ */
    /* RESOURCE FINDER — restored pill tabs                            */
    /* ══════════════════════════════════════════════════════════════ */
    .finder { flex: 1; overflow-y: auto; padding: 28px 32px; background: transparent; }
    .finder-inner { max-width: 860px; margin: 0 auto; }
    .finder-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 4px; color: var(--text-1); }
    .finder-subtitle { font-size: 13px; color: var(--text-3); margin-bottom: 0; }
    .finder-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .finder-tab {
      display: flex; align-items: center; gap: 6px; padding: 8px 16px;
      background: transparent;
      border: 1px solid var(--border-2); border-radius: 20px;
      font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer;
      font-family: inherit; transition: border-color 0.18s, color 0.18s, background 0.18s;
    }
    .finder-tab:hover { border-color: rgba(0,51,204,0.3); color: var(--text-1); background: var(--royal-glass); }
    .finder-tab-active {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%) !important;
      color: #fff !important;
      border-color: var(--royal) !important;
      font-weight: 700;
      box-shadow: 0 1px 6px rgba(0,51,204,0.42), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14);
    }
    html.light .finder-tab-active { color: #fff !important; border-color: var(--royal) !important; }
    .finder-search-bar {
      display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
      padding: 16px 18px;
      background: var(--card-solid);
      border: 1px solid var(--border);
      border-radius: 12px; margin-bottom: 16px;
    }
    .finder-search-bar .form-group { margin-bottom: 0; min-width: 130px; }
    .finder-results { display: flex; flex-direction: column; gap: 10px; }
    .finder-building { margin-bottom: 16px; }
    .finder-building-name { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; color: var(--text-1); }
    .finder-room {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--card-solid); border: 1px solid var(--border-2);
      border-radius: 12px; padding: 13px 16px; margin-bottom: 6px;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
      position: relative; overflow: hidden;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.055);
    }
    html.light .finder-room { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,22,44,0.03); }
    .finder-room::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 50%, transparent);
      pointer-events: none;
    }
    html.light .finder-room::before { background: linear-gradient(90deg, transparent, rgba(15,22,44,0.05) 50%, transparent); }
    .finder-room:hover {
      border-color: rgba(0,51,204,0.28);
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
      transform: translateY(-1px);
    }
    html.light .finder-room:hover { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.8); }
    .finder-room-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
    .finder-room-cap { font-size: 11px; color: var(--text-3); }
    .finder-room-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
    .finder-room-avail { background: var(--green-dim); color: var(--green); }
    .finder-room-busy  { background: var(--red-dim);   color: var(--red); }

    /* ══════════════════════════════════════════════════════════════ */
    /* ADMIN PANEL — W11 acrylic, real logo now                        */
    /* ══════════════════════════════════════════════════════════════ */
    .admin-overlay {
      position: fixed; inset: 0; z-index: 300;
      background: rgba(0,0,0,0.58);
      backdrop-filter: blur(16px) saturate(0.75);
      -webkit-backdrop-filter: blur(16px) saturate(0.75);
      display: flex; align-items: center; justify-content: center;
      padding: 20px; animation: fadeIn 0.2s ease;
    }
    .admin-overlay.hidden { display: none; }

    .admin-dialog {
      background: var(--card-solid);
      border-radius: 20px;
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.055);
      border: 1px solid var(--border-2);
      width: 100%; max-width: 1140px; max-height: 92vh; min-height: 580px;
      display: flex; overflow: hidden;
      animation: modalIn 0.35s var(--ease-out) both;
      position: relative;
    }
    html.light .admin-dialog { box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.8); }
    .admin-dialog::before {
      content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13) 50%, transparent);
      z-index: 10; pointer-events: none;
    }
    html.light .admin-dialog::before { background: linear-gradient(90deg, transparent, rgba(15,22,44,0.06) 50%, transparent); }

    .admin-nav {
      width: 232px; flex-shrink: 0;
      background: rgba(10,12,18,0.55);
      backdrop-filter: blur(42px) saturate(180%);
      -webkit-backdrop-filter: blur(42px) saturate(180%);
      border-right: 1px solid rgba(255,255,255,0.06);
      display: flex; flex-direction: column; overflow: hidden;
      position: relative;
    }
    html.light .admin-nav { background: rgba(244,246,252,0.85); border-right-color: rgba(15,22,44,0.06); }
    .admin-nav::before {
      content: ''; position: absolute; top: 0; left: 0; bottom: 0;
      width: 2px; z-index: 2; pointer-events: none;
      background: var(--accent-stripe); opacity: 0.42;
    }
    .admin-nav::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 80% 40% at 0% 0%, rgba(0,51,204,0.05) 0%, transparent 55%);
    }

    .admin-nav-header {
      padding: 18px 16px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      position: relative; z-index: 1;
    }
    html.light .admin-nav-header { border-bottom-color: rgba(15,22,44,0.06); }
    .admin-nav-title {
      font-size: 16px; font-weight: 800; letter-spacing: -0.2px;
      color: var(--text-1);
      display: flex; align-items: center; gap: 11px;
    }
    .admin-nav-logo {
      width: 30px; height: 30px; flex-shrink: 0;
      background: transparent; border-radius: 0;
      padding: 0;
      filter: drop-shadow(0 1px 4px rgba(0,51,204,0.35));
      display: flex; align-items: center; justify-content: center;
    }
    .admin-nav-logo img { width: 100%; height: 100%; object-fit: contain; }
    /* Adjust role text indent since logo is now bare */
    .admin-nav-role {
      font-size: 9.5px; color: var(--text-3); font-weight: 700;
      text-transform: uppercase; margin-top: 6px; letter-spacing: 0.9px;
      padding-left: 41px;
    }

    .admin-nav-items {
      flex: 1; overflow-y: auto;
      padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
      position: relative; z-index: 1;
    }
    .admin-nav-items::-webkit-scrollbar { width: 3px; }
    .admin-nav-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
    .admin-nav-items:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }

    .admin-nav-item {
      display: flex; align-items: center; gap: 11px;
      width: 100%; padding: 0 12px; height: 40px;
      border: 1px solid transparent; background: transparent;
      font-family: inherit; font-size: 13px; font-weight: 500;
      color: var(--text-2); cursor: pointer;
      transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s;
      text-align: left; position: relative; border-radius: 9px;
      letter-spacing: 0.1px;
    }
    .admin-nav-item svg { flex-shrink: 0; opacity: 0.85; transition: opacity 0.16s; }
    .admin-nav-item:hover {
      background: var(--nav-hover); color: var(--text-1);
      border-color: rgba(255,255,255,0.04);
    }
    html.light .admin-nav-item:hover { border-color: rgba(15,22,44,0.04); }
    .admin-nav-item:hover svg { opacity: 1; }
    .admin-nav-item.active {
      color: var(--nav-active-fg);
      background: var(--nav-active-bg);
      border-color: var(--nav-active-border);
      font-weight: 600;
      padding-left: 15px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,51,204,0.22);
    }
    html.light .admin-nav-item.active {
      color: var(--nav-active-fg);
      border-color: var(--nav-active-border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,51,204,0.12);
    }
    .admin-nav-item.active::before {
      content: ''; position: absolute; left: 5px; top: 28%; height: 44%;
      width: 3px; border-radius: 3px;
      background: #fff;
      box-shadow: 0 0 10px rgba(255,255,255,0.6);
    }
    html.light .admin-nav-item.active::before {
      background: var(--royal);
      box-shadow: 0 0 8px rgba(0,51,204,0.55);
    }
    .admin-nav-item.active svg { opacity: 1; }
    .admin-nav-item .anav-badge {
      margin-left: auto; background: var(--red); color: #fff;
      font-size: 10px; font-weight: 700; border-radius: 10px;
      padding: 1px 6px; min-width: 18px; text-align: center; display: none;
      box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
    }
    .admin-nav-item .anav-badge.show { display: inline-block; }

    .admin-nav-footer {
      padding: 12px 10px 14px;
      border-top: 1px solid rgba(255,255,255,0.05);
      position: relative; z-index: 1;
    }
    html.light .admin-nav-footer { border-top-color: var(--border); }
    .admin-nav-close {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 9px 12px;
      border: 1px solid var(--border-2);
      border-radius: 8px; background: var(--input-bg); font-family: inherit;
      font-size: 12px; font-weight: 600; color: var(--text-2);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      letter-spacing: 0.1px;
    }
    .admin-nav-close:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

    .admin-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: var(--bg-2); }
    html.light .admin-content { background: #f6f7fb; }
    .admin-content-header {
      padding: 22px 28px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
      background: var(--card-solid);
    }
    html.light .admin-content-header { background: var(--card-solid); }
    .admin-content-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-1); }
    .admin-content-body { padding: 22px 28px; flex: 1; overflow-y: auto; }
    .admin-content-body::-webkit-scrollbar { width: 4px; }
    .admin-content-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
    .admin-content-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
    html.light .admin-content-body::-webkit-scrollbar-thumb { background: rgba(15,22,44,0.08); }

    .admin-section-loading { padding: 48px; text-align: center; color: var(--text-3); }
    .admin-empty {
      padding: 40px; text-align: center; color: var(--text-3); font-size: 13px;
      border-radius: 10px; background: var(--card-2);
      border: 1px dashed var(--border-2);
    }

    .admin-subtabs { display: flex; gap: 6px; padding: 16px 28px 0; flex-wrap: wrap; }
    .admin-subtab {
      padding: 7px 16px; border-radius: 20px;
      border: 1px solid var(--border-2); background: transparent;
      font-family: inherit; font-size: 12px; font-weight: 600;
      color: var(--text-3); cursor: pointer;
      transition: border-color 0.18s, color 0.18s, background 0.18s;
      letter-spacing: 0.1px;
    }
    .admin-subtab:hover { border-color: rgba(0,51,204,0.3); color: var(--text-2); background: var(--royal-glass); }
    .admin-subtab.active {
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      border-color: var(--royal);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 1px 6px rgba(0,51,204,0.42), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.14);
    }
    html.light .admin-subtab.active { color: #fff; border-color: var(--royal); }
    .admin-subtab-badge { margin-left: 4px; background: var(--red); color: #fff; font-size: 10px; border-radius: 10px; padding: 1px 5px; display: none; }
    .admin-subtab-badge.show { display: inline-block; }

    .req-table-wrap { overflow-x: auto; padding: 12px 24px; }
    .req-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
    .req-table th {
      text-align: left; padding: 10px 12px;
      font-weight: 700; color: var(--text-3); letter-spacing: 0.3px; font-size: 10px;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: var(--card-solid); z-index: 1;
    }
    .req-table td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--text-2); transition: background 0.14s; }
    .req-table tr { cursor: pointer; }
    .req-table tbody tr:hover { background: var(--royal-glass); }

    .req-search-bar {
      display: flex; align-items: center; gap: 8px;
      border: 1px solid var(--border-2); border-radius: 8px;
      padding: 10px 14px; background: var(--input-bg);
      transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    }
    .req-search-bar:focus-within {
      border-color: var(--royal);
      box-shadow: 0 0 0 3px rgba(0,51,204,0.12);
      background: var(--card-solid);
    }
    .req-search-input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; color: var(--text-1); }
    .req-search-input::placeholder { color: var(--text-3); }
    .req-search-clear { border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 14px; padding: 0 4px; transition: color 0.15s; }
    .req-search-clear:hover { color: var(--red); }

    /* Admin role cards, building split, etc. */
    .role-card {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; margin-bottom: 4px; border-radius: 10px;
      transition: background 0.16s;
    }
    .role-card:hover { background: var(--royal-glass); }
    .role-card-avatar {
      width: 36px; height: 36px; border-radius: 11px;
      background: var(--royal);
      color: #fff; font-size: 11px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,51,204,0.32), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .role-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .role-card-info { flex: 1; min-width: 0; }
    .role-card-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); }
    .role-card-email { font-size: 11px; color: var(--text-3); margin-top: 1px; }
    .role-select {
      padding: 7px 28px 7px 11px; border-radius: 8px;
      border: 1px solid var(--border-2); background: var(--card-solid);
      font-family: inherit; font-size: 12px; font-weight: 600;
      color: var(--text-1); appearance: none; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 8px center;
      transition: border-color 0.16s;
    }
    .role-select option { background: var(--card-solid); color: var(--text-1); }
    html.light .role-select option { background: #ffffff; color: #0d1422; }
    .role-select:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(0,51,204,0.12); outline: none; }
    .role-select:hover { border-color: var(--border-3); }

    .bld-split { display: flex; gap: 0; border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden; height: 400px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04); }
    .bld-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .bld-col + .bld-col { border-left: 1px solid var(--border); }
    .bld-col-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card-2); }
    .bld-col-title { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--text-3); text-transform: uppercase; display: flex; align-items: center; }
    .bld-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.14s; }
    .bld-row:hover { background: var(--royal-glass); }
    .bld-row.selected { background: var(--royal-dim); position: relative; }
    .bld-row.selected::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--royal); box-shadow: 0 0 8px rgba(0,51,204,0.5); }
    .bld-row-dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; }
    .bld-row-info { flex: 1; min-width: 0; }
    .bld-row-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
    .bld-row-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; }
    .bld-row-acts { display: flex; gap: 4px; }
    .bld-icon-btn {
      width: 26px; height: 26px; border-radius: 7px;
      border: 1px solid var(--border-2); background: transparent;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-3);
      transition: border-color 0.14s, color 0.14s, background 0.14s;
    }
    .bld-icon-btn:hover { border-color: var(--border-3); color: var(--text-1); background: var(--input-bg); }
    .bld-icon-btn.danger:hover { color: var(--red); border-color: rgba(239,68,68,0.3); background: var(--red-dim); }
    .bld-hint { padding: 24px; text-align: center; color: var(--text-3); font-size: 12px; }
    .bld-inline-form { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--input-bg); }
    .bld-form-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
    .manage-add-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 13px; border-radius: 8px;
      border: 1px solid rgba(251,191,36,0.42);
      background: var(--gold-dim);
      font-family: inherit; font-size: 11px; font-weight: 700;
      color: var(--gold); cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
      letter-spacing: 0.2px;
    }
    html.light .manage-add-btn { color: #b45309; }
    .manage-add-btn:hover { background: rgba(251,191,36,0.22); border-color: rgba(251,191,36,0.55); transform: translateY(-1px); }

    /* Community accounts */
    .comm-card { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--border); border-radius: 8px; transition: background 0.14s; }
    .comm-card:hover { background: var(--royal-glass); }
    .comm-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--gold); color: #fff;
      font-size: 11px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(251,191,36,0.32), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .comm-info { flex: 1; min-width: 0; }
    .comm-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); }
    .comm-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
    .comm-actions { display: flex; gap: 4px; }

    /* Request form sections, perm matrix, resource picker */
    .req-section { margin-bottom: 22px; }
    .req-section-label {
      font-size: 10px; font-weight: 800; color: var(--text-3);
      letter-spacing: 0.6px; text-transform: uppercase;
      margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    }
    .req-section-num {
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--royal-dim); color: var(--royal-glow);
      font-size: 9.5px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(0,51,204,0.3);
      flex-shrink: 0;
    }
    html.light .req-section-num { color: var(--royal); }
    .req-section-complete .req-section-num {
      background: var(--green); color: #fff;
      box-shadow: 0 1px 4px rgba(34,197,94,0.3);
    }
    .req-section-complete .req-section-label { color: var(--text-3); }

    .multiday-row { display: flex; gap: 8px; align-items: end; margin-bottom: 8px; }
    .multiday-row .form-group { flex: 1; margin-bottom: 0; }

    .perm-matrix { width: 100%; border-collapse: separate; border-spacing: 0; }
    .perm-matrix th { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); padding: 8px 10px; text-align: center; position: sticky; top: 0; background: var(--card-solid); z-index: 1; border-bottom: 1px solid var(--border-2); }
    .perm-matrix th:first-child { text-align: left; min-width: 130px; }
    .perm-matrix td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border); }
    .perm-matrix td:first-child { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-1); }
    .perm-matrix tr:hover td { background: var(--royal-glass); }
    .perm-matrix input[type="checkbox"] { accent-color: var(--royal); width: 15px; height: 15px; cursor: pointer; }
    .perm-override-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--purple); color: #fff; opacity: 0.9; }
    .perm-user-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 6px; transition: border-color 0.16s, background 0.16s; }
    .perm-user-row:hover { border-color: var(--border-2); background: var(--card-2); }
    .perm-group-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold-dk); padding: 14px 0 6px; margin-top: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
    .perm-group-header svg { width: 14px; height: 14px; stroke: var(--gold-dk); }

    .time-range-visual { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; background: var(--input-bg); margin-top: 6px; font-size: 12px; color: var(--text-2); }
    .time-range-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border-2); position: relative; overflow: hidden; }
    .time-range-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--royal); transition: left 0.3s, width 0.3s; }
    .time-range-duration { font-weight: 700; color: var(--gold); font-size: 11px; }

    /* Custom Date Picker */
    .custom-datepicker { border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; background: var(--card-solid); }
    .custom-datepicker-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--card-2); }
    .custom-datepicker-header button { background: none; border: none; color: var(--text-2); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.15s, color 0.15s; }
    .custom-datepicker-header button:hover { background: var(--royal-dim); color: var(--royal-glow); }
    html.light .custom-datepicker-header button:hover { color: var(--royal); }
    .custom-datepicker-title { font-size: 13px; font-weight: 700; color: var(--text-1); }
    .custom-datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; }
    .custom-datepicker-dow { font-size: 10px; font-weight: 700; color: var(--text-3); text-align: center; padding: 4px 0; text-transform: uppercase; }
    .custom-datepicker-day { font-size: 12px; text-align: center; padding: 6px 2px; border-radius: 6px; cursor: pointer; color: var(--text-2); border: 1px solid transparent; transition: background 0.14s, color 0.14s, border-color 0.14s; user-select: none; }
    .custom-datepicker-day:hover { background: var(--royal-glass); border-color: var(--royal); color: var(--text-1); }
    .custom-datepicker-day.selected { background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 60%, var(--royal-dk) 100%); color: #fff; font-weight: 700; border-color: var(--royal); box-shadow: 0 1px 4px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
    .custom-datepicker-day.today { border-color: var(--gold-dk); color: var(--gold); font-weight: 600; }
    .custom-datepicker-day.today.selected { border-color: var(--royal); color: #fff; }
    .custom-datepicker-day.other-month { opacity: 0.3; }
    .custom-datepicker-day.past { opacity: 0.25; cursor: not-allowed; }
    .custom-datepicker-selected-list { padding: 8px 12px; border-top: 1px solid var(--border); max-height: 100px; overflow-y: auto; }
    .custom-datepicker-tag {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; padding: 3px 8px;
      border-radius: 12px;
      background: var(--royal); color: #fff;
      margin: 2px;
      box-shadow: 0 1px 3px rgba(0,51,204,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .custom-datepicker-tag button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; margin-left: 2px; opacity: 0.85; }
    .custom-datepicker-tag button:hover { opacity: 1; }

    /* Public calendar topbar */
    .app-topbar {
      display: flex; align-items: center; gap: 10px;
      padding: 0 16px; height: 54px; flex-shrink: 0;
      background: var(--glass); backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    /* Top stripe matching the app's design language */
    .app-topbar::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--royal) 0%, var(--royal-lt) 30%, var(--royal-dk) 55%, var(--gold-dk) 78%, var(--gold) 100%);
      opacity: 0.75; z-index: 2;
    }
    .app-topbar::after {
      content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,51,204,0.28) 40%, rgba(251,191,36,0.18) 70%, transparent);
      opacity: 0.65; pointer-events: none;
    }
    .app-logo {
      width: 36px; height: 36px; border-radius: 0;
      background: transparent;
      display: flex; align-items: center; justify-content: center;
      padding: 0; flex-shrink: 0;
      filter: drop-shadow(0 2px 6px rgba(0,51,204,0.35));
    }
    .app-logo img { width: 100%; height: 100%; object-fit: contain; }
    .app-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; flex: 1; color: var(--text-1); }
    .app-title span { color: var(--gold); font-weight: 600; }
    html.light .app-title span { color: var(--royal-dk); }
    .app-topbar-right { display: flex; align-items: center; gap: 8px; }

    .pub-tabs-bar {
      display: flex; background: var(--card-solid);
      border-bottom: 1px solid var(--border);
      padding: 0 20px; gap: 2px; flex-shrink: 0;
    }
    .pub-tab {
      display: flex; align-items: center; gap: 7px;
      padding: 13px 18px; border: none; background: transparent;
      font-family: inherit; font-size: 13px; font-weight: 700;
      color: var(--text-3); cursor: pointer; letter-spacing: 0.1px;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: background 0.16s, color 0.16s, border-color 0.16s;
    }
    .pub-tab:hover { color: var(--text-1); background: var(--input-bg); }
    .pub-tab.active {
      color: var(--royal-glow);
      border-bottom-color: var(--royal);
      background: rgba(0,51,204,0.1);
    }
    html.light .pub-tab.active { color: var(--royal-dk); background: rgba(0,51,204,0.07); border-bottom-color: var(--royal); }
    .pub-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
    .pub-panel.hidden { display: none; }

    /* ══════════════════════════════════════════════════════════════ */
    /* MODAL — no rotate on close, clean header                       */
    /* ══════════════════════════════════════════════════════════════ */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.62); z-index: 500;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      backdrop-filter: blur(18px) saturate(0.7);
      -webkit-backdrop-filter: blur(18px) saturate(0.7);
      animation: fadeIn 0.2s ease;
    }
    #offline-banner { animation: slideDown 0.25s ease; }

    .modal {
      background: var(--card-solid);
      border-radius: 16px;
      box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.04);
      border: 1px solid var(--border-2);
      width: 100%; max-width: 560px;
      animation: modalIn 0.35s var(--ease-out) both;
      overflow: hidden; max-height: 92vh; display: flex; flex-direction: column;
      position: relative;
    }
    html.light .modal { box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.85); }
    .modal::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg,
        var(--royal) 0%, var(--royal-lt) 30%, var(--royal-dk) 55%,
        var(--gold-dk) 78%, var(--gold) 100%
      );
      pointer-events: none; z-index: 5; opacity: 0.85;
    }
    html.light .modal::before { opacity: 1; }
    .modal.wide { max-width: 880px; }
    @keyframes modalShake {
      0% { transform: translateX(0); }
      15% { transform: translateX(-9px); }
      30% { transform: translateX(8px); }
      45% { transform: translateX(-7px); }
      60% { transform: translateX(5px); }
      75% { transform: translateX(-3px); }
      90% { transform: translateX(2px); }
      100% { transform: translateX(0); }
    }
    /* Shake applied via JS style attribute, not class, to avoid re-triggering modalIn */
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

    .fpe-tb {
      width:30px; height:30px; border:none; background:transparent; color:var(--text-2);
      border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition: background 0.14s, color 0.14s; flex-shrink:0;
    }
    .fpe-tb:hover { background:var(--card-2); color:var(--text-1); }
    .fpe-tb-active, .fpe-tb-active:hover { background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 60%, var(--royal-dk) 100%); color:#fff; box-shadow: 0 1px 6px rgba(0,51,204,0.42), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.15); }

    .modal-header {
      padding: 22px 24px 18px; border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
      background: rgba(0,51,204,0.03);
    }
    html.light .modal-header { background: rgba(0,51,204,0.02); }
    .modal-color-bar { width: 4px; border-radius: 4px; flex-shrink: 0; align-self: stretch; min-height: 38px; }
    .modal-title { font-size: 18px; font-weight: 800; color: var(--text-1); flex: 1; letter-spacing: -0.3px; line-height: 1.3; }
    .modal-close {
      width: 32px; height: 32px; border-radius: 9px;
      border: 1px solid var(--border-2); background: var(--card-2);
      color: var(--text-3); cursor: pointer; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .modal-close:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

    .modal-body { padding: 22px 24px 24px; overflow-y: auto; flex: 1; }
    .modal-body::-webkit-scrollbar { width: 4px; }
    .modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 2px; }
    .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
    html.light .modal-body::-webkit-scrollbar-thumb { background: rgba(15,22,44,0.08); }

    .modal-row { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; font-size: 13px; color: var(--text-2); line-height: 1.55; }
    .modal-row svg { flex-shrink: 0; margin-top: 2px; color: var(--text-3); }
    .modal-row strong { color: var(--text-1); font-weight: 600; }

    .modal-status {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 12px; border-radius: 20px;
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .status-approved  { background: var(--green-dim); color: var(--green); }
    .status-pending   { background: var(--gold-dim); color: var(--gold); }
    .status-denied    { background: var(--red-dim); color: var(--red); }
    .status-cancelled { background: rgba(100,116,139,0.12); color: var(--text-3); }
    html.light .status-approved { background: #dcfce7; color: #15803d; }
    html.light .status-pending  { background: #fef3c7; color: #b45309; }
    html.light .status-denied   { background: #fee2e2; color: #b91c1c; }

    .modal-footer {
      padding: 14px 20px 16px; border-top: 1px solid var(--border);
      display: flex; gap: 8px; align-items: center; flex-shrink: 0;
      flex-wrap: wrap; border-radius: 0 0 16px 16px;
    }

    /* Resource checkbox list — flat pill cards */
    .resource-checkbox-list { display: flex; flex-direction: column; gap: 4px; }
    .resource-checkbox-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: 9px;
      border: 1px solid var(--border); cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      background: var(--input-bg);
    }
    .resource-checkbox-item:hover { border-color: rgba(0,51,204,0.3); background: var(--royal-glass); }
    .resource-checkbox-item:has(input:checked) { border-color: var(--royal); background: var(--royal-dim); }
    .resource-checkbox-item input { accent-color: var(--royal); width: 15px; height: 15px; cursor: pointer; }
    .resource-cb-label { display: flex; align-items: center; gap: 8px; flex: 1; }
    .resource-cb-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
    .resource-cb-cap { font-size: 11px; color: var(--text-3); margin-left: auto; font-weight: 600; }

    /* Recurrence day picker */
    .recur-days-wrap { display: flex; gap: 6px; }
    .recur-day-btn {
      width: 34px; height: 34px; border-radius: 50%;
      border: 1.5px solid var(--border-2); background: transparent;
      font-family: inherit; font-size: 12px; font-weight: 700;
      color: var(--text-2); cursor: pointer;
      transition: border-color 0.16s, color 0.16s, background 0.16s;
    }
    .recur-day-btn:hover { border-color: var(--royal); color: var(--royal-glow); }
    html.light .recur-day-btn:hover { color: var(--royal); }
    .recur-day-btn.selected { background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 60%, var(--royal-dk) 100%); border-color: var(--royal); color: #fff; box-shadow: 0 2px 8px rgba(0,51,204,0.42), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.15); }

    /* Custom fields */
    .custom-fields-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
    .custom-fields-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-3); margin-bottom: 10px; }
    .custom-field-checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; }
    .custom-field-checkbox-label { font-size: 13px; color: var(--text-2); }

    /* Field builder */
    .field-builder { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
    .field-builder-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-3); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
    .field-card { background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; margin-bottom: 8px; position: relative; transition: border-color 0.16s, background 0.16s; }
    .field-card:hover { border-color: var(--border-2); background: var(--input-bg-2); }
    .field-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .field-card-drag { cursor: grab; color: var(--text-3); flex-shrink: 0; }
    .field-card-drag:active { cursor: grabbing; }
    .field-card-label { font-size: 13px; font-weight: 600; color: var(--text-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .field-card-type { font-size: 9.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; background: var(--card-elev); padding: 3px 7px; border-radius: 5px; border: 1px solid var(--border); }
    .field-card-badges { display: flex; gap: 4px; align-items: center; }
    .field-card-req { font-size: 9px; font-weight: 700; color: var(--gold-dk); text-transform: uppercase; letter-spacing: 0.4px; }
    .field-card-acts { display: flex; gap: 4px; }
    .field-options-preview { font-size: 11px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .required-star { color: var(--red); margin-left: 2px; }

    .req-conflict-warn {
      display: flex; align-items: center; gap: 10px; padding: 11px 14px;
      background: rgba(251,191,36,0.1);
      border: 1px solid rgba(251,191,36,0.32);
      border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--gold);
    }
    html.light .req-conflict-warn { color: #b45309; }

    /* ══════════════════════════════════════════════════════════════ */
    /* SUPPORT FAB & PANEL — smooth pulse (opacity ring, not shadow)  */
    /* FLAT bubbles, no gradients                                      */
    /* ══════════════════════════════════════════════════════════════ */
    .support-fab {
      position: fixed; bottom: 28px; right: 28px;
      width: 54px; height: 54px; border-radius: 50%;
      background: linear-gradient(145deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      color: #fff; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow:
        0 4px 22px rgba(0,51,204,0.55),
        0 2px 6px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.2);
      transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
      z-index: 1000;
    }
    .support-fab:hover {
      filter: brightness(1.1);
      transform: scale(1.08) translateY(-2px);
      box-shadow:
        0 8px 32px rgba(0,51,204,0.65),
        0 3px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.22);
    }
    .support-fab:active { transform: scale(1.02); filter: brightness(0.97); }
    /* Smooth opacity-based pulse ring — no box-shadow flashing */
    .support-fab.has-unread::before,
    .support-fab.has-unread::after {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      border: 2px solid var(--royal-glow);
      animation: fabRing 2.2s ease-out infinite;
      pointer-events: none;
    }
    .support-fab.has-unread::after { animation-delay: 1.1s; }
    @keyframes fabRing {
      0%   { opacity: 0.7; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.8); }
    }
    .support-fab.dragging { transition: none !important; animation: none !important; opacity: 0.85; }
    .support-fab.dragging::before, .support-fab.dragging::after { display: none; }
    .support-fab.panel-open { border-radius: 16px; }
    .support-fab.panel-open svg { transform: rotate(45deg); transition: transform 0.2s; }

    .support-panel {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 380px; z-index: 999;
      background: var(--card-solid);
      border-left: 1px solid var(--border);
      box-shadow: -12px 0 40px rgba(0,0,0,0.45);
      display: flex; flex-direction: column; overflow: hidden;
      transform: translateX(100%);
      transition: transform 0.3s var(--ease-out);
    }
    /* Content wrapper must fill remaining height and establish flex context */
    #support-panel-content {
      display: flex; flex-direction: column;
      flex: 1; overflow: hidden; min-height: 0;
    }
    html.light .support-panel { box-shadow: -12px 0 40px rgba(15,22,44,0.1); }
    .support-panel.open { transform: translateX(0); }
    @media (max-width: 480px) { .support-panel { width: 100vw; } }

    .support-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 17px 18px; flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      background: rgba(0,51,204,0.04);
      position: relative;
    }
    .support-panel-header::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--royal) 0%, var(--royal-lt) 35%, var(--royal-dk) 60%, var(--gold-dk) 80%, var(--gold) 100%);
      opacity: 0.8;
    }
    .support-input-closed {
      padding: 14px 16px; text-align: center; font-size: 12px;
      color: var(--text-3); border-top: 1px solid var(--border);
      background: var(--card-2); flex-shrink: 0;
    }
    .support-reopen-link {
      background: none; border: none; color: var(--royal-glow); font-family: inherit;
      font-size: 12px; font-weight: 700; cursor: pointer; padding: 0;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .support-reopen-link:hover { color: var(--gold); }
    html.light .support-panel-header { background: rgba(0,51,204,0.025); }
    .support-panel-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; display: flex; align-items: center; gap: 9px; color: var(--text-1); }
    .support-panel-title svg { color: var(--royal-glow); }
    html.light .support-panel-title svg { color: var(--royal); }
    .support-panel-close {
      width: 30px; height: 30px; border-radius: 9px;
      border: 1px solid var(--border-2); background: var(--card-2);
      color: var(--text-2); cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0;
    }
    .support-panel-close:hover { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.35); }

    .support-back-btn {
      width: 30px; height: 30px; border-radius: 9px;
      border: 1px solid var(--border-2); background: var(--card-2);
      color: var(--text-2); cursor: pointer; display: inline-flex;
      align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0;
    }
    .support-back-btn:hover { background: var(--royal-dim); color: var(--royal-glow); border-color: rgba(0,51,204,0.35); }
    html.light .support-back-btn:hover { color: var(--royal); }

    .support-inbox-actions { padding: 10px 14px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
    .support-search { display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; transition: border-color 0.15s; }
    .support-search:focus-within { border-color: var(--royal); }
    .support-search input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 12px; color: var(--text-1); outline: none; }
    .support-search input::placeholder { color: var(--text-3); }
    .support-new-btn {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      width: 100%; padding: 10px 16px;
      background: linear-gradient(180deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      color: #fff; border: none;
      border-radius: 10px; font-family: inherit;
      font-size: 13px; font-weight: 700; cursor: pointer;
      transition: filter 0.16s, box-shadow 0.16s, transform 0.16s;
      box-shadow: 0 2px 10px rgba(0,51,204,0.4), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18);
    }
    .support-new-btn:hover {
      filter: brightness(1.08); transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,51,204,0.52), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .support-new-btn:active { transform: translateY(0); filter: brightness(0.97); }

    .support-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--input-bg); }
    .support-tab { flex: 1; padding: 11px 4px; border: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text-3); cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; border-bottom: 2px solid transparent; letter-spacing: 0.2px; }
    .support-tab:hover { color: var(--text-1); background: var(--input-bg-2); }
    .support-tab.active {
      color: #fff;
      border-bottom-color: var(--royal);
      background: linear-gradient(180deg, transparent 0%, rgba(0,51,204,0.14) 100%);
    }
    html.light .support-tab.active { color: #fff; background: var(--royal); border-bottom-color: var(--royal-dk); }
    .support-tab .tab-count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 16px; padding: 0 5px;
      border-radius: 8px; background: var(--royal); color: #fff;
      font-size: 10px; font-weight: 800; margin-left: 5px;
      box-shadow: 0 1px 3px rgba(0,51,204,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    html.light .support-tab .tab-count { color: #fff; }

    .support-inbox { flex: 1; overflow-y: auto; }
    .support-inbox::-webkit-scrollbar { width: 4px; }
    .support-inbox::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
    .support-inbox::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
    .support-inbox-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 24px; text-align: center; color: var(--text-3); }
    .support-inbox-empty-icon { width: 62px; height: 62px; border-radius: 16px; background: var(--royal-glass); display: flex; align-items: center; justify-content: center; color: var(--royal-glow); box-shadow: inset 0 0 0 1px rgba(0,51,204,0.15); }
    html.light .support-inbox-empty-icon { color: var(--royal); }
    .support-inbox-empty-title { font-size: 14px; font-weight: 700; color: var(--text-2); }
    .support-inbox-empty-sub { font-size: 12px; line-height: 1.55; max-width: 240px; }

    .support-ticket-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.14s, padding 0.14s; position: relative; }
    .support-ticket-row.unread { background: rgba(0,51,204,0.04); }
    .support-ticket-row.unread .support-ticket-subject { font-weight: 800; color: var(--text-1); }
    .support-ticket-row.unread::before { opacity: 0.8 !important; }
    html.light .support-ticket-row.unread { background: rgba(0,51,204,0.03); }
    .support-ticket-row:hover { background: var(--royal-glass); padding-left: 18px; }
    .support-ticket-row::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px; border-radius: 0 2px 2px 0; background: var(--royal); opacity: 0; transition: opacity 0.14s; }
    .support-ticket-row:hover::before { opacity: 0.55; }
    .support-ticket-avatar { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .support-ticket-info { flex: 1; min-width: 0; }
    .support-ticket-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
    .support-ticket-subject { font-size: 13px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
    .support-ticket-preview { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
    .support-ticket-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .support-ticket-time { font-size: 10px; color: var(--text-3); margin-left: auto; white-space: nowrap; }
    .support-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .support-status-dot.open { background: var(--green); }
    .support-status-dot.active { background: var(--royal); animation: dotPulseSoft 2s ease-in-out infinite; }
    @keyframes dotPulseSoft { 0%,100%{ opacity: 1; } 50%{ opacity: 0.45; } }

    .support-cat-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; }
    .support-cat-intro { padding: 14px 18px 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; flex-shrink: 0; }
    .support-cat-empty { padding: 32px; text-align: center; color: var(--text-3); font-size: 12px; }
    .support-cat-list { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; }
    .support-cat-list::-webkit-scrollbar { width: 3px; }
    .support-cat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

    .support-cat-card {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 14px; border-radius: 11px;
      border: 1px solid var(--border); background: var(--card-2);
      cursor: pointer;
      transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
      text-align: left; font-family: inherit;
      position: relative; overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    html.light .support-cat-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
    .support-cat-card::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07) 50%, transparent);
      pointer-events: none;
    }
    html.light .support-cat-card::before { background: linear-gradient(90deg, transparent, rgba(15,22,44,0.05) 50%, transparent); }
    .support-cat-card:hover {
      border-color: rgba(0,51,204,0.38);
      background: var(--royal-glass);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    html.light .support-cat-card:hover { box-shadow: 0 4px 14px rgba(15,22,44,0.06), inset 0 1px 0 rgba(255,255,255,0.8); }
    .support-cat-icon {
      width: 42px; height: 42px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.05);
    }
    html.light .support-cat-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
    .support-cat-info { flex: 1; min-width: 0; }
    .support-cat-name { font-size: 13px; font-weight: 700; color: var(--text-1); }
    .support-cat-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

    .support-new-ticket-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
    .support-new-ticket-body::-webkit-scrollbar { width: 3px; }
    .support-new-ticket-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }

    .support-cat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; border: 1px solid; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; width: fit-content; }
    .support-new-ticket-desc { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 0; padding: 10px 12px; background: var(--input-bg); border-radius: 8px; }

    .support-chat-header { display: flex; flex-direction: column; flex-shrink: 0; border-bottom: 1px solid var(--border); background: rgba(0,51,204,0.03); }
    html.light .support-chat-header { background: rgba(0,51,204,0.02); }
    .support-chat-header-top { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; }
    .support-chat-meta { flex: 1; min-width: 0; }
    .support-chat-title { font-size: 14px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
    .support-chat-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .support-ticket-num { font-size: 10px; font-weight: 700; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
    .support-status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
    .support-cat-badge-sm { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; white-space: nowrap; }
    .support-chat-action-row { display: flex; gap: 6px; padding: 0 16px 12px; flex-shrink: 0; }
    .support-action-pill {
      padding: 5px 14px; border-radius: 20px;
      border: 1px solid var(--border-2); background: transparent;
      font-family: inherit; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
      color: var(--text-2);
    }
    .support-action-pill.claim { color: var(--royal-glow); border-color: rgba(0,51,204,0.32); }
    html.light .support-action-pill.claim { color: var(--royal); }
    .support-action-pill.claim:hover { background: var(--royal-dim); }
    .support-action-pill.resolve { color: var(--green); border-color: rgba(34,197,94,0.32); }
    .support-action-pill.resolve:hover { background: var(--green-dim); }
    .support-action-pill.close { color: var(--text-3); }
    .support-action-pill.close:hover { background: var(--input-bg); }
    .support-action-pill.reopen { color: var(--gold-dk); border-color: rgba(245,158,11,0.32); }
    .support-action-pill.reopen:hover { background: var(--gold-dim); }

    .support-messages { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 3px; }
    .support-messages::-webkit-scrollbar { width: 4px; }
    .support-messages::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
    .support-messages::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
    html.light .support-messages::-webkit-scrollbar-thumb { background: rgba(15,22,44,0.1); }

    .support-system-pill { align-self: center; margin: 6px 0; }
    .support-system-pill span { display: inline-block; padding: 3px 12px; border-radius: 12px; background: var(--input-bg); font-size: 10px; font-weight: 600; color: var(--text-3); }
    .support-msg-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 2px; }
    .support-msg-row.mine { flex-direction: row-reverse; }
    .support-msg-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 800; margin-bottom: 16px; color: #fff; }
    .support-msg-avatar-spacer { width: 30px; flex-shrink: 0; }
    .support-msg-bubble-wrap { display: flex; flex-direction: column; max-width: 78%; }
    .support-msg-row.mine .support-msg-bubble-wrap { align-items: flex-end; }
    .support-msg-sender-name { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; padding-left: 4px; }

    /* FLAT bubbles — no gradients */
    .support-msg-bubble {
      padding: 10px 14px; border-radius: 16px;
      font-size: 13px; line-height: 1.5; word-wrap: break-word;
      animation: msgIn 0.22s var(--ease-out) both;
    }
    @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .support-msg-bubble.sent {
      background: var(--royal); color: #fff;
      border-bottom-right-radius: 5px;
    }
    .support-msg-bubble.received {
      background: var(--card-2); color: var(--text-1);
      border: 1px solid var(--border);
      border-bottom-left-radius: 5px;
    }
    html.light .support-msg-bubble.received { background: #f3f5fa; }
    .support-msg-time { font-size: 9.5px; color: var(--text-3); margin-top: 3px; padding: 0 4px; }
    .support-msg-time.right { text-align: right; }

    .support-typing-bar { padding: 2px 16px 4px; font-size: 11px; color: var(--text-3); min-height: 20px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .support-typing-dots { display: flex; gap: 3px; }
    .support-typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: typingBounce 1.4s ease-in-out infinite; }
    .support-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
    .support-typing-dots span:nth-child(3) { animation-delay: 0.32s; }
    @keyframes typingBounce { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)} }

    .support-input-area { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); background: var(--card-solid); flex-shrink: 0; }
    .support-input {
      flex: 1; resize: none; border: 1px solid var(--border-2);
      border-radius: 14px; padding: 10px 14px;
      font-family: inherit; font-size: 13px; color: var(--text-1);
      background: var(--input-bg); outline: none;
      max-height: 120px; min-height: 42px; line-height: 1.45;
      transition: border-color 0.16s, box-shadow 0.16s;
    }
    .support-input:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(0,51,204,0.12); }
    .support-input::placeholder { color: var(--text-3); }
    .support-send-btn {
      width: 44px; height: 44px; border-radius: 50%;
      border: none; color: #fff;
      background: linear-gradient(145deg, #1a4dff 0%, var(--royal) 55%, var(--royal-dk) 100%);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: filter 0.15s, transform 0.15s, box-shadow 0.15s; flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(0,51,204,0.42), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18);
    }
    .support-send-btn:hover {
      filter: brightness(1.1); transform: scale(1.08);
      box-shadow: 0 5px 18px rgba(0,51,204,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .support-send-btn:active { transform: scale(1.02); filter: brightness(0.97); }
    .support-send-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
    .support-input-closed { padding: 14px 20px; text-align: center; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--border); background: var(--card-solid); flex-shrink: 0; line-height: 1.5; }
    .support-reopen-link { background: none; border: none; color: var(--royal-glow); cursor: pointer; font-weight: 700; font-family: inherit; font-size: 12px; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
    html.light .support-reopen-link { color: var(--royal); }

    /* ══════════════════════════════════════════════════════════════ */
    /* TOAST — acrylic chip with colored left accent                   */
    /* ══════════════════════════════════════════════════════════════ */
    .toast {
      position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
      background: rgba(18,21,30,0.92);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text-1); padding: 12px 20px 12px 22px;
      border-radius: 14px; font-size: 13px; font-weight: 600;
      display: flex; align-items: center; gap: 10px;
      z-index: 9999; white-space: nowrap; max-width: calc(100vw - 40px);
      box-shadow: var(--shadow-xl);
      animation: toastIn 0.26s var(--ease-out) both;
      position: fixed; overflow: hidden;
    }
    .toast::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; background: var(--royal);
    }
    .toast.success::before { background: var(--green); }
    .toast.error::before   { background: var(--red); }
    .toast.warn::before    { background: var(--gold); }
    .toast.info::before    { background: var(--royal); }
    html.light .toast { background: rgba(255,255,255,0.94); border-color: rgba(15,22,44,0.08); color: var(--text-1); box-shadow: 0 12px 40px rgba(15,22,44,0.12); }
    .toast.hide { animation: toastOut 0.22s ease forwards; }
    .toast-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .toast.success .toast-icon { background: var(--green-dim); color: var(--green); }
    .toast.error .toast-icon { background: var(--red-dim); color: var(--red); }
    .toast.info .toast-icon { background: var(--royal-dim); color: var(--royal-glow); }
    html.light .toast.info .toast-icon { color: var(--royal); }

    /* ══════════════════════════════════════════════════════════════ */
    /* DEV BANNER & TOOLS                                              */
    /* ══════════════════════════════════════════════════════════════ */
    #dev-banner-bar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
      height: 38px; overflow: hidden;
      background: linear-gradient(90deg, #170b2e 0%, #0a1020 30%, #170b2e 60%, #0a1020 100%);
      border-bottom: 1px solid rgba(249,115,22,0.5);
      box-shadow: 0 2px 14px rgba(249,115,22,0.18);
    }
    .dev-banner-inner { display: flex; align-items: center; height: 100%; overflow: hidden; gap: 0; }
    .dev-banner-left { display: flex; align-items: center; gap: 6px; padding: 0 14px; flex-shrink: 0; border-right: 1px solid rgba(249,115,22,0.25); height: 100%; background: rgba(249,115,22,0.08); }
    .dev-banner-icon { font-size: 14px; }
    .dev-banner-label { font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #f97316; text-transform: uppercase; white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
    .dev-banner-scroll-wrap { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent); }
    .dev-banner-scroll { display: flex; align-items: center; height: 100%; white-space: nowrap; animation: devBannerScroll 45s linear infinite; will-change: transform; }
    .dev-banner-scroll-text { display: inline-block; font-size: 11px; font-weight: 600; color: rgba(249,200,150,0.92); letter-spacing: 0.3px; padding-right: 60px; }
    @keyframes devBannerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .dev-banner-pct-wrap { display: flex; align-items: center; gap: 8px; padding: 0 14px; flex-shrink: 0; border-left: 1px solid rgba(249,115,22,0.25); height: 100%; }
    .dev-banner-pct-bar { width: 80px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
    .dev-banner-pct-fill { height: 100%; background: linear-gradient(90deg, #f97316, #fbbf24); border-radius: 3px; transition: width 0.5s ease; }
    .dev-banner-pct-label { font-size: 10px; font-weight: 800; color: #f97316; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
    body:has(#dev-banner-bar) .screen,
    body:has(#dev-banner-bar) #app-shell,
    body:has(#dev-banner-bar) .support-panel { top: 38px !important; }
    body:has(#dev-banner-bar) .support-panel { height: calc(100% - 38px); }
    body:has(#dev-banner-bar) .scroll-bg { top: 38px; }

    .dev-tools-card { background: var(--card-2); border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; }
    .dev-tools-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 12px; }
    .dev-tools-card-body { padding: 16px 20px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
    .dev-tools-icon-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .dev-toggle-btn { position: relative; width: 46px; height: 26px; border-radius: 13px; border: none; cursor: pointer; padding: 0; background: var(--border-2); transition: background 0.2s; flex-shrink: 0; }
    .dev-toggle-btn.active { background: var(--royal); }
    .dev-toggle-track { position: absolute; inset: 0; border-radius: 13px; }
    .dev-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
    .dev-toggle-btn.active .dev-toggle-thumb { left: 23px; }
    .dev-banner-summary { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; background: rgba(249,115,22,0.03); }
    .dev-summary-row { display: flex; gap: 12px; align-items: baseline; font-size: 12px; }
    .dev-summary-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; min-width: 70px; flex-shrink: 0; }
    .dev-summary-val { color: var(--text-1); font-weight: 500; line-height: 1.4; }
    .dev-env-grid { padding: 0 20px 16px; display: flex; flex-direction: column; }
    .dev-env-row { display: flex; gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
    .dev-env-row:last-child { border-bottom: none; }
    .dev-env-key { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; min-width: 90px; flex-shrink: 0; }
    .dev-env-val { color: var(--text-1); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; }
    .dev-action-grid { padding: 4px 12px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .dev-action-btn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--card-solid); font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; text-align: left; }
    .dev-action-btn:hover { background: var(--royal-glass); border-color: rgba(0,51,204,0.3); transform: translateY(-1px); }
    .dev-action-btn:hover .dev-action-label { color: var(--royal-glow); }
    html.light .dev-action-btn:hover .dev-action-label { color: var(--royal); }
    .dev-action-btn svg { flex-shrink: 0; margin-top: 2px; color: var(--text-3); transition: color 0.15s; }
    .dev-action-btn:hover svg { color: var(--royal-glow); }
    html.light .dev-action-btn:hover svg { color: var(--royal); }
    .dev-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .dev-action-label { font-size: 12px; font-weight: 700; color: var(--text-1); transition: color 0.15s; }
    .dev-action-desc { font-size: 10.5px; color: var(--text-3); line-height: 1.4; font-weight: 400; }

    /* ══════════════════════════════════════════════════════════════ */
    /* MOBILE                                                          */
    /* ══════════════════════════════════════════════════════════════ */
    .mobile-menu-btn {
      display: none; width: 38px; height: 38px; border-radius: 9px;
      border: 1px solid var(--border-2); background: var(--card-2);
      align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-2);
      transition: background 0.16s, color 0.16s, border-color 0.16s;
    }
    .mobile-menu-btn:hover { border-color: var(--royal); color: var(--royal-glow); background: var(--royal-dim); }
    html.light .mobile-menu-btn:hover { color: var(--royal); }

    @media (max-width: 768px) {
      .side-nav { position: fixed; left: -260px; z-index: 100; width: 252px; height: 100%; transition: left 0.3s var(--ease-out); }
      .side-nav.mobile-open { left: 0; }
      .side-nav.collapsed { width: 252px; left: -260px; }
      .side-nav.collapsed.mobile-open { left: 0; }
      .side-nav.collapsed .side-nav-label { opacity: 1; width: auto; position: static; }
      .side-nav.collapsed .side-nav-item { justify-content: flex-start; padding: 0 12px; width: 100%; height: 40px; margin: 0; border-radius: 8px; }
      .side-nav.collapsed .side-nav-title { display: block; opacity: 1; max-width: none; }
      .side-nav.collapsed .side-nav-user-info { display: block; opacity: 1; width: auto; position: static; }
      .side-nav.collapsed .side-nav-user { width: auto; height: auto; min-height: 52px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); justify-content: flex-start; padding: 10px; }
      .side-nav.collapsed .side-nav-signout { display: flex; }
      .side-nav.collapsed .side-nav-badge { position: static; min-width: 18px; padding: 1px 6px; font-size: 10px; height: auto; }
      .side-nav.collapsed .side-nav-badge.show { display: inline-block; }
      .side-nav.collapsed .side-nav-section-label { opacity: 1; height: auto; padding: 14px 10px 6px; }
      .side-nav.collapsed .side-nav-item::after { display: none; }
      .side-nav.collapsed .side-nav-collapse-bottom { display: none !important; }
      .side-nav.collapsed .side-nav-header .header-collapse { display: flex !important; }
      .side-nav.collapsed #notif-bell { display: block !important; }
      .mobile-menu-btn { display: flex; }
      .mobile-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 99; display: none;
      }
      .mobile-overlay.show { display: block; animation: fadeIn 0.22s ease; }
      .cal-month-label { font-size: 15px; min-width: 160px; }
      .cal-grid .cal-day { height: 90px; }
      .cal-event-time, .cal-event-room { display: none; }
      .dashboard, .feed-wrap, .my-requests, .finder { padding: 20px 16px; }
      .dash-stats { grid-template-columns: repeat(2, 1fr); }
      .admin-dialog { flex-direction: column; max-height: 90vh; border-radius: 14px; }
      .admin-nav { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
      .admin-nav-items { flex-direction: row; overflow-x: auto; padding: 8px 10px; }
      .admin-nav-item { white-space: nowrap; flex-shrink: 0; }
      .admin-nav-item.active::before { display: none; }
      .bld-split { flex-direction: column; height: auto; }
      .bld-col + .bld-col { border-left: none; border-top: 1px solid var(--border); }
      .dev-action-grid { grid-template-columns: 1fr; }
    }

    /* ── Consistent admin list items ── */
    .admin-list-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      transition: background 0.14s;
    }
    .admin-list-item:last-child { border-bottom: none; }
    .admin-list-item[onclick]:hover { background: var(--royal-glass); }
    .admin-list-container {
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
      margin-bottom: 14px;
    }
    .admin-list-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 11px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--card-2);
    }
    .admin-list-header-title {
      font-size: 11px; font-weight: 800; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 0.7px;
      display: flex; align-items: center; gap: 6px;
    }
    .admin-page-header {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 8px;
    }
    .admin-page-header-left { display: flex; flex-direction: column; gap: 2px; }
    .admin-page-subtitle { font-size: 12px; color: var(--text-3); }

    /* ══════════════════════════════════════════════════════════════ */
    /* ══════════════════════════════════════════════════════════════ */
    /* REQUEST WIZARD                                                  */
    /* ══════════════════════════════════════════════════════════════ */

    /* ── Modal sizing ── */
    .modal.request-modal {
      max-width: 760px;
      max-height: 94vh;
      height: 94vh;
    }
    @media (max-width: 780px) {
      .modal.request-modal { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); height: calc(100vh - 24px); }
      .req-stepper { padding: 0 8px; height: 52px; }
      .req-step-label { display: none; }
      .req-step { padding: 4px; }
    }

    /* ── Stepper bar ── */
    .req-stepper {
      display: flex; align-items: center; justify-content: center;
      padding: 0 16px; height: 56px; flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, var(--card-2) 0%, var(--card-1) 100%);
      overflow-x: auto; scrollbar-width: none; gap: 0;
      position: relative;
    }
    .req-stepper::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
      pointer-events: none;
    }
    .req-stepper::-webkit-scrollbar { display: none; }
    .req-step {
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0; cursor: default;
      padding: 4px 8px; border-radius: 8px;
      transition: opacity 0.18s var(--ease-out), background 0.18s, transform 0.15s;
    }
    .req-step:not(.active):not(.done) { opacity: 0.38; }
    .req-step.done, .req-step.error, .req-step.warn { cursor: pointer; }
    .req-step.done:hover, .req-step.error:hover, .req-step.warn:hover {
      opacity: 1; background: rgba(0,51,204,0.05);
    }
    .req-step.active { padding: 4px 10px 4px 8px; }
    .req-step-num {
      width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 800;
      background: var(--input-bg); color: var(--text-3);
      border: 1.5px solid var(--border-2);
      transition: background 0.2s, color 0.2s, border-color 0.2s,
                  box-shadow 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    }
    .req-step.active .req-step-num {
      background: var(--royal); color: #fff; border-color: var(--royal);
      box-shadow: 0 0 0 3px rgba(0,51,204,0.18), 0 2px 6px rgba(0,51,204,0.3);
      transform: scale(1.12);
    }
    .req-step.done .req-step-num {
      background: var(--green); color: #fff; border-color: var(--green);
      box-shadow: 0 1px 4px rgba(34,197,94,0.35);
    }
    .req-step.error .req-step-num {
      background: var(--red); color: #fff; border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(239,68,68,0.18), 0 1px 4px rgba(239,68,68,0.3);
    }
    .req-step.warn .req-step-num {
      background: var(--gold-dk); color: #fff; border-color: var(--gold-dk);
      box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
    }
    .req-step-label {
      font-size: 11px; font-weight: 600; color: var(--text-2);
      white-space: nowrap; letter-spacing: 0.05px;
    }
    .req-step.active .req-step-label { color: var(--text-1); font-weight: 800; }
    .req-step.done .req-step-label { color: var(--green); }
    .req-step.error .req-step-label { color: var(--red); }
    .req-step.warn .req-step-label { color: var(--gold-dk); }
    .req-step-connector {
      flex: 1; min-width: 10px; max-width: 28px; height: 1.5px;
      background: var(--border-2); flex-shrink: 1; margin: 0 1px;
      border-radius: 1px; overflow: hidden; position: relative;
    }
    .req-step-connector::after {
      content: ''; position: absolute; inset: 0;
      background: var(--green); width: 0%;
      transition: width 0.3s var(--ease-out);
    }
    .req-step-connector.done::after { width: 100%; }
    .req-step-connector.error::after { background: var(--red); width: 100%; }

    /* ── Step body scroll area ── */
    .req-step-body { flex: 1; overflow-y: auto; padding: 20px 24px 8px; }
    .req-step-body::-webkit-scrollbar { width: 4px; }
    .req-step-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

    /* The request modal footer wraps req-wizard-footer; remove its padding to avoid double padding */
    .modal.request-modal .modal-footer {
      padding: 0;
      border-top: none;
      border-radius: 0 0 16px 16px;
      overflow: hidden;
    }
    /* ── Wizard footer ── */
    .req-wizard-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-top: 1px solid var(--border);
      background: linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
      flex-shrink: 0; gap: 8px;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
    }
    html.dark .req-wizard-footer { box-shadow: 0 -4px 12px rgba(0,0,0,0.18); }
    #req-wiz-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }

    /* ── Step status indicator row (inline feedback) ── */
    .req-step-status {
      display: flex; align-items: center; gap: 6px;
      font-size: 11.5px; font-weight: 600; padding: 7px 12px;
      border-radius: 8px; margin-bottom: 12px; flex-shrink: 0;
    }
    .req-step-status.ok { color: var(--green); background: var(--green-dim); }
    .req-step-status.err { color: var(--red); background: var(--red-dim); }
    .req-step-status.warn { color: var(--gold-dk); background: rgba(245,158,11,0.08); }
    .req-step-status.conflict { color: var(--red); background: var(--red-dim); }

    /* ── Section label ── */
    .req-section { margin-bottom: 18px; animation: reqSectionIn 0.22s var(--ease-out) both; }
    @keyframes reqSectionIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .req-section-label {
      font-size: 11px; font-weight: 800; color: var(--text-2);
      letter-spacing: 0.7px; text-transform: uppercase;
      margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
      padding-bottom: 10px; border-bottom: 1px solid var(--border);
    }
    .req-section-num {
      width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
      background: var(--royal-dim); color: var(--royal-glow);
      font-size: 9px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(0,51,204,0.28);
    }
    html.light .req-section-num { color: var(--royal); }

    /* ── Templates header button + panel ── */
    .req-tmpl-wrap {
      position: relative; display: inline-flex; align-items: center;
    }
    .req-tmpl-header-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 700;
      padding: 5px 12px; border-radius: 8px;
      border: 1px solid var(--border-2);
      background: var(--card-2); color: var(--text-2);
      cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
      white-space: nowrap; font-family: inherit; flex-shrink: 0; position: relative;
    }
    .req-tmpl-header-btn:hover { border-color: var(--royal); color: var(--royal); }
    .req-tmpl-header-btn.active { border-color: var(--royal); color: var(--royal); background: rgba(37,99,235,0.07); }
    .req-tmpl-header-btn.tmpl-mode-active {
      border-color: #7c3aed; color: #8b5cf6;
      background: rgba(124,58,237,0.09);
      animation: tmplPulse 2s ease-in-out infinite;
    }
    @keyframes tmplPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
      50%      { box-shadow: 0 0 0 3px rgba(124,58,237,0.18); }
    }
    .req-tmpl-header-btn svg:last-child { color: #7c3aed; }

    .req-tmpl-panel {
      position: absolute; top: calc(100% + 8px); right: 0;
      width: 300px; z-index: 500;
      background: var(--card-solid); border: 1px solid var(--border-2);
      border-radius: 12px; box-shadow: var(--shadow-lg);
      overflow: hidden;
      animation: tmplPanelIn 0.18s var(--ease-out) both;
    }
    @keyframes tmplPanelIn {
      from { opacity: 0; transform: translateY(-6px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0)  scale(1); }
    }
    .req-tmpl-panel-inner { display: flex; flex-direction: column; }
    .req-tmpl-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px 10px;
      border-bottom: 1px solid var(--border);
      font-size: 11px; font-weight: 800; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .req-tmpl-new-btn {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 700; font-family: inherit;
      padding: 4px 10px; border-radius: 6px;
      border: 1px solid rgba(124,58,237,0.4);
      background: rgba(124,58,237,0.08); color: #8b5cf6;
      cursor: pointer; transition: background 0.15s;
    }
    .req-tmpl-new-btn:hover { background: rgba(124,58,237,0.16); }

    .req-tmpl-list {
      max-height: 280px; overflow-y: auto; padding: 8px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .req-tmpl-list::-webkit-scrollbar { width: 4px; }
    .req-tmpl-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

    .req-tmpl-empty {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 24px 16px; color: var(--text-3); font-size: 12px; font-weight: 600;
      text-align: center;
    }
    .req-tmpl-card {
      border-radius: 8px; border: 1px solid var(--border);
      background: var(--card-2); padding: 9px 11px;
      transition: border-color 0.12s, background 0.12s;
    }
    .req-tmpl-card:hover { border-color: var(--border-2); background: var(--card-1); }
    .req-tmpl-card-top {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .req-tmpl-card-name {
      font-size: 12px; font-weight: 700; color: var(--text-1);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .req-tmpl-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .req-tmpl-action-btn {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 10.5px; font-weight: 700; font-family: inherit;
      padding: 3px 8px; border-radius: 5px; cursor: pointer;
      transition: background 0.12s, color 0.12s; white-space: nowrap;
    }
    .req-tmpl-load {
      border: 1px solid rgba(37,99,235,0.3);
      background: rgba(37,99,235,0.07); color: var(--royal);
    }
    .req-tmpl-load:hover { background: rgba(37,99,235,0.15); }
    .req-tmpl-delete {
      border: 1px solid rgba(239,68,68,0.2);
      background: transparent; color: var(--text-3);
    }
    .req-tmpl-delete:hover { background: rgba(239,68,68,0.08); color: var(--red); border-color: rgba(239,68,68,0.4); }
    .req-tmpl-chips {
      display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
    }
    .req-tmpl-chip {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 10px; font-weight: 600; color: var(--text-3);
      padding: 2px 6px; border-radius: 4px;
      background: var(--card-1); border: 1px solid var(--border);
    }

    /* ── Template mode banner (inside modal body) ── */
    .req-tmpl-mode-banner {
      display: flex; align-items: center; gap: 8px;
      margin: 0 0 14px 0; padding: 10px 14px;
      background: rgba(124,58,237,0.07);
      border: 1px solid rgba(124,58,237,0.25);
      border-radius: 10px; flex-shrink: 0;
      animation: reqDraftSlideIn 0.22s var(--ease-out) both;
    }
    .req-tmpl-mode-banner svg { color: #8b5cf6; flex-shrink: 0; }
    .req-tmpl-mode-label {
      font-size: 11px; font-weight: 800; color: #8b5cf6;
      text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
    }
    .req-tmpl-mode-name {
      font-size: 12px; font-weight: 700; color: var(--text-1);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 160px;
    }
    .req-tmpl-mode-hint {
      font-size: 11px; color: var(--text-3); flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .req-tmpl-mode-exit {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10.5px; font-weight: 700; font-family: inherit;
      padding: 3px 9px; border-radius: 5px; cursor: pointer;
      border: 1px solid rgba(124,58,237,0.3);
      background: rgba(124,58,237,0.07); color: #8b5cf6;
      transition: background 0.12s; flex-shrink: 0;
    }
    .req-tmpl-mode-exit:hover { background: rgba(124,58,237,0.16); }

    /* ── Request form: Save Draft button (in modal header) ── */
    .req-save-draft-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 700;
      padding: 5px 12px; border-radius: 8px;
      border: 1px solid var(--border-2);
      background: var(--card-2); color: var(--text-2);
      cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
      white-space: nowrap; font-family: inherit; flex-shrink: 0;
    }
    .req-save-draft-btn:hover {
      border-color: var(--royal); color: var(--royal);
    }
    .req-save-draft-btn.dirty {
      border-color: var(--royal); color: var(--royal);
      background: rgba(37,99,235,0.07);
    }
    .req-save-draft-btn.dirty:hover { background: rgba(37,99,235,0.13); }
    .req-save-draft-btn.saved {
      border-color: var(--green); color: var(--green);
      background: rgba(34,197,94,0.08);
    }

    /* ── Draft restore banner (inside modal body, card style) ── */
    .req-draft-banner {
      display: flex; align-items: center; gap: 10px;
      margin: 0 0 16px 0;
      padding: 10px 14px;
      background: rgba(245,158,11,0.07);
      border: 1px solid rgba(245,158,11,0.22);
      border-radius: 10px;
      font-size: 12px; color: var(--gold); flex-shrink: 0;
      animation: reqDraftSlideIn 0.25s var(--ease-out) both;
    }
    @keyframes reqDraftSlideIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .req-draft-banner button {
      margin-left: auto; font-size: 11px; font-weight: 700;
      background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
      color: var(--gold); border-radius: 6px; padding: 4px 12px;
      cursor: pointer; transition: background 0.15s; font-family: inherit; white-space: nowrap;
    }
    .req-draft-banner button:hover { background: rgba(245,158,11,0.27); }
    .req-draft-discard {
      background: transparent !important; border-color: transparent !important;
      color: var(--text-3) !important; font-size: 11px !important;
      padding: 4px 6px !important; margin-left: 2px !important;
    }


    /* ── Weekly Ops Report ── */
    .ops-week-tabs {
      display: flex; gap: 6px; justify-content: center;
      margin-bottom: 20px; flex-wrap: wrap;
    }
    .ops-week-tab {
      padding: 6px 16px; border-radius: 8px; font-family: inherit;
      font-size: 11px; font-weight: 700; cursor: pointer;
      border: 1px solid var(--border); background: transparent; color: var(--text-3);
      transition: all 0.15s;
    }
    .ops-week-tab:hover { border-color: var(--gold-dk); color: var(--gold); }
    .ops-week-tab.active {
      border-color: var(--gold-dk); background: var(--gold-dim); color: var(--gold);
    }
    .ops-stats-bar {
      display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap;
    }
    .ops-stat-card {
      flex: 1; min-width: 72px; padding: 10px 14px; border-radius: 10px;
      text-align: center; border: 1px solid transparent;
    }
    .ops-stat-val  { font-size: 22px; font-weight: 800; line-height: 1.1; }
    .ops-stat-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--text-3); margin-top: 2px; }

    .ops-section-header {
      font-size: 11.5px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.6px; padding-bottom: 7px;
      border-bottom: 2px solid currentColor;
      margin: 24px 0 12px; display: flex; align-items: center; gap: 6px;
    }
    .ops-day-block { margin-bottom: 14px; }
    .ops-day-label {
      font-size: 12px; font-weight: 700; color: var(--text-1);
      margin-bottom: 5px; display: flex; align-items: center; gap: 7px;
    }
    .ops-day-today { color: var(--royal-glow); }
    .ops-today-badge {
      font-size: 8px; font-weight: 800; padding: 1px 6px; border-radius: 5px;
      background: var(--royal-dim); color: var(--royal-glow);
      text-transform: uppercase; letter-spacing: 0.4px;
    }
    .ops-glance-row {
      display: flex; gap: 8px; padding: 5px 0 5px 12px;
      border-left: 3px solid var(--border-2);
      font-size: 12px; align-items: center; flex-wrap: wrap;
    }
    .ops-glance-time { min-width: 100px; color: var(--text-2); flex-shrink: 0; }
    .ops-glance-title { font-weight: 700; flex: 1; min-width: 120px; color: var(--text-1); }
    .ops-glance-loc  { color: var(--text-3); font-size: 11px; }
    .ops-glance-att  { color: var(--text-3); font-size: 11px; white-space: nowrap; }
    .ops-no-events {
      padding: 3px 0 3px 14px; font-size: 12px;
      color: var(--text-3); font-style: italic;
    }
    .ops-ev-card {
      background: var(--card-2); border: 1px solid var(--border);
      border-radius: 9px; padding: 11px 14px; margin-bottom: 6px;
      border-left: 3px solid var(--border-2);
    }
    .ops-bldg-block { margin-bottom: 18px; }
    .ops-bldg-name {
      font-size: 12px; font-weight: 700; margin-bottom: 6px;
      display: flex; align-items: center; gap: 6px;
    }
    .ops-door-row {
      display: flex; gap: 10px; padding: 4px 0 4px 16px;
      font-size: 12px; align-items: baseline; flex-wrap: wrap;
    }
    .ops-door-day   { min-width: 78px; color: var(--text-3); flex-shrink: 0; }
    .ops-door-times { font-weight: 700; color: var(--green); min-width: 170px; flex-shrink: 0; }
    .ops-door-evs   { color: var(--text-2); }
    .ops-staffing-row {
      display: flex; gap: 12px; padding: 5px 0;
      font-size: 12px; align-items: center; flex-wrap: wrap;
      border-bottom: 1px solid var(--border);
    }
    .ops-staffing-row:last-child { border-bottom: none; }
    .ops-staffing-day   { min-width: 155px; font-weight: 600; color: var(--text-1); flex-shrink: 0; }
    .ops-staffing-count { color: var(--text-2); }
    .ops-staffing-load  { font-weight: 700; }
    .ops-staffing-ah    { color: var(--red); font-weight: 600; }
    .ops-staffing-att   { color: var(--text-3); }
    .ops-warning-row {
      display: flex; gap: 8px; padding: 8px 12px; border-radius: 8px;
      background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2);
      font-size: 12px; color: var(--text-2); align-items: flex-start;
      margin-bottom: 5px; line-height: 1.5;
    }
    .ops-empty-section {
      font-size: 12px; color: var(--text-3); font-style: italic;
      padding: 2px 0 8px;
    }
    .ops-footer {
      text-align: center; margin-top: 28px; padding-top: 14px;
      border-top: 1px solid var(--border);
      font-size: 10.5px; color: var(--text-3); letter-spacing: 0.2px;
    }

    /* ── Room availability indicator ── */
    .room-avail-indicator {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 12px; border-radius: 9px;
      font-size: 12px; font-weight: 600;
    }
    .room-avail-indicator.checking {
      background: var(--card-2); color: var(--text-2);
      border: 1px solid var(--border-2);
    }
    .room-avail-indicator.available {
      background: var(--green-dim); color: var(--green);
      border: 1px solid rgba(34,197,94,0.2);
    }
    .room-avail-indicator.conflict {
      background: var(--red-dim); color: var(--red);
      border: 1px solid rgba(239,68,68,0.2);
    }
    .room-avail-indicator.no-room {
      display: none;
    }


    /* ══════════════════════════════════════════════════════════════ */
    /* REQUEST REVIEW STEP                                            */
    /* ══════════════════════════════════════════════════════════════ */
    .req-review-ready {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 14px; border-radius: 10px; margin-bottom: 14px;
      background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(34,197,94,0.05));
      color: var(--green);
      font-size: 12.5px; font-weight: 700;
      border: 1px solid rgba(34,197,94,0.22);
    }
    .req-review-errors {
      padding: 13px 14px; border-radius: 10px; margin-bottom: 14px;
      background: linear-gradient(90deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));
      border: 1px solid rgba(239,68,68,0.22);
    }
    .req-review-errors-title {
      display: flex; align-items: center; gap: 8px;
      font-size: 12.5px; font-weight: 800; color: var(--red);
      margin-bottom: 8px;
    }
    .req-review-error-item {
      font-size: 12px; color: var(--red); padding-left: 22px;
      margin-bottom: 3px; opacity: 0.88;
      position: relative;
    }
    .req-review-error-item::before {
      content: '\2022'; position: absolute; left: 10px; top: 0;
      font-size: 14px; line-height: 1; opacity: 0.8;
    }
    .req-review-card {
      border: 1px solid var(--border-2); border-radius: 12px;
      overflow: hidden; margin-bottom: 10px;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
      background: var(--card-1);
    }
    .req-review-card:hover {
      border-color: rgba(0,51,204,0.22);
      box-shadow: 0 2px 12px rgba(0,51,204,0.05);
    }
    .req-review-card-header {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 16px;
      background: linear-gradient(180deg, var(--card-2) 0%, var(--card-1) 100%);
      border-bottom: 1px solid var(--border);
    }
    .req-review-card-icon {
      display: flex; align-items: center; color: var(--royal-glow);
      opacity: 0.85;
    }
    html.light .req-review-card-icon { color: var(--royal); }
    .req-review-card-title {
      font-size: 10.5px; font-weight: 800; color: var(--text-2);
      text-transform: uppercase; letter-spacing: 0.6px;
    }
    .req-review-card-body {
      padding: 4px 16px;
    }
    .req-review-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 9px 0; border-bottom: 1px solid var(--border);
    }
    .req-review-row:last-child { border-bottom: none; }
    .req-review-row:hover .req-review-value { color: var(--royal-glow); }
    html.light .req-review-row:hover .req-review-value { color: var(--royal); }
    .req-review-row-body { flex: 1; min-width: 0; }
    .req-review-label {
      font-size: 10px; font-weight: 700; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
    }
    .req-review-value {
      font-size: 13px; font-weight: 500; color: var(--text-1);
      line-height: 1.5; word-break: break-word;
    }

    /* ══════════════════════════════════════════════════════════════ */
    /* APPROVAL TRAIL                                                  */
    /* ══════════════════════════════════════════════════════════════ */
    .approval-trail {
      display: flex; flex-direction: column; gap: 0;
      margin: 12px 0;
      position: relative;
    }
    .trail-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 10px 0;
      position: relative;
    }
    .trail-item:not(:last-child)::after {
      content: '';
      position: absolute; left: 13px; top: 34px;
      width: 1.5px; bottom: 0;
      background: var(--border-2);
    }
    .trail-dot {
      width: 27px; height: 27px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      position: relative; z-index: 1;
    }
    .trail-dot.submitted { background: var(--royal-dim); color: var(--royal-glow); }
    .trail-dot.review    { background: var(--gold-dim); color: var(--gold-dk); }
    .trail-dot.approved  { background: rgba(34,197,94,0.12); color: var(--green); }
    .trail-dot.denied    { background: var(--red-dim); color: var(--red); }
    .trail-dot.cancelled { background: var(--input-bg); color: var(--text-3); }
    .trail-dot.pending   { background: var(--input-bg); color: var(--text-3); border: 1.5px dashed var(--border-2); }
    .trail-content { flex: 1; min-width: 0; }
    .trail-label { font-size: 12px; font-weight: 700; color: var(--text-1); }
    .trail-meta  { font-size: 11px; color: var(--text-3); margin-top: 2px; }

    /* ══════════════════════════════════════════════════════════════ */
    /* KANBAN BOARD                                                    */
    /* ══════════════════════════════════════════════════════════════ */
    .kanban-board {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding: 14px 20px;
      overflow-x: auto;
      flex: 1;
      align-items: start;
    }
    .kanban-col {
      display: flex; flex-direction: column;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      min-height: 120px;
    }
    .kanban-col-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--card-2);
      flex-shrink: 0;
    }
    .kanban-col-title {
      font-size: 11px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.5px; display: flex; align-items: center; gap: 7px;
    }
    .kanban-count {
      font-size: 11px; font-weight: 700;
      padding: 1px 8px; border-radius: 10px;
      background: var(--input-bg); color: var(--text-3);
    }
    .kanban-cards {
      padding: 8px; display: flex; flex-direction: column; gap: 6px;
      flex: 1;
    }
    .kanban-card {
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 10px; padding: 10px 12px;
      cursor: pointer;
      transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
      box-shadow: var(--shadow-sm);
      position: relative; overflow: hidden;
    }
    .kanban-card:hover {
      box-shadow: 0 6px 20px rgba(0,0,0,0.18);
      transform: translateY(-1px);
      border-color: rgba(0,51,204,0.28);
    }
    .kanban-card .kanban-card-actions { transition: opacity 0.15s; }
    .kanban-card-accent {
      position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
      border-radius: 3px 0 0 3px;
    }
    .kanban-card-title {
      font-size: 12px; font-weight: 700; color: var(--text-1);
      margin-bottom: 4px; padding-left: 10px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .kanban-card-meta {
      font-size: 10px; color: var(--text-3);
      padding-left: 10px; display: flex; flex-wrap: wrap; gap: 5px;
      align-items: center;
    }
    .kanban-card-actions {
      display: flex; gap: 5px; margin-top: 8px; padding-left: 10px;
    }
    .kanban-empty {
      padding: 24px 12px; text-align: center;
      font-size: 11px; color: var(--text-3);
    }
    /* View toggle buttons */
    .req-view-toggle {
      display: flex; gap: 2px;
      background: var(--input-bg);
      border-radius: 8px; padding: 3px;
    }
    .req-view-btn {
      padding: 5px 10px; border-radius: 6px; border: none;
      font-size: 11px; font-weight: 600; cursor: pointer;
      background: transparent; color: var(--text-3);
      font-family: inherit; transition: all 0.15s;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .req-view-btn.active {
      background: var(--card-solid); color: var(--text-1);
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

    /* ══════════════════════════════════════════════════════════════ */
    /* PAGINATION COMPONENT                                            */
    /* ══════════════════════════════════════════════════════════════ */
    .pgn-wrap {
      display: flex; align-items: center; justify-content: center;
      gap: 4px; flex-wrap: wrap;
    }
    .pgn-btn {
      min-width: 32px; height: 32px; padding: 0 8px;
      border-radius: 8px; border: 1px solid var(--border-2);
      background: var(--card-solid); color: var(--text-2);
      font-size: 12px; font-weight: 600; cursor: pointer;
      font-family: inherit;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.14s, border-color 0.14s, color 0.14s;
      box-shadow: var(--shadow-sm);
    }
    .pgn-btn:hover:not(:disabled) {
      background: var(--card-2); border-color: var(--royal);
      color: var(--royal-glow);
    }
    .pgn-btn.active {
      background: var(--royal); border-color: var(--royal);
      color: #fff; box-shadow: 0 2px 8px rgba(0,51,204,0.35);
    }
    .pgn-btn:disabled { opacity: 0.35; cursor: default; }
    .pgn-btn:focus { outline: none; }
    .pgn-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,51,204,0.35); }
    .pgn-arrow { padding: 0 10px; }
    .pgn-ellipsis {
      padding: 0 4px; color: var(--text-3); font-size: 13px;
      display: inline-flex; align-items: center;
    }
    .pgn-info {
      font-size: 11px; color: var(--text-3); margin-left: 6px;
      white-space: nowrap;
    }
    html.light .pgn-info { color: var(--text-3); }
    html.light .pgn-btn { background: #fff; color: var(--text-1); border-color: var(--border-2); }
    html.light .pgn-btn.active { background: var(--royal); color: #fff; border-color: var(--royal); }

    /* ══════════════════════════════════════════════════════════════ */
    /* REPORTS DASHBOARD                                              */
    /* ══════════════════════════════════════════════════════════════ */
    .rep-section-label {
      display: flex; align-items: center; gap: 7px;
      font-size: 10px; font-weight: 800; color: var(--text-3);
      text-transform: uppercase; letter-spacing: 1px;
      margin: 16px 0 10px;
    }
    .rep-section-label:first-child { margin-top: 0; }
    .rep-section-label svg { color: var(--text-3); flex-shrink: 0; }
    .rep-section-label::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
    }
    .rep-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 10px; margin-bottom: 4px;
    }
    .rep-card {
      background: var(--card-solid);
      border: 1px solid var(--border-2);
      border-radius: 14px; padding: 16px 18px;
      cursor: pointer;
      transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
      position: relative; overflow: hidden;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.055);
      display: flex; flex-direction: column; gap: 12px;
    }
    .rep-card::before {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 50%, transparent);
      pointer-events: none;
    }
    html.light .rep-card::before {
      background: linear-gradient(90deg, transparent, rgba(15,22,44,0.05) 50%, transparent);
    }
    .rep-card:hover {
      border-color: rgba(0,51,204,0.32);
      box-shadow: 0 8px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07);
      transform: translateY(-2px);
    }
    html.light .rep-card:hover {
      box-shadow: 0 8px 28px rgba(15,22,44,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .rep-card:active { transform: translateY(0); }
    .rep-card:focus { outline: none; }
    .rep-card:focus-visible { box-shadow: 0 0 0 3px rgba(0,51,204,0.35); }
    /* ── Calendar load error state ── */
    .cal-load-error {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; text-align: center;
      padding: 60px 24px; height: 100%;
      min-height: 300px;
    }
    .cal-load-error-icon {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(239,68,68,0.08); color: var(--red);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .cal-load-error-title {
      font-size: 16px; font-weight: 800; color: var(--text-1);
      margin-bottom: 6px; letter-spacing: -0.2px;
    }
    .cal-load-error-msg {
      font-size: 12px; color: var(--text-3); max-width: 280px;
      line-height: 1.5;
    }

    /* ══════════════════════════════════════════════════════════════ */
    /* PRINT                                                           */
    /* ══════════════════════════════════════════════════════════════ */
    .print-header { text-align: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border-2); }
    .print-title { font-size: 22px; font-weight: 800; color: var(--text-1); }
    .print-subtitle { font-size: 14px; color: var(--text-2); margin-top: 4px; }
    .print-footer { text-align: center; font-size: 10px; color: var(--text-3); margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--border); }
    .print-month-table { width: 100%; border-collapse: collapse; }
    .print-month-table th { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; border: 1px solid var(--border-2); background: var(--card-2); }
    .print-month-table td { padding: 4px 6px; border: 1px solid var(--border); vertical-align: top; min-height: 80px; height: 90px; width: 14.28%; }
    .print-month-table td.empty { background: var(--card-2); opacity: 0.3; }
    .print-day-num { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 3px; }
    .print-event { font-size: 9px; line-height: 1.35; padding: 2px 4px; margin-bottom: 2px; border-radius: 3px; background: rgba(0,51,204,0.08); border-left: 2px solid var(--royal); color: var(--text-1); }
    .print-event.maint { background: rgba(107,114,128,0.1); border-left-color: #6b7280; }
    .print-event-time { font-weight: 700; color: var(--royal); }
    .print-event-room { font-size: 8px; color: var(--text-3); }
    .print-more { font-size: 9px; color: var(--text-3); font-weight: 600; }
    .print-schedule-table { width: 100%; border-collapse: collapse; font-size: 10px; }
    .print-schedule-table th { padding: 6px 8px; text-align: center; font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; border: 1px solid var(--border-2); background: var(--card-2); }
    .print-schedule-table td { padding: 4px 6px; border: 1px solid var(--border); vertical-align: top; }
    .print-room-name { font-weight: 700; color: var(--text-1); white-space: nowrap; font-size: 11px; min-width: 100px; }
    .print-building-row td { font-size: 11px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; background: var(--card-2); padding: 6px 8px; }
    .print-cell-event { font-size: 9px; padding: 2px 4px; margin-bottom: 2px; border-radius: 3px; background: rgba(0,51,204,0.06); border-left: 2px solid var(--royal); }
    .print-cell-event.maint { background: rgba(107,114,128,0.08); border-left-color: #6b7280; font-style: italic; }
    .print-building-header { font-size: 14px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--gold-dim); }
    .print-room-card { margin-bottom: 16px; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; }
    .print-room-card-header { padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--text-1); background: var(--card-2); border-bottom: 1px solid var(--border); }
    .print-room-table { width: 100%; border-collapse: collapse; }
    .print-room-table th { padding: 6px 10px; text-align: left; font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; border-bottom: 1px solid var(--border-2); background: var(--card-2); }
    .print-room-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-1); }
    .print-room-table tr.maint td { background: rgba(107,114,128,0.06); font-style: italic; }

    @media print {
      /* Calendar print: show colors, hide +more */
      .cal-event { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .cal-more { display: none !important; }
      .cal-grid .cal-day { height: auto !important; min-height: 80px; overflow: visible; }
      .cal-day-events { overflow: visible !important; }

      *, *::before, *::after { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      body { background: #fff !important; color: #000 !important; font-size: 10pt; }
      .print-no-print, #app-shell, .modal-overlay, .scroll-bg, .vignette, .support-fab, .support-panel, #admin-overlay, .toast { display: none !important; }
      #print-overlay { position: static !important; background: #fff !important; padding: 0 !important; }
      #print-view-content { max-width: 100% !important; }
      .print-header { border-bottom-color: #333; }
      .print-title { color: #000; }
      .print-subtitle { color: #555; }
      .print-footer { color: #888; border-top-color: #ccc; }
      .print-month-table th { background: #f0f0f0 !important; color: #333 !important; border-color: #ccc !important; }
      .print-month-table td { border-color: #ddd !important; }
      .print-day-num { color: #000; }
      .print-event { background: #eef3ff !important; border-left-color: #0033cc !important; color: #000 !important; }
      .print-event.maint { background: #f0f0f0 !important; border-left-color: #888 !important; }
      .print-event-time { color: #0033cc !important; }
      .print-schedule-table th { background: #f0f0f0 !important; color: #333 !important; border-color: #ccc !important; }
      .print-schedule-table td { border-color: #ddd !important; }
      .print-building-row td { background: #f8f4e8 !important; color: #8b6914 !important; }
      .print-cell-event { background: #eef3ff !important; border-left-color: #0033cc !important; }
      .print-cell-event.maint { background: #f5f5f5 !important; border-left-color: #888 !important; }
      .print-building-header { color: #8b6914 !important; border-bottom-color: #d4b048 !important; }
      .print-room-card { border-color: #ddd !important; }
      .print-room-card-header { background: #f0f0f0 !important; color: #000 !important; border-bottom-color: #ddd !important; }
      .print-room-table th { background: #f8f8f8 !important; color: #555 !important; border-bottom-color: #ddd !important; }
      .print-room-table td { border-bottom-color: #eee !important; color: #000 !important; }
      .print-room-table tr.maint td { background: #f8f8f8 !important; }
      @page { margin: 0.5in; size: auto; }
    }

    /* Radius overrides */
    html[data-radius="pill"] .btn-sm,
    html[data-radius="pill"] .form-input,
    html[data-radius="pill"] .form-select,
    html[data-radius="pill"] .form-textarea { border-radius: 20px; }
    html[data-radius="pill"] .modal { border-radius: 22px; }
    html[data-radius="pill"] .my-req-card, html[data-radius="pill"] .feed-card { border-radius: 18px; }
    html[data-radius="pill"] .cal-event { border-radius: 10px; }
    html[data-radius="pill"] .dash-stat { border-radius: 18px; }
    html[data-radius="pill"] .toast { border-radius: 22px; }
    html[data-radius="pill"] .support-msg-bubble.sent { border-radius: 20px 20px 6px 20px; }
    html[data-radius="pill"] .support-msg-bubble.received { border-radius: 20px 20px 20px 6px; }
    html[data-radius="pill"] .support-input { border-radius: 22px; }
    html[data-radius="pill"] .support-cat-card { border-radius: 18px; }
    html[data-radius="pill"] .support-new-btn { border-radius: 22px; }

    html[data-radius="sharp"] .btn-sm,
    html[data-radius="sharp"] .form-input,
    html[data-radius="sharp"] .form-select { border-radius: 4px; }
    html[data-radius="sharp"] .modal { border-radius: 6px; }
    html[data-radius="sharp"] .my-req-card,
    html[data-radius="sharp"] .feed-card { border-radius: 4px; }
    html[data-radius="sharp"] .cal-event { border-radius: 3px; }
    html[data-radius="sharp"] .toast { border-radius: 4px; }
    html[data-radius="sharp"] .support-msg-bubble { border-radius: 6px; }
    html[data-radius="sharp"] .dash-stat { border-radius: 4px; }

    .pagination-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 20px; border-top: 1px solid var(--border); gap: 8px;
    }
    .pagination-info { font-size: 12px; color: var(--text-3); flex: 1; text-align: center; }