* { 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;
      --positive: #69DB7C;
      --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 key with attacks dashboard */
    body.theme-navy {
      --bg-dark:        #08111f;
      --bg-card:        #0c1828;
      --bg-card-hover:  #122036;
      --bg-input:       #182846;
      --border:         #1e2e4e;
    }

    /* ===== 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;
    }
    .header-logo { width: 26px; height: 26px; object-fit: contain; cursor: pointer; }
    /* Burger menu trigger — sits to the LEFT of the WMD logo. Opens the
       full side drawer; existing logo-click theme cycle stays untouched. */
    .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; }

    /* ===== 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; }
    }
    .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;
    }
    .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; }

    /* ===== 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); }
    .nav-cog {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      width: 44px; padding: 0;
      background: transparent; border: none;
      cursor: pointer; color: var(--text-dim);
      font-size: 16px; line-height: 1;
      border-bottom: 2px solid transparent;
      transition: color 0.15s;
    }
    .nav-cog:hover { color: var(--text-primary); }
    .nav-cog.active { color: var(--primary); border-bottom-color: var(--primary); }

    /* ===== CONTROLS ===== */
    .controls {
      padding: 14px 24px;
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-dark);
    }
    /* Eyebrow label inside the controls bar.
       Same visual as attacks' .active-war-eyebrow (font 10px, ls 0.18em, weight 600)
       but neutrally named so it reads cleanly in a crimes context. If we later
       standardise across dashboards, this name (or a generic alias) is a candidate. */
    .controls-eyebrow {
      font-size: 10px; letter-spacing: 0.18em; color: var(--text-secondary);
      text-transform: uppercase; font-weight: 600;
    }
    .control-label {
      font-size: 10px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500;
    }
    select, input[type="text"], input[type="number"], input[type="date"] {
      background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
      padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; outline: none;
      font-family: inherit; transition: border-color .12s, box-shadow .12s;
      color-scheme: only dark;
    }
    select:focus, input:focus { border-color: var(--primary); }

    /* ===== CONTENT ===== */
    .content { padding: 20px 24px; }
    .panel { display: none; }
    .panel.active { display: block; }
    .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; }

    /* ===== KPI SCORECARDS — mirrors attacks/competitions ===== */
    /* Crimes uses 5 cards (one more than the 4-card pattern in attacks). */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .kpi {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      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;
      color: var(--text-primary); margin-top: 4px;
    }
    .kpi-sub {
      font-size: 11px; color: var(--text-dim);
      margin-top: auto; padding-top: 4px;
    }
    @media (max-width: 768px) {
      .nav-tab { padding: 13px 14px; font-size: 12.5px; }
      .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 40%;          /* ~2.5 cards visible — hints at more to scroll */
        scroll-snap-align: start;
        padding: 10px 12px;
      }
      .kpi-label { font-size: 9px; letter-spacing: 0.12em; }
      .kpi-value { font-size: 18px; margin-top: 4px; }
    }

    /* ===== TABLE ===== */
    .table-wrap {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
    }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    thead {
      background: var(--bg-card-hover);
      position: sticky; top: 0; z-index: 1;
    }
    th {
      padding: 10px 14px; text-align: left;
      font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-secondary);
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    th.num { text-align: right; }
    td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text-primary);
    }
    td.num { text-align: right; font-family: var(--font-mono); }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--bg-card-hover); }

    .empty-state {
      padding: 60px 20px; text-align: center;
      color: var(--text-muted); font-size: 14px;
    }

    /* ===== PAYOUT HISTORY TABLE — column sizing & mobile responsiveness ===== */
    /* Fixed layout with proportional widths so columns spread evenly across the
       available width on wide desktops, instead of dumping all leftover space
       into one column. Wrapper allows horizontal scroll on very narrow viewports. */
    #panel-payouts .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #panel-payouts table { min-width: 640px; table-layout: fixed; }
    #panel-payouts th, #panel-payouts td { width: 20%; }             /* equal columns */
    #panel-payouts td:nth-child(1),
    #panel-payouts td:nth-child(2),
    #panel-payouts td:nth-child(4),
    #panel-payouts td:nth-child(5) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #panel-payouts td:nth-child(3) { line-height: 1.35; }            /* crime: only multi-word col */
    #panel-payouts td:nth-child(5) { color: var(--text-secondary); } /* % — secondary to $ amount */
    #panel-payouts tbody td { padding: 12px 16px; }                  /* a touch more breathing room */
    #panel-payouts .paid-short { display: none; }                    /* desktop: full date + time */
    /* Filter row spacing (desktop). Moved off inline so mobile @media can override. */
    #payoutMemberRow { gap: 12px; flex-wrap: wrap; }
    #payoutMemberRow #memberSelect       { width: 240px; }
    #payoutMemberRow #payoutPeriodSelect { width: 160px; }

    @media (max-width: 768px) {
      /* Table sizes to the width its content actually needs (each column = its
         natural max-content width). No column is forced to absorb slack, and if
         the total exceeds viewport, the wrapper scrolls horizontally. */
      #panel-payouts table { font-size: 12px; table-layout: auto; width: max-content; min-width: 0; }
      #panel-payouts th, #panel-payouts tbody td { padding: 8px 10px; width: auto; }
      #panel-payouts .paid-full  { display: none; }
      #panel-payouts .paid-short { display: inline; }                 /* mobile: "21 May 26" */
      /* Personal view: Member column is redundant (it's always you), so hide it on mobile to save space. */
      #panel-payouts.member-view th:nth-child(2),
      #panel-payouts.member-view td:nth-child(2) { display: none; }
      /* Filter row: Member + Period selects share the row at half-width each.
         If one is hidden (non-admin), the other takes the full row.
         Use ID+ID specificity to override the equally-specific desktop widths above. */
      #payoutMemberRow { flex-wrap: nowrap; gap: 12px; }
      #payoutMemberRow > div { flex: 1 1 0; min-width: 0; }
      #payoutMemberRow #memberSelect,
      #payoutMemberRow #payoutPeriodSelect { width: 100%; min-width: 0; }
    }

    /* ============================================================
       LOGISTICS — Refined direction (rfn-* prefix)
       Visual refresh per claude design handoff. Reuses existing
       tokens (--primary, --bg-card, --border, etc.) — no new tokens.
       ============================================================ */

    /* Density modifiers (set on a parent wrapper, default compact) */
    .rfn-root { --pad-card: 8px;  --gap-card: 6px;  --row-gap: 8px; }
    .rfn-root.density-comfortable { --pad-card: 12px; --gap-card: 10px; --row-gap: 12px; }
    .rfn-root.density-spacious    { --pad-card: 18px; --gap-card: 14px; --row-gap: 16px; }

    /* KPI strip */
    .rfn-kpi-wrap { margin-bottom: 12px; }
    .rfn-kpi-row.main { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
    .rfn-kpi-row.scopes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 8px; }
    .rfn-kpi {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 10px 14px;
      display: flex; flex-direction: column;
      cursor: pointer; user-select: none;
      transition: opacity .18s, border-color .18s, background .18s;
    }
    .rfn-kpi:hover { background: var(--bg-card-hover); }
    .rfn-kpi-label {
      font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 500;
    }
    .kpi-label-short { display: none; }   /* mobile-only label swap (e.g. "Members not in OC" → "Not in OC") */
    .rfn-kpi-value {
      font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--text-primary);
      margin-top: 4px; font-family: var(--font-sans);
    }
    .rfn-kpi-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
    .rfn-kpi.mut { opacity: 0.32; }
    .rfn-kpi.mut:hover { opacity: 0.6; }
    .rfn-kpi.items.alert { border-color: #d93535; }
    .rfn-kpi.items.alert .rfn-kpi-label,
    .rfn-kpi.items.alert .rfn-kpi-value { color: #ff6b6b; }
    .rfn-kpi.items.sel       { border-color: #ff6b6b; }
    .rfn-kpi.belowcpr.alert  { border-color: #e8a04b; }
    .rfn-kpi.belowcpr.alert .rfn-kpi-label,
    .rfn-kpi.belowcpr.alert .rfn-kpi-value { color: #e8a04b; }
    .rfn-kpi.belowcpr.sel    { border-color: #e8a04b; }
    .rfn-kpi.planning.sel    { border-color: #4faaff; }
    .rfn-kpi.recruiting.sel  { border-color: #A78BFA; }
    .rfn-kpi.pending.sel     { border-color: #50c850; }
    .rfn-kpi.members.sel     { border-color: var(--text-primary); }
    .rfn-kpi.scope.sel       { border-color: var(--primary); }

    .rfn-scopes-toggle { display: flex; margin-top: 8px; }
    .rfn-scopes-toggle button {
      background: none; border: none; color: var(--text-secondary);
      font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0;
      display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
    }
    .rfn-scopes-toggle button:hover { color: var(--text-primary); }
    .rfn-scopes-toggle button.open svg { transform: rotate(180deg); }
    .rfn-scopes-toggle button svg { transition: transform .2s; }

    /* Section headers */
    .rfn-section-title {
      display: flex; align-items: center; gap: 10px;
      margin: 22px 0 10px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--text-secondary);
    }
    .rfn-section-title::after { content:''; flex:1; height:1px; background: var(--border); }
    .rfn-section-count {
      font-family: var(--font-mono); font-size: 10px;
      background: var(--bg-card); border: 1px solid var(--border);
      padding: 2px 6px; border-radius: 4px; color: var(--text-primary);
    }

    /* Crime card */
    .rfn-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
      display: flex;
    }
    .rfn-card:hover { border-color: #38383f; }

    /* Countdown rail — fixed width so every card aligns regardless of
       whether the countdown contains a day prefix. */
    .rfn-rail {
      flex: 0 0 130px; width: 130px;
      padding: 12px 10px;
      background: rgba(255,255,255,0.015);
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
    }
    .rfn-rail-time {
      font-family: var(--font-mono); font-size: 18px; font-weight: 700;
      letter-spacing: 0.02em; color: var(--primary);
      line-height: 1.15;
    }
    .rfn-rail-time.recruiting { color: #A78BFA; }
    .rfn-rail-time.planning   { color: #4faaff; }
    .rfn-rail-time.overdue    { color: #ff6b6b; }
    .rfn-rail-time.static     { color: var(--text-secondary); font-size: 13px; }
    .rfn-rail-label {
      font-family: var(--font-mono); font-size: 9px;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--text-dim); margin-top: 4px;
    }

    /* Card body (right of rail) */
    .rfn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .rfn-head {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px 8px;
      border-bottom: 1px dashed #232327;
      flex-wrap: wrap;
    }
    .rfn-head-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
    .rfn-head-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
    /* New 3-group head layout (title / meta / stats) — on desktop they sit
       inline like before; on mobile, title takes full row 1 and meta+stats
       share row 2 (meta left, stats right). */
    .rfn-head-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
    .rfn-head-meta  { display: flex; align-items: center; gap: 10px; }
    .rfn-head-stats { display: flex; align-items: center; gap: 12px; margin-left: auto; }
    .rfn-name {
      font-size: 16px; font-weight: 600; color: var(--text-primary);
      letter-spacing: -0.005em; margin: 0;
    }
    .rfn-badge {
      font-size: 9.5px; padding: 3px 7px; border-radius: 3px;
      letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
      font-family: var(--font-mono);
    }
    .rfn-badge.recruiting { background: rgba(167,139,250,0.13); color: #A78BFA; }
    .rfn-badge.planning   { background: rgba(79,170,255,0.13); color: #4faaff; }
    .rfn-badge.successful { background: rgba(105,219,124,0.13); color: #69DB7C; }
    .rfn-scope-pill {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-secondary); padding: 1px 7px;
      border: 1px solid var(--border); border-radius: 3px;
      letter-spacing: 0.04em;
    }
    .rfn-id {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-dim); letter-spacing: 0.04em;
    }
    .rfn-items-flag {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; color: #ff6b6b; font-weight: 500;
      font-family: var(--font-mono);
    }
    .rfn-fill { display: flex; align-items: center; gap: 8px; }
    .rfn-fill-bar { display: flex; gap: 2px; }
    .rfn-fill-seg {
      width: 14px; height: 6px; border-radius: 2px;
      background: var(--bg-input); border: 1px solid #232327;
    }
    .rfn-fill-seg.on { background: var(--primary); border-color: var(--primary); }
    .rfn-fill-text {
      font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
      min-width: 28px; text-align: right;
    }
    .rfn-link {
      color: var(--text-dim); padding: 4px; border-radius: 4px;
      display: inline-flex; align-items: center; text-decoration: none;
    }
    .rfn-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }

    /* Slot tiles */
    .rfn-slots {
      display: flex; gap: var(--gap-card); padding: 10px 14px 12px;
      flex-wrap: wrap;
    }
    .rfn-slot {
      flex: 1 1 0; min-width: 130px;
      background: rgba(255,255,255,0.02);
      border: 1px solid #232327;
      border-radius: 5px; padding: var(--pad-card) 10px;
      display: flex; flex-direction: column; gap: 3px;
    }
    .rfn-slot.open { border-color: rgba(105,219,124,0.4); background: rgba(105,219,124,0.05); }
    .rfn-slot.missing-item { border-color: rgba(217,53,53,0.4); }
    .rfn-slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
    .rfn-slot-role {
      font-size: 11px; font-weight: 600; color: var(--text-primary);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .rfn-slot-cpr {
      font-family: var(--font-mono); font-size: 12px; font-weight: 600;
      color: #69DB7C;
    }
    .rfn-slot-cpr.low { color: #ff6b6b; }
    .rfn-slot-member { font-size: 12.5px; }
    .rfn-slot-member a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
    .rfn-slot-member a:hover { text-decoration: underline; }
    .rfn-slot-member.open { color: #69DB7C; font-weight: 700; letter-spacing: 0.04em; font-size: 12px; }
    .rfn-slot-item {
      font-family: var(--font-mono); font-size: 10.5px;
      display: flex; align-items: center; gap: 4px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rfn-slot-item.has { color: #69DB7C; }
    .rfn-slot-item.missing { color: #ff6b6b; font-weight: 600; }
    .rfn-slot-item.muted { color: var(--text-dim); }
    .rfn-slot-item.placeholder { color: var(--text-muted); font-style: italic; }
    .rfn-slot-weight {
      font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
      letter-spacing: 0.04em; margin-top: 2px;
      padding-top: 4px; border-top: 1px dashed #232327;
    }

    /* Crime card blocker line (shown when an OC is ready but stuck) */
    .rfn-blockers {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 14px;
      background: rgba(255,107,107,0.06);
      border-top: 1px dashed rgba(255,107,107,0.25);
      font-size: 12px; color: #ff6b6b;
      flex-wrap: wrap;
    }
    .rfn-blockers-label {
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.12em;
      text-transform: uppercase; font-weight: 700;
    }
    .rfn-blocker-chip {
      background: rgba(255,107,107,0.10);
      border: 1px solid rgba(255,107,107,0.35);
      padding: 2px 7px; border-radius: 3px;
      color: var(--text-primary); text-decoration: none;
      font-size: 12px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .rfn-blocker-chip:hover { border-color: rgba(255,107,107,0.7); }
    .rfn-blocker-chip-state {
      font-family: var(--font-mono); font-size: 10px;
      color: #ff6b6b; letter-spacing: 0.04em;
    }
    .rfn-blocker-chip-dur {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-dim);
    }

    /* Blockers sub-tab — combined delays + idle stretches log */
    .blockers-controls {
      display: flex; gap: 12px; flex-wrap: wrap;
      margin-bottom: 14px; align-items: flex-end;
    }
    .blockers-filter { display: flex; flex-direction: column; gap: 6px; }
    /* label & select intentionally inherit .control-label + global select styling
       so this tab matches Payout History / History */
    .blockers-table-wrap {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
    }
    .blockers-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .blockers-table th {
      background: var(--bg-card-hover);
      padding: 10px 14px; text-align: left;
      font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-secondary);
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .blockers-table th.num { text-align: center; }
    .blockers-table td {
      padding: 10px 14px; border-bottom: 1px solid var(--border);
      color: var(--text-primary);
    }
    .blockers-table td.num { text-align: center; font-family: var(--font-mono); }
    .blockers-table td.date { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
    .blockers-table tr:last-child td { border-bottom: none; }
    .blockers-table tr:hover td { background: var(--bg-card-hover); }
    .blockers-table a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
    .blockers-table a:hover { text-decoration: underline; }
    .blockers-type-pill {
      display: inline-block; font-size: 10px; padding: 2px 7px;
      letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
      border-radius: 3px; font-family: var(--font-mono);
    }
    .blockers-type-pill.delay { background: rgba(255,107,107,0.13); color: #ff6b6b; }
    .blockers-type-pill.idle  { background: rgba(232,160,75,0.13); color: #e8a04b; }
    .blockers-current-dot {
      display: inline-block; width: 6px; height: 6px;
      border-radius: 50%; background: #ff6b6b;   /* default red */
      margin-right: 4px; vertical-align: middle;
    }
    .blockers-current-dot.delay { background: #ff6b6b; }   /* delayed crime — red */
    .blockers-current-dot.idle  { background: #e8a04b; }   /* delayed join  — orange */

    /* Meta row that sits directly above the table — admin "Showing X of Y"
       on the left, legend pills on the right. Wraps on narrow viewports. */
    .blockers-table-meta {
      display: flex; justify-content: space-between; align-items: center;
      gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
    }
    .blockers-legend {
      display: flex; justify-content: flex-end; gap: 8px;
      flex-wrap: nowrap;
    }
    .blockers-legend-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 999px;
      font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
      font-weight: 600; font-family: var(--font-mono);
      white-space: nowrap;
    }
    .blockers-legend-pill.delay { background: rgba(255,107,107,0.13); color: #ff6b6b; }
    .blockers-legend-pill.idle  { background: rgba(232,160,75,0.13); color: #e8a04b; }
    .blockers-legend-pill .blockers-current-dot { margin-right: 0; }
    /* Right-click context menu for exclusion */
    .blockers-ctxmenu {
      position: fixed; z-index: 9999;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.5);
      padding: 4px 0; min-width: 180px;
      display: none;
    }
    .blockers-ctxmenu.open { display: block; }
    .blockers-ctxmenu-item {
      padding: 8px 14px; cursor: pointer;
      font-size: 13px; color: var(--text-primary);
      user-select: none;
    }
    .blockers-ctxmenu-item:hover { background: var(--primary-soft); }

    /* Repeat-offender list (delay history) */
    .rfn-offenders-table-wrap {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
    }
    .rfn-offenders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .rfn-offenders-table th {
      background: var(--bg-card-hover);
      padding: 9px 14px; text-align: left;
      font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-secondary);
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .rfn-offenders-table th.num { text-align: center; }
    .rfn-offenders-table td {
      padding: 9px 14px; border-bottom: 1px solid var(--border);
      color: var(--text-primary);
    }
    .rfn-offenders-table td.num { text-align: center; font-family: var(--font-mono); }
    .rfn-offenders-table tr:last-child td { border-bottom: none; }
    .rfn-offenders-table tr:hover td { background: var(--bg-card-hover); }
    .rfn-offenders-table a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
    .rfn-offenders-table a:hover { text-decoration: underline; }

    /* Available Members — grouped by bucket */
    .rfn-members-groups { display: flex; flex-direction: column; gap: 10px; }
    .rfn-bucket {
      display: grid; grid-template-columns: 140px 1fr; gap: 14px;
      padding: 10px 14px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); align-items: flex-start;
    }
    .rfn-bucket-head {
      display: flex; flex-direction: column; gap: 2px;
      padding-right: 14px; border-right: 1px solid var(--border);
    }
    .rfn-bucket-label {
      font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .rfn-bucket-count {
      font-family: var(--font-mono); font-size: 16px; font-weight: 600;
      color: var(--text-primary);
    }
    .rfn-bucket.tone-red    .rfn-bucket-label { color: #ff6b6b; }
    .rfn-bucket.tone-amber  .rfn-bucket-label { color: var(--primary); }
    .rfn-bucket.tone-green  .rfn-bucket-label { color: #50c850; }
    .rfn-bucket-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
    .rfn-member-chip {
      font-size: 12px; padding: 4px 9px;
      background: var(--bg-input); border: 1px solid #232327;
      border-radius: 4px; color: var(--text-primary); text-decoration: none;
      font-weight: 500;
    }
    .rfn-member-chip:hover { border-color: var(--text-dim); }

    @media (max-width: 640px) {
      /* Side-scroll showing ~2.5 cards (mirrors payout KPI pattern). */
      .rfn-kpi-row.main, .rfn-kpi-row.scopes {
        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;
      }
      .rfn-kpi-row.main::-webkit-scrollbar,
      .rfn-kpi-row.scopes::-webkit-scrollbar { display: none; }
      .rfn-kpi-row.main > .rfn-kpi,
      .rfn-kpi-row.scopes > .rfn-kpi {
        flex: 0 0 40%;
        scroll-snap-align: start;
      }
      .kpi-label-full  { display: none; }
      .kpi-label-short { display: inline; }
      .rfn-card { flex-direction: column; }
      .rfn-rail {
        flex: 0 0 auto; width: auto;        /* override desktop's 130px so rail spans full card width */
        flex-direction: row; gap: 10px;
        border-right: none; border-bottom: 1px solid var(--border);
        padding: 8px 12px; justify-content: center;
      }
      .rfn-rail-time { font-size: 16px; }
      .rfn-rail-label { margin-top: 0; white-space: nowrap; }   /* keep "TO READY" on one line */
      .rfn-head { padding: 8px 12px 6px; }
      .rfn-head-right { width: 100%; justify-content: flex-end; }
      /* New head layout — title takes row 1 (status pushed right within it),
         meta + stats share row 2 (meta left, stats right via margin-left:auto). */
      .rfn-head-title { width: 100%; min-width: 0; }
      .rfn-head-title .rfn-badge { margin-left: auto; }
      .rfn-slots { padding: 8px 10px 10px; gap: 6px; }
      .rfn-slot { flex: 1 1 calc(50% - 6px); min-width: 0; }
      .rfn-bucket { grid-template-columns: 1fr; }
      .rfn-bucket-head { border-right: none; padding-right: 0; flex-direction: row; gap: 10px; align-items: baseline; }

      /* Blockers filters: share one row instead of stacking. Each filter takes
         half the width; selects shrink to fit and drop their desktop min-width. */
      .blockers-controls { flex-wrap: nowrap; gap: 8px; }
      .blockers-filter { flex: 1 1 0; min-width: 0; }
      .blockers-filter select { min-width: 0; width: 100%; }

      /* Blockers table: shrink all text for denser mobile read. */
      .blockers-table { font-size: 11px; }
      .blockers-table th, .blockers-table td { padding: 7px 8px; }
      .blockers-table td.date { font-size: 10px; }
      .blockers-type-pill { font-size: 9px; padding: 1px 5px; letter-spacing: 0.05em; }
    }

    /* ===== LOOT PANEL ===== */
    /* Per-crime list of items dropped. Each item rendered as a chip in the
       Items cell; chip carries the item name + a small quantity badge. */
    #panel-loot .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #panel-loot table { width: 100%; }
    #panel-loot th:nth-child(1), #panel-loot td:nth-child(1),
    #panel-loot th:nth-child(4), #panel-loot td:nth-child(4) { white-space: nowrap; }
    #panel-loot td:nth-child(3) { line-height: 1.6; }
    .loot-chip {
      display: inline-flex; align-items: baseline; gap: 5px;
      padding: 3px 8px; margin: 2px 4px 2px 0;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; font-size: 12px; color: var(--text-primary);
    }
    .loot-chip-qty {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--primary); letter-spacing: 0.04em;
    }
    /* Xanax — the headline OC drop. Green left-stroke on the row for instant
       scan (matches the armory low-stock pattern). */
    #panel-loot tbody tr.has-xanax td:first-child { box-shadow: inset 3px 0 0 #69DB7C; }

    /* Xanax scorecard click-state — green border when filter is active. */
    #panel-loot .kpi.xanax { transition: border-color 0.15s; }
    #panel-loot .kpi.xanax:hover { border-color: #38383f; }
    #panel-loot .kpi.xanax.sel { border-color: #69DB7C; }
    #panel-loot .kpi.xanax.sel .kpi-value { color: #69DB7C; }
    .loot-value {
      font-family: var(--font-mono); font-weight: 600; color: #69DB7C;
    }
    .loot-freshness-old { color: #e8a04b; }
    .loot-refresh-link {
      color: var(--primary); text-decoration: none;
      font-weight: 600; margin-left: 4px;
    }
    .loot-refresh-link:hover { text-decoration: underline; }
    .loot-refresh-link[aria-busy="true"] {
      color: var(--text-dim); pointer-events: none;
    }

    @media (max-width: 768px) {
      #panel-loot table { font-size: 12px; }
      #panel-loot th, #panel-loot tbody td { padding: 8px 10px; }
      /* Stack chips vertically (one per line) but keep each chip's text on a
         single line. Width sized to content so the chip is only as wide as
         the item name + qty needs. */
      .loot-chip {
        display: flex; width: max-content;
        margin: 3px 0; padding: 2px 6px;
        font-size: 11px; white-space: nowrap;
      }
    }

    /* ===== HISTORY PANEL ===== */
    /* Filter row (Member + Crime) — desktop sits inline with fixed widths;
       mobile (≤768px) shares the row 50/50, selects shrink to fit. */
    #historyMemberRow { gap: 12px; flex-wrap: wrap; }
    #historyMemberRow #historyMemberSelect,
    #historyMemberRow #historyCrimeSelect  { width: 240px; }

    /* Crime-by-crime card list. Header carries name/difficulty/status/date/payout;
       slot grid shows role · weight · member · CPR. Visual cousin of operations
       cards but no countdown rail (historical) and no item-required surface. */
    .hist-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
      box-shadow: inset 3px 0 0 var(--border);   /* fallback stripe */
    }
    .hist-card:hover { border-color: #38383f; }
    /* Left stripe matches the status pill colour for quick scan. */
    .hist-card[data-status="successful"]                              { box-shadow: inset 3px 0 0 #69DB7C; }
    .hist-card[data-status="failure"],
    .hist-card[data-status="failed"],
    .hist-card[data-status="expired"]                                 { box-shadow: inset 3px 0 0 #ff6b6b; }
    .hist-card[data-status="planning"]                                { box-shadow: inset 3px 0 0 #4faaff; }
    .hist-card[data-status="recruiting"]                              { box-shadow: inset 3px 0 0 #A78BFA; }
    .hist-card[data-status="completed"],
    .hist-card[data-status="awaiting-payout"]                         { box-shadow: inset 3px 0 0 #e8a04b; }
    .hist-head {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 12px 16px;
      border-bottom: 1px dashed #232327;
    }
    .hist-head-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
    .hist-head-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
    .hist-name {
      font-size: 15px; font-weight: 600; color: var(--text-primary);
      letter-spacing: -0.005em; margin: 0;
    }
    .hist-difficulty {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-secondary); padding: 1px 7px;
      border: 1px solid var(--border); border-radius: 3px;
    }
    .hist-status {
      font-size: 10px; padding: 3px 8px; border-radius: 3px;
      letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
      font-family: var(--font-mono);
    }
    .hist-status.successful      { background: rgba(105,219,124,0.13); color: #69DB7C; }
    .hist-status.failure,
    .hist-status.failed,
    .hist-status.expired         { background: rgba(255,107,107,0.13); color: #ff6b6b; }
    .hist-status.planning        { background: rgba(79,170,255,0.13);  color: #4faaff; }
    .hist-status.recruiting      { background: rgba(167,139,250,0.13); color: #A78BFA; }
    .hist-status.completed,
    .hist-status.awaiting-payout { background: rgba(232,160,75,0.13);  color: #e8a04b; }
    .hist-date {
      font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
    }
    .hist-payout {
      font-family: var(--font-mono); font-size: 13px; font-weight: 600;
      color: #69DB7C;
    }
    .hist-payout.zero { color: var(--text-dim); }
    .hist-slots {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 8px; padding: 10px 14px 12px;
    }
    .hist-slot {
      background: rgba(255,255,255,0.02);
      border: 1px solid #232327;
      border-radius: 5px; padding: 8px 10px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .hist-slot.own { border-color: rgba(214,231,15,0.4); background: rgba(214,231,15,0.04); }
    .hist-slot-head {
      display: flex; align-items: baseline; justify-content: center; gap: 6px;
    }
    .hist-slot-role {
      font-size: 10px; font-weight: 600; color: var(--text-primary);
      letter-spacing: 0.06em; text-transform: uppercase;
      text-align: center;
    }
    /* Weight strip pinned to the bottom of each slot tile, edge-to-edge via
       negative side margins that cancel the slot's padding. */
    .hist-slot-weight {
      margin: auto -10px -8px;
      padding: 5px 10px;
      border-top: 1px solid #232327;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-secondary);
      background: rgba(255,255,255,0.02);
      text-align: center;
    }
    .hist-slot-weight .val {
      color: var(--text-primary); font-weight: 700; margin-left: 6px;
    }
    .hist-slot-member { font-size: 12px; text-align: center; }
    .hist-slot-member a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
    .hist-slot-member a:hover { text-decoration: underline; }
    .hist-slot-member.empty { color: var(--text-dim); font-style: italic; }
    .hist-slot-cpr {
      display: block; text-align: center;
      font-family: var(--font-mono); font-size: 11px; font-weight: 600;
      color: var(--text-dim);
    }
    .hist-slot-cpr.high { color: #69DB7C; }
    .hist-slot-cpr.mid  { color: #e8a04b; }
    .hist-slot-cpr.low  { color: #ff6b6b; }

    /* History KPI scorecards — three status filters (Successful/Failed/In Progress) */
    #panel-history .kpi-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 10px; margin-bottom: 16px;
    }
    #panel-history .kpi { cursor: pointer; transition: border-color 0.15s; }
    #panel-history .kpi:hover { border-color: #38383f; }
    #panel-history .kpi.sel.successful { border-color: #69DB7C; }
    #panel-history .kpi.sel.failed     { border-color: #ff6b6b; }
    #panel-history .kpi.sel.inprogress { border-color: #4faaff; }
    #panel-history .kpi.mut { opacity: 0.4; }
    #panel-history .kpi.mut:hover { opacity: 0.7; }

    @media (max-width: 640px) {
      .hist-slots { grid-template-columns: repeat(2, 1fr); }
      .hist-head { padding: 10px 12px; gap: 8px; }
      .hist-head-right { width: 100%; justify-content: flex-start; margin-left: 0; }
      .hist-name { font-size: 14px; }
      /* KPI scorecards: side-scroll showing ~2.5 cards (matches other dashboards). */
      #panel-history .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;
      }
      #panel-history .kpi-row::-webkit-scrollbar { display: none; }
      #panel-history .kpi-row > .kpi {
        flex: 0 0 40%; scroll-snap-align: start;
      }
      /* Filter row: Member + Crime share one row at half-width each.
         If Member is hidden (non-admin), Crime takes the full row. */
      #historyMemberRow { flex-wrap: nowrap; gap: 12px; }
      #historyMemberRow > div { flex: 1 1 0; min-width: 0; }
      #historyMemberRow #historyMemberSelect,
      #historyMemberRow #historyLevelSelect,
      #historyMemberRow #historyCrimeSelect {
        width: 100%; min-width: 0;
        padding-right: 0.5em;
        text-overflow: ellipsis;
      }
    }

    /* ===== ADMIN SUB-NAV (matches attacks pattern) ===== */
    .admin-subnav {
      display: flex; gap: 4px; padding: 4px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); margin-bottom: 18px;
      overflow-x: auto; scrollbar-width: none;
    }
    .admin-subnav::-webkit-scrollbar { display: none; }
    .admin-subnav-tab {
      padding: 8px 14px; 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;
      transition: color .12s, background .12s;
    }
    .admin-subnav-tab:hover { color: var(--text-primary); background: var(--bg-input); }
    .admin-subnav-tab.active { color: var(--primary); background: var(--primary-soft); }
    .admin-section { display: none; }
    .admin-section.active { display: block; }
    @media (max-width: 768px) {
      .admin-subnav-tab { font-size: 11px; padding: 7px 10px; }
    }

    /* ===== CPR config (Set CPR sub-tab) ===== */
    .cpr-config-grid {
      display: grid; grid-template-columns: 1fr; gap: 14px;
    }
    .cpr-level-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
      margin-bottom: 12px;
    }
    .cpr-level-row {
      display: flex; flex-direction: column; gap: 4px;
      background: var(--bg-card-hover); border: 1px solid var(--border);
      border-radius: 4px; padding: 8px 10px;
    }
    .cpr-level-row label {
      font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--primary);
      font-weight: 600;
    }
    .cpr-level-row input {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; padding: 6px 8px;
      color: var(--text-primary); font-family: var(--font-mono);
      font-size: 13px; text-align: center;
    }
    .cpr-exception-form {
      display: grid; grid-template-columns: 1fr 1fr 90px auto; gap: 8px;
      margin-bottom: 14px;
    }
    .cpr-exception-form select,
    .cpr-exception-form input {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; padding: 8px 10px;
      color: var(--text-primary); font-size: 13px;
      font-family: inherit;
    }
    .cpr-exception-form input { font-family: var(--font-mono); text-align: center; }
    #cprExceptionsList { display: flex; flex-direction: column; gap: 4px; }
    .cpr-exception-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: var(--bg-card-hover); border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 13px;
    }
    .cpr-exception-row .ex-crime { font-weight: 500; }
    .cpr-exception-row .ex-sep { color: var(--text-dim); }
    .cpr-exception-row .ex-min {
      font-family: var(--font-mono); font-weight: 600;
      color: var(--primary);
    }
    .cpr-exception-row .ex-remove {
      margin-left: auto;
      background: none; border: 1px solid var(--border);
      color: var(--text-secondary);
      padding: 3px 8px; border-radius: 3px;
      cursor: pointer; font-size: 11px;
      font-family: inherit;
    }
    .cpr-exception-row .ex-remove:hover {
      color: #ff6b6b; border-color: #ff6b6b;
    }
    @media (max-width: 640px) {
      .cpr-level-grid { grid-template-columns: repeat(3, 1fr); }
      .cpr-exception-form { grid-template-columns: 1fr 1fr; }
      .cpr-exception-form input,
      .cpr-exception-form button { grid-column: span 1; }
    }

    /* ===== ITEM COMBOBOX (ported from competitions) ===== */
    .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;
    }

    /* ===== SET MIN LEVELS sub-tab ===== */
    .minlevels-form {
      display: grid; grid-template-columns: 1fr 100px auto; gap: 8px;
      margin-bottom: 14px; align-items: stretch;
    }
    .minlevels-form .combobox-wrapper input,
    .minlevels-form input.minlevels-qty {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; padding: 8px 10px;
      color: var(--text-primary); font-size: 13px;
      font-family: inherit; width: 100%;
    }
    .minlevels-form input.minlevels-qty {
      font-family: var(--font-mono); text-align: center;
    }
    #minLevelsList { display: flex; flex-direction: column; gap: 4px; }
    .minlevels-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: var(--bg-card-hover); border: 1px solid var(--border);
      border-radius: 4px; font-size: 13px;
    }
    .minlevels-row .ml-name { font-weight: 500; }
    .minlevels-row .ml-sep { color: var(--text-dim); }
    .minlevels-row .ml-qty {
      font-family: var(--font-mono); font-weight: 600;
      color: var(--primary);
    }
    .minlevels-row .ml-remove {
      margin-left: auto;
      background: none; border: 1px solid #ff6b6b;
      color: #ff6b6b;
      padding: 3px 8px; border-radius: 3px;
      cursor: pointer; font-size: 11px; font-family: inherit;
      transition: background 0.1s;
    }
    .minlevels-row .ml-remove:hover { background: rgba(255,107,107,0.1); }
    @media (max-width: 640px) {
      .minlevels-form { grid-template-columns: 1fr 1fr; }
      .minlevels-form button { grid-column: 1 / -1; }
    }

    /* ===== ARMORY TAB ===== */
    .armory-section-title {
      display: flex; align-items: center; gap: 10px;
      margin: 22px 0 10px;
      font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--text-secondary);
    }
    .armory-section-title::after { content:''; flex:1; height:1px; background: var(--border); }
    .armory-section-count {
      font-family: var(--font-mono); font-size: 10px;
      background: var(--bg-card); border: 1px solid var(--border);
      padding: 2px 6px; border-radius: 4px; color: var(--text-primary);
    }
    .armory-alert-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px; margin-bottom: 8px;
    }
    .armory-alert {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 12px 14px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .armory-alert.low-stock  { border-left: 3px solid #e8a04b; }
    .armory-alert.stale-loan { border-left: 3px solid #ff6b6b; }
    .armory-alert-head {
      display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    }
    .armory-alert-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
    .armory-alert-kind {
      font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
      font-family: var(--font-mono); color: var(--text-secondary);
    }
    .armory-alert.low-stock .armory-alert-kind  { color: #e8a04b; }
    .armory-alert.stale-loan .armory-alert-kind { color: #ff6b6b; }
    .armory-alert-detail { font-size: 12px; color: var(--text-secondary); }
    .armory-alert-detail b { color: var(--text-primary); font-family: var(--font-mono); }

    .armory-table-wrap {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .armory-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .armory-table th {
      background: var(--bg-card-hover);
      padding: 10px 14px; text-align: left;
      font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-secondary);
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .armory-table th.num { text-align: center; }
    .armory-table td {
      padding: 10px 14px; border-bottom: 1px solid var(--border);
      color: var(--text-primary);
    }
    .armory-table td.num { text-align: center; font-family: var(--font-mono); }
    .armory-table tr:last-child td { border-bottom: none; }
    .armory-table tr:hover td { background: var(--bg-card-hover); }
    .armory-table tr.low-stock td:first-child { box-shadow: inset 2px 0 0 #e8a04b; }
    .armory-type-pill {
      font-size: 10px; padding: 2px 7px; border-radius: 3px;
      letter-spacing: 0.06em; text-transform: uppercase;
      font-family: var(--font-mono);
      background: var(--bg-input); color: var(--text-secondary);
    }
    .armory-loanee-chip {
      display: inline-block; font-size: 11px;
      padding: 2px 7px; margin: 1px 3px 1px 0;
      background: var(--bg-input); border: 1px solid var(--bg-input);
      border-radius: 3px; color: var(--text-primary);
      text-decoration: none;
    }
    .armory-loanee-chip:hover { border-color: var(--text-dim); }
    .armory-loanee-chip.stale { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.06); color: #ff6b6b; }
    .armory-item-name a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
    .armory-item-name a:hover { text-decoration: underline; }
    .armory-min-cell { font-family: var(--font-mono); color: var(--text-dim); }
    .armory-min-cell.set { color: var(--text-primary); }
    .armory-item-type-mobile { display: none; }   /* desktop: type lives in its own column */
    .armory-table .avail-short { display: none; } /* desktop: "Available"; mobile: "Avail" */
    @media (max-width: 768px) {
      .armory-table th, .armory-table td { padding: 8px 10px; font-size: 12px; }
      .armory-table .avail-full  { display: none; }
      .armory-table .avail-short { display: inline; }
      /* Hide the Type column, surface the type as a small pill below the item name. */
      .armory-table th:nth-child(2),
      .armory-table td:nth-child(2) { display: none; }
      .armory-item-type-mobile {
        display: block; width: max-content; margin-top: 4px;
        font-size: 9px; padding: 1px 5px; border-radius: 3px;
        letter-spacing: 0.05em; text-transform: uppercase;
        font-family: var(--font-mono);
        background: var(--bg-input); color: var(--text-secondary);
      }
    }

    /* ===== ADMIN TAB ===== */
    .admin-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    @media (max-width: 1024px) { .admin-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px)  { .admin-grid { grid-template-columns: 1fr; } }
    .admin-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 16px;
    }
    .admin-card-title {
      font-size: 13px; font-weight: 600; color: var(--text-primary);
      margin-bottom: 6px;
    }
    .admin-card-desc {
      font-size: 12px; color: var(--text-secondary);
      line-height: 1.5; margin-bottom: 12px;
    }
    .btn {
      padding: 8px 14px;
      background: var(--primary); color: #0b0b0c;
      border: none; border-radius: var(--radius-sm);
      font-size: 12px; font-weight: 700; cursor: pointer;
      font-family: inherit; letter-spacing: 0.02em;
      transition: opacity 0.15s;
    }
    .btn:hover { opacity: 0.85; }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-outline {
      background: transparent; color: var(--primary);
      border: 1px solid var(--primary);
    }
    .btn-outline:hover { background: var(--primary); color: #0b0b0c; opacity: 1; }
    .form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .status-line {
      font-size: 11px; color: var(--text-dim); margin-top: 10px;
      font-family: var(--font-mono); min-height: 14px;
    }
    .status-grid {
      display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
      font-size: 12px; color: var(--text-secondary);
    }
    .status-grid b { color: var(--text-primary); font-family: var(--font-mono); }

    /* ===== AUTH OVERLAY (mirrors competitions/admin pattern) ===== */
    .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; }

    /* ===== SETTINGS PANEL (cog) — mirrors training/attacks ===== */
    .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); }
    .section-toggle { cursor: pointer; user-select: none; transition: color 0.15s; }
    .section-toggle:hover { color: var(--text-primary); }
    .section-toggle-chev {
      font-size: 16px; color: var(--text-dim);
      line-height: 1; transition: transform 0.2s;
    }
    .section-toggle.open .section-toggle-chev { transform: rotate(180deg); }
    .theme-switch {
      display: inline-flex;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }
    .theme-btn {
      background: transparent; border: none;
      padding: 8px 14px; font-size: 12px;
      color: var(--text-dim); cursor: pointer;
      transition: background 0.1s, color 0.1s;
      white-space: nowrap; font-family: inherit;
    }
    .theme-btn:hover { color: var(--text-primary); }
    .theme-btn.active { background: var(--bg-card-hover); color: var(--primary); }
    /* Dashboard Theme switch: lock the active label to the default lime so it
       doesn't re-tint when the user switches WMD brand colour via the icon picker. */
    #dashboardThemeSwitch .theme-btn.active { color: #d6e70f; }

    /* Icon-theme picker: one tile per WMD logo variant, click to set
       the brand accent colour. Same effect as cycling the header logo. */
    .icon-theme-picker {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .icon-theme-btn {
      width: 44px; height: 44px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 6px;
      cursor: pointer; font-family: inherit;
      transition: border-color 0.15s, transform 0.1s;
    }
    .icon-theme-btn img { width: 100%; height: 100%; object-fit: contain; }
    .icon-theme-btn:hover { border-color: var(--text-dim); transform: translateY(-1px); }
    .icon-theme-btn.active {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px var(--primary-soft);
    }
    .icon-theme-btn.active:hover { transform: none; }
    @media (max-width: 768px) {
      .icon-theme-picker { gap: 4px; flex-wrap: nowrap; }
      .icon-theme-btn { width: 36px; height: 36px; padding: 4px; }
    }
    @media (max-width: 480px) {
      .icon-theme-picker { gap: 3px; }
      .icon-theme-btn { width: 32px; height: 32px; padding: 3px; }
    }

    /* ===== TOAST NOTIFICATIONS — mirrors attacks 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) {
      .header { padding: 12px 14px; }
      .header-eyebrow { display: none; }   /* save horizontal space — burger + logo + title are the priorities */
      .controls { padding: 12px 14px; }
      .content { padding: 14px; }
    }
    @media (max-width: 480px) {
      .nav-tab { padding: 11px 11px; font-size: 11.5px; }
    }

    /* Modal — used by appPromptText() (and future appConfirm if we add one) */
    .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);
    }