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

    :root {
      color-scheme: only dark; /* opt out of Chrome's "Force Dark Mode" — this site is already dark */
      /* Primary — theme-cycled at runtime */
      --wmd-green: #d6e70f;
      --wmd-green-dim: #b0be0c;
      --wmd-green-glow: rgba(214, 231, 15, 0.15);
      --primary: #d6e70f;
      --primary-dim: #b0be0c;
      --primary-soft: rgba(214, 231, 15, 0.12);
      --primary-faint: rgba(214, 231, 15, 0.05);

      /* Surfaces */
      --bg-dark: #0b0b0c;
      --bg-card: #101012;
      --bg-card-hover: #161618;
      --bg-input: #1c1c1f;
      --border: #1f1f23;
      --border-mid: #252529;
      --border-subtle: #1a1a1d;
      --border-strong: #2a2a30;

      /* Text */
      --text-primary: #F1F3F5;
      --text-secondary: #a0a0a8;
      --text-muted: #5a5a60;
      --text-dim: #7a7a82;

      /* Accents */
      --red: #FF6B6B;
      --orange: #FFA94D;
      --blue: #4DABF7;
      --teal: #20C997;
      --positive: #69DB7C;
      --gold: #FFD43B;
      --silver: #CED4DA;
      --bronze: #E8590C;
      --cf-green: #c8dd8a;
      --cf-red: #f4cccc;

      /* Radii */
      --radius: 8px;
      --radius-sm: 6px;

      /* Fonts */
      --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;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* Thin dark scrollbars matching the page theme. Applies to the page-level
       scrollbar that's always present when content extends beyond the viewport. */
    html {
      scrollbar-width: thin;
      scrollbar-color: var(--border) var(--bg-dark);
    }
    html::-webkit-scrollbar { width: 8px; height: 8px; }
    html::-webkit-scrollbar-track { background: var(--bg-dark); }
    html::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    html::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* ===== Navy theme variant — toggled via Settings ===== */
    /* Selected via body.theme-navy; default dark mode is unclassed.       */
    /* Persisted under localStorage["dashboard_theme"] ("dark" | "navy").  */
    /* All other vars (text, brand cycle, fixed accents bar --blue) stay   */
    /* identical to dark mode; only surfaces shift and --blue opens its    */
    /* hue gap so it doesn't muddy with the navy hue family.               */
    body.theme-navy {
      --bg-dark:        #08111f;
      --bg-card:        #0c1828;
      --bg-card-hover:  #122036;
      --bg-input:       #182846;
      --border:         #1e2e4e;
      --border-mid:     #1e2e4e;   /* keep navy tint on cards (same as --border in navy) */
      --border-strong:  #2a3b60;
      --blue:           #5dc4fb;
    }
    /* Spies table rows use --bg-input as a row background — which in navy is
       the brightest surface (intended for form fields) and makes rows pop
       too hard. Override to --bg-card (panel surface) so rows blend with
       the panel and the hover-lift still reads. Targets and Full Spies
       tables share the same generic #panel-spies td rule. */
    body.theme-navy #panel-spies td { background: var(--bg-card); }

    /* ===== 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; border: none; background: transparent;
      cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
    }
    .header-logo img { width: 26px; height: 26px; object-fit: contain; }
    /* 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; }
    .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; } }

    .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 TABS ===== */
    .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-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); }
    .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;
    }
    .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.
       Scoped via #dashboardThemeSwitch so Summary Table Theme stays unaffected. */
    #dashboardThemeSwitch .theme-btn.active { color: #d6e70f; }

    /* Icon-theme picker: one tile per WMD logo variant, click to set
       the brand accent colour. Mirrors the header-logo click-cycle. */
    .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 rgba(255,255,255,0.06);
    }
    .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; }
    }
    .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; font-family: inherit; background: transparent; border-top: none; border-left: none; border-right: 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); }

    /* ===== CONTROLS BAR ===== */
    .controls {
      padding: 14px 24px; display: flex; gap: 12px; align-items: center;
      flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle); background: var(--bg-dark);
    }
    .control-group { display: flex; align-items: center; gap: 8px; }
    .control-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; }

    .active-war-label { display: inline-flex; align-items: baseline; gap: 10px; }
    .active-war-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
    .active-war-name { font-size: 14px; font-weight: 600; color: var(--primary); letter-spacing: -0.005em; }
    .last-atk-pill {
      display: inline-flex; align-items: center; gap: 8px;
    }
    .last-atk-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--primary); box-shadow: 0 0 6px var(--primary);
    }
    .last-atk-info {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .last-atk-label {
      font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 500;
    }
    #lastAtkText {
      font-size: 10px; letter-spacing: 0.08em;
      color: var(--text-dim);
    }
    .sub-controls {
      display: flex; align-items: center; gap: 14px;
      margin: 18px 0 12px; flex-wrap: wrap;
    }
    .context-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
    .context-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); }
    .context-pill .dot-inactive { background: var(--text-muted); box-shadow: none; }

    select, input[type="date"], input[type="datetime-local"], input[type="text"], input[type="number"] {
      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); box-shadow: 0 0 0 3px var(--primary-soft); }

    .btn {
      background: var(--primary); color: #0b0b0c; border: 1px solid transparent;
      padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
      cursor: pointer; letter-spacing: 0.04em; transition: all 0.12s;
      font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
    }
    .btn:hover { background: var(--primary-dim); }
    .btn:active { transform: translateY(1px); }
    .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
    .btn-outline:hover { background: var(--primary-soft); }
    .btn-small { padding: 5px 10px; font-size: 11px; }
    .btn-danger { background: var(--red); color: #fff; }
    .btn-danger:hover { filter: brightness(1.1); }
    .btn-secondary { background: var(--bg-card-hover); color: var(--text-primary); border: 1px solid var(--border); }
    .btn-secondary:hover { background: #1c1c1f; border-color: var(--border-strong); }
    .btn-sm { padding: 5px 10px; font-size: 11px; }

    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .card-body { padding: 14px 16px; }
    .field { display: flex; flex-direction: column; gap: 6px; }
    .field-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
    .search-input { position: relative; }
    .search-input input { padding-left: 32px; width: 100%; box-sizing: border-box; }
    .search-input::before {
      content: '⌕'; position: absolute; left: 10px; top: 50%;
      transform: translateY(-50%); color: var(--text-muted); font-size: 14px;
    }
    .check {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-secondary); cursor: pointer;
      padding: 8px 12px; border-radius: var(--radius-sm);
      background: var(--bg-input); border: 1px solid var(--border);
      transition: border-color .12s;
      height: min-content; align-self: flex-end;
    }
    .check:hover { border-color: var(--border-strong); }

    .chip {
      display: inline-flex; align-items: center;
      font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.06em;
      text-transform: uppercase; font-weight: 500;
      padding: 3px 8px; border-radius: 999px;
      background: #1c1c1f; color: var(--text-dim);
      white-space: nowrap;
    }
    .chip-pos { background: rgba(105, 219, 124, 0.10); color: var(--positive); }
    .chip-neg { background: rgba(255, 107, 107, 0.10); color: var(--red); }
    .chip-warn { background: rgba(255, 169, 77, 0.10); color: var(--orange); }
    .chip-info { background: rgba(77, 171, 247, 0.10); color: var(--blue); }
    .chip-gold { background: rgba(255, 212, 59, 0.10); color: var(--gold); }
    .check input[type="checkbox"] {
      accent-color: var(--primary); width: 14px; height: 14px;
      cursor: pointer; appearance: auto;
    }

    /* ===== CHECKBOX ===== */
    .checkbox-group { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--text-secondary); }
    .checkbox-group input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; }

    /* ===== MAIN CONTENT ===== */
    .content { padding: 22px 24px; max-width: 100%; margin: 0 auto; }
    .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 ===== */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    .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-accent::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 2px; background: var(--primary);
    }
    .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;
    }
    .kpi-dual {
      display: flex; gap: 16px; margin-top: 6px;
    }
    .kpi-dual-item { display: flex; flex-direction: column; }
    .kpi-dual-value {
      font-family: var(--font-sans);
      font-size: 24px; font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
    .kpi-dual-sep {
      width: 1px; background: var(--border); align-self: stretch;
    }
    .kpi-dual-sub {
      font-size: 9px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-muted);
      font-weight: 500; margin-top: 2px;
    }
    .kpi-sub {
      font-size: 11px; color: var(--text-dim); margin-top: auto; padding-top: 4px;
    }

    /* ===== SUMMARY TABLE ===== */
    /* Default: dot separator visible, bar hidden — flipped on mobile via media query */
    #rosterTrackingMeta .meta-sep-bar { display: none; }
    .summary-table-wrap {
      background: var(--bg-card);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      overflow: auto;
      max-height: 85vh;
      scrollbar-width: thin;
      scrollbar-color: var(--border-strong) transparent;
      overscroll-behavior: none;
    }
    .summary-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
    .summary-table-wrap::-webkit-scrollbar-track { background: transparent; }
    .summary-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

    #summaryTable { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
    #summaryTable th {
      text-align: center; padding: 7px 10px; background: var(--bg-card);
      color: var(--text-secondary); font-size: 10px; text-transform: uppercase;
      letter-spacing: 0.1em; font-weight: 600;
      border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
      position: sticky; top: -1px; z-index: 2; cursor: pointer; user-select: none;
    }
    #summaryTable th:hover { color: var(--text-primary); }
    #summaryTable td {
      padding: 6px 10px; border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border); text-align: center;
      font-variant-numeric: tabular-nums;
    }
    #summaryTable tr:hover td { background: rgba(255,255,255,0.018); }

    /* Section header row */
    .section-header-row th {
      background: var(--bg-input); color: var(--text-muted);
      font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
      padding: 5px 10px; border-bottom: 1px solid var(--border-strong);
      top: 0; z-index: 3;
    }
    .section-header-row th:nth-child(1),
    .section-header-row th:nth-child(2),
    .section-header-row th:nth-child(3) { background: var(--bg-input); z-index: 7; }
    #summaryTable thead tr:nth-child(2) th { background: var(--bg-card); top: calc(var(--section-row-h, 0px) - 2px); }

    /* Sticky columns: 1=Rank, 2=Name, 3=Status */
    #summaryTable td:nth-child(1), #summaryTable th:nth-child(1) {
      position: sticky; left: 0; z-index: 4; background: var(--bg-card);
      text-align: center; min-width: 30px; max-width: 30px;
      font-family: var(--font-mono); color: var(--text-dim);
      border-bottom-color: var(--border);
    }
    #summaryTable thead th:nth-child(1) { z-index: 5; color: var(--text-secondary); }

    #summaryTable td:nth-child(2), #summaryTable th:nth-child(2) {
      position: sticky; left: 0; z-index: 5; background: var(--bg-card);
      text-align: left; font-weight: 500; color: var(--text-primary);
      white-space: nowrap;
      box-shadow: 1px 0 0 var(--border-strong);
      border-bottom-color: var(--border);
    }
    #summaryTable thead th:nth-child(2) { z-index: 6; color: var(--text-secondary); font-weight: 600; }

    /* Status column (3rd, after name) — sticky when visible */
    #summaryTable td:nth-child(3), #summaryTable th:nth-child(3) {
      position: sticky; left: 0; z-index: 4; background: var(--bg-card);
      text-align: center;
      min-width: 80px;
      box-shadow: 1px 0 0 var(--border-strong);
      border-bottom-color: var(--border);
    }
    #summaryTable thead th:nth-child(3) { z-index: 5; }

    #summaryTable tr:hover td:nth-child(1),
    #summaryTable tr:hover td:nth-child(2),
    #summaryTable tr:hover td:nth-child(3) { background: var(--bg-card-hover); }

    /* Self-highlight row */
    #summaryTable .is-self td { background: var(--primary-faint); }
    /* Sticky columns (rank/name/status) need a solid base underneath the
       highlight tint so the rest of the table doesn't show through when the
       user side-scrolls past them. Stacks linear-gradient(tint) on bg-card. */
    #summaryTable .is-self td:nth-child(1),
    #summaryTable .is-self td:nth-child(2),
    #summaryTable .is-self td:nth-child(3) {
      background: linear-gradient(var(--primary-soft), var(--primary-soft)), var(--bg-card);
    }
    #summaryTable .is-self td:nth-child(1) { box-shadow: inset 2px 0 0 var(--primary); }
    #summaryTable .is-self td:nth-child(n+3) { font-weight: 600; }
    #summaryTable .is-self td:nth-child(3).col-status { font-weight: inherit; }

    /* Rank column styling */
    .rank-cell { color: var(--text-dim); font-size: 11px; font-family: var(--font-mono); }

    /* Status tag */
    .status-tag {
      display: inline-block; font-family: var(--font-mono);
      font-size: 8px; font-weight: 500; letter-spacing: 0.06em;
      text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
      background: #3a3a42; border: 1px solid #4a4a52; color: #d6d6dc;
      white-space: nowrap;
    }

    /* Hide status column by default */
    .hide-status .col-status { display: none; }

    /* Section divider columns */
    .section-start { border-left: 1px solid var(--border-strong); }

    /* ===== TABLES (generic) ===== */
    .table-wrap {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: auto; max-height: 100vh;
      scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
    }
    .table-wrap::-webkit-scrollbar { width: 8px; }
    .table-wrap::-webkit-scrollbar-track { background: transparent; }
    .table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
    table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
    th {
      text-align: left; padding: 10px 14px; background: var(--bg-card);
      color: var(--text-secondary); font-size: 10px; letter-spacing: 0.14em;
      text-transform: uppercase; font-weight: 600;
      border-bottom: 1px solid var(--border);
      position: sticky; top: -1px; z-index: 1; cursor: pointer;
      white-space: nowrap; user-select: none;
    }
    th:hover { color: var(--text-primary); }
    td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
    tr:hover td { background: rgba(255,255,255,0.018); }

    /* Spies table */
    /* Spies sub-nav tabs — pill style, slightly tighter than admin-subnav since they sit inside the controls bar */
    .spy-subnav-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;
    }
    .spy-subnav-tab:hover { color: var(--text-primary); background: var(--bg-input); }
    .spy-subnav-tab.active { color: var(--primary); background: var(--primary-soft); }

    /* Spies sub-sections (Targets vs Full Spies) inside #panel-spies */
    .spy-section { display: none; }
    .spy-section.active { display: block; }

    /* Targets table */
    .targets-meta { margin-bottom: 12px; }
    /* Structured info grid (replaces the long sentence summary) */
    .targets-info-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
    }
    .info-cell { padding: 10px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
    .info-cell:last-child { border-right: none; }
    .info-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
    .info-val { font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
    .info-sub { color: var(--text-secondary); font-weight: 400; font-size: 11px; }
    .info-note { font-size: 9px; color: var(--text-muted); font-weight: 400; margin-top: 1px; }
    .info-note .note-short { display: none; }
    /* Click-to-edit cap value — subtle: pointer cursor + slight hover tint, no underline */
    .info-cap-edit { cursor: pointer; transition: color 0.15s; }
    .info-cap-edit:hover { color: var(--primary); }
    .info-cap-input,
    .info-ff-select {
      font-size: 18px; font-weight: 700; font-family: var(--font-sans);
      background: var(--bg-input); border: 1px solid var(--primary);
      border-radius: 4px; padding: 1px 4px;
      color: var(--text-primary);
      width: 70px; text-align: center;
      font-variant-numeric: tabular-nums;
      outline: none;
    }
    .info-ff-select { width: 60px; cursor: pointer; }
    .info-ff-select option { font-size: 13px; font-weight: 500; }
    .targets-est-note { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
    .targets-est-note .est-tag { background: var(--primary-soft); color: var(--primary); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; margin-right: 4px; vertical-align: 1px; }
    /* The word "distribution" lives in its own span so we can hide it on
       mobile to keep the note tight. Desktop reads in full. */
    @media (max-width: 768px) { .targets-est-note-full { display: none; } }
    /* Mobile: keep all four cells on a single row, shrink padding + fonts to fit */
    @media (max-width: 768px) {
      .info-cell { padding: 8px 6px; align-items: center; text-align: center; }
      .info-val { font-size: 14px; }
      .info-label { font-size: 8px; letter-spacing: 0.04em; }
      .info-note { font-size: clamp(5.5px, 1.75vw, 8px); white-space: nowrap; letter-spacing: -0.01em; }
      .info-note .note-full { display: none; }
      .info-note .note-short { display: inline; }
    }
    /* border-collapse: separate is required for position: sticky on <th> to work reliably on table elements (collapsed-borders break sticky in many browsers) */
    .targets-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
    /* Sticky header — selector includes #panel-spies to beat the generic #panel-spies th rule's specificity. top:-1px + box-shadow (instead of border-bottom) avoids the 1px subpixel bleed during scroll. Background + colour intentionally inherit the original #panel-spies th look. */
    #panel-spies .targets-table th { padding: 8px 10px; text-align: center; background: var(--bg-dark); color: #fff; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: none; box-shadow: inset 0 -1px 0 var(--border); position: sticky; top: -1px; z-index: 2; }
    /* Pin the wrap to fill the available viewport. Combined with overflow:auto, all scrolling happens INSIDE the wrap so the sticky header is always anchored to the visible top. */
    #spy-section-targets .table-wrap { height: calc(100vh - 260px); max-height: none; min-height: 320px; }
    .targets-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
    .targets-table tr:hover td { background: var(--bg-card-hover); }
    .targets-col-icon { width: 40px; padding-right: 0 !important; }
    /* Three narrow numeric columns (Lvl, FF, Total) — fluid percentage width with a sensible floor for mobile, centred so the values line up vertically */
    .targets-col-lvl,
    .targets-col-num {
      width: 9%;
      min-width: 52px;
      text-align: center !important;
    }
    .targets-col-lvl { color: var(--text-secondary); }
    /* Lvl / FF / Total body cells — promote colour from the panel-wide
       #panel-spies td muted default to secondary so the values stay readable.
       Selector specificity bumped (#panel-spies + class chain) to beat that
       rule's id-level specificity. */
    #panel-spies .targets-table td.targets-col-lvl,
    #panel-spies .targets-table td.targets-col-num { text-align: center; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
    /* Per-stat % columns (one per stat, replacing the old single Distribution col) and per-stat value columns */
    .targets-col-pct,
    .targets-col-stat {
      text-align: center !important;
      font-variant-numeric: tabular-nums;
    }
    .targets-table td.targets-col-pct,
    .targets-table td.targets-col-stat { text-align: center; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
    .targets-table td.targets-col-stat.stat-max { color: var(--text-secondary); font-weight: 700; }
    /* Hide pct + value cols on mobile to keep the table compact */
    @media (max-width: 768px) {
      .targets-col-stat { display: none; }
      /* FF cell carries an "EST" tag in all-est mode — force single line so
         the tag sits beside the value (3.0 EST) instead of wrapping under it.
         The auto-layout will grow the column to fit. */
      .targets-table td.targets-col-num.targets-ff { white-space: nowrap; }
    }
    /* Desktop: equal-width columns for everything except Member/Icon */
    @media (min-width: 769px) {
      .targets-table { table-layout: fixed; }
      .targets-col-lvl,
      .targets-col-num,
      .targets-col-pct,
      .targets-col-stat { width: 8%; }
    }
    .targets-col-dist { text-align: left; }
    .targets-table td.targets-col-num { text-align: right; }
    .targets-icon-link { display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.15s; color: var(--primary); }
    .targets-icon-link:hover { opacity: 1; }
    .targets-icon-link svg { width: 24px; height: 24px; fill: currentColor; }
    .targets-name { font-weight: 600; color: var(--text-primary); }
    .est-tag { background: var(--primary-soft); color: var(--primary); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; vertical-align: 1px; }
    .targets-name .est-tag { margin-left: 6px; }
    /* When every opponent is an estimate, the pct + stat cells render as
       em-dashes (handled in the JS row template). On desktop we keep those
       cols visible so the layout stays stable regardless of data state; the
       muted em-dashes telegraph the missing data without disrupting widths.
       On mobile, hide the pct cols to save horizontal space (stat is already
       hidden on mobile by the general .targets-col-stat rule above). */
    @media (max-width: 768px) {
      #spy-section-targets.all-est .targets-col-pct { display: none; }
    }
    #spiesEnemyTable.all-est td:nth-child(n+5):nth-child(-n+8),
    #spiesEnemyTable.all-est th:nth-child(n+5):nth-child(-n+8) { display: none; }
    .targets-ff { font-weight: 600; }
    /* Pill base — applies to standalone pills inside each .targets-col-pct cell */
    .dist-pct { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 4px; background: var(--bg-input); font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); }
    .dist-pct.dominant { font-weight: 700; }
    /* Header row mirrors pill spacing so STR/DEF/SPD/DEX columns align perfectly with the pills below */
    .targets-dist-head { display: inline-flex; gap: 4px; }
    .dist-head { min-width: 38px; text-align: center; padding: 2px 6px; font-weight: 700; font-family: var(--font-sans); font-size: 12px; }
    /* Per-stat colour coding — header labels always coloured; pills only colour when dominant, otherwise grey */
    .dist-head.str { color: var(--red); }
    .dist-head.def { color: var(--blue); }
    .dist-head.spd { color: var(--positive); }
    .dist-head.dex { color: var(--gold); }
    .dist-pct.dominant.str { color: var(--red); background: rgba(255,107,107,0.15); }
    .dist-pct.dominant.def { color: var(--blue); background: rgba(77,171,247,0.15); }
    .dist-pct.dominant.spd { color: var(--positive); background: rgba(105,219,124,0.15); }
    .dist-pct.dominant.dex { color: var(--gold); background: rgba(255,212,59,0.15); }
    /* Coloured % column headers only. Scoped under #panel-spies to beat the existing #panel-spies th rule's ID specificity. */
    #panel-spies th.targets-col-pct.str { color: var(--red); }
    #panel-spies th.targets-col-pct.def { color: var(--blue); }
    #panel-spies th.targets-col-pct.spd { color: var(--positive); }
    #panel-spies th.targets-col-pct.dex { color: var(--gold); }

    #panel-spies table { font-size: 12px; border-collapse: collapse; width: 100%; }
    #panel-spies th { padding: 6px 8px; text-align: center; background: var(--bg-dark); color: #fff; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
    #panel-spies th.spy-section-enemy { background: var(--bg-input); color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; border-bottom: 2px solid var(--red); }
    #panel-spies th.spy-section-wmd { background: var(--bg-input); color: #d6e70f; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; border-bottom: 2px solid #d6e70f; }
    #panel-spies td { padding: 5px 8px; text-align: center; font-variant-numeric: tabular-nums; background: var(--bg-input); color: var(--text-muted); border-bottom: 1px solid var(--border); }
    .spy-tables { display: flex; gap: 10px; }
    .spy-tables .table-wrap { flex: 1; min-width: 0; }
    @media (max-width: 900px) { .spy-tables { flex-direction: column; } }
    #panel-spies td.spy-link { width: 20px; padding: 5px 4px; border-bottom: 1px solid var(--border); background: transparent; }
    #panel-spies td.spy-link a { text-decoration: none; font-size: 11px; opacity: 0.6; transition: opacity 0.15s; }
    #panel-spies td.spy-link a:hover { opacity: 1; }
    #panel-spies td.spy-name { text-align: left; font-weight: 600; }
    #panel-spies td.spy-total { font-weight: 700; }
    #panel-spies td.spy-t1 { color: #d53e4f !important; }
    #panel-spies td.spy-t2 { color: #fd6941 !important; }
    #panel-spies td.spy-t3 { color: #fdac6b !important; }
    #panel-spies td.spy-t4 { color: #f7db87 !important; }
    #panel-spies td.spy-t5 { color: #e2f896 !important; }
    #panel-spies td.spy-t6 { color: #abdea3 !important; }
    #panel-spies td.spy-t7 { color: #65c2a5 !important; }
    #panel-spies td.spy-t8 { color: #77b6e1 !important; }
    .spy-legend { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; align-items: center; }
    .spy-legend-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; margin-right: 6px; font-weight: 600; letter-spacing: 0.02em; }
    .spy-legend-item {
      flex: 1; text-align: center; padding: 6px 2px; font-size: 11px; font-weight: 600;
      color: #111; border-radius: 4px; cursor: pointer; user-select: none;
      transition: opacity 0.15s; min-width: 0;
    }
    .spy-legend-item.off { opacity: 0.25; }
    @media (max-width: 900px) {
      .spy-legend { gap: 2px; }
      .spy-legend-label { flex: 0 0 100%; margin-right: 0; margin-bottom: 4px; }
      .spy-legend-item { font-size: 9px; padding: 2px 1px; line-height: 1.2; height: 32px; display: flex; align-items: center; justify-content: center; }
    }

    .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); }

    /* ===== LOADING ===== */
    .loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-secondary); gap: 12px; }
    .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ===== ADMIN ===== */
    .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; }
    .admin-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; flex-wrap: wrap; }
    .admin-field { display: flex; flex-direction: column; gap: 6px; }
    .admin-field label {
      font-size: 10px; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.16em; font-weight: 500;
    }

    /* ===== TIMEZONE GRID ===== */
    .tz-grid-wrap {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: auto;
      max-height: calc(100vh - 220px);
    }
    .tz-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
    .tz-grid th, .tz-grid td {
      padding: 6px 4px; text-align: center;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .tz-grid thead th {
      background: var(--bg-dark); color: #fff;
      font-weight: 600; font-size: 10px;
      text-transform: uppercase; letter-spacing: 0.04em;
      position: sticky; top: -1px; z-index: 3;
    }
    .tz-grid th.tz-name-col, .tz-grid td.tz-name-col {
      text-align: left; padding: 6px 12px;
      position: sticky; left: -1px;
      background: var(--bg-card); z-index: 2;
      min-width: 140px; max-width: 200px;
      font-weight: 600; color: var(--text-primary);
    }
    .tz-grid thead th.tz-name-col { background: var(--bg-dark); z-index: 4; }
    /* Row carries the hatch as a continuous strip across the row's full
       width; "awake" cells override with an opaque background that masks
       the gradient; "unavailable" cells stay transparent so the row's
       hatch shows through, giving the appearance of one unbroken pattern
       across consecutive unavailable cells. */
    .tz-grid tbody tr {
      background-image: repeating-linear-gradient(
        45deg,
        rgba(95, 145, 200, 0.20),
        rgba(95, 145, 200, 0.20) 3px,
        rgba(95, 145, 200, 0.45) 3px,
        rgba(95, 145, 200, 0.45) 6px
      );
    }
    .tz-grid td { background-color: var(--bg-card); width: calc((100% - 160px) / 24); }
    .tz-grid td.tz-unavailable { background-color: transparent; background-image: none; }
    /* Body cells need `position: relative` for the pseudo-element to anchor.
       Header cells keep their inherited `position: sticky` from
       `.tz-grid thead th` — sticky already creates a positioning context
       for absolute children, so the ::before still anchors correctly. */
    .tz-grid td.tz-now { position: relative; }
    .tz-grid td.tz-now::before,
    .tz-grid th.tz-now::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 2px;
      height: 100%;
      background: var(--primary);
      pointer-events: none;
    }
    .tz-grid tr.tz-no-data { opacity: 0.45; }
    .tz-grid tr.tz-no-data td.tz-name-col { color: var(--text-secondary); font-style: italic; font-weight: 500; }
    .tz-grid tbody tr:hover td { background-color: var(--bg-card-hover, rgba(255,255,255,0.04)); }
    .tz-grid tbody tr:hover td.tz-unavailable { background-color: transparent; }
    @media (max-width: 768px) {
      /* Shorter status-line wording on narrow screens */
      .tz-status-extra { display: none; }
      .tz-grid { font-size: 10px; }
      .tz-grid th, .tz-grid td {
        padding: 5px 2px;
        min-width: 26px;             /* hour cells stay readable; table will scroll horizontally */
        width: 26px;
      }
      .tz-grid th.tz-name-col, .tz-grid td.tz-name-col {
        padding: 5px 8px;
        min-width: 100px; max-width: 120px;
        width: auto;
        font-size: 10px;
      }
      .tz-grid thead th { font-size: 10px; padding: 5px 2px; }
    }

    /* ===== WAR PAYROLL ===== */
    .pr-view-toggle {
      display: inline-flex; gap: 3px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 3px;
      margin-bottom: 14px;
    }
    .pr-view-toggle-btn {
      padding: 6px 14px; font-size: 12px; font-weight: 600;
      background: transparent; border: none;
      color: var(--text-secondary); cursor: pointer;
      border-radius: 4px;
      font-family: inherit;
    }
    .pr-view-toggle-btn:hover:not(.active) { color: var(--text-primary); }
    .pr-view-toggle-btn.active {
      background: var(--primary-soft);
      color: var(--primary);
    }

    .pr-member-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 14px;
    }
    .pr-member-summary-row {
      display: flex; flex-direction: column; gap: 2px;
      padding: 6px 10px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .pr-member-summary-row span {
      font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-secondary);
      font-weight: 600;
    }
    .pr-member-summary-row strong {
      color: var(--text-primary); font-weight: 600; font-size: 13px;
      font-variant-numeric: tabular-nums;
    }
    .pr-member-summary-pool { border-color: var(--gold, #FFD43B); }
    .pr-member-summary-pool strong { color: var(--gold, #FFD43B); }
    .pr-member-summary-final { border-color: var(--positive, #69DB7C); }
    .pr-member-summary-final strong { color: var(--positive, #69DB7C); }

    /* Highlight the viewer's own row in the finalised payroll table — same
       pattern as the attack summary's is-self treatment. Scoped to the
       finalised wrap so the editable war-payroll page is unaffected. */
    #finalisedPayrollTableWrap tr.is-self td { background: var(--primary-soft); }
    #finalisedPayrollTableWrap tr.is-self td.pr-name { box-shadow: inset 2px 0 0 var(--primary); }

    .payroll-view-member .pr-pay,
    .payroll-view-member .pr-pay-th,
    .payroll-view-member .pr-col-exception { display: none; }
    .payroll-view-member .pr-cell-edit {
      cursor: default; pointer-events: none;
      border-color: transparent !important;
      background: transparent !important;
    }

    .pr-war-bar {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 16px;
      margin-bottom: 14px;
    }
    .pr-war-bar label {
      font-size: 10px; color: var(--text-secondary);
      text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
    }
    .pr-war-bar select {
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 6px;
      padding: 7px 10px; font-family: inherit; font-size: 13px;
    }
    .pr-war-bar select:focus { outline: none; border-color: var(--primary); }
    .pr-type-toggle {
      display: inline-flex; gap: 3px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px;
    }
    .pr-type-toggle .pr-view-toggle-btn { padding: 4px 10px; font-size: 11px; }
    .payroll-view-member .pr-type-label,
    .payroll-view-member .pr-type-toggle { display: none; }
    .pr-save-btn {
      padding: 7px 16px; font-family: inherit; font-size: 12px; font-weight: 600;
      background: var(--primary); color: var(--bg-card);
      border: none; border-radius: 6px; cursor: pointer;
    }
    .pr-save-btn:hover:not(:disabled) { filter: brightness(1.1); }
    .pr-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .payroll-view-member .pr-save-btn { display: none; }
    .pr-finalise-btn, .pr-unfinalise-btn {
      padding: 7px 16px; font-family: inherit; font-size: 12px; font-weight: 600;
      background: var(--positive, #69DB7C); color: var(--bg-card);
      border: none; border-radius: 6px; cursor: pointer;
    }
    .pr-unfinalise-btn {
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--border);
    }
    .pr-finalise-btn:hover:not(:disabled),
    .pr-unfinalise-btn:hover:not(:disabled) { filter: brightness(1.1); }
    .pr-finalise-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .payroll-view-member .pr-finalise-btn,
    .payroll-view-member .pr-unfinalise-btn,
    .payroll-view-member .pr-finalised-badge { display: none !important; }
    .pr-finalised-badge {
      padding: 6px 12px; font-size: 11px; font-weight: 600;
      background: rgba(105, 219, 124, 0.12);
      border: 1px solid var(--positive, #69DB7C);
      color: var(--positive, #69DB7C);
      border-radius: 6px;
    }
    /* Read-only mode applied when payroll status='finalised' */
    .pr-finalised .pr-pool-field input,
    .pr-finalised .pr-pool-field select { opacity: 0.6; pointer-events: none; }
    .pr-finalised .pr-pool-toggle { pointer-events: none; }
    .pr-finalised .pr-cell-edit { pointer-events: none; opacity: 0.85; }
    .pr-finalised .pr-pay input[type="checkbox"] { pointer-events: none; opacity: 0.5; }
    .pr-finalised #payrollTypeToggle { pointer-events: none; opacity: 0.6; }
    .pr-denied-block { display: none; padding: 24px 16px; max-width: 480px; margin: 24px auto; text-align: center; }
    .pr-denied-block h2 { font-size: 18px; color: var(--red); margin-bottom: 8px; }
    .pr-denied-block p  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0; }
    #panel-adminpayroll.access-denied .pr-denied-block { display: block; }
    #panel-adminpayroll.access-denied > *:not(.pr-denied-block) { display: none !important; }

    .pr-toggle-row {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 14px;
    }
    .pr-toggle-row .pr-view-toggle { margin-bottom: 0; }
    .pr-last-saved {
      margin-left: auto;
      font-size: 11px; color: var(--positive, #69DB7C); font-weight: 600;
    }
    .payroll-view-member .pr-last-saved { display: none; }
    .pr-refresh-banner {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px;
      background: rgba(105, 219, 124, 0.08);
      border: 1px solid var(--positive, #69DB7C);
      border-radius: var(--radius);
      margin-bottom: 14px;
      font-size: 12px; color: var(--text-primary);
    }
    .pr-refresh-banner button {
      padding: 6px 14px; font-family: inherit; font-size: 11px; font-weight: 600;
      background: var(--positive, #69DB7C); color: var(--bg-card);
      border: none; border-radius: 4px; cursor: pointer;
    }
    .pr-refresh-banner button:hover { filter: brightness(1.05); }
    .pr-refresh-banner .pr-banner-dismiss {
      margin-left: auto;
      background: transparent; color: var(--text-secondary);
      padding: 2px 8px; font-size: 16px; line-height: 1;
    }
    .pr-refresh-banner .pr-banner-dismiss:hover { color: var(--text-primary); }
    .payroll-view-member .pr-refresh-banner { display: none !important; }
    .pr-conflict-modal {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
    }
    .pr-conflict-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px 24px;
      max-width: 460px; width: 90%;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }
    .pr-conflict-title {
      font-size: 15px; font-weight: 700; color: var(--text-primary);
      margin-bottom: 10px;
    }
    .pr-conflict-msg {
      font-size: 13px; color: var(--text-secondary);
      margin-bottom: 18px; line-height: 1.5;
    }
    .pr-conflict-actions {
      display: flex; gap: 8px; justify-content: flex-end;
    }
    .pr-conflict-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;
    }
    .pr-conflict-actions button:hover { filter: brightness(1.1); }
    .pr-conflict-actions .pr-conflict-primary {
      background: var(--positive, #69DB7C); color: var(--bg-card);
      border-color: var(--positive, #69DB7C);
    }
    .pr-label-check {
      display: inline-flex; align-items: center; gap: 4px;
      white-space: nowrap;
    }
    .pr-label-check input[type="checkbox"] {
      margin: 0; cursor: pointer; flex-shrink: 0;
    }
    .pr-war-hit .pr-col-r,
    .pr-war-hit .pr-respect-only,
    .pr-war-respect .pr-col-points { display: none; }

    .pr-pool-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
      margin-bottom: 16px;
    }
    /* Collapsible header — button styled to match section-header */
    .pr-pool-toggle {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; gap: 12px;
      background: transparent; border: none; padding: 0;
      color: var(--text-secondary); cursor: pointer;
      /* Keep section-header typography — font:inherit was nuking the 13px size */
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: left;
      margin-bottom: 14px;
    }
    .pr-pool-toggle:hover .pr-pool-chevron { color: var(--primary); }
    .pr-pool-chevron {
      font-size: 14px; color: var(--text-muted);
      transition: transform 0.15s, color 0.15s;
      flex: 0 0 auto;
    }
    .pr-pool-card.collapsed .pr-pool-body { display: none; }
    .pr-pool-card.collapsed .pr-pool-toggle { margin-bottom: 0; }
    .pr-pool-card.collapsed .pr-pool-chevron { transform: rotate(-90deg); }
    .pr-pool-card.collapsed { padding-top: 14px; padding-bottom: 14px; }
    /* Faction Stats collapsible header (Payout History admin overview) */
    .fs-toggle {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      background: transparent; border: none; padding: 0;
      color: var(--text-secondary); cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: left;
      margin-bottom: 12px;
    }
    .fs-toggle:hover .fs-chevron { color: var(--primary); }
    .fs-line { flex: 1; height: 1px; background: var(--border); }
    .fs-chevron {
      font-size: 14px; color: var(--text-muted);
      transition: transform 0.15s, color 0.15s;
      flex: 0 0 auto;
    }
    #payoutOverview .fs-body { display: flex; gap: 14px; flex-wrap: wrap; }
    #payoutOverview.collapsed .fs-body { display: none; }
    #payoutOverview.collapsed .fs-toggle { margin-bottom: 0; }
    #payoutOverview.collapsed .fs-chevron { transform: rotate(-90deg); }
    .pr-pool-inputs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }
    .pr-pool-field { display: flex; flex-direction: column; gap: 6px; }
    .pr-pool-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pr-war-hit .pr-pool-field-pair { display: contents; }
    .pr-pool-field label {
      font-size: 10px; color: var(--text-secondary); text-transform: uppercase;
      letter-spacing: 0.12em; font-weight: 600;
    }
    .pr-pool-field input[type="text"] {
      width: 100%; box-sizing: border-box;
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 6px;
      padding: 8px 10px; font-family: inherit; font-size: 13px;
      font-variant-numeric: tabular-nums;
    }
    .pr-pool-field input[type="text"]:focus { outline: none; border-color: var(--primary); }
    .pr-info {
      display: inline-block;
      font-size: 12px;
      color: var(--text-muted);
      cursor: help;
      margin-left: 4px;
    }
    .pr-info:hover { color: var(--primary); }
    .pr-pool-summary {
      display: flex; flex-direction: column; gap: 10px;
      padding-top: 14px; border-top: 1px solid var(--border);
    }
    .pr-formula-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    }
    .pr-pill {
      display: inline-flex; align-items: baseline; gap: 6px;
      padding: 5px 10px; background: var(--bg-input);
      border: 1px solid var(--border); border-radius: 6px;
      font-size: 11px; color: var(--text-secondary);
    }
    .pr-pill strong {
      font-size: 12px; color: var(--text-primary); font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .pr-pill-final { border-color: var(--positive, #69DB7C); }
    .pr-pill-final strong { color: var(--positive, #69DB7C); font-size: 13px; }
    .pr-pill-redis { border-color: var(--text-secondary); }
    .pr-pill-redis strong { color: var(--text-secondary); font-size: 13px; }
    .pr-op {
      font-size: 13px; color: var(--text-muted); font-weight: 700; padding: 0 2px;
    }
    .pr-bracket {
      font-size: 16px; color: var(--text-secondary); font-weight: 400; padding: 0 1px;
    }
    .pr-rate-pill {
      display: inline-flex; align-items: baseline; gap: 8px;
      min-width: 160px; justify-content: space-between;
      padding: 6px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 11px; color: var(--text-secondary);
    }
    .pr-rate-pill strong {
      font-size: 13px; color: var(--text-primary); font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .pr-mode-vault .pr-bonus-inside,
    .pr-mode-vault .pr-bonus-inside-op,
    .pr-mode-caches .pr-bonus-outside,
    .pr-mode-caches .pr-bonus-outside-op { display: none; }

    .pr-table-wrap {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      /* max-height sized so at max page-scroll wrap.top lands just under the
         page header (53px). Scrollbars hidden visually but still functional. */
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      max-height: calc(100vh - 80px);
    }
    .pr-table-wrap::-webkit-scrollbar { display: none; }
    .pr-table {
      width: 100%; border-collapse: collapse;
      font-size: 12px; font-variant-numeric: tabular-nums;
    }
    /* box-shadow rather than border-bottom: collapsed-border tables drop the
       border on sticky th in some browsers. */
    .pr-table th {
      background: var(--bg-dark); color: #fff;
      font-weight: 600; font-size: 10.5px;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 8px 8px; text-align: center;
      box-shadow: inset 0 -1px 0 var(--border);
      white-space: nowrap;
      position: sticky; top: -1px; z-index: 3;
    }
    .pr-table td {
      padding: 6px 8px; text-align: center;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .pr-table td.pr-name { color: var(--text-primary); font-weight: 600; }
    .pr-table td.pr-num    { color: var(--text-secondary); }
    .pr-table td.pr-money  { color: var(--text-primary); }
    .pr-table td.pr-ded    { color: var(--red); }
    .pr-table td.pr-final  { color: var(--positive, #69DB7C); font-weight: 700; }
    .pr-table td.pr-final.neg { color: var(--red); }
    .pr-table tr:hover td  { background: var(--bg-card-hover); }
    .pr-table tr.pr-unpaid td { opacity: 0.45; }
    .pr-table tr.pr-unpaid td.pr-final,
    .pr-table tr.pr-unpaid td.pr-final.neg {
      opacity: 1;
      color: var(--text-secondary);
      font-weight: 700;
    }
    /* Sticky Member cell must stay opaque or the underlying columns show through
       during horizontal scroll. Dim via text colour to match the unpaid look. */
    .pr-table tr.pr-unpaid td.pr-name {
      opacity: 1;
      color: var(--text-secondary);
    }

    /* Left-locked columns: Name + Final Pay. Widths fixed so Final's left
       offset is known. */
    .pr-table .pr-name {
      position: sticky; left: -1px; z-index: 2;
      background: var(--bg-card);
      min-width: 160px; max-width: 200px;
    }
    .pr-table .pr-final,
    .pr-table .pr-final-th {
      position: sticky; left: 160px; z-index: 2;
      min-width: 130px;
    }
    .pr-table tbody .pr-final { background: var(--bg-card); }
    /* Sticky-top + sticky-left corners need higher z so they sit above both. */
    .pr-table th.pr-name,
    .pr-table th.pr-final-th { z-index: 4; background: var(--bg-dark); }
    .pr-table tfoot .pr-name,
    .pr-table tfoot .pr-final { background: var(--bg-input); z-index: 3; }
    .pr-table tbody tr:hover .pr-name,
    .pr-table tbody tr:hover .pr-final { background: var(--bg-card-hover); }
    #finalisedPayrollSelect { min-width: 340px; }
    #payoutMemberMobileSlot { display: none; }

    /* Mobile (≤768px) */
    @media (max-width: 768px) {
      /* Match the "Payout History" eyebrow font size in the control bar above */
      #payoutOverview .fs-toggle { font-size: 10px; letter-spacing: 0.18em; }
      /* Faction Stats cards: full-width single card, snap side-scroll */
      #payoutOverview .fs-body {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
      #payoutOverview .fs-body::-webkit-scrollbar { display: none; }
      #payoutOverview .payout-card {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
      }
      /* Payout History | Payroll View toggle: full width, equal buttons */
      #payoutTopToggle { display: flex; width: 100%; }
      #payoutTopToggle .pr-view-toggle-btn { flex: 1; text-align: center; }
      /* Spies sub-nav (Targets | Full Spies): full width, equal buttons */
      #controlsSpies { width: 100%; box-sizing: border-box; }
      #controlsSpies .spy-subnav-tab { flex: 1; text-align: center; }
      /* The flex spacer pushes lastAtkPill right on desktop; on mobile it
         just creates a wrap-gap below full-width siblings, so hide it. */
      #controlsSpacer { display: none; }
      /* War Payroll tab — make the toggle row + war bar workable on mobile.
         Toggle goes full-width like the Payout History one; the war bar wraps
         controls onto their own rows with labels hidden to save space. */
      #payrollViewToggle { display: flex; width: 100%; }
      #payrollViewToggle .pr-view-toggle-btn { flex: 1; text-align: center; }
      .pr-toggle-row { flex-wrap: wrap; gap: 8px; }
      .pr-toggle-row .pr-last-saved { margin-left: 6px; }
      #panel-adminpayroll .pr-war-bar { flex-wrap: wrap; gap: 8px; }
      #panel-adminpayroll .pr-war-bar > label { display: none; }
      #panel-adminpayroll .pr-war-bar #payrollWarSelect {
        min-width: 0 !important; flex: 1;
      }
      #panel-adminpayroll .pr-war-bar .pr-type-toggle { flex-basis: 100%; justify-content: center; }
      #panel-adminpayroll .pr-war-bar .pr-type-toggle .pr-view-toggle-btn { flex: 1; text-align: center; }
      #panel-adminpayroll .pr-war-bar .pr-rate-pill { margin-left: 0; flex-basis: 100%; }
      #panel-adminpayroll .pr-war-bar .pr-save-btn,
      #panel-adminpayroll .pr-war-bar .pr-finalise-btn,
      #panel-adminpayroll .pr-war-bar .pr-unfinalise-btn { flex: 1; }
      #panel-adminpayroll .pr-war-bar .pr-finalised-badge { flex-basis: 100%; text-align: center; }
      /* Formula presentation: hide the inputs/operators and just stack the two
         computed outputs (TOTAL PAID + Redis) full-width on mobile. */
      .pr-formula-row { flex-direction: column; align-items: stretch; gap: 8px; }
      .pr-formula-row .pr-pill:not(.pr-pill-final):not(.pr-pill-redis),
      .pr-formula-row .pr-op,
      .pr-formula-row .pr-bracket { display: none; }
      .pr-formula-row .pr-pill-final,
      .pr-formula-row .pr-pill-redis {
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
      }
      /* Admin Member dropdown is moved here via JS — render full-width to
         match the toggle above it, inside the .pr-war-bar surround. */
      #payoutMemberMobileSlot:not(:empty) { display: flex; }
      #payoutMemberMobileSlot select { min-width: 0; flex: 1; }
      /* Payroll View war bar: selector + rate pill stack full-width on their
         own rows so they share the same column width. Select sized to match
         the Member dropdown bar (which carries inline 12px font / 6px padding
         from its original top-bar location). */
      #payrollView .pr-war-bar { flex-wrap: wrap; }
      #payrollView .pr-war-bar label { display: none; }
      #payrollView .pr-war-bar select { min-width: 0; flex-basis: 100%; font-size: 12px; padding: 6px 10px; }
      #payrollView .pr-war-bar .pr-rate-pill { margin-left: 0; flex-basis: 100%; }
      /* Payroll summary scorecards: snap side-scroll with ~1.5 visible, reversed
         order (Final Payment first) via flex `order` so swipe direction stays
         natural. */
      .pr-member-summary {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .pr-member-summary::-webkit-scrollbar { display: none; }
      .pr-member-summary > * {
        flex: 0 0 calc((100% - 14px) / 1.5);
      }
      .pr-member-summary > *:nth-child(1) { order: 7; }
      .pr-member-summary > *:nth-child(2) { order: 6; }
      .pr-member-summary > *:nth-child(3) { order: 5; }
      .pr-member-summary > *:nth-child(4) { order: 4; }
      .pr-member-summary > *:nth-child(5) { order: 3; }
      .pr-member-summary > *:nth-child(6) { order: 2; }
      .pr-member-summary > *:nth-child(7) { order: 1; }
      /* Payroll table: only Member stays sticky-left; Final Pay header keeps
         sticky-top so it doesn't disappear during vertical scroll, but releases
         its sticky-left so other columns have side-scroll room. */
      .pr-table .pr-name {
        min-width: 0; max-width: 160px;
        width: 1%; white-space: nowrap;
      }
      .pr-table tbody .pr-final { position: static; }
      .pr-table .pr-final,
      .pr-table .pr-final-th {
        left: auto;
        min-width: 0; width: 1%; white-space: nowrap;
      }
      /* On mobile Final Pay header is sticky-top only (no longer a corner) —
         drop its z-index below the Member name header (z:4) so Member overlays
         it cleanly during horizontal scroll. */
      .pr-table th.pr-final-th { z-index: 3; }
      .pr-table-wrap { overscroll-behavior: none; }
    }

    .pr-table .pr-pay,
    .pr-table .pr-pay-th { width: 36px; text-align: center; padding-left: 6px; padding-right: 6px; }
    .pr-table .pr-pay input[type="checkbox"] {
      width: 16px; height: 16px;
      cursor: pointer; accent-color: var(--primary);
      margin: 0; vertical-align: middle;
    }
    .pr-table tr.pr-unpaid .pr-pay { opacity: 1; }
    .pr-table tr.pr-unpaid .pr-pay input { opacity: 1; }
    .pr-table td.pr-edit { padding: 4px 4px; }
    .pr-cell-edit {
      display: inline-block;
      width: 100%;
      cursor: text;
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 3px 6px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      transition: background 0.1s, border-color 0.1s;
    }
    .pr-cell-edit:hover  { border-color: var(--border); background: var(--bg-card-hover); }
    .pr-cell-edit:focus  { outline: none; border-color: var(--primary); background: var(--bg-input); }
    .pr-cell-input {
      width: 100%;
      box-sizing: border-box;
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--primary); border-radius: 4px;
      padding: 3px 6px;
      font-family: inherit; font-size: inherit;
      text-align: center; font-variant-numeric: tabular-nums;
    }
    .pr-cell-input:focus { outline: none; }
    .pr-cell-input::placeholder { color: var(--text-muted); opacity: 0.5; }
    .pr-table tfoot td {
      background: var(--bg-input);
      font-weight: 700; color: var(--text-primary);
      box-shadow: inset 0 2px 0 var(--border);
      position: sticky; bottom: 0; z-index: 2;
    }
    .pr-table tfoot td.pr-final { color: var(--positive, #69DB7C); }
    @media (max-width: 768px) {
      .pr-table { font-size: 11px; }
      .pr-table th, .pr-table td { padding: 5px 6px; }
    }

    /* ===== PAYOUT CARDS ===== */
    .payout-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 0; flex: 1; min-width: 260px;
      overflow: hidden; display: flex; flex-direction: column;
      --card-accent: var(--primary); --card-accent-tint: rgba(214, 231, 15, 0.04);
      --card-accent-icon-bg: rgba(214, 231, 15, 0.12);
    }
    .payout-card[data-accent="green"] { --card-accent: #d6e70f; --card-accent-tint: rgba(214, 231, 15, 0.04); --card-accent-icon-bg: rgba(214, 231, 15, 0.12); }
    .payout-card[data-accent="blue"] { --card-accent: var(--blue); --card-accent-tint: rgba(77, 171, 247, 0.05); --card-accent-icon-bg: rgba(77, 171, 247, 0.12); }
    .payout-card[data-accent="red"] { --card-accent: var(--red); --card-accent-tint: rgba(255, 107, 107, 0.05); --card-accent-icon-bg: rgba(255, 107, 107, 0.12); }
    .payout-card-strip { height: 2px; background: var(--card-accent); }
    .payout-card-header { padding: 12px 14px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
    .payout-card-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; background: var(--card-accent-icon-bg); color: var(--card-accent); font-family: var(--font-sans); }
    .payout-card-title-wrap { display: flex; flex-direction: column; min-width: 0; }
    .payout-card-title { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-primary); line-height: 1.2; }
    .payout-card-subtitle { font-size: 10px; color: var(--text-muted); margin-top: 1px; letter-spacing: 0.04em; }
    .payout-card-body { display: flex; flex-direction: column; padding: 4px 0; flex: 1; }
    .payout-card-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; gap: 8px; font-size: 12px; }
    .payout-card-row + .payout-card-row { border-top: 1px solid var(--border); }
    .payout-card-row:hover { background: rgba(255,255,255,0.015); }
    .payout-card-row--lead { background: var(--card-accent-tint); }
    .payout-card-row--lead:hover { background: var(--card-accent-tint); }
    .payout-card-row-info { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
    .payout-card-rank { font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); width: 18px; text-align: right; }
    .payout-card-row--lead .payout-card-rank { color: var(--primary); }
    .payout-card-row .name { color: var(--text-primary); font-weight: 500; }
    .payout-card-row .wars-chip { font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); padding: 2px 6px; background: var(--bg-input); border-radius: 4px; }
    .payout-card-row .value { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
    .payout-card-row .value-sub { color: var(--text-muted); font-weight: 500; font-size: 11px; }
    .payout-card-footer { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.20); margin-top: auto; }
    .payout-card-footer-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
    .payout-card-footer-value { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); }

    /* ===== 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: var(--radius-sm); color: var(--text-primary); font-size: 15px; margin-bottom: 16px; outline: none; font-family: inherit; }
    .auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
    .auth-btn { width: 100%; padding: 12px; background: var(--primary); color: #0b0b0c; font-weight: 700; font-size: 15px; border: none; border-radius: var(--radius-sm); 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; }

    .log-filter-row { display: contents; }
    #logCount { min-width: 160px; text-align: right; }
    #attackLogTable { table-layout: fixed; }
    #logFieldWar { min-width: 260px; }
    .field-mine input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .desktop-only { display: none; }
      .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; }
      .controls { padding: 12px 14px; }
      .content { padding: 16px 14px; }
      .admin-subnav-tab { font-size: 11px; padding: 7px 10px; }
      /* Summary: hide leftmost rank column on mobile (saves space, name column becomes the sticky anchor) */
      #summaryTable td:nth-child(1), #summaryTable th:nth-child(1) { display: none; }
      /* With rank hidden, the self-row's left-edge accent moves to the Name cell so it stays visible */
      #summaryTable .is-self td:nth-child(2) { box-shadow: inset 2px 0 0 var(--primary); }
      /* War-plans tracking buckets: squeeze all 5 onto one row on mobile, lists drop below as before */
      #rosterTrackingBuckets { gap: 6px !important; }
      #rosterTrackingBuckets > div { min-width: 0 !important; flex: 1; }
      #rosterTrackingBuckets > div > div:first-child { font-size: 18px !important; }
      #rosterTrackingBuckets > div > div:last-child { font-size: 9px !important; letter-spacing: 0.04em !important; }
      /* Stack emoji on its own line, label below — keeps each line centred under the count */
      #rosterTrackingBuckets .bucket-emoji,
      #rosterTrackingBuckets .bucket-label { display: block !important; text-align: center; }
      #rosterTrackingBuckets .bucket-emoji { font-size: 14px !important; line-height: 1 !important; }
      #rosterTrackingBuckets .bucket-label { margin-top: 4px !important; }
      /* Posted / Last poll meta row: keep on one line on mobile, swap dot for vertical bar */
      #rosterTrackingMeta { flex-wrap: nowrap !important; gap: 6px !important; font-size: clamp(8px, 2.5vw, 11px) !important; white-space: nowrap; }
      #rosterTrackingMeta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      #rosterTrackingMeta .meta-sep-dot { display: none; }
      #rosterTrackingMeta .meta-sep-bar { display: inline; }
      /* Personal payout note: drop the 10px left margin on mobile so it aligns with the scorecards / table; match scorecard's 18px bottom gap */
      #payoutPersonalNote { margin-left: 0 !important; margin-bottom: 18px !important; }
      /* KPI: horizontal scroll showing 2.5 cards */
      .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%;
        scroll-snap-align: start;
        padding: 10px 12px;
      }
      .kpi-label { font-size: 9px; letter-spacing: 0.12em; }
      .kpi-value { font-size: 18px; margin-top: 4px; }
      .kpi-dual { gap: 10px; margin-top: 4px; }
      .kpi-dual-value { font-size: 18px; }
      .kpi-dual-sub { font-size: 8px; }
      .kpi-sub { font-size: 10px; margin-top: 3px; }
      #summaryTable td:nth-child(3), #summaryTable th:nth-child(3) {
        min-width: 110px; max-width: 110px;
      }
      #attackLogTable { table-layout: auto; }
      #attackLogTable th { width: auto !important; }
      .table-wrap table { font-size: 11px; }
      .table-wrap td { padding: 8px 10px; }
      .table-wrap th { padding: 8px 10px; }
      /* Attack log filters — 3-row mobile layout */
      #logFieldWar { min-width: 0; width: 100%; }
      #logFieldWar select { width: 100%; }
      #logFilters { flex-direction: column !important; gap: 8px !important; }
      .log-filter-row { display: flex !important; gap: 8px; width: 100%; align-items: flex-end; }
      .log-filter-row > .field { min-width: 0 !important; }
      .log-filter-row > .field select { width: 100%; }
      #logFilters > div[style*="flex:1"] { display: none; }
      #logCount { min-width: 0; text-align: right; align-self: flex-end; }
      .field-mine input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px; }
    }
    @media (max-width: 480px) {
      .nav-tab { padding: 11px 11px; font-size: 11.5px; }
    }

    /* ===== CONTEXT MENU ===== */
    .ctx-menu {
      display: none; position: fixed; z-index: 9999;
      background: var(--bg-input); border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm); padding: 4px 0; min-width: 160px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }
    .ctx-menu.show { display: block; }
    .ctx-menu-item {
      padding: 7px 14px; cursor: pointer; font-size: 13px;
      color: var(--text-primary); white-space: nowrap;
    }
    .ctx-menu-item:hover { background: var(--bg-card-hover); }
    .ctx-menu-item.danger { color: var(--red); }
    .ctx-menu-item.danger:hover { background: rgba(255,107,107,0.08); }
    .ctx-menu-item.success { color: var(--positive); }
    .ctx-menu-item.success:hover { background: rgba(105,219,124,0.08); }

    /* ===== VOID WAR FILTER DROPDOWN ===== */
    .void-war-dropdown {
      display: none; position: absolute; z-index: 100;
      background: var(--bg-input); border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm); padding: 4px 0; min-width: 180px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }
    .void-war-dropdown.show { display: block; }
    .void-war-dropdown-item {
      padding: 7px 14px; cursor: pointer; font-size: 12px;
      color: var(--text-primary); white-space: nowrap;
    }
    .void-war-dropdown-item:hover { background: var(--bg-card-hover); }
    .void-war-dropdown-item.active { color: var(--primary); font-weight: 600; }
    /* Toast notifications */
    .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); }
    /* Hover tooltip for gained column */
    td[data-tooltip] { position:relative;cursor:default; }
    td[data-tooltip]::after { content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-dark);color:var(--text-primary);font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--radius);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;border:1px solid var(--border);z-index:50; }
    td[data-tooltip]:hover::after { opacity:1; }

    /* ===== ACTIVITY HEATMAP ===== */
    .act-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
    /* Sort + Filter live in a single inner row so we can force them onto the
       same line on mobile (otherwise each wraps independently). Desktop: just
       a flex group with the same gap as the parent, so visually unchanged. */
    .act-input-row { display: flex; gap: 12px; align-items: center; }
    @media (max-width: 768px) {
      .act-input-row { flex: 1 1 100%; }
      /* !important beats the inline min-width values on the sort select and
         the .search-input wrapper, which otherwise refuse to shrink and
         overflow the viewport on narrow screens. */
      .act-input-row > #activityVizSort,
      .act-input-row > .search-input { flex: 1; min-width: 0 !important; }
      .act-input-row > #activityVizSort { font-size: 11px; }
      .act-input-row > .search-input input { font-size: 11px; }
      /* Meta line takes its own full-width row on mobile. min-width:0 is
         required so the flex item respects 100% width instead of growing
         to fit its nowrap content. fitActivityMeta() (JS) then measures
         the rendered width and shrinks font-size proportionally so polls /
         members / last-poll / Refresh fit edge-to-edge without truncation. */
      #activityVizMeta {
        flex: 1 1 100%;
        min-width: 0;
        white-space: nowrap;
      }
      /* Hide the empty desktop-spacer div on mobile — otherwise it counts
         as a flex item and the parent's row-gap applies twice (above and
         below it), doubling the visible top margin above the meta line. */
      .act-controls > div:empty { display: none; }
    }
    /* Legend: two horizontal rows (Active above, Inactive below), each with
       a small section header and 7 inline swatch+label pairs. Horizontal
       scroll on narrow viewports — no wrapping, no border, no justify-space.
       Scrollbar hidden in all browsers — legend is short and the bar would
       just sit on top of swatches on mobile where it's most visible. */
    .act-legend {
      display: flex; flex-direction: column; margin-bottom: 12px;
      overflow-x: auto;
      scrollbar-width: none;       /* Firefox */
      -ms-overflow-style: none;    /* IE/Edge legacy */
    }
    .act-legend::-webkit-scrollbar { display: none; } /* WebKit */
    .act-legend-row + .act-legend-row { margin-top: 16px; }
    .act-legend-header { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: #888; margin-bottom: 6px; }
    .act-legend-pairs { display: flex; gap: 16px; flex-wrap: nowrap; }
    .act-legend-pair { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .act-legend-swatch { width: 12px; height: 12px; border-radius: 1px; flex-shrink: 0; }
    .act-legend-label { font-size: 10px; white-space: nowrap; }
    .act-legend-row.active .act-legend-label { color: #e6e6e6; }
    .act-legend-row.inactive .act-legend-label { color: #adb5bd; }
    .act-viewport { background: var(--bg-card); border: 2px solid var(--border); border-radius: 6px; overflow: auto; max-height: calc(100vh - 280px); }
    .act-viewport-wrap { position: relative; }
    .act-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .act-grid { display: inline-block; min-width: 100%; position: relative; /* anchor for absolute war divider */ }
    .act-row { display: flex; align-items: center; height: 26px; border-bottom: 1px solid rgba(46,46,51,0.4); }
    .act-row:last-child { border-bottom: none; }
    .act-name {
      position: sticky; left: 0; z-index: 2;
      width: 160px; min-width: 160px; max-width: 160px;
      padding: 0 10px; font-size: 12px;
      background: var(--bg-card); color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      border-right: 1px solid var(--border);
      /* Fill the full row height so the sticky background fully masks cells
         passing behind it during horizontal scroll. Without this, the row's
         align-items:center sizes act-name to text height (~16px) and the
         ~5px gap above/below leaks the cell colours through. */
      align-self: stretch;
      display: flex;
      align-items: center;
    }
    .act-cells { display: flex; align-items: center; padding: 0 8px; flex-shrink: 0; }
    .act-cell {
      display: inline-block;
      position: relative; /* anchor for chain marker pseudo-elements */
      width: 8px; height: 18px;
      margin: 0 1px 0 0;
      background: transparent;
      box-sizing: border-box;
      cursor: default;
    }
    /* Chain markers: when a member stays in Hospital across consecutive
       polls with the same hosp_until, the cells form a "chain" (one
       attack, ongoing recovery). Origin cell shows a small white dot;
       continuing cells get a horizontal line passing through their middle.
       This separates "got hit once, waited it out" from "got hit repeatedly". */
    .act-cell.chain::before {
      content: '';
      position: absolute;
      top: 50%; left: 0;
      width: calc(100% + 1px); /* bridges the 1px right margin to next cell */
      height: 1px;
      background: rgba(255,255,255,0.55);
      transform: translateY(-50%);
      pointer-events: none;
    }
    /* Origin: line starts at center (under the dot) */
    .act-cell.chain-origin::before {
      left: 50%;
      width: calc(50% + 1px);
    }
    /* Last cell of chain: line stops at right edge (no bridge to next) */
    .act-cell.chain-end::before { width: 100%; }
    /* Single-cell chain (origin + end): no line at all, just the dot */
    .act-cell.chain-origin.chain-end::before { display: none; }
    /* Origin dot (hospital chain default) */
    .act-cell.chain-origin::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 4px; height: 4px;
      background: rgba(255,255,255,0.85);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* Travel chain — overrides the origin dot with direction-aware arrowheads.
       'to' (coming home, ←) puts the arrowhead at the origin (start cell).
       'from' (leaving Torn, →) puts the arrowhead at the chain end. */

    /* Travel-to: left-pointing arrowhead at origin, replacing the dot */
    .act-cell.chain-origin.chain-travel.chain-to::after {
      background: transparent;
      border-radius: 0;
      width: 0; height: 0;
      border-style: solid;
      border-width: 3px 5px 3px 0;
      border-color: transparent rgba(255,255,255,0.9) transparent transparent;
    }

    /* Travel-from: hide the origin dot (arrow lives at end instead) */
    .act-cell.chain-origin.chain-travel.chain-from::after {
      display: none;
    }

    /* Travel-from: right-pointing arrowhead at end cell */
    .act-cell.chain-end.chain-travel.chain-from::after {
      content: '';
      position: absolute;
      top: 50%; right: 0;
      width: 0; height: 0;
      border-style: solid;
      border-width: 3px 0 3px 5px;
      border-color: transparent transparent transparent rgba(255,255,255,0.9);
      transform: translateY(-50%);
      pointer-events: none;
    }

    /* Travel with unknown direction (old data, no description): hide origin dot
       so we just show the line without an inappropriate dot. */
    .act-cell.chain-origin.chain-travel:not(.chain-to):not(.chain-from)::after {
      display: none;
    }
    .act-cell.gap { background: transparent; border: 1px dashed var(--border); }
    /* 7-bucket palette: each bucket has an ACTIVE (full saturation) and
       INACTIVE (~50% lightness drop, hue preserved) variant. The Okay-inactive
       case is the exception — light grey rather than dark sage — because
       "AFK and fine" is the most visually neutral state and shouldn't compete
       with the meaningful colours. */
    .act-cell.bucket-okay-active        { background-color: #7aa843; }
    .act-cell.bucket-okay-inactive      { background-color: #b0b0b0; }
    .act-cell.bucket-shortsafe-active   { background-color: #d9a300; }
    .act-cell.bucket-shortsafe-inactive { background-color: #8a6a14; }
    .act-cell.bucket-sed-active         { background-color: #c92a8a; }
    .act-cell.bucket-sed-inactive       { background-color: #7a1c52; }
    .act-cell.bucket-od-active          { background-color: #8a4ac9; }
    .act-cell.bucket-od-inactive        { background-color: #4a2a7a; }
    .act-cell.bucket-merc-active        { background-color: #2ab8a8; }
    .act-cell.bucket-merc-inactive      { background-color: #1a6e64; }
    .act-cell.bucket-external-active    { background-color: #4a5fd9; }
    .act-cell.bucket-external-inactive  { background-color: #1f2a78; }
    .act-cell.bucket-travel-active      { background-color: #4aafd9; }
    .act-cell.bucket-travel-inactive    { background-color: #1f5e7c; }
    .act-cell.bucket-enemy-active       { background-color: #c92a2a; }
    .act-cell.bucket-enemy-inactive     { background-color: #7a2020; }

    /* Time-axis structure: BAND row (PRE-WAR / WAR labels), HOUR row
       (offset labels like −1h, 0h, 1h…). Both stick to the top of the
       viewport when scrolling vertically; both scroll horizontally with cells. */
    .act-band-row {
      display: flex; align-items: center; height: 16px;
      position: sticky; top: 0; z-index: 4;
      background: var(--bg-card);
    }
    .act-band-row .act-name { background: var(--bg-card); border-right: 1px solid var(--border); }
    .act-band-cells { display: flex; padding: 0 8px; background: var(--bg-card); }
    .act-band {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
      color: #888; line-height: 16px; text-align: center;
      box-sizing: border-box;
      background: var(--bg-card);
    }
    .act-hour-row {
      display: flex; align-items: center; height: 18px;
      position: sticky; top: 16px; z-index: 3;
      background: var(--bg-card);
      border-bottom: 1px solid rgba(46,46,51,0.4);
    }
    .act-hour-row .act-name { background: var(--bg-card); border-right: 1px solid var(--border); border-bottom: 1px solid rgba(46,46,51,0.4); }
    .act-hour-cells { display: flex; align-items: center; padding: 0 8px; background: var(--bg-card); }
    .act-hour-slot { width: 9px; flex-shrink: 0; position: relative; height: 18px; background: var(--bg-card); }
    .act-hour-slot > span {
      position: absolute; top: 3px; left: -2px;
      font-size: 9px; color: #adb5bd; font-family: var(--font-mono);
      white-space: nowrap;
    }

    /* Full-height vertical dashed divider at war_start.
       Position is set inline via JS (left = name-col + cells-padding +
       pre_war_count * 9px). Spans the full grid height. */
    .act-war-divider {
      position: absolute; top: 0; bottom: 0;
      width: 0; border-left: 1px dashed #666;
      pointer-events: none; z-index: 5; /* draws over band/hour rows for continuous line */
    }

    /* Custom tooltip for cells — replaces native title attribute. Single
       shared element on body, click-toggles for mobile + hover for desktop,
       multi-line content via white-space: pre-line. */
    .act-tooltip {
      position: fixed;
      background: var(--bg-dark);
      color: var(--text-primary);
      font-size: 11px;
      padding: 8px 10px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      pointer-events: none;
      z-index: 1000;
      max-width: 320px;
      white-space: pre-line;
      line-height: 1.5;
      box-shadow: 0 4px 12px rgba(0,0,0,0.35);
      display: none;
    }
    .act-tooltip.visible { display: block; }
    .act-mobile-msg { display: none; padding: 30px 18px; text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.6; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
    @media (max-width: 768px) {
      .act-viewport { max-height: calc(100vh - 320px); overscroll-behavior: none; }
      .act-name { width: 110px; min-width: 110px; max-width: 110px; font-size: 11px; }
      .act-band-row {
        top: 0; height: 19px; padding-top: 2px;
        border-top: 1px solid var(--border);
      }
      /* 1px overlap with band-row's bottom — masks the sticky-to-sticky seam. */
      .act-hour-row { top: 18px; }
      /* Mask painted over the viewport's top edge from the wrapper (outside
         the scroll/clip context). */
      .act-viewport-wrap::before {
        content: '';
        position: absolute;
        top: 1px; left: 1px; right: 1px;
        height: 3px;
        background: var(--bg-card);
        z-index: 100;
        pointer-events: none;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }