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

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

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

    /* ===== Navy theme variant — shared with attacks dashboard ===== */
    /* Toggle lives in the attacks dashboard's Settings panel; this page reads */
    /* the same localStorage["dashboard_theme"] value and applies the class.   */
    body.theme-navy {
      --bg-dark:        #08111f;
      --bg-card:        #0c1828;
      --bg-card-hover:  #122036;
      --bg-input:       #182846;
      --border:         #1e2e4e;
      --blue:           #5dc4fb;
    }

    /* ===== HEADER ===== */
    .header {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-dark);
      position: sticky; top: 0; z-index: 50;
    }
    .header-logo {
      width: 26px; height: 26px;
      object-fit: contain; cursor: pointer;
    }
    /* Burger menu trigger — sits to the LEFT of the WMD logo. */
    .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-tab {
      padding: 10px 16px; cursor: pointer; color: var(--text-dim);
      font-size: 13px;
      border-bottom: 2px solid transparent; transition: all 0.15s;
      white-space: nowrap; user-select: none;
      text-decoration: none; /* anchors would otherwise get the default underline */
    }
    .nav-tab:hover { color: var(--text-primary); }
    .nav-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

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

    /* Card grid for the Fetch sub-tab (mirrors the pattern in /crimes/ Admin). */
    .admin-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    @media (max-width: 768px) { .admin-grid { grid-template-columns: 1fr; } }
    .admin-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 16px;
    }
    .admin-card-title {
      font-size: 13px; font-weight: 600; color: var(--text-primary);
      margin-bottom: 6px;
    }
    .admin-card-desc {
      font-size: 12px; color: var(--text-secondary);
      line-height: 1.5; margin-bottom: 12px;
    }
    .admin-card .status-line {
      font-size: 12px; color: var(--text-muted);
      margin-top: 10px; min-height: 1.2em;
    }
    /* Accent classes kept as no-ops so we can revisit later without
       touching the HTML markup — the stripes were too noisy here
       since color isn't load-bearing the way it is for tags. */
    .admin-card.accent-training,
    .admin-card.accent-wars,
    .admin-card.accent-members,
    .admin-card.accent-items,
    .admin-card.accent-attacks,
    .admin-card.accent-deposits,
    .admin-card.accent-armory,
    .admin-card.accent-comps { /* intentionally empty */ }
    /* Section sub-header inside admin-grid — spans full width so the
       group below it sits underneath. Same eyebrow style as "Admin only". */
    .admin-section-label {
      grid-column: 1 / -1;
      font-size: 10px; color: var(--text-secondary);
      text-transform: uppercase; letter-spacing: 0.16em;
      font-weight: 500;
      margin-top: 12px;
    }
    .admin-section-label:first-child { margin-top: 0; }
    /* Title with a leading icon */
    .admin-card-title {
      display: flex; align-items: center; gap: 8px;
    }
    .admin-card-icon {
      font-size: 16px; line-height: 1; flex-shrink: 0;
    }
    /* Visual status pill — surfaces success/failure at a glance */
    .admin-status-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 2px 8px; border-radius: 10px;
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .admin-status-pill.success { background: rgba(32,201,151,0.13); color: var(--teal); }
    .admin-status-pill.failure { background: rgba(255,107,107,0.14); color: #FF6B6B; }
    .admin-status-pill.idle    { background: rgba(173,181,189,0.10); color: var(--text-muted); }
    /* Status meta row: pill + relative time + meta count */
    .admin-status-row {
      display: flex; flex-wrap: wrap; align-items: baseline;
      gap: 8px; font-size: 12px; color: var(--text-secondary);
    }
    .admin-status-row .meta-count { color: var(--text-primary); font-weight: 600; }
    .admin-status-skel {
      display: inline-block; height: 1em; width: 180px;
      background: var(--bg-input); border-radius: 3px;
      opacity: 0.5; animation: skel-pulse 1.2s ease-in-out infinite;
    }
    @keyframes skel-pulse { 50% { opacity: 0.25; } }

    /* Rotate disclosure triangle when <details> is open (forecast Collection Status). */
    details[open] > summary > span:first-child { transform: rotate(90deg); }

    /* ============ CALENDAR ============ */
    /* Type colors (also used by event chips on /HUB/dashboard/) */
    :root {
      --cal-torn: #4DABF7;       /* blue — Torn events */
      --cal-faction: #B197FC;    /* purple — Faction events */
      --cal-war: #FF6B6B;        /* red — Wars */
      --cal-torn-soft: rgba(77, 171, 247, 0.18);
      --cal-faction-soft: rgba(177, 151, 252, 0.18);
      --cal-war-soft: rgba(255, 107, 107, 0.18);
    }
    .cal-legend {
      display: inline-block; width: 10px; height: 10px; border-radius: 2px;
      margin-right: 4px; vertical-align: middle;
    }
    .cal-legend-torn    { background: var(--cal-torn); }
    .cal-legend-faction { background: var(--cal-faction); }
    .cal-legend-war     { background: var(--cal-war); }
    .cal-legend-training_break { background: var(--teal); }

    /* FullCalendar dark-theme overrides — match the existing navy/yellow look. */
    #adminCalendar {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 14px;
    }
    .fc { color: var(--text-primary); font-family: inherit; }
    .fc .fc-toolbar-title { font-size: 16px; font-weight: 600; }
    .fc .fc-button {
      background: var(--bg-dark); border-color: var(--border); color: var(--text-secondary);
      box-shadow: none; padding: 4px 10px; font-size: 12px;
    }
    .fc .fc-button:hover { background: var(--border); color: var(--text-primary); }
    .fc .fc-button-primary:not(:disabled).fc-button-active {
      background: var(--primary-soft); border-color: var(--primary); color: var(--primary);
    }
    .fc .fc-col-header-cell { background: var(--bg-dark); }
    .fc .fc-col-header-cell-cushion {
      color: var(--text-muted); font-weight: 600; font-size: 11px; padding: 8px 4px;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid {
      border-color: var(--border);
    }
    .fc .fc-daygrid-day-number {
      color: var(--text-secondary); font-size: 12px; padding: 4px 6px;
    }
    .fc .fc-day-today { background: rgba(214, 231, 15, 0.04) !important; }
    .fc .fc-day-today .fc-daygrid-day-number { color: var(--primary); font-weight: 700; }
    .fc .fc-day-other .fc-daygrid-day-number { opacity: 0.4; }
    .fc-daygrid-day:hover { background: rgba(255,255,255,0.02); cursor: pointer; }

    /* Event chips */
    .fc-event {
      border: none; padding: 2px 6px; cursor: pointer;
      font-size: 11px; font-weight: 500;
    }
    .fc-event.cal-event-torn_event    { background: var(--cal-torn-soft); border-left: 3px solid var(--cal-torn); color: var(--cal-torn); }
    .fc-event.cal-event-faction_event { background: var(--cal-faction-soft); border-left: 3px solid var(--cal-faction); color: var(--cal-faction); }
    .fc-event.cal-event-war           { background: var(--cal-war-soft); border-left: 3px solid var(--cal-war); color: var(--cal-war); }
    /* Training breaks override the faction_event color with green */
    .fc-event.cal-event-training_break { background: rgba(32,201,151,0.15); border-left-color: var(--teal); color: var(--teal); }

    /* Timed events in dayGridMonth render as a colored DOT (FullCalendar default
       uses borderColor for the dot). Override per type so War shows red, etc. */
    .fc-event.cal-event-torn_event    .fc-daygrid-event-dot { border-color: var(--cal-torn); }
    .fc-event.cal-event-faction_event .fc-daygrid-event-dot { border-color: var(--cal-faction); }
    .fc-event.cal-event-war           .fc-daygrid-event-dot { border-color: var(--cal-war); }
    .fc-event.cal-event-training_break .fc-daygrid-event-dot { border-color: var(--teal); }

    /* Mobile toolbar: title on its own centered row above the controls */
    @media (max-width: 640px) {
      .fc .fc-header-toolbar { flex-wrap: wrap; justify-content: space-between; }
      .fc .fc-toolbar-chunk:nth-child(2) {
        flex: 1 0 100%;
        order: -1;
        text-align: center;
        margin-bottom: 8px;
      }
    }

    /* ===== List view styling ===== */
    .fc .fc-list {
      background: var(--bg-card);
      border-color: var(--border);
    }
    .fc .fc-list-empty {
      background: var(--bg-card);
      color: var(--text-muted);
      font-size: 13px; padding: 32px 16px;
    }
    .fc .fc-list-day-cushion {
      background: var(--bg-dark);
      color: var(--text-secondary);
      padding: 8px 14px; font-size: 12px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .fc .fc-list-day-cushion a { color: inherit; text-decoration: none; }
    .fc .fc-list-event {
      background: var(--bg-card);
      cursor: pointer;
    }
    .fc .fc-list-event:hover td { background: var(--bg-card-hover); }
    .fc .fc-list-event td { padding: 10px 14px; border-color: var(--border); }
    .fc .fc-list-event-time {
      color: var(--text-secondary); font-size: 12px;
      font-family: var(--font-mono); white-space: nowrap;
    }
    .fc .fc-list-event-graphic { padding-left: 14px; padding-right: 6px; }
    .fc .fc-list-event-title { color: var(--text-primary); font-size: 13px; font-weight: 500; }
    .fc .fc-list-event-title a { color: inherit; text-decoration: none; }

    /* Per-type dot colors in list view (mirrors month grid) */
    .fc-list-event.cal-event-torn_event    .fc-list-event-dot { border-color: var(--cal-torn); }
    .fc-list-event.cal-event-faction_event .fc-list-event-dot { border-color: var(--cal-faction); }
    .fc-list-event.cal-event-war           .fc-list-event-dot { border-color: var(--cal-war); }
    .fc-list-event.cal-event-training_break .fc-list-event-dot { border-color: var(--teal); }

    /* ============ CALENDAR MODAL ============ */
    .cal-modal-backdrop {
      display: none;
      position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
      z-index: 1000; align-items: center; justify-content: center; padding: 20px;
    }
    .cal-modal-backdrop.open { display: flex; }
    .cal-modal {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
      width: 100%; max-width: 640px; max-height: 90vh; overflow: auto;
      display: flex; flex-direction: column;
    }
    .cal-modal-header {
      padding: 14px 18px; border-bottom: 1px solid var(--border);
      font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center;
    }
    .cal-modal-close {
      background: none; border: none; color: var(--text-muted); font-size: 22px;
      cursor: pointer; line-height: 1; padding: 0 4px;
    }
    .cal-modal-close:hover { color: var(--text-primary); }
    .cal-modal-body { padding: 16px 18px; }
    .cal-field { margin-bottom: 14px; }
    .cal-field > label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
    .cal-field.cal-row { display: flex; gap: 12px; }
    .cal-type-toggle { display: flex; gap: 14px; padding: 8px 0; }
    .cal-type-toggle label { font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
    .cal-modal-footer {
      padding: 12px 18px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 8px;
    }
    @media (max-width: 640px) {
      .cal-modal { max-width: 100%; }
      .cal-field.cal-row { flex-direction: column; }
      .cal-type-toggle { flex-direction: column; gap: 8px; }
    }

    /* Emoji picker popover (anchored under the Icon input) */
    .emoji-picker {
      display: none;
      position: absolute; top: calc(100% + 4px); left: 0; z-index: 100;
      width: 280px; max-height: 280px; overflow-y: auto;
      background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px;
      padding: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    }
    .emoji-picker.open { display: block; }
    .emoji-group + .emoji-group { margin-top: 8px; }
    .emoji-group-label {
      font-size: 10px; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.05em; margin-bottom: 4px; padding: 0 2px;
    }
    .emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
    .emoji-btn {
      background: none; border: none; color: inherit; font-size: 18px;
      width: 100%; aspect-ratio: 1; border-radius: 4px; cursor: pointer;
      padding: 0; display: flex; align-items: center; justify-content: center;
    }
    .emoji-btn:hover { background: var(--bg-input, rgba(255,255,255,0.08)); }

    /* ===== INPUTS / SEARCH ===== */
    .search-input { position: relative; display: inline-block; }
    .search-input input {
      background: var(--bg-input); border: 1px solid var(--border);
      color: var(--text-primary); padding: 8px 12px 8px 32px;
      border-radius: var(--radius-sm); font-size: 13px;
      outline: none; font-family: inherit;
      transition: border-color .12s, box-shadow .12s;
    }
    .search-input input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
    .search-input::before {
      content: '⌕'; position: absolute; left: 10px; top: 50%;
      transform: translateY(-50%); color: var(--text-muted); font-size: 14px;
      pointer-events: none;
    }
    /* Filter row: search input has a desktop min-width here (moved off inline
       so mobile @media can override). */
    #activityFilterRow .search-input { min-width: 220px; }

    /* ===== USER ACCESS ===== */
    .add-row {
      display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .control-group { display: flex; flex-direction: column; gap: 4px; }
    .control-label {
      font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-secondary); font-weight: 600;
    }
    .add-input {
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 6px; padding: 8px 12px;
      color: var(--text-primary); font-size: 13px;
      font-family: inherit;
    }
    .add-input:focus { outline: none; border-color: var(--primary); }
    .btn {
      background: var(--primary); color: #0d0d0d;
      border: none; padding: 8px 16px; border-radius: 4px;
      font-size: 13px; font-weight: 700; cursor: pointer;
      text-transform: uppercase; letter-spacing: 0.5px;
      transition: all 0.2s; font-family: inherit;
    }
    .btn:hover { background: var(--primary-dim); }
    .btn-add { background: var(--teal); color: #fff; }
    .btn-add:hover { background: #1ba07a; }
    .btn-outline {
      background: transparent; border: 1px solid var(--primary);
      color: var(--primary);
    }
    .btn-outline:hover { background: var(--primary-soft); }
    /* Reusable coloured border buttons — pair with .btn for typography/sizing */
    .btn-border-grey  { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-secondary); }
    .btn-border-green { background: transparent; border: 1px solid var(--teal); color: var(--teal); }
    .btn-border-red   { background: transparent; border: 1px solid var(--red); color: var(--red); }
    /* Hover overrides — without these, the base .btn:hover paints primary-dim (yellow) over the border-coloured variants. */
    .btn-border-grey:hover  { background: rgba(173, 181, 189, 0.10); }
    .btn-border-green:hover { background: rgba(32, 201, 151, 0.10); }
    .btn-border-red:hover   { background: rgba(255, 107, 107, 0.10); }
    .btn-small { padding: 4px 10px; font-size: 11px; }
    /* Buttons inside an add-row control-group should match input height —
       em-based so it scales with font-size on mobile. The 1px transform
       compensates for a small visual offset versus the input boxes. */
    .add-row .control-group > .btn { min-height: 2.65em; transform: translateY(-1px); }
    /* Scoped: Event Tags row action buttons only */
    #eventTagsList .tag-btn-edit { background: var(--teal); color: #fff; border: none; }
    #eventTagsList .tag-btn-edit:hover { background: #1ba07a; }
    #eventTagsList .tag-btn-retire { background: #495057; color: #fff; border: none; }
    #eventTagsList .tag-btn-retire:hover { background: #3a3e44; }
    #eventTagsList .tag-btn-delete { background: var(--red); color: #fff; border: none; }
    #eventTagsList .tag-btn-delete:hover { background: #e85a5a; }

    #adminMgmtLog { color: var(--text-secondary); font-size: 13px; padding: 8px 0; min-height: 20px; }
    .admin-row {
      padding: 8px 0; display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap;
    }
    .admin-star { display: inline-block; width: 20px; text-align: center; font-size: 16px; }
    .admin-star.super { color: var(--gold); }
    .admin-star.regular { color: var(--text-muted); font-size: 18px; }
    .admin-role-tag { font-size: 11px; color: var(--text-muted); }
    .scope-select {
      font-size: 11px; padding: 2px 6px;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; color: var(--text-primary); font-family: inherit;
    }
    .remove-btn {
      font-size: 11px; padding: 2px 8px;
      background: transparent; border: 1px solid var(--red);
      color: var(--red); border-radius: 4px; cursor: pointer;
      font-family: inherit;
    }
    .remove-btn:hover { background: var(--red); color: #fff; }

    /* ===== ACTIVITY LOG ===== */
    /* Inline checkbox labels in the Add User form */
    .scope-cb-row { display: inline-flex; align-items: center; gap: 14px; min-height: 36px; }
    .scope-cb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; }
    .scope-cb input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
    .scope-cb input[disabled] { cursor: not-allowed; opacity: 0.7; }

    /* Admin table — used for the Manage Users list.
       #adminList scopes the horizontal overflow to itself so the table can
       scroll on narrow viewports without dragging the whole page sideways. */
    #adminList {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .admin-table {
      width: 100%; border-collapse: collapse; margin-top: 8px;
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
      overflow: hidden;
    }
    .admin-table th {
      background: var(--bg-input); color: var(--text-secondary);
      font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 10px 12px; text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .admin-table th.cb-col, .admin-table td.cb-col { text-align: center; }
    .admin-table td { padding: 10px 12px; color: var(--text-primary); font-size: 13px; }
    .admin-table tr:not(:last-child) td { border-bottom: 1px solid rgba(46,46,51,0.4); }
    .admin-table tr:hover td { background: var(--bg-card-hover); }
    .admin-table .role-pill {
      display: inline-block; padding: 1px 8px; font-size: 10px;
      text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
      border-radius: 10px;
    }
    .admin-table .role-pill.super { background: rgba(255,212,59,0.15); color: var(--gold); }
    .admin-table .role-pill.admin { background: rgba(173,181,189,0.10); color: var(--text-secondary); }
    .admin-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
    .admin-table input[type="checkbox"][disabled] { cursor: not-allowed; opacity: 0.7; }
    .admin-table .id-cell { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

    .log-table {
      width: 100%; border-collapse: collapse; table-layout: fixed;
      font-size: 13px;
    }
    .log-table th {
      text-align: left; padding: 6px 12px;
      color: var(--text-secondary); font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.5px;
      border-bottom: 1px solid var(--border); font-weight: 600;
    }
    .log-table td { padding: 6px 12px; color: var(--text-primary); }
    .log-table tr:not(:last-child) td { border-bottom: 1px solid rgba(46,46,51,0.4); }
    .log-table .num { text-align: center; font-variant-numeric: tabular-nums; }
    .log-table .count-train  { color: var(--teal); font-weight: 600; }
    .log-table .count-attk   { color: var(--primary); font-weight: 600; }
    .log-table .count-crimes { color: #4faaff; font-weight: 600; }
    .log-table .count-comp   { color: #C77DFF; font-weight: 600; }
    .log-table .count-zero   { color: var(--text-muted); }
    .dash-pill {
      display: inline-block; padding: 1px 8px; font-size: 10px;
      text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
      border-radius: 10px;
    }
    .dash-pill.training     { background: rgba(32,201,151,0.12); color: var(--teal); }
    .dash-pill.attacks      { background: var(--primary-soft); color: var(--primary); }
    .dash-pill.crimes       { background: rgba(79,170,255,0.13); color: #4faaff; }
    .dash-pill.competitions { background: rgba(199,125,255,0.14); color: #C77DFF; }
    .dash-pill.legacy       { background: rgba(173,181,189,0.10); color: var(--text-muted); }

    /* Log-access pills (Manage Users → Log Access section) */
    .log-access-pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 4px 4px 10px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px; color: var(--text-primary);
    }
    .log-access-pill.super { color: var(--gold); border-color: rgba(255,212,59,0.4); }
    .log-access-pill .super-tag {
      font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--gold); padding-right: 6px;
    }
    .log-access-pill .pill-x {
      width: 18px; height: 18px;
      border: none; border-radius: 50%;
      background: transparent; color: var(--text-muted);
      cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .log-access-pill .pill-x:hover { background: rgba(255,107,107,0.15); color: var(--red); }

    /* ===== ACTIVITY LOG ===== */
    .activity-stat-strip {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px; margin-bottom: 24px;
    }
    .activity-stat-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
    }
    .activity-stat-card.accent-train { box-shadow: inset 3px 0 0 var(--teal); }
    .activity-stat-card.accent-attk  { box-shadow: inset 3px 0 0 var(--primary); }
    .activity-stat-card.accent-crimes { box-shadow: inset 3px 0 0 #4FAAFF; }
    .activity-stat-card.accent-comp  { box-shadow: inset 3px 0 0 #C77DFF; }
    .activity-stat-card.accent-total { box-shadow: inset 3px 0 0 var(--text-secondary); }
    .activity-stat-label {
      font-size: 10px; color: var(--text-secondary);
      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
      margin-bottom: 6px;
    }
    .activity-stat-value {
      font-size: 22px; font-weight: 700; color: var(--text-primary);
      line-height: 1.1;
    }
    .activity-stat-sub {
      font-size: 11px; color: var(--text-muted); margin-top: 3px;
    }
    /* Inline horizontal stacked bar showing each member's dashboard share */
    .mix-bar {
      display: flex; height: 6px; width: 100%; min-width: 80px;
      background: var(--bg-input); border-radius: 3px; overflow: hidden;
    }
    .mix-bar > span { height: 100%; }
    .mix-bar > span.mix-train  { background: var(--teal); }
    .mix-bar > span.mix-attk   { background: var(--primary); }
    .mix-bar > span.mix-crimes { background: #4FAAFF; }
    .mix-bar > span.mix-comp   { background: #C77DFF; }
    .activity-empty {
      text-align: center; padding: 60px 20px;
      background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px;
    }
    .activity-empty-icon { font-size: 36px; margin-bottom: 12px; }
    .activity-empty-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
    .activity-empty-body { font-size: 12px; color: var(--text-secondary); max-width: 380px; margin: 0 auto; line-height: 1.6; }
    @media (max-width: 768px) {
      /* Stat strip → horizontal scroller with 1.5 cards visible to signal more */
      .activity-stat-strip {
        display: flex; grid-template-columns: none;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; -ms-overflow-style: none;
      }
      .activity-stat-strip::-webkit-scrollbar { display: none; }
      .activity-stat-card { flex: 0 0 65%; scroll-snap-align: start; }
      /* Member Totals → scroll horizontally; columns size to content
         so member names aren't squeezed into overlap with counts */
      #activitySummary { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      #activitySummary table { table-layout: auto; min-width: 600px; }
      #activitySummary th, #activitySummary td { white-space: nowrap; }
    }

    /* ===== EVENT TAG CARDS ===== */
    .tag-grid {
      display: grid; grid-template-columns: 1fr; gap: 10px;
    }
    @media (min-width: 768px) {
      .tag-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
    }
    .tag-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      display: flex; flex-direction: column; gap: 6px;
      transition: opacity 0.15s, border-color 0.15s;
    }
    .tag-card.retired { opacity: 0.55; }
    .tag-card-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .tag-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; word-break: break-word; }
    .tag-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; min-height: 1.4em; }
    .tag-card-desc.empty { color: var(--text-muted); font-style: italic; }
    .tag-card-actions {
      display: flex; gap: 2px; margin-top: 6px; padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .tag-card-action {
      background: none; border: none; padding: 4px 10px;
      color: var(--text-secondary); font-size: 12px; font-weight: 500;
      cursor: pointer; border-radius: 4px; font-family: inherit;
      transition: background 0.12s, color 0.12s;
    }
    .tag-card-action:hover { background: var(--bg-input); color: var(--text-primary); }
    .tag-card-action.danger:hover { background: rgba(255,107,107,0.14); color: #ff6b6b; }
    .tag-card-action.primary { color: var(--primary); }
    .tag-card-action.primary:hover { background: var(--primary-soft); color: var(--primary); }
    .tag-card-edit-head {
      display: flex; align-items: center; gap: 8px;
    }
    .tag-card-color-input {
      width: 28px; height: 28px; padding: 0;
      border: 1px solid var(--border); border-radius: 4px;
      cursor: pointer; flex-shrink: 0; background: transparent;
    }
    .tag-card-name-input, .tag-card-desc-input {
      flex: 1; min-width: 0;
      background: var(--bg-input); border: 1px solid var(--border);
      border-radius: 4px; padding: 6px 8px;
      color: var(--text-primary); font-size: 13px; font-family: inherit;
    }
    .tag-card-name-input:focus, .tag-card-desc-input:focus {
      outline: none; border-color: var(--primary);
    }
    .tag-empty {
      text-align: center; padding: 60px 20px;
      background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px;
    }
    .tag-empty-icon { font-size: 36px; margin-bottom: 12px; }
    .tag-empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
    .tag-empty-body { font-size: 12px; color: var(--text-secondary); max-width: 380px; margin: 0 auto; line-height: 1.6; }

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

    /* Toast notifications — mirrors the pattern in crimes/attacks/competitions.
       Auto-created by showToast() if no #toastContainer exists on the page. */
    .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: 8px; font-size: 13px;
      font-family: inherit; font-weight: 500;
      color: var(--text-primary); background: var(--bg-card);
      border: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      transform: translateY(-20px); opacity: 0;
      transition: transform .3s ease, opacity .3s ease;
      max-width: 420px; text-align: center;
    }
    .toast.show { transform: translateY(0); opacity: 1; }
    .toast.toast-success { border-color: var(--primary); color: var(--primary); }
    .toast.toast-error   { border-color: var(--red); color: var(--red); }

    @media (max-width: 768px) {
      .header { padding: 12px 14px; gap: 10px; }
      .header-eyebrow { display: none; }
      .header-title { font-size: 14px; }
      .nav { padding: 0 8px; }
      .nav-tab { padding: 13px 14px; font-size: 12.5px; }
      .content { padding: 16px 14px; }
      .add-row { gap: 8px; }
      .add-input { font-size: 12px; }
      .log-table { font-size: 11px; }
      .log-table th, .log-table td { padding: 5px 4px; font-size: 11px; }
      .log-table th { font-size: 10px; letter-spacing: 0.02em; }
      .dash-pill { padding: 1px 5px; font-size: 9px; }
      /* Activity log filter row — search + dashboard dropdown share one line */
      #activityFilterRow .search-input { min-width: 0; flex: 1 1 0; }
      #activityFilterRow .search-input input { width: 100%; min-width: 0; box-sizing: border-box; }
      #activityFilterRow #activityDashboardFilter { flex: 1 1 0; min-width: 0; }
      /* Forecast run-rate pill: collapse to eyebrow + delta on narrow screens */
      #forecastRunRate .rr-detail { display: none; }
    }
    @media (max-width: 480px) {
      .nav-tab { padding: 11px 11px; font-size: 11.5px; }
    }

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

    /* ===== MEMBERS — onboarding override table ===== */
    .members-table-wrap {
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: var(--bg-card); overflow-x: auto;
    }
    .members-table {
      width: 100%; table-layout: fixed;
      border-collapse: collapse; font-size: 13px;
    }
    .members-table thead th {
      position: sticky; top: 0;
      background: var(--bg-input); color: var(--text-secondary);
      font-weight: 600; font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.06em;
      padding: 10px 12px; text-align: center;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .members-th-sortable {
      cursor: pointer; user-select: none;
      transition: color 0.12s;
    }
    .members-th-sortable:hover { color: var(--text-primary); }
    .members-table tbody td {
      padding: 8px 12px; border-bottom: 1px solid var(--border);
      text-align: center; vertical-align: middle;
    }
    .members-table tbody tr:last-child td { border-bottom: 0; }
    .members-table tbody tr:hover { background: var(--bg-input); }
    .members-table .members-name-cell {
      text-align: left; font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .members-cb-cell.is-admin-override { background: rgba(173, 181, 189, 0.12); }
    .members-cb {
      width: 16px; height: 16px; cursor: pointer;
      accent-color: var(--primary);
      margin: 0;
    }
    .members-cb.is-read-only { cursor: not-allowed; }

    /* ===== MEMBERS — latest interactions feed ===== */
    .latest-feed {
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: var(--bg-card); overflow: hidden;
    }
    .latest-feed-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; font-size: 12.5px;
      border-bottom: 1px solid var(--border);
    }
    .latest-feed-item:last-child { border-bottom: 0; }
    .latest-feed-name { font-weight: 600; color: var(--text-primary); }
    .latest-feed-step { color: var(--text-primary); }
    .latest-feed-source { color: var(--text-muted); }
    .latest-feed-sep { color: var(--text-muted); }
    .latest-feed-when {
      margin-left: auto; color: var(--text-muted);
      font-family: var(--font-mono); font-size: 11.5px;
      white-space: nowrap;
    }

    /* ===== MEMBERS — mobile (≤768px) ===== */
    @media (max-width: 768px) {
      /* Feed: source drops to its own row, when stays top-right */
      .latest-feed-item { flex-wrap: wrap; }
      .latest-feed-sep { display: none; }
      .latest-feed-when { order: 1; }
      .latest-feed-source { order: 2; flex-basis: 100%; margin: 0; }

      /* Filter row: search + meta stay on the same row; search shrinks to fit */
      #admin-members .search-input { min-width: 0 !important; flex: 1; }

      /* Table: name column sticky-left at its natural width, checkboxes scroll horizontally */
      .members-table {
        table-layout: auto; width: max-content; min-width: 100%;
      }
      .members-table .members-name-cell {
        position: sticky; left: 0;
        background: var(--bg-card);
        overflow: visible; text-overflow: clip;
        border-right: 1px solid var(--border);
      }
      .members-table thead .members-name-cell {
        background: var(--bg-input);
        z-index: 2;
      }
      .members-table tbody .members-name-cell { z-index: 1; }
      .members-table tbody tr:hover .members-name-cell { background: var(--bg-input); }
    }