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

    :root {
      color-scheme: only dark;
      --primary: #d6e70f;
      --primary-dim: #b0be0c;
      --primary-soft: rgba(214, 231, 15, 0.12);
      --bg-dark: #0d0d0d;
      --bg-card: #161618;
      --bg-card-hover: #1D1D20;
      --bg-input: #242428;
      --border: #2E2E33;
      --border-subtle: #1a1a1d;
      --text-primary: #F1F3F5;
      --text-secondary: #ADB5BD;
      --text-muted: #495057;
      --text-dim: #7a7a82;
      --red: #FF6B6B;
      --teal: #20C997;
      --gold: #FFD43B;
      --radius: 8px;
      --radius-sm: 6px;
      --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    }

    body {
      font-family: var(--font-sans);
      background: var(--bg-dark);
      color: var(--text-primary);
      min-height: 100vh;
    }

    /* ===== Navy theme variant — shared with attacks dashboard ===== */
    /* Toggle lives in the attacks dashboard's Settings panel; this page reads */
    /* the same localStorage["dashboard_theme"] value and applies the class.   */
    body.theme-navy {
      --bg-dark:        #08111f;
      --bg-card:        #0c1828;
      --bg-card-hover:  #122036;
      --bg-input:       #182846;
      --border:         #1e2e4e;
      --blue:           #5dc4fb;
    }
    /* Comp row expand-panel surfaces: in navy the lighter bg-input as the
       surround overpowers the form sections. Swap surfaces so the surround
       sinks to bg-card (merging into the row) and the lifted elements use
       bg-card-hover for a subtle pop instead of the bright bg-input. Text
       inputs sink to bg-card for contrast inside the lifted form sections.
       Dark mode keeps the original hierarchy. */
    body.theme-navy .comp-expand                    { background: var(--bg-card); }
    body.theme-navy .comp-expand .placeholder-note  { background: var(--bg-card-hover); }
    body.theme-navy .btn-refetch,
    body.theme-navy .btn-delete                     { background: var(--bg-card-hover); }
    body.theme-navy .form-section                   { background: var(--bg-card-hover); }
    body.theme-navy .form-input,
    body.theme-navy .form-select                    { background: var(--bg-card); }
    /* Crown card hero in navy: aurora gradient — bright blue accent fading
       through the original violet to transparent. Pops against navy chrome
       and signals the card's "hero" status while staying on-palette. */
    body.theme-navy .crown-card {
      background: linear-gradient(120deg, rgba(93, 196, 251, 0.10) 0%, rgba(168, 85, 247, 0.04) 55%, transparent 100%);
    }

    /* ===== HEADER ===== */
    .header {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-dark);
      position: sticky; top: 0; z-index: 50;
    }
    /* Denied block — shown when user lacks scope_competitions / super_admin.
       Mirrors the command-centre pattern so the UX is consistent. */
    .denied-block { padding: 32px 16px; max-width: 480px; margin: 32px auto; text-align: center; color: var(--text-secondary); }
    .denied-block h2 { color: var(--text-primary); font-size: 18px; margin: 0 0 10px; font-weight: 600; }
    .denied-block p { font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
    .header-logo {
      width: 26px; height: 26px;
      object-fit: contain; cursor: pointer;
    }
    /* Burger menu trigger — sits to the LEFT of the WMD logo. */
    .burger {
      background: transparent; border: none;
      color: var(--text-secondary); cursor: pointer;
      padding: 4px 6px; margin-right: -2px;
      display: inline-flex; align-items: center;
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
    }
    .burger:hover { color: var(--primary); background: var(--bg-input); }
    .burger svg { display: block; }
    .header-eyebrow {
      font-size: 11px; letter-spacing: 0.18em; color: var(--text-secondary);
      text-transform: uppercase; font-weight: 500; line-height: 21.75px;
    }
    .header-title {
      font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
      color: var(--text-primary); text-decoration: none; line-height: 21.75px;
      transition: opacity 0.15s;
    }
    .header-title:hover { opacity: 0.8; }

    /* ===== SIDE MENU (drawer) ===== */
    .side-menu-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
      z-index: 199;
    }
    .side-menu-backdrop.open { opacity: 1; pointer-events: auto; }
    .side-menu {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: 320px; max-width: 88vw;
      background: var(--bg-card);
      border-right: 1px solid var(--border);
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      z-index: 200;
      display: flex; flex-direction: column;
      box-shadow: 4px 0 24px rgba(0,0,0,0.45);
    }
    .side-menu.open { transform: translateX(0); }
    .side-menu-header {
      display: flex; align-items: center; gap: 12px;
      padding: 18px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-dark);
    }
    .side-menu-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    .side-menu-logo  { width: 36px; height: 36px; object-fit: contain; }
    .side-menu-eyebrow {
      font-size: 10px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--text-secondary);
      font-weight: 500;
    }
    .side-menu-user {
      font-size: 14px; font-weight: 600; color: var(--text-primary);
      margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .side-menu-close {
      background: transparent; border: none;
      color: var(--text-dim); cursor: pointer;
      font-size: 24px; line-height: 1;
      padding: 4px 8px; border-radius: 4px;
      transition: color 0.15s, background 0.15s;
    }
    .side-menu-close:hover { color: var(--text-primary); background: var(--bg-input); }
    .side-menu-section-label {
      font-size: 10px; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--text-dim);
      font-weight: 600;
      padding: 14px 14px 6px;
    }
    .side-menu-items { flex: 1; overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: none; -ms-overflow-style: none; }
    .side-menu-items::-webkit-scrollbar { display: none; }
    .side-menu-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 10px;
      text-decoration: none; color: var(--text-secondary);
      border-radius: 8px;
      transition: background 0.1s, color 0.1s;
    }
    .side-menu-item + .side-menu-item { margin-top: 2px; }
    .side-menu-item:hover { background: var(--bg-input); color: var(--text-primary); }
    .side-menu-item.current {
      background: var(--primary-soft);
      color: var(--primary);
      cursor: default;
    }
    .side-menu-item.current:hover { background: var(--primary-soft); }
    .side-menu-item-icon {
      width: 36px; height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: var(--bg-input);
      flex-shrink: 0;
      color: var(--text-secondary);
      transition: background 0.1s, color 0.1s;
    }
    .side-menu-item:hover .side-menu-item-icon {
      background: rgba(255,255,255,0.05);
      color: var(--text-primary);
    }
    .side-menu-item.current .side-menu-item-icon {
      background: var(--primary);
      color: var(--bg-dark);
    }
    .side-menu-item-text { flex: 1; min-width: 0; }
    .side-menu-item-title { font-size: 14px; font-weight: 600; line-height: 1.2; }
    .side-menu-item-desc  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
    .side-menu-item.current .side-menu-item-desc { color: var(--primary-dim); }
    .side-menu-footer {
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      display: flex; gap: 8px;
    }
    .side-menu-footer .side-menu-foot-btn {
      flex: 1;
      background: transparent; border: 1px solid var(--border);
      color: var(--text-secondary);
      padding: 8px 10px; border-radius: 6px;
      font-size: 12px; font-family: inherit;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .side-menu-footer .side-menu-foot-btn:hover {
      color: var(--text-primary);
      border-color: var(--text-dim);
      background: var(--bg-input);
    }
    .side-menu-footer .side-menu-foot-btn.danger { color: var(--red); border-color: var(--red); }
    .side-menu-footer .side-menu-foot-btn.danger:hover { background: rgba(255,107,107,0.08); }
    @media (max-width: 640px) { .side-menu { width: 88vw; } }
    @media (max-width: 768px) { .header-eyebrow { display: none; } }

    .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
    .user-name { font-size: 13px; color: var(--text-secondary); }
    .logout-btn {
      padding: 4px 10px; font-size: 11px;
      background: transparent; border: 1px solid var(--primary);
      color: var(--primary); border-radius: 4px;
      cursor: pointer; text-transform: uppercase;
      letter-spacing: 0.5px; font-weight: 700;
      font-family: inherit; transition: all 0.2s;
    }
    .logout-btn:hover { background: var(--primary); color: #0b0b0c; }
    .auth-user-info { display: flex; align-items: center; gap: 12px; }

    /* ===== MAIN NAV ===== */
    .nav-wrap {
      display: flex; align-items: stretch;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-dark);
    }
    .nav {
      display: flex; gap: 0; padding: 0 16px;
      background: var(--bg-dark);
      overflow-x: auto; scrollbar-width: none;
      flex: 1; min-width: 0;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav-tab {
      padding: 10px 16px; cursor: pointer; color: var(--text-dim);
      font-size: 13px;
      border-bottom: 2px solid transparent; transition: all 0.15s;
      white-space: nowrap; user-select: none;
      text-decoration: none; /* anchors would otherwise get the default underline */
    }
    .nav-tab:hover { color: var(--text-primary); }
    .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

    /* ===== SUB-NAV (pill style, lives in the controls bar) ===== */
    .sub-nav-wrap {
      padding: 12px 24px; display: flex; align-items: center; gap: 12px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-dark);
    }
    .sub-nav {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 3px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .sub-nav-tab {
      padding: 5px 12px; cursor: pointer; color: var(--text-dim);
      font-size: 12px; font-weight: 500; background: transparent;
      border: none; border-radius: var(--radius-sm);
      white-space: nowrap; font-family: inherit;
      user-select: none; transition: all 0.15s;
    }
    .sub-nav-tab:hover { color: var(--text-primary); background: var(--bg-input); }
    .sub-nav-tab.active { color: var(--primary); background: var(--primary-soft); }

    /* ===== ACTIVITY SETUP ===== */
    .as-desc {
      font-size: 12px; color: var(--text-secondary);
      margin: 6px 0 18px; line-height: 1.55;
    }
    .as-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 16px 18px;
      margin-bottom: 14px;
    }
    .as-card-title {
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 600; margin-bottom: 4px;
    }
    .as-card-desc {
      font-size: 12px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5;
    }
    .as-radio-row { display: flex; gap: 18px; margin-bottom: 12px; }
    .as-radio-row label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; color: var(--text-primary); cursor: pointer;
    }
    .as-input, .as-select {
      width: 100%; max-width: 520px;
      background: var(--bg-input); border: 1px solid var(--border);
      color: var(--text-primary); padding: 8px 10px; border-radius: 4px;
      font-family: inherit; font-size: 13px;
    }
    .as-img-preview {
      margin-top: 10px; max-width: 520px;
      border: 1px solid var(--border); border-radius: 4px;
      background: var(--bg-input);
      aspect-ratio: 8 / 1; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    /* Image dim overlay — alpha driven by --as-img-dim (0..1) set by JS
       when the slider moves. Pointer-events:none so cursor stays on inputs. */
    .as-img-preview::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: rgba(0, 0, 0, var(--as-img-dim, 0));
    }
    .as-img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Title overlay preview — mirrors .ac-header-overlay-text on /dashboard/activity/
       but at preview scale. Only injected when header_type === 'image_with_title'. */
    .as-img-preview-title {
      position: absolute; inset: 0; z-index: 1;
      display: flex; align-items: center; justify-content: center;
      padding: 0 14px; text-align: center;
      font-size: clamp(14px, 3vw, 22px); font-weight: 700;
      color: #fff; letter-spacing: -0.01em;
      text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 4px rgba(0,0,0,0.6);
      pointer-events: none;
    }
    .as-img-preview .hint {
      font-size: 11px; color: var(--text-dim); padding: 0 14px; text-align: center;
    }
    .as-field { margin-bottom: 10px; }
    .as-field-label {
      font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 600; margin-bottom: 5px;
    }
    .as-actions {
      display: flex; gap: 10px; align-items: center;
      flex-wrap: wrap; margin-top: 14px; margin-bottom: 14px;
      padding: 14px 16px; border-radius: var(--radius);
      background: var(--bg-card); border: 1px solid var(--border);
      position: sticky; bottom: 12px; z-index: 5;
    }
    .btn {
      background: var(--primary); color: #0d0d0d;
      border: none; padding: 8px 16px; border-radius: 4px;
      font-size: 13px; font-weight: 700; cursor: pointer;
      text-transform: uppercase; letter-spacing: 0.5px;
      transition: all 0.2s; font-family: inherit;
    }
    .btn:hover    { background: var(--primary-dim); }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-outline {
      background: transparent; border: 1px solid var(--primary);
      color: var(--primary);
    }
    .btn-outline:hover { background: var(--primary-soft); }
    .as-actions .btn {
      display: inline-flex; align-items: center;
      text-decoration: none; line-height: 1; white-space: nowrap;
    }
    .as-status {
      font-size: 13px; flex: 1; min-width: 200px;
      padding: 6px 10px; border-radius: 4px;
      color: var(--text-secondary);
      transition: background 0.15s, color 0.15s;
    }
    .as-status.error   { background: rgba(255,107,107,0.12); color: #ff6b6b; font-weight: 500; }
    .as-status.success { background: rgba(74,222,128,0.12); color: #4ade80; font-weight: 500; }
    .as-status.busy    { color: var(--text-secondary); font-style: italic; }

    /* Dashboard banner inputs — emoji + color side-by-side row */
    .as-banner-row {
      display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
    }
    .as-field-emoji { width: 130px; }
    .as-field-color { width: 90px; }
    .as-input-narrow { max-width: 130px; }
    .as-input-color {
      padding: 4px 6px; height: 36px; width: 80px; cursor: pointer;
    }

    /* Shared banner card — preview here + live on /dashboard/ */
    .ac-banner-link {
      display: flex; align-items: center; gap: 14px;
      padding: 13px 16px; border-radius: 8px;
      background: color-mix(in srgb, var(--banner-color, var(--primary)) 12%, transparent);
      border: 1px solid var(--banner-color, var(--primary));
      color: var(--text-primary); text-decoration: none;
      transition: background 0.12s;
      max-width: 520px;
    }
    .ac-banner-link:hover {
      background: color-mix(in srgb, var(--banner-color, var(--primary)) 20%, transparent);
    }
    .ac-banner-emoji {
      font-size: 24px; line-height: 1;
      width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg-card); border-radius: 50%;
      flex-shrink: 0;
    }
    .ac-banner-emoji:empty { display: none; }
    .ac-banner-text { flex: 1; min-width: 0; }
    .ac-banner-title {
      font-size: 14px; font-weight: 600; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ac-banner-subtitle {
      font-size: 12px; color: var(--text-secondary); margin-top: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ac-banner-view {
      font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
      font-family: var(--font-mono);
      color: var(--banner-color, var(--primary));
      flex-shrink: 0;
    }

    /* Publish-state pill in the action bar */
    .as-pub-state {
      font-size: 10px; padding: 4px 10px; border-radius: 10px;
      letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700;
      font-family: var(--font-mono);
      background: var(--bg-input); color: var(--text-secondary);
    }
    .as-pub-state.live { background: rgba(74,222,128,0.16); color: #4ade80; }

    /* Reveal state row */
    .as-reveal-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .as-reveal-state {
      font-size: 10px; padding: 4px 10px; border-radius: 10px;
      letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700;
      font-family: var(--font-mono);
      background: var(--bg-input); color: var(--text-secondary);
    }
    .as-reveal-state.revealed { background: rgba(252,211,77,0.18); color: #fcd34d; }

    .as-clear-btn {
      margin-left: auto;
      background: transparent; border: 1px solid var(--border);
      color: var(--text-dim); padding: 8px 12px; border-radius: 4px;
      font-size: 11px; font-weight: 600; cursor: pointer;
      text-transform: uppercase; letter-spacing: 0.06em;
      font-family: inherit; transition: all 0.15s;
    }
    .as-clear-btn:hover {
      color: #ff6b6b; border-color: rgba(255,107,107,0.5);
      background: rgba(255,107,107,0.06);
    }
    .as-clear-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Mobile layout — explicit grid-template-areas so each row is locked,
       no shrinking everything into one line:
         Row 1: Draft pill (auto) | Save | Publish
         Row 2: Clear all (left, wider) | Preview ↗ (right)
         Row 3: Status (full width, only when populated) */
    @media (max-width: 768px) {
      .as-actions {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        grid-template-areas:
          "pill save  publish"
          ".    clear preview"
          "status status status";
        gap: 8px;
        align-items: center;
      }
      .as-actions .as-pub-state { grid-area: pill; justify-self: start; }
      .as-actions #asSaveBtn    { grid-area: save;    width: 100%; }
      .as-actions #asPublishBtn { grid-area: publish; width: 100%; }
      .as-actions .as-clear-btn { grid-area: clear;   width: 100%; margin-left: 0; }
      .as-actions a             { grid-area: preview; width: 100%; }
      .as-actions .as-status    { grid-area: status;  min-width: 0; flex: none; }
    }

    /* Archive form + list */
    .as-archive-form {
      display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
    }
    .as-archive-form input { flex: 1; min-width: 220px; }
    .as-archive-empty {
      padding: 14px; font-size: 12px; color: var(--text-dim); text-align: center;
      background: var(--bg-input); border-radius: 6px;
    }
    .as-archive-row {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 6px; padding: 12px 14px; margin-bottom: 8px;
    }
    .as-archive-row-head {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .as-archive-label {
      font-weight: 600; color: var(--text-primary); flex: 1; min-width: 160px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .as-archive-date {
      font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
    }
    .as-archive-actions {
      display: flex; gap: 6px;
    }
    .as-archive-actions button {
      background: transparent; border: 1px solid var(--border);
      color: var(--text-dim); padding: 4px 10px; border-radius: 4px;
      font-size: 11px; font-weight: 600; cursor: pointer;
      text-transform: uppercase; letter-spacing: 0.06em;
      font-family: inherit; transition: all 0.15s;
    }
    .as-archive-actions button:hover { color: var(--text-primary); border-color: var(--text-dim); }
    .as-archive-actions button.del:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.5); }
    .as-archive-preview {
      display: none; margin-top: 12px; padding-top: 12px;
      border-top: 1px dashed var(--border);
    }
    .as-archive-preview.open { display: block; }
    .as-archive-preview-section {
      font-size: 12px; color: var(--text-secondary);
      margin-bottom: 10px;
    }
    .as-archive-preview-section b { color: var(--text-primary); }
    .as-archive-preview-section .lbl {
      font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 4px;
    }
    .as-archive-intro-render { font-size: 13px; line-height: 1.5; }
    .as-archive-intro-render p { margin: 0 0 6px; }
    .as-archive-intro-render h1 { font-size: 18px; margin: 6px 0 4px; }
    .as-archive-intro-render h2 { font-size: 16px; margin: 6px 0 4px; }
    .as-archive-intro-render h3 { font-size: 14px; margin: 4px 0 4px; }

    /* Confirm modal */
    .as-modal-backdrop {
      display: none; position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.55);
      align-items: center; justify-content: center;
      padding: 20px;
    }
    .as-modal-backdrop.open { display: flex; }
    .as-modal {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 8px; padding: 22px 22px 18px;
      width: 100%; max-width: 460px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .as-modal-title {
      font-size: 16px; font-weight: 700; color: var(--text-primary);
      margin-bottom: 8px;
    }
    .as-modal-body {
      font-size: 13px; color: var(--text-secondary);
      line-height: 1.55; margin-bottom: 18px;
    }
    .as-modal-body b { color: var(--text-primary); }
    .as-modal-actions {
      display: flex; gap: 10px; justify-content: flex-end;
      flex-wrap: wrap;
    }
    .as-modal-actions .btn { display: inline-flex; align-items: center; }
    .as-modal-confirm-danger {
      background: #ff6b6b; color: #1a0a0a;
    }
    .as-modal-confirm-danger:hover { background: #ff8585; }

    /* Quill overrides to fit the dashboard look */
    #asIntroEditor { background: var(--bg-input); }
    .ql-toolbar.ql-snow,
    .ql-container.ql-snow {
      border-color: var(--border) !important;
      background: var(--bg-input);
    }
    .ql-toolbar.ql-snow { border-radius: 4px 4px 0 0; }
    .ql-container.ql-snow {
      border-radius: 0 0 4px 4px;
      color: var(--text-primary);
      font-family: inherit;
      min-height: 140px;
    }
    .ql-editor { min-height: 140px; }
    .ql-snow .ql-stroke { stroke: var(--text-secondary); }
    .ql-snow .ql-fill { fill: var(--text-secondary); }
    .ql-snow .ql-picker { color: var(--text-secondary); }
    .ql-snow.ql-toolbar button:hover .ql-stroke,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--primary); }
    .ql-snow.ql-toolbar button:hover .ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--primary); }
    .ql-editor.ql-blank::before { color: var(--text-dim); font-style: normal; }

    /* ===== CONTENT ===== */
    .content { padding: 22px 24px; max-width: 100%; margin: 0 auto; }
    .panel { display: none; }
    .panel.active { display: block; }
    .sub-section { display: none; }
    .sub-section.active { display: block; }
    .section-header {
      font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-secondary);
      margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
    }
    .section-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* Empty-state placeholder */
    .empty-placeholder {
      padding: 60px 24px; text-align: center;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .empty-placeholder .title {
      font-size: 16px; color: var(--text-secondary); margin-bottom: 8px;
    }
    .empty-placeholder .subtitle {
      font-size: 12px; color: var(--text-muted);
    }

    /* KPI scorecards — same pattern as attacks dashboard */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .kpi {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .kpi-label {
      font-size: 10px; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--text-secondary);
      font-weight: 500;
    }
    .kpi-value {
      font-family: var(--font-sans);
      font-size: 24px; font-weight: 600;
      letter-spacing: -0.02em;
      margin-top: 6px;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    /* Dropdown filter row above each sub-section list.
       Width is half the container minus half the kpi-row gap (12px / 2 = 6px),
       so the right edge lines up cleanly with the right edge of the 2nd KPI
       scorecard below. Gap + margin-bottom match the kpi-row's 12px. */
    .comp-filters-row {
      display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
      width: calc(50% - 6px);
    }
    .comp-filter-select {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; padding: 7px 10px; color: var(--text-primary);
      font-size: 13px; font-family: inherit; cursor: pointer;
      min-width: 0;
      flex: 1; /* stretch to share row width on desktop */
    }
    .comp-filter-select:focus { outline: none; border-color: var(--primary); }
    @media (max-width: 768px) {
      .comp-filters-row { width: 100%; gap: 6px; }
      /* 4 per row on mobile — shrink font + padding so labels like
         "Last 6 Months" / "Has Event Tag" still fit without truncating. */
      .comp-filter-select { font-size: 11px; padding: 6px 6px; }
    }

    /* Filter chips below the dropdown row */
    .filter-chips {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
    }
    .filter-chip {
      padding: 6px 12px; font-size: 12px;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 14px; color: var(--text-secondary);
      cursor: pointer; user-select: none;
      transition: border-color 0.12s, background 0.12s, color 0.12s;
    }
    .filter-chip:hover { border-color: var(--primary-dim); }
    .filter-chip.active {
      background: var(--primary-soft); border-color: var(--primary);
      color: var(--text-primary);
    }
    .filter-chip-event { display: inline-flex; align-items: center; gap: 6px; }
    .filter-chip-event .event-dot {
      display: inline-block; width: 8px; height: 8px;
      border-radius: 50%; flex-shrink: 0;
    }
    /* Event tag pill on each comp row */
    .event-pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; padding: 2px 8px;
      border-radius: 10px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      margin-left: 8px; vertical-align: middle;
    }
    .event-pill .event-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    }

    /* Competition rows */
    .comp-list { display: flex; flex-direction: column; gap: 8px; }
    .comp-row {
      display: flex; flex-direction: column;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .comp-row.is-super-admin-host {
      border-left: 3px solid #a855f7; /* violet — super admin host */
    }
    .comp-row.is-comp-admin-host {
      /* Locked yellow (matches default WMD primary). Not tied to --primary
         because the user can cycle themes and we want this marker stable. */
      border-left: 3px solid #d6e70f;
    }
    .comp-card {
      padding: 14px 16px;
      display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
      align-items: center;
      cursor: pointer;
      transition: background 0.12s;
    }
    .comp-card:hover { background: rgba(255,255,255,0.02); }
    .comp-card .comp-title {
      font-weight: 600; color: var(--text-primary); font-size: 14px;
    }
    .comp-card .comp-meta {
      font-size: 12px; color: var(--text-secondary); margin-top: 3px;
    }
    .comp-card .comp-meta .member-name {
      color: var(--primary);
    }
    .comp-card .comp-prize {
      font-size: 12px; color: var(--text-secondary); margin-top: 3px;
    }
    .comp-card .comp-prize-label { margin-right: 4px; }
    .comp-prize-toggle {
      display: none; /* shown only on mobile when text might be long */
      color: var(--primary); cursor: pointer; font-size: 11px;
      flex-shrink: 0; user-select: none;
    }
    .comp-card .comp-stats {
      font-size: 12px; color: var(--text-muted); margin-top: 6px;
      display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    }
    .discord-link {
      display: inline-flex; align-items: center;
      color: var(--text-muted); padding: 2px;
      border-radius: 3px; line-height: 0;
      text-decoration: none;
    }
    .discord-link:hover { color: var(--primary); background: var(--bg-input); }
    .discord-link svg { width: 14px; height: 14px; }
    .comp-card .comp-chevron {
      color: var(--text-muted); font-size: 16px;
      transition: transform 0.18s;
    }
    .comp-row.expanded .comp-chevron { transform: rotate(180deg); }
    .status-pill {
      font-size: 10px; font-weight: 700; padding: 3px 9px;
      border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .status-pill.active    { background: rgba(168,85,247,0.15); color: #c084fc; }
    .status-pill.ended     { background: rgba(239,68,68,0.15);  color: #f87171; }
    .status-pill.finalized { background: rgba(20,184,166,0.18); color: #2dd4bf; }

    /* Expand panel under the comp card */
    .comp-expand {
      padding: 14px 16px; border-top: 1px solid var(--border);
      background: var(--bg-input);
    }
    .comp-expand .expand-section {
      margin-bottom: 14px;
    }
    .comp-expand .expand-section:last-child { margin-bottom: 0; }
    .comp-expand .expand-label {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--text-muted); margin-bottom: 6px;
    }
    .comp-expand .placeholder-note {
      font-size: 12px; color: var(--text-muted); font-style: italic;
      padding: 10px 12px; background: var(--bg-card); border-radius: 4px;
      border: 1px dashed var(--border);
    }
    .btn-refetch, .btn-delete {
      padding: 8px 12px; font-size: 12px;
      background: var(--bg-card); color: var(--text-secondary);
      border: 1px solid var(--border); border-radius: 4px;
      cursor: pointer; font-family: inherit;
    }
    .btn-refetch:hover { border-color: var(--primary); color: var(--text-primary); }
    .btn-delete { color: var(--red); }
    .btn-delete:hover { border-color: var(--red); background: rgba(239,68,68,0.07); }
    .btn-refetch:disabled, .btn-delete:disabled { opacity: 0.55; cursor: not-allowed; }
    .comp-expand .expand-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    /* Finalize form inside expand panel */
    .finalize-form { display: flex; flex-direction: column; gap: 12px; }
    .finalize-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .form-section {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 6px; padding: 12px 14px;
    }
    .form-label {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--text-muted); margin-bottom: 8px;
    }
    .form-toggle { display: flex; gap: 14px; }
    .form-toggle label {
      font-size: 13px; cursor: pointer; color: var(--text-secondary);
      user-select: none;
    }
    .form-toggle input[type="radio"] { margin-right: 5px; vertical-align: middle; }
    .form-input, .form-select {
      width: 100%;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; padding: 7px 9px; color: var(--text-primary);
      font-size: 13px; font-family: inherit;
      box-sizing: border-box;
    }
    .form-input:focus, .form-select:focus { outline: none; border-color: var(--primary); }
    .form-row {
      display: flex; gap: 8px; align-items: center;
      margin-bottom: 6px;
    }
    .form-row .form-qty { flex: 0 0 90px; }
    .form-row .form-input, .form-row .form-select { flex: 1; }
    .btn-row-remove {
      background: transparent; border: 1px solid var(--border);
      border-radius: 3px; cursor: pointer;
      color: var(--text-muted); padding: 3px 9px; font-size: 14px;
      line-height: 1; flex: 0 0 auto;
    }
    .btn-row-remove:hover { color: var(--red); border-color: var(--red); }
    .btn-add-row {
      background: transparent; border: 1px dashed var(--border);
      border-radius: 4px; padding: 6px 12px; color: var(--text-secondary);
      cursor: pointer; font-size: 12px; margin-top: 4px;
      font-family: inherit;
    }
    .btn-add-row:hover { border-color: var(--primary); color: var(--text-primary); }
    .form-member-wrap { margin-top: 8px; }
    .form-member-wrap.hidden { display: none; }
    .finalize-actions {
      display: flex; gap: 8px; justify-content: space-between;
      padding-top: 4px; flex-wrap: wrap;
    }
    .finalize-actions-left, .finalize-actions-right {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .finalize-actions-label { display: none; } /* shown only on mobile via media query below */
    .btn-submit {
      background: var(--primary); color: #0b0b0c; font-weight: 700;
      border: none; border-radius: 4px; padding: 8px 22px; cursor: pointer;
      font-size: 13px; font-family: inherit;
    }
    .btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }
    .btn-cancel {
      background: transparent; color: var(--text-secondary);
      border: 1px solid var(--border); border-radius: 4px;
      padding: 8px 18px; cursor: pointer; font-size: 13px;
      font-family: inherit;
    }
    .btn-cancel:hover { color: var(--text-primary); border-color: var(--primary); }
    .finalize-error {
      color: var(--red); font-size: 12px; margin-top: 4px;
    }

    /* Custom item combobox (native datalist is unstylable across browsers) */
    .combobox-wrapper { position: relative; flex: 1; min-width: 0; }
    .combobox-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
      max-height: 260px; overflow-y: auto;
      z-index: 100;
      display: none;
    }
    .combobox-dropdown.open { display: block; }
    .combobox-option {
      padding: 8px 12px; font-size: 13px; cursor: pointer;
      color: var(--text-primary); user-select: none;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .combobox-option:last-child { border-bottom: none; }
    .combobox-option:hover, .combobox-option.highlighted {
      background: var(--primary-soft); color: var(--text-primary);
    }
    .combobox-option-id {
      color: var(--text-muted); font-size: 11px; margin-left: 6px;
    }
    .combobox-option-empty {
      padding: 14px 12px; font-size: 12px; color: var(--text-muted);
      text-align: center; font-style: italic;
    }

    /* Per-prize-row Item/Cash toggle — height matches sibling form inputs */
    .prize-type-toggle {
      display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
      background: var(--bg-input); padding: 7px 10px;
      border: 1px solid var(--border); border-radius: 4px;
      box-sizing: border-box;
    }
    .prize-type-toggle label {
      font-size: 13px; cursor: pointer; color: var(--text-secondary);
      user-select: none; display: inline-flex; align-items: center;
    }
    .prize-type-toggle input[type="radio"] { margin-right: 4px; vertical-align: middle; }
    .prize-content {
      display: flex; flex: 1; gap: 8px; min-width: 0;
    }
    .prize-content.hidden { display: none; }
    .prize-content .combobox-wrapper { flex: 1; }
    .prize-content .form-qty { flex: 0 0 90px; }
    .prize-content .cash-input { flex: 1; }

    .finalize-meta {
      font-size: 11px; color: var(--text-muted);
      padding: 6px 10px; background: var(--bg-card);
      border-radius: 4px; border: 1px solid var(--border);
    }
    .finalized-tick {
      color: #2dd4bf; font-size: 16px; margin-right: 6px;
    }

    /* ===== STANDINGS / TIMELINE CHART ===== */
    /* 4 main scorecards above the chart — same .kpi-row pattern as the
       Overview tab so the visual rhythm is consistent. */
    .standings-kpi-row {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
      margin-bottom: 12px;
    }
    /* Crown card — the "most engaged giveaway ever" highlight. Distinct
       look so it doesn't read as just another scorecard. */
    .crown-card {
      display: flex; align-items: center; gap: 14px;
      background: linear-gradient(120deg, rgba(168,85,247,0.08), rgba(168,85,247,0));
      border: 1px solid var(--border); border-left: 3px solid var(--primary);
      border-radius: var(--radius); padding: 12px 16px;
      margin-bottom: 12px;
    }
    .crown-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
    .crown-body { flex: 1; min-width: 0; }
    .crown-label {
      font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
      color: var(--text-muted); font-weight: 500;
    }
    .crown-title {
      font-size: 14px; font-weight: 600; color: var(--text-primary);
      margin-top: 3px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .crown-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
    .crown-prize {
      font-size: 11px; color: var(--text-secondary); margin-top: 4px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .crown-prize:empty { display: none; }
    .crown-prize-label { color: var(--text-primary); margin-right: 4px; }
    .crown-pct {
      font-size: 22px; font-weight: 700; color: var(--primary);
      letter-spacing: -0.02em; flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    /* 6 smaller supplementary scorecards. */
    .standings-supplementary {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
      margin-bottom: 14px;
    }
    .kpi-small {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 10px 12px;
      display: flex; flex-direction: column;
    }
    .kpi-small-label {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
      color: var(--text-muted); font-weight: 500;
    }
    .kpi-small-value {
      font-size: 18px; font-weight: 600; color: var(--text-primary);
      margin-top: 4px; letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .kpi-small-sub {
      font-size: 10px; color: var(--text-muted); margin-top: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .standings-section {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 18px 20px;
    }
    .standings-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      gap: 12px; flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .standings-mode-toggle {
      display: inline-flex; gap: 0;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 6px; padding: 2px;
    }
    .standings-mode-btn {
      padding: 5px 12px; font-size: 12px;
      background: transparent; color: var(--text-secondary);
      border: none; border-radius: 4px;
      cursor: pointer; font-family: inherit;
    }
    .standings-mode-btn:hover { color: var(--text-primary); }
    .standings-mode-btn.active {
      background: var(--bg-card); color: var(--primary);
    }

    /* ============================================================
       Standings — theme cards (replaces .standings-kpi-row +
       .standings-supplementary). Lives between the crown card and
       the Giveaway Activity chart.
       ============================================================ */

    /* Comparison-period selector — left-aligned to match the crown card,
       scorecards, and chart on the same page. */
    .standings-cmp-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .standings-cmp-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }
    .standings-cmp-select {
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 6px 28px 6px 10px;
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a8a8b0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .standings-cmp-select:hover { border-color: rgba(255,255,255,0.2); }
    .standings-cmp-select:focus { outline: none; border-color: var(--primary); }
    /* Group each label+select pair so they wrap as a unit when the bar
       collapses on mobile — without this, "Compare to" would float onto a
       different row than its dropdown. */
    .standings-cmp-group { display: inline-flex; align-items: center; gap: 10px; }
    @media (max-width: 720px) {
      .standings-cmp-bar {
        flex-wrap: wrap;
        gap: 10px 14px;       /* tighter rows, breathable columns */
        margin-top: 4px;       /* visible gap from the crown card above */
      }
    }

    /* Card grid: 2-up desktop, 1-up mobile */
    .theme-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: 14px;
    }
    @media (max-width: 720px) { .theme-grid { grid-template-columns: 1fr; } }

    /* Card shell — used by all four theme cards */
    .tcard {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .tcard__label   { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-secondary); }
    .tcard__head    { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
    .tcard__head-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .tcard__big     { font-size: 30px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
    .tcard__big-sub { font-size: 12px; color: var(--text-secondary); }
    .tcard__foot    { font-size: 11px; color: var(--text-muted); margin-top: auto; }

    /* Delta chip */
    .delta {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; padding: 2px 7px; border-radius: 3px;
      font-weight: 600; font-variant-numeric: tabular-nums;
      flex-shrink: 0; line-height: 1.4;
    }
    .delta--up   { color: #4ade80;        background: rgba(74, 222, 128, 0.1); }
    .delta--down { color: var(--red);     background: rgba(255, 107, 107, 0.1); }
    .delta--flat { color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); }
    .delta-period { opacity: 0.75; font-weight: 500; }

    /* Hosting Mix — stacked bar + legend; segments + legend items are clickable
       toggles that include/exclude their bucket from the delta. */
    .hostbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-input); }
    .hostbar__seg {
      height: 100%; transition: width 200ms ease, opacity 120ms ease;
      cursor: pointer;
    }
    .hostbar__seg.is-excluded { opacity: 0.25; }
    .hostlegend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); }
    .hostlegend__item {
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer; user-select: none;
      transition: opacity 120ms ease;
    }
    .hostlegend__item:hover { opacity: 0.85; }
    .hostlegend__item.is-excluded { opacity: 0.4; text-decoration: line-through; }
    .hostlegend strong { color: var(--text-primary); font-weight: 700; margin-left: 2px; font-variant-numeric: tabular-nums; }
    .hostlegend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

    /* Engagement Profile — track with avg fill + best marker */
    .engtrack { position: relative; height: 8px; background: var(--bg-input); border-radius: 4px; }
    .engtrack__fill { height: 100%; background: var(--primary); border-radius: 4px 0 0 4px; transition: width 200ms ease; }
    .engtrack__best { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #2dd4bf; transition: left 200ms ease; }
    .engtrack__scale {
      position: relative;
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.04em;
    }
    .engtrack__best-label {
      color: #2dd4bf;
      position: absolute;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    .engmeta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
    .engmeta strong { color: var(--text-primary); font-weight: 700; }
    .eng-best-host { color: #2dd4bf; font-weight: 600; }

    /* Cadence — paired stats + sparkline + heat strip */
    .cadrow { display: flex; gap: 16px; align-items: flex-start; }
    .cadstat { flex: 1; }
    .cadstat__topline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
    .cadstat__num { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
    .cadstat__num .unit { font-size: 13px; color: var(--text-secondary); font-weight: 500; margin-left: 1px; }
    .cadstat__lbl { font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
    .cadstat__lbl-sub { color: var(--text-muted); }

    /* Cadence — wraps both visualisations */
    .cadviz { display: flex; flex-direction: column; gap: 8px; }
    .cadviz__caption {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }
    .cadviz__hint { color: var(--text-secondary); }

    /* Sparkline height — slightly tighter to share the card with the heat strip */
    .cadspark { width: 100%; height: 24px; display: block; }

    /* Heat strip — 12 cells coloured by monthly count */
    .heatstrip-wrap { display: flex; flex-direction: column; gap: 4px; }
    .heatstrip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 18px; }
    .heatcell { border-radius: 2px; transition: transform 120ms ease; cursor: default; }
    .heatcell:hover { transform: scaleY(1.3); }
    .heatlabels {
      display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
      font-size: 9px; color: var(--text-muted); text-align: center;
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    /* Standouts — two rows with prior-window subline */
    /* flex:1 makes the two rows share the card's free vertical space, so the
       border-top on row 2 (the separator) lands at the card's midpoint when
       the card stretches to match its taller siblings. align-items:center
       keeps the icon + body grouped in the centre of each half rather than
       bunched at the top. */
    .standrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; flex: 1; }
    .standrow + .standrow { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }
    .standicon { font-size: 18px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); flex-shrink: 0; }
    .standbody { flex: 1; min-width: 0; }
    .standlbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); }
    .standval { font-size: 14px; color: var(--text-primary); font-weight: 600; margin-top: 3px; }
    .standmeta { color: var(--text-secondary); font-weight: 400; font-size: 12px; }
    .standmeta-prev { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .standmeta-prev .prev-period { color: var(--text-secondary); }
    .standmeta-prev .prev-name { color: var(--text-secondary); }

    @media (max-width: 480px) {
      .tcard { padding: 12px 14px; }
      .tcard__big { font-size: 26px; }
      .cadrow { gap: 12px; }
    }

    .standings-title {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--text-secondary); font-weight: 600;
    }
    .standings-subtitle {
      font-size: 12px; color: var(--text-muted); margin-top: 4px;
    }
    .timeline-wrap {
      width: 100%; overflow: hidden; border-radius: 4px;
    }
    .timeline-svg {
      width: 100%; height: auto; display: block;
      font-family: var(--font-sans);
    }
    .timeline-svg .axis-line { stroke: var(--border); stroke-width: 1; }
    .timeline-svg .grid-line { stroke: rgba(255,255,255,0.04); stroke-width: 1; }
    .timeline-svg .axis-label {
      fill: var(--text-muted); font-size: 10px;
    }
    .timeline-svg .y-axis-label { text-anchor: end; }
    .timeline-svg .x-axis-label { text-anchor: middle; }
    .timeline-svg .giveaway-dot {
      fill: var(--primary); fill-opacity: 0.7;
      stroke: var(--bg-card); stroke-width: 1;
      cursor: pointer;
      transition: fill-opacity 0.12s, r 0.12s;
    }
    .timeline-svg .giveaway-dot:hover { fill-opacity: 1; }
    .timeline-svg .giveaway-dot.tagged {
      stroke: var(--text-primary); stroke-width: 1.5;
    }
    .timeline-svg .officer-band-bg { fill: rgba(255,255,255,0.03); }
    .timeline-svg .officer-band-segment { fill-opacity: 0.85; }
    .timeline-svg .today-marker {
      stroke: var(--primary); stroke-width: 1; stroke-dasharray: 3 3;
      stroke-opacity: 0.5;
    }
    .timeline-svg .trend-line {
      stroke: var(--text-secondary); stroke-width: 1.25;
      stroke-dasharray: 5 4; stroke-opacity: 0.45;
      fill: none; pointer-events: none;
    }
    .officer-legend {
      display: flex; flex-wrap: wrap; gap: 10px 18px;
      margin-top: 14px; font-size: 12px; color: var(--text-secondary);
    }
    .officer-legend-item {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .officer-legend-swatch {
      display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    }
    .officer-legend-name { color: var(--text-primary); font-weight: 500; }
    .officer-legend-dates { color: var(--text-muted); }
    @media (max-width: 768px) {
      .standings-section { padding: 14px 14px; }
      .timeline-svg .axis-label { font-size: 9px; }
      .officer-legend { font-size: 11px; gap: 8px 14px; }
      /* Main 4 scorecards: horizontal scroll, but aligned with the rest of
         the content (no negative-margin edge bleed). */
      .standings-kpi-row {
        display: flex; overflow-x: auto; gap: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 4px;
        scrollbar-width: none;
      }
      .standings-kpi-row::-webkit-scrollbar { display: none; }
      .standings-kpi-row > .kpi {
        flex: 0 0 45%; scroll-snap-align: start; padding: 10px 12px;
      }
      /* Header on mobile: lock the Count / % toggle to the right, let
         the title + subtitle take whatever's left. flex-wrap is disabled
         so they sit on the same row, toggle is shrunk slightly. */
      .standings-header {
        flex-wrap: nowrap; align-items: center;
      }
      .standings-header > div:first-child { flex: 1; min-width: 0; }
      .standings-mode-toggle { flex-shrink: 0; padding: 1px; }
      .standings-mode-btn { padding: 4px 9px; font-size: 11px; }
      /* 6 small cards: same horizontal-scroll pattern as the main 4,
         aligned with the rest of the content (no edge bleed). */
      .standings-supplementary {
        display: flex; grid-template-columns: none;
        overflow-x: auto; gap: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 4px;
        scrollbar-width: none;
      }
      .standings-supplementary::-webkit-scrollbar { display: none; }
      .standings-supplementary > .kpi-small {
        flex: 0 0 38%; scroll-snap-align: start; padding: 10px 12px;
      }
      .crown-pct { font-size: 18px; }
      .crown-title { font-size: 13px; }
    }

    /* Chart tooltip (custom, replaces SVG <title> which can't be styled
       and doesn't work reliably on touch devices). Fixed positioning
       relative to the viewport so it never gets clipped by the chart's
       overflow:hidden wrapper. */
    .chart-tooltip {
      position: fixed; pointer-events: none;
      display: none; z-index: 9999;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 6px; padding: 10px 12px;
      font-size: 12px; color: var(--text-primary);
      box-shadow: 0 6px 20px rgba(0,0,0,0.5);
      max-width: 280px; line-height: 1.45;
    }
    .chart-tooltip.visible { display: block; }
    .chart-tooltip .tt-title {
      font-weight: 600; color: var(--text-primary);
      margin-bottom: 2px;
    }
    .chart-tooltip .tt-meta {
      font-size: 11px; color: var(--text-muted); margin-bottom: 6px;
    }
    .chart-tooltip .tt-row { font-size: 12px; color: var(--text-secondary); }
    .chart-tooltip .tt-host { color: var(--primary); }
    .chart-tooltip .tt-pct { color: var(--text-muted); margin-left: 4px; }
    .chart-tooltip .tt-event {
      margin-top: 6px; padding-top: 6px;
      border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 6px;
      font-size: 11px;
    }
    .chart-tooltip .tt-event-dot {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    }

    /* Toast notifications (mirrors the attacks dashboard pattern) */
    .toast-container {
      position: fixed; top: 0; left: 50%; transform: translateX(-50%);
      z-index: 10000; display: flex; flex-direction: column; align-items: center;
      gap: 8px; padding-top: 16px; pointer-events: none;
    }
    .toast {
      pointer-events: auto;
      padding: 12px 24px; border-radius: var(--radius);
      font-size: 13px; font-family: inherit; font-weight: 500;
      color: var(--text-primary); background: var(--bg-card);
      border: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      transform: translateY(-20px); opacity: 0;
      transition: transform .3s ease, opacity .3s ease;
      max-width: 420px; text-align: center;
    }
    .toast.show { transform: translateY(0); opacity: 1; }
    .toast.toast-success { border-color: var(--primary); color: var(--primary); }
    .toast.toast-error   { border-color: var(--red);     color: var(--red); }

    @media (max-width: 768px) {
      .finalize-grid { grid-template-columns: 1fr; }
      .form-row { flex-wrap: wrap; }
      .form-row .form-qty { flex: 0 0 45px; padding-left: 6px; padding-right: 6px; }
      /* Prize rows: stack the Item/Cash toggle ABOVE the input row so the
         combobox + qty get full width to themselves on narrow screens. */
      .form-row.prize-row { align-items: stretch; }
      .form-row.prize-row .prize-type-toggle {
        flex: 1 1 100%;
        justify-content: flex-start;
      }
      .form-row.prize-row .prize-content { flex: 1; min-width: 0; }

      /* Action row stacks: Refetch + Delete share row 1 (50/50),
         Cancel + Submit share row 2 (50/50), gap matches our 12px
         section gap so it sits cleanly above the rest. */
      .finalize-actions {
        flex-direction: column;
        gap: 12px;
        padding-top: 0; /* match the section-to-section 12px gap exactly */
      }
      .finalize-actions-left,
      .finalize-actions-right { width: 100%; box-sizing: border-box; }
      /* Wrap Refetch + Delete in a section-styled card (same look as the
         form sections above) for visual consistency. Cancel/Submit stay
         bare since they're the form's commit row. */
      .finalize-actions-left {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: 6px; padding: 12px 14px;
      }
      /* "Action" label inside the section box, sits on its own row above
         the buttons. width: 100% forces the buttons to wrap below it. */
      .finalize-actions-label {
        display: block;
        width: 100%;
        margin-bottom: 0; /* parent flex gap of 8px provides the spacing */
      }
      /* Refetch matches the form input background; Delete becomes a solid
         red destructive button (white text). Mobile only — desktop keeps
         the lighter card-bg + colored-text treatment. */
      .finalize-actions-left .btn-refetch {
        background: var(--bg-input);
      }
      .finalize-actions-left .btn-delete {
        background: var(--red);
        color: #fff;
        border-color: var(--red);
      }
      .finalize-actions-left .btn-delete:hover {
        background: var(--red); /* keep solid on hover */
      }
      /* Cancel was transparent — same color as the comp-expand background
         on mobile, so it visually disappears. Give it the bg-card fill
         that the form sections use, so it stands out as a real button.
         Match Submit's structure exactly (no border, same padding) so the
         two read as a uniform pair — only the color differs. */
      .finalize-actions-right .btn-cancel {
        background: var(--bg-card);
        padding: 8px 22px;
        border: none;
      }
      .finalize-actions-left > button,
      .finalize-actions-right > button {
        flex: 1; min-width: 0;
        /* border-box so flex-share INCLUDES padding/border — prevents
           the buttons spilling past the parent's edge. */
        box-sizing: border-box;
      }
    }

    @media (max-width: 768px) {
      .comp-list { gap: 6px; }
      .comp-card {
        padding: 11px 13px;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "pill    chevron"
          "info    chevron";
        column-gap: 10px;
        row-gap: 10px;
        align-items: center;
      }
      .comp-card > :nth-child(1) { grid-area: info; min-width: 0; }
      .comp-card > :nth-child(2) { grid-area: pill; justify-self: start; }
      .comp-card > :nth-child(3) { grid-area: chevron; align-self: center; }
      .comp-card .comp-title { font-size: 13px; }
      .comp-card .comp-meta { font-size: 11px; line-height: 1.35; }
      .comp-card .comp-stats { font-size: 11px; gap: 10px; }
      /* Prize text: long ones get clamped to 1 line with a "more" toggle.
         Short ones (no .has-toggle class) flow normally. */
      .comp-card .comp-prize.has-toggle {
        display: flex; align-items: baseline; gap: 4px;
      }
      .comp-card .comp-prize.has-toggle .comp-prize-text {
        flex: 1; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .comp-card .comp-prize.has-toggle.expanded {
        display: block;
      }
      .comp-card .comp-prize.has-toggle.expanded .comp-prize-text {
        white-space: normal;
      }
      .comp-prize-toggle { display: inline-block; }
      .comp-expand { padding: 12px 13px; }
      .comp-expand .expand-actions { gap: 6px; }
      .comp-expand .placeholder-note { font-size: 11px; padding: 8px 10px; }
      .filter-chips { gap: 6px; margin-bottom: 12px; }
      .filter-chip { font-size: 11px; padding: 5px 10px; }
      .btn-refetch, .btn-delete { padding: 7px 12px; font-size: 12px; }
    }

    /* ===== AUTH OVERLAY ===== */
    .auth-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: var(--bg-dark); z-index: 9999;
      display: flex; align-items: center; justify-content: center;
    }
    /* Loading-bar mode: triggered by sync head script when cached JWT is valid. */
    .auth-loading-view {
      display: none;
      flex-direction: column; align-items: center; gap: 18px;
    }
    .auth-loading-logo { width: 48px; height: 48px; object-fit: contain; }
    .auth-loading-bar {
      width: min(40vw, 400px); height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px; overflow: hidden;
      position: relative;
    }
    .auth-loading-bar::after {
      content: '';
      position: absolute; top: 0; left: 0;
      height: 100%; width: 35%;
      background: var(--primary, #d6e70f);
      border-radius: 2px;
      animation: authLoadSlide 1.1s ease-in-out infinite;
    }
    html.auth-loading .auth-card { display: none; }
    html.auth-loading .auth-loading-view { display: flex; }
    @keyframes authLoadSlide {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(370%); }
    }
    .auth-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 12px; padding: 40px;
      max-width: 420px; width: 90%; text-align: center;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }
    .auth-title { font-size: 22px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
    .auth-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
    .auth-input {
      width: 100%; padding: 12px 16px;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 6px; color: var(--text-primary);
      font-size: 15px; margin-bottom: 16px; outline: none;
      font-family: inherit;
    }
    .auth-input:focus { border-color: var(--primary); }
    .auth-btn {
      width: 100%; padding: 12px;
      background: var(--primary); color: #0b0b0c;
      font-weight: 700; font-size: 15px; border: none;
      border-radius: 6px; cursor: pointer; font-family: inherit;
    }
    .auth-btn:hover { opacity: 0.9; }
    .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .auth-error { color: var(--red); font-size: 13px; margin-top: 12px; min-height: 20px; }
    .auth-privacy { margin-top: 20px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

    /* ===== MOBILE ===== */
    @media (max-width: 768px) {
      .header { padding: 12px 14px; gap: 10px; }
      .header-eyebrow { display: none; }
      .header-title { font-size: 14px; }
      .nav { padding: 0 8px; }
      .nav-tab { padding: 13px 14px; font-size: 12.5px; }
      .sub-nav-wrap { padding: 10px 14px; }
      .content { padding: 16px 14px; }
      /* KPI: horizontal scroll showing 2.2 cards (same pattern as attacks) */
      .kpi-row {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        margin-left: -14px;
        margin-right: -14px;
        padding: 0 14px 4px;
        scroll-padding-left: 14px;
        scrollbar-width: none;
      }
      .kpi-row::-webkit-scrollbar { display: none; }
      .kpi-row > .kpi {
        flex: 0 0 45%;
        scroll-snap-align: start;
        padding: 10px 12px;
      }
      .kpi-label { font-size: 9px; letter-spacing: 0.12em; }
      .kpi-value { font-size: 18px; margin-top: 4px; }
    }
    @media (max-width: 480px) {
      .nav-tab { padding: 11px 11px; font-size: 11.5px; }
    }

    /* Confirm modal — used by appConfirm() */
    .app-modal {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
    }
    .app-modal-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; padding: 22px 24px;
      max-width: 460px; width: 90%;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }
    .app-modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
    .app-modal-msg   { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; }
    .app-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .app-modal-actions button {
      padding: 8px 14px; font-family: inherit;
      font-size: 12px; font-weight: 600;
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 6px;
      cursor: pointer;
    }
    .app-modal-actions button:hover { filter: brightness(1.1); }
    .app-modal-actions .app-modal-primary {
      background: var(--positive, #69DB7C); color: var(--bg-card);
      border-color: var(--positive, #69DB7C);
    }