/* ================================================================
       TT LiveOS — Redesign 2026 · Linear/Notion-inspired dark UI
       ================================================================ */

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

    /* ── Standardized scrollbars — thin, invisible until hovered ── */
    * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    *:hover { scrollbar-color: var(--border) transparent; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
    *:hover::-webkit-scrollbar-thumb { background: var(--border); }

    :root {
      /* ── Surfaces ─────────────────────────────── */
      --bg:           #0A0B0E;
      --surface:      #12131A;
      --surface-2:    #191A23;
      --surface2:     #191A23;   /* compat alias */
      --surface-3:    #23232c;
      --hover:        #1f2029;

      /* ── Borders ──────────────────────────────── */
      --border:       #232531;
      --border-2:     #2e303c;
      --border-bright:#3a3c4a;

      /* ── Type ─────────────────────────────────── */
      --fg:           #F2F3F7;
      --fg-2:         #8A8CA0;
      --fg-3:         #5E6070;
      --fg-4:         #5E6070;
      --text:         var(--fg);    /* compat */
      --muted:        var(--fg-2);  /* compat */

      /* ── Accent — violet ──────────────────────── */
      --accent:       #7B7FF3;
      --accent-hi:    #9A9DF7;
      --accent-soft:  rgba(123, 127, 243, 0.15);
      --accent-ring:  rgba(123, 127, 243, 0.28);

      /* ── Legacy accent2 (cyan hover states) ────── */
      --accent2:      #4dd4e0;
      --tt-cyan:      #4dd4e0;
      --tt-magenta:   #e879a8;

      /* ── Status ───────────────────────────────── */
      --success:      #34D399;
      --success-soft: rgba(52, 211, 153, 0.10);
      --warn:         #F0A63B;
      --warn-soft:    rgba(240, 166, 59, 0.10);
      --danger:       #F2586B;
      --danger-soft:  rgba(242, 88, 107, 0.10);

      /* ── Fonts ────────────────────────────────── */
      --font-heading: "Sora", "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
      --font-ui:   "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

      /* ── Radii ────────────────────────────────── */
      --r-xs: 4px;
      --r-sm: 6px;
      --r-md: 8px;
      --r-lg: 12px;
      --radius: var(--r-lg);
    }

    /* ── Phosphor icon sizing ────────────────────────────────── */
    i[class*="ph"] {
      display: inline-block; line-height: 1; vertical-align: -0.12em; font-size: 1rem;
    }
    .sb__item i[class*="ph"]        { font-size: 0.95rem; vertical-align: -0.1em; }
    .field-icon i[class*="ph"]      { font-size: 1rem; }
    .change-icon i[class*="ph"]     { font-size: 1rem; }
    .copy-info-btn i[class*="ph"]   { font-size: 0.9rem; }
    .back-btn i[class*="ph"]        { font-size: 0.9rem; }
    .tt-remarks-icon i[class*="ph"] { font-size: 1rem; }
    .arrow-up i[class*="ph"],
    .arrow-down i[class*="ph"]      { font-size: 0.7rem; vertical-align: 0; }
    .search-clear-btn i[class*="ph"],
    .lightbox-close i[class*="ph"]  { font-size: 1rem; vertical-align: -0.12em; }
    .change-delete i[class*="ph"]   { font-size: 0.85rem; vertical-align: -0.1em; }
    @keyframes ph-spin { to { transform: rotate(360deg); } }
    .ph-spinning { animation: ph-spin 0.75s linear infinite; display: inline-block; }
    @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(242,88,107,.55); } 70% { box-shadow: 0 0 0 7px rgba(242,88,107,0); } 100% { box-shadow: 0 0 0 0 rgba(242,88,107,0); } }

    html { font-size: 19.2px; } /* 16px × 1.2 — scales all rem values by 20% */
    * { -webkit-tap-highlight-color: transparent; }

    body {
      margin: 0; padding: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-ui);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
    }

    /* ═══════════════════════════════════════════════════════════
       APP SHELL
       ═══════════════════════════════════════════════════════════ */
    #app { display: none; min-height: 100vh; }
    #app.app-ready { display: grid; grid-template-columns: 14.5rem 1fr; }

    /* ── Sidebar ────────────────────────────────────────────── */
    .sb {
      background: var(--surface); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; padding: 0.875rem 0.625rem; gap: 0.25rem;
      position: sticky; top: 0; height: 100vh; overflow-y: auto;
    }
    .sb__brand {
      display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 0.875rem; flex-shrink: 0;
    }
    .sb__logo-img { height: 1.5rem; width: auto; flex-shrink: 0; }
    .sb__title { font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; min-width: 0; }
    .sb__title small { display: block; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 400; color: var(--fg-3); margin-top: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb__version { font-size: 0.56rem; font-weight: 500; color: var(--accent-hi); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: 4px; padding: 1px 5px; cursor: pointer; letter-spacing: 0.01em; flex-shrink: 0; transition: background 0.15s; }
    .sb__version:hover { background: var(--accent-ring); }
    .sb__group { display: flex; flex-direction: column; gap: 1px; padding: 0.25rem 0; }
    .sb__label { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding: 0.375rem 0.625rem 0.25rem; }
    .sb__label--coll { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; text-transform: none; letter-spacing: normal; font-size: 0.77rem; font-weight: 400; padding: 4px 8px 4px 30px; margin: 0 4px; }
    .sb__label--coll .sb__coll-caret { margin-left: auto; font-size: 0.75rem; transition: transform 0.15s ease; }
    .sb__label--coll.is-collapsed .sb__coll-caret { transform: rotate(-90deg); }
    #sbCollList.is-collapsed, .sb__coll-add.is-collapsed { display: none; }
    .sb__item {
      display: flex; align-items: center; gap: 0.625rem; min-height: 2.1rem; padding: 0.5rem 0.625rem;
      border-radius: var(--r-md); color: var(--fg-2); font-size: 0.81rem; cursor: pointer; user-select: none; text-decoration: none;
      font-weight: 500; margin: 0 0.0625rem;
    }
    .sb__item:hover { background: var(--hover); color: var(--fg); }
    .sb__item.is-active { background: linear-gradient(135deg, #8B8FF5, #6A6EE0); color: #fff; font-weight: 700; }
    .sb__item.is-active .sb__kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
    .sb__kbd {
      margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem; color: var(--fg-3);
      background: var(--surface-2); border: 1px solid var(--border); padding: 1px 0.3125rem; border-radius: 3px;
      flex-shrink: 0;
    }
    @media (max-width: 768px) { .sb__kbd--desktop { display: none !important; } }
    .sb__count {
      margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
      color: var(--fg-2); text-align: center;
    }
    .sb__item.is-active .sb__count {
      color: #fff;
    }
    .sb__sub-item { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 30px; border-radius: var(--r-sm); cursor: pointer; font-size: 0.77rem; color: var(--fg-3); transition: background 0.1s, color 0.1s; margin: 0 4px; }
    .sb__sub-item:hover { background: var(--hover); color: var(--fg); }
    .sb__sub-item.is-active { color: var(--accent-hi); background: var(--accent-soft); }
    .sb__sub-item i { font-size: 0.82rem; }
    .sb__sub-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; color: var(--fg-3); text-align: center; }
    .sb__sub-item.is-active .sb__sub-count { color: var(--accent-hi); }
    .sb__divider { height: 1px; background: var(--border); margin: 0.375rem 0.25rem; }
    .sb__tree { position: relative; }
    .sb__tree::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 18px; width: 1px; background: var(--border); }
    .sb__tree--nested::before { left: 30px; top: 0; bottom: 12px; }
    .sb__coll-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 42px; border-radius: var(--r-sm); cursor: pointer; font-size: 0.7rem; color: var(--fg-3); transition: background 0.1s, color 0.1s; margin: 0 4px; }
    .sb__coll-item:hover { background: var(--hover); color: var(--fg); }
    .sb__coll-item.is-active { color: var(--accent-hi); background: var(--accent-soft); }
    .sb__coll-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .sb__coll-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sb__coll-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; color: var(--fg-3); text-align: center; flex-shrink: 0; }
    .sb__coll-item.is-active .sb__coll-count { color: var(--accent-hi); }
    .sb__coll-add { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 42px; border-radius: var(--r-sm); cursor: pointer; font-size: 0.77rem; color: var(--fg-4); margin: 0 4px; transition: color 0.1s, background 0.1s; }
    .sb__coll-add:hover { color: var(--fg); background: var(--hover); }
    .coll-chip { display: inline-flex; align-items: center; gap: 3px; border-radius: 8px; padding: 1px 6px; font-size: 0.68rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
    .coll-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .coll-menu-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
    .uv-menu-sub { padding: 4px 0; border-top: 1px solid var(--border); margin-top: 2px; }
    .uv-menu-sub-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px 7px 22px; background: none; border: none; color: var(--fg-2); font-family: var(--font-ui); font-size: 0.82rem; cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; white-space: nowrap; }
    .uv-menu-sub-item:hover { background: var(--hover); color: var(--fg); }
    .uv-menu-sub-label { padding: 6px 14px 2px; font-size: 0.7rem; color: var(--fg-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; }
    .coll-colour-grid { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px; }
    .coll-colour-swatch { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.1s, transform 0.1s; }
    .coll-colour-swatch:hover, .coll-colour-swatch.selected { border-color: var(--fg); transform: scale(1.15); }
    .sb__spacer { flex: 1; min-height: 1rem; }
    .sb__impersonate {
      margin: 0.25rem; padding: 0.5rem 0.625rem;
      background: rgba(240,166,59,0.08); border: 1px solid rgba(240,166,59,0.20);
      border-radius: var(--r-sm); font-size: 0.69rem; color: var(--warn);
      display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    }
    .sb__impersonate button {
      background: none; border: 1px solid rgba(240,166,59,0.35); border-radius: 4px;
      color: var(--warn); cursor: pointer; font-size: 0.69rem; padding: 2px 0.4375rem; font-family: inherit;
    }
    .sb__user {
      display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem;
      border-radius: var(--r-sm); cursor: default;
      border-top: 1px solid var(--border); margin-top: 0.25rem; flex-shrink: 0;
    }
    .sb__user-avatar {
      width: 1.75rem; height: 1.75rem; border-radius: 50%;
      background: linear-gradient(135deg, #5b6ee0, #8b5cf6);
      display: grid; place-items: center; font-size: 0.75rem; font-weight: 600; color: #fff; flex-shrink: 0;
    }
    .sb__user-name { font-size: 0.78rem; font-weight: 500; line-height: 1.2; }
    .sb__user-role { font-size: 0.66rem; color: var(--fg-3); margin-top: 1px; }
    .sb__signout-btn {
      margin-left: auto; background: none; border: none; color: var(--fg-3); cursor: pointer;
      padding: 0.25rem; border-radius: 4px; font-size: 0.9rem; display: flex; align-items: center; transition: color 0.15s; flex-shrink: 0;
    }
    .sb__signout-btn:hover { color: var(--danger); }
    .sb__signout-btn--hover-only { opacity: 0; transition: opacity 0.12s, color 0.15s; }
    .sb__user:hover .sb__signout-btn--hover-only { opacity: 1; }
    .sb__user .sb__version { margin-left: auto; flex-shrink: 0; }
    .sb__agency {
      display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem;
      border-radius: var(--r-sm); cursor: pointer;
      border-top: 1px solid var(--border); margin-top: 0.25rem; flex-shrink: 0;
      transition: background 0.12s;
    }
    .sb__agency:hover { background: var(--hover); }
    .sb__agency-avatar {
      width: 1.75rem; height: 1.75rem; border-radius: var(--r-xs);
      display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .sb__agency-name { font-size: 0.78rem; font-weight: 500; line-height: 1.2; }
    .sb__agency-sub { font-size: 0.66rem; color: var(--fg-3); margin-top: 1px; }

    /* ── Content area ────────────────────────────────────────── */
    #appContent { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

    /* ── Topbar ──────────────────────────────────────────────── */
    .app-topbar {
      height: 64px; border-bottom: 1px solid var(--border); padding: 0 24px;
      display: flex; align-items: center; gap: 14px; background: var(--surface); flex-shrink: 0;
      position: sticky; top: 0; z-index: 150;
    }
    @media (max-width: 768px) {
      .app-topbar::before {
        content: ''; position: absolute; z-index: -1;
        top: calc(-1 * env(safe-area-inset-top)); left: 0; right: 0;
        height: env(safe-area-inset-top); background: var(--surface);
      }
    }
    .app-topbar .crumb-sep { color: var(--fg-4); font-size: 13px; }
    .app-topbar .crumb-leaf { color: var(--fg); font-size: 13px; font-weight: 500; }
    .app-topbar .crumb-root { color: var(--fg-2); font-size: 13px; cursor: pointer; }
    .app-topbar .crumb-root:hover { color: var(--fg); }
    .tb-search-wrap {
      flex: 1; height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
      background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
      padding: 0 14px; position: relative;
    }
    .tb-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
    .tb-icon-btn {
      display: flex; align-items: center; justify-content: center; position: relative;
      width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r-sm);
      background: transparent; color: var(--fg-2); cursor: pointer; transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .tb-icon-btn:hover { background: var(--surface-2); color: var(--fg); }
    .tb-lang { position: relative; flex-shrink: 0; }
    .tb-lang-btn {
      height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
      background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
      color: var(--fg); padding: 0 12px; font-size: 0.8rem; font-weight: 500; cursor: pointer;
      transition: background 0.15s;
    }
    .tb-lang-btn:hover { background: var(--surface-2); }
    .tb-lang-btn i.ph-globe { color: var(--fg-3); font-size: 0.95rem; }
    .tb-lang-caret { font-size: 0.65rem; color: var(--fg-3); margin-left: 2px; }
    .tb-lang-menu {
      display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px;
      background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
      padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 200;
    }
    .tb-lang-menu.open { display: block; }
    .tb-lang-item {
      padding: 8px 10px; border-radius: var(--r-sm); font-size: 0.85rem; color: var(--fg);
      cursor: pointer; white-space: nowrap;
    }
    .tb-lang-item:hover { background: var(--hover); }
    .tb-lang-item.is-active { color: var(--accent-hi); }
    .tb-search-icon { color: var(--fg-4); font-size: 1rem; flex-shrink: 0; }
    .tb-search-input {
      flex: 1; background: transparent; border: none; outline: none; color: var(--fg);
      font-size: 0.86rem; min-width: 0;
    }
    .tb-search-input::placeholder { color: var(--fg-4); }
    .tb-search-btn {
      flex-shrink: 0; height: 34px; box-sizing: border-box; display: flex; align-items: center;
      background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm);
      padding: 0 16px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: opacity 0.15s;
    }
    .tb-search-btn:hover { opacity: 0.9; }
    .tb-search-kbd {
      flex-shrink: 0; color: var(--fg-4); font-size: 0.72rem; font-family: var(--font-mono);
      border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 6px;
      white-space: nowrap; pointer-events: none;
    }
    @media (max-width: 720px) { .tb-search-kbd { display: none; } }
    @media (max-width: 720px) {
      .tb-search-wrap { max-width: none; }
      .tb-search-btn { padding: 0 10px; }
    }

    /* ── Auth overlay ─────────────────────────────── */
    .auth-overlay {
      position: fixed; inset: 0;
      background: var(--bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 500;
      padding: 16px;
    }

    .auth-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; padding: 28px;
      width: 100%; max-width: 380px;
      position: relative; z-index: 1; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    .auth-logo {
      display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px;
    }
    .auth-logo-img { width: 120px; height: auto; }
    .auth-logo-sub { font-size: 11px; color: var(--fg-3); }
    .auth-card h2 {
      font-size: 19px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em;
    }
    .auth-card p { color: var(--fg-2); font-size: 12.5px; margin: 0 0 22px; }
    .auth-fields { display: flex; flex-direction: column; gap: 14px; }
    .auth-field-group { display: flex; flex-direction: column; }
    .auth-field-label {
      font-size: 11.5px; color: var(--fg-3); font-weight: 500;
      letter-spacing: 0.02em; display: block; margin-bottom: 6px;
    }
    .auth-field-label-row {
      display: flex; align-items: center; margin-bottom: 6px;
    }
    .auth-forgot {
      margin-left: auto; font-size: 11.5px; color: var(--fg-2);
      cursor: pointer; transition: color 0.15s;
    }
    .auth-forgot:hover { color: var(--fg); }
    .auth-keep-signed {
      display: flex; align-items: center; gap: 8px;
      font-size: 12.5px; color: var(--fg-2); cursor: pointer; margin-top: 2px;
    }
    .auth-checkbox {
      width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
      border: 1px solid var(--border-bright); background: transparent;
      display: grid; place-items: center; transition: background 0.15s, border-color 0.15s;
    }
    .auth-checkbox .ph { font-size: 9px; color: #0b0b14; opacity: 0; transition: opacity 0.1s; }
    .auth-checkbox.is-checked { background: var(--accent); border-color: var(--accent); }
    .auth-checkbox.is-checked .ph { opacity: 1; }
    .auth-field {
      width: 100%; background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--r-md); color: var(--fg);
      font-family: var(--font-ui); font-size: 0.9rem;
      padding: 10px 12px; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s; display: block;
    }
    .auth-field:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
    .auth-field::placeholder { color: var(--fg-3); }
    .pw-meter { margin-top: 6px; display: none; }
    .pw-meter.visible { display: block; }
    .pw-meter-bar { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
    .pw-meter-fill { height: 100%; border-radius: 2px; transition: width 0.2s, background 0.2s; width: 0; }
    .pw-meter-label { font-size: 0.72rem; margin-top: 4px; color: var(--fg-4); font-family: var(--font-ui); }
    .auth-btn {
      width: 100%; background: var(--accent); border: none; border-radius: var(--r-md);
      color: #0b0b14; cursor: pointer;
      font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
      padding: 11px; margin-top: 16px; transition: background 0.15s;
    }
    .auth-btn:hover { background: var(--accent-hi); }
    .auth-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .auth-error {
      background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25);
      border-radius: var(--r-sm); color: var(--danger);
      font-size: 0.82rem; padding: 10px 12px; margin-bottom: 14px; display: none;
    }
    .auth-card-footer {
      margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 6px;
      font-size: 11.5px; color: var(--fg-3);
    }
    .auth-lang-link {
      cursor: pointer; color: var(--fg-3); transition: color 0.15s;
    }
    .auth-lang-link:hover { color: var(--fg); }
    .auth-lang-link.is-active { color: var(--fg-2); font-weight: 500; }
    .auth-lang-sep { color: var(--fg-4); margin: 0 3px; }
    .auth-footer {
      position: absolute; bottom: 18px; left: 0; right: 0;
      text-align: center; font-size: 11px;
      font-family: var(--font-mono); color: var(--fg-4); z-index: 1;
    }

    /* ── Nav link / lang select ───────────────────── */
    .nav-link {
      color: var(--fg-2); font-size: 0.73rem; font-weight: 500; text-decoration: none;
      padding: 4px 9px; height: 28px;
      display: inline-flex; align-items: center; gap: 5px;
      border: 1px solid var(--border); border-radius: var(--r-sm);
      transition: color 0.15s, border-color 0.15s; cursor: pointer;
      background: var(--surface); font-family: var(--font-ui);
    }
    .nav-link:hover { color: var(--fg); border-color: var(--border-bright); }
    .nav-link.active { color: var(--accent-hi); border-color: var(--accent); }

    .lang-select {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%235E6070' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 7px center; padding-right: 20px; cursor: pointer;
    }
    .lang-select option { background: var(--surface-2); color: var(--fg); }

    /* ── Search row ───────────────────────────────── */
    .search-input-wrap { flex: 1; position: relative; }

    /* ── Lightbox ─────────────────────────────────── */
    .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(6px); z-index: 1000; align-items: center; justify-content: center; }
    .lightbox.open { display: flex; }
    .lightbox img { max-width: min(480px, 90vw); max-height: 90vh; border-radius: 50%; box-shadow: 0 0 60px rgba(0,0,0,0.8); }
    .lightbox.lightbox--square img { border-radius: 12px; }
    .ud-live-gift-icon { height: 1.15em; width: 1.15em; object-fit: contain; vertical-align: -0.2em; margin-right: 4px; cursor: pointer; border-radius: 3px; }
    .lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; opacity: 0.7; }
    .lightbox-close:hover { opacity: 1; }

    /* ── Home / dashboard view ── */
    #homeView { }

    /* ── Users view ── */
    #usersView { display: none; }
    .uv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
    .uv-header-main { flex: 1; min-width: 0; }
    .uv-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; margin-bottom: 4px; }
    .uv-subtitle { font-size: 0.82rem; color: var(--fg-3); max-width: 520px; }
    .uv-header-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 2px; }
    .uv-btn { height: 32px; padding: 0 14px; border-radius: var(--r-sm); font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, border-color 0.15s, color 0.15s; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); }
    .uv-btn:hover { color: var(--fg); border-color: var(--border-bright); }
    .uv-btn-primary { border: none; background: var(--accent); color: #fff; font-weight: 600; }
    .uv-btn-primary:hover { background: var(--accent-hi); color: #fff; border: none; }
    /* Scope filter (All / Mine / Org) */
    .uv-scope { display: inline-flex; gap: 1px; background: var(--surface-3); border-radius: var(--r-sm); padding: 3px; margin: 10px 16px 8px; }
    .uv-scope-btn { height: 28px; padding: 0 11px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--fg-3); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.12s, color 0.12s; white-space: nowrap; }
    .uv-scope-btn:hover { color: var(--fg); }
    .uv-scope-btn.active { background: var(--surface-2); border-color: transparent; color: var(--fg); font-weight: 600; }
    .uv-scope-btn.active .uv-tab-count { background: transparent; border-color: transparent; color: inherit; }
    /* Status tabs */
    .uv-tabs { display: flex; gap: 4px; padding: 0 16px 12px; flex-wrap: wrap; }
    .uv-tab { height: 28px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--fg-3); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; }
    .uv-tab:hover { color: var(--fg); background: var(--hover); }
    .uv-tab.active { background: var(--surface-2); border-color: var(--border); color: var(--fg); }
    .uv-tab-count { font-family: var(--font-mono); font-size: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 0 6px; min-width: 20px; text-align: center; line-height: 1.7; }
    .uv-tab.active .uv-tab-count { background: var(--bg); border-color: var(--border); color: var(--fg-2); }
    .uv-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    .uv-search-wrap { flex: 1; position: relative; }
    .uv-search { width: 100%; height: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 30px 0 11px; color: var(--fg); font-family: var(--font-ui); font-size: 0.83rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
    .uv-search-wrap .search-clear-btn {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--fg-3); cursor: pointer;
      font-size: 0.85rem; line-height: 1; padding: 4px; transition: color 0.15s; display: none;
    }
    .uv-search-wrap .search-clear-btn:hover { color: var(--fg); }
    .uv-search:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
    .uv-search::placeholder { color: var(--fg-3); }
    .uv-sort-select { height: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-2); font-family: var(--font-ui); font-size: 0.8rem; padding: 0 10px; outline: none; cursor: pointer; }
    .uv-sort-dir-btn { height: 32px; width: 32px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); color: var(--fg-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
    .uv-sort-dir-btn:hover { color: var(--fg); background: var(--hover); }
    /* Action dropdown menu */
    #uvActionMenu { display: none; position: fixed; z-index: 1200; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 148px; overflow: hidden; }
    .uv-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: none; border: none; color: var(--fg-2); font-family: var(--font-ui); font-size: 0.82rem; cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; white-space: nowrap; }
    .uv-menu-item:hover { background: var(--hover); color: var(--fg); }
    .uv-menu-item.danger:hover { background: var(--danger-soft); color: var(--danger); }
    .uv-menu-collections-trigger .uv-menu-collection-count { margin-left: auto; color: var(--fg-4); font: 0.7rem var(--font-mono); }
    .uv-menu-collections-caret { margin-left: 3px; color: var(--fg-4); font-size: 0.75rem; }
    #uvCollectionSubmenu { display: none; position: fixed; z-index: 1210; width: 260px; max-width: calc(100vw - 16px); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow: hidden; }
    .uv-menu-collection-filter-wrap { display: flex; align-items: center; gap: 7px; margin: 9px 10px 7px; padding: 0 9px; height: 34px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm); color: var(--fg-4); }
    .uv-menu-collection-filter-wrap:focus-within { border-color: var(--accent-ring); }
    .uv-menu-collection-filter-wrap i { flex-shrink: 0; font-size: 0.9rem; }
    .uv-menu-collection-filter { width: 100%; min-width: 0; border: none; outline: none; background: none; color: var(--fg); font: 0.8rem var(--font-ui); }
    .uv-menu-collection-filter::placeholder { color: var(--fg-4); }
    .uv-menu-collection-list { max-height: 280px; overflow-y: auto; padding: 2px 4px; }
    .uv-menu-collection-item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 8px 10px; border: none; border-radius: var(--r-sm); background: none; color: var(--fg-2); font: 0.82rem var(--font-ui); text-align: left; cursor: pointer; }
    .uv-menu-collection-item:hover { background: var(--hover); color: var(--fg); }
    .uv-menu-collection-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .uv-menu-collection-check { margin-left: auto; flex-shrink: 0; color: var(--accent-hi); font-size: 0.85rem; }
    .uv-menu-collection-empty { padding: 12px 10px; color: var(--fg-4); font-size: 0.78rem; text-align: center; }
    .uv-menu-collection-new { color: var(--accent-hi); }
    .uv-menu-header { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 14px 6px; color: var(--accent-hi); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); pointer-events: none; white-space: nowrap; }
    .uv-menu-sep { height: 1px; background: var(--border); margin: 3px 0; }
    .uv-bulk-action-btn { height: 28px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-3); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; }
    .uv-bulk-action-btn:hover { color: var(--fg); border-color: var(--border-bright); background: var(--hover); }
    .uv-bulk-action-btn.fav { border-color: var(--accent); color: var(--accent-hi); }
    .uv-bulk-action-btn.fav:hover { background: var(--accent-soft); }
    .tracked-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
    .tracked-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 0.82rem; }
    .tracked-table th { padding: 9px 12px; background: var(--surface-2); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); white-space: nowrap; text-align: left; }
    .tracked-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .tracked-table tr:last-child td { border-bottom: none; }
    .tracked-table tbody tr:hover td { background: var(--hover); }
    .tt-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--tt-cyan), var(--tt-magenta)); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; }
    .tt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .tt-account-cell { display: flex; align-items: flex-start; gap: 10px; }
    .tt-account-info { min-width: 0; padding-top: 1px; }
    .tt-name-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 2px; }
    .tt-tags-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
    .tt-role-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
    .tt-role-icon i { font-size: 11px; line-height: 1; }
    .tt-role-icon--streamer { background: rgba(178,123,240,.15); color: #B27BF0; }
    .tt-role-icon--user { background: rgba(52,211,153,.15); color: #34D399; }
    .uv-tag-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 6px; white-space: nowrap; cursor: pointer; }
    .tt-nickname { font-weight: 600; font-size: 0.85rem; }
    .tt-username { font-size: 0.73rem; color: var(--fg-3); font-family: var(--font-mono); }
    .tt-gift-badge { display: inline-flex; align-items: center; gap: 3px; border-radius: 8px; color: #fff; font-size: 0.5rem; font-weight: 700; padding: 0 5px; font-family: var(--font-mono); }
    .gift-badge-img { width: 12px; height: 12px; object-fit: contain; }
    .tt-count { font-family: var(--font-mono); font-size: 0.83rem; font-weight: 500; }
    .tt-followers { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; }
    .tt-delta { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
    .tt-delta.up { color: var(--success); }
    .tt-delta.down { color: var(--danger); }
    .tt-delta.flat { color: var(--fg-3); }
    .tt-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; white-space: nowrap; }
    .tt-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .tt-status-dot.active  { background: var(--success); }
    .tt-status-dot.paused  { background: var(--fg-3); }
    .tt-status-dot.deleted { background: var(--danger); }
    .tt-status-dot.alt     { background: var(--fg-3); }
    .uv-action-btn { background: none; border: none; color: var(--fg-3); cursor: pointer; padding: 4px 6px; border-radius: var(--r-xs); font-size: 1rem; display: flex; align-items: center; transition: color 0.15s, background 0.15s; }
    .uv-action-btn:hover { color: var(--fg); background: var(--surface-2); }
    .tracked-empty { padding: 48px; text-align: center; color: var(--fg-3); font-size: 0.86rem; }
    .tracked-empty-icon { font-size: 2rem; color: var(--fg-4); margin-bottom: 10px; }
    .tracked-empty-title { font-size: 0.9rem; font-weight: 600; color: var(--fg-2); margin-bottom: 4px; }
    .tracked-empty-sub { font-size: 0.8rem; color: var(--fg-4); }
.tracked-empty-action { margin-top: 16px; }
    @keyframes uv-shimmer { 0% { background-position: -400% 0 } 100% { background-position: 400% 0 } }
    .uv-skel { display: inline-block; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 400% 100%; animation: uv-shimmer 1.6s ease-in-out infinite; }
    .uv-skel-avatar { width: 38px; height: 38px; border-radius: 50%; }
    .uv-skel-row { display: flex; align-items: center; gap: 10px; }
    .ud-copy-handle-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--r-xs); color: var(--fg-4); font-size: 0.75rem; display: inline-flex; align-items: center; vertical-align: middle; opacity: 0; transition: opacity 0.15s, color 0.15s; margin-left: 3px; }
    .ud-meta-row:hover .ud-copy-handle-btn, .ud-copy-handle-btn:focus { opacity: 1; }
    .ud-copy-handle-btn:hover { color: var(--fg); }
    .ud-rel-empty { padding: 24px 16px; font-size: 0.83rem; color: var(--fg-3); display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .ud-rel-empty-icon { font-size: 1.4rem; color: var(--fg-4); }
    .uv-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
    .uv-pagination-controls { display: flex; align-items: center; gap: 4px; }
    .pg-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; font-family: var(--font-ui); font-size: 0.76rem; padding: 4px 9px; transition: color 0.15s, border-color 0.15s; line-height: 1.5; }
    .pg-btn:hover:not(:disabled) { color: var(--accent-hi); border-color: var(--accent); }
    .pg-btn:disabled { opacity: 0.35; cursor: default; }
    .pg-btn.active { color: var(--accent-hi); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
    .pg-ellipsis { color: var(--fg-3); font-size: 0.76rem; padding: 0 3px; }
    .pg-info { font-size: 0.73rem; color: var(--fg-3); }
    .per-page-wrap { display: flex; align-items: center; gap: 6px; }
    .per-page-label { font-size: 0.73rem; color: var(--fg-3); }
    .per-page-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-ui); font-size: 0.76rem; padding: 3px 7px; cursor: pointer; outline: none; }
    /* spike/drop/rename inline badges */
    .uv-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.56rem; font-weight: 700; border-radius: var(--r-xs); padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.3px; border: 1px solid; vertical-align: middle; white-space: nowrap; }
    .uv-badge-spike   { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #f59e0b; }
    .uv-badge-drop    { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.28); color: var(--danger); }
    .uv-badge-deleted { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.28);   color: var(--danger); }
    .uv-badge-rename { background: rgba(20,184,166,0.10); border-color: rgba(20,184,166,0.28); color: #14b8a6; }
    .uv-badge-stale  { background: rgba(161,161,170,0.10); border-color: rgba(161,161,170,0.28); color: #a1a1aa; }
    .uv-badge-paused { background: rgba(161,161,170,0.10); border-color: rgba(161,161,170,0.28); color: #a1a1aa; }
    /* Favourite star button */
    /* User detail favourite star */
    .ud-fav-btn { background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:var(--r-xs); color:var(--fg-4); font-size:1.2rem; display:inline-flex; align-items:center; transition:color 0.15s, background 0.15s; line-height:1; }
    .ud-fav-btn:hover { color:var(--accent-hi); background:var(--accent-soft); }
    .ud-fav-btn.is-fav { color:var(--accent-hi); }
    .uv-fav-btn { background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:var(--r-xs); color:var(--fg-4); font-size:1rem; display:flex; align-items:center; transition:color 0.15s, background 0.15s; }
    .uv-fav-btn:hover { color:var(--accent-hi); background:var(--accent-soft); }
    .uv-fav-btn.is-fav { color:var(--accent-hi); }
    .uv-fav-btn.is-fav:hover { color:var(--accent); }
    /* Selected row highlight */
    .tracked-row.uv-row-selected { background: rgba(99,102,241,0.08); }
    /* Checkbox cell — full cell is the click target */
    .uv-check-cell { cursor:pointer; text-align:center; padding:0; width:36px; user-select:none; }
    .uv-check-cell:hover .auth-checkbox { border-color:var(--accent); }
    /* ── Bulk Edit Panel ──────────────────────────────────────────────────── */
    #bepOverlay {
      position:fixed; inset:0; z-index:490; cursor:pointer;
      background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
      display:none;
    }
    #bepPanel.bep-open ~ #bepOverlay { display:block; }
    /* Bottom sheet — always, on all screen sizes */
    #bepPanel {
      position:fixed; bottom:0; left:0; right:0; width:100%;
      height:82vh; min-height:500px; max-height:92vh;
      background:var(--surface-1); background-color:var(--bg);
      z-index:491;
      border-top:1px solid var(--border-2);
      border-radius:16px 16px 0 0;
      display:flex; flex-direction:column;
      transform:translateY(100%);
      transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
      box-shadow:0 -8px 40px rgba(0,0,0,0.4);
    }
    #bepPanel.bep-open { transform:translateY(0); }
    #bepPanel::before {
      content:''; display:block; width:40px; height:4px; border-radius:2px;
      background:var(--border-bright); margin:12px auto 0; flex-shrink:0;
    }
    .bep-header { display:flex; align-items:center; justify-content:space-between;
                  padding:18px 20px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .bep-title { font-size:0.95rem; font-weight:600; color:var(--fg); }
    .bep-subtitle { font-size:0.75rem; color:var(--fg-3); margin-top:2px; }
    .bep-close { background:none; border:none; color:var(--fg-3); cursor:pointer; font-size:1.1rem;
                 padding:6px; border-radius:var(--r-xs); display:flex; align-items:center; }
    .bep-close:hover { color:var(--fg); background:var(--surface-2); }
    .bep-body { flex:1; overflow-y:auto; padding:16px 20px 24px; display:flex; flex-direction:column; gap:20px; }
    .bep-loading { display:flex; align-items:center; justify-content:center; height:80px; color:var(--fg-4); font-size:1.2rem; }
    .bep-section { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md); padding:14px; }
    .bep-section-title { font-size:0.78rem; font-weight:600; color:var(--fg-2); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
    /* User chips (selected users in section) — larger for readability */
    .bep-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; min-height:32px; }
    .bep-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px;
                background:var(--surface-2); border:1px solid var(--border); border-radius:20px;
                font-size:0.8rem; color:var(--fg-2); }
    .bep-chip img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
    .bep-chip-init { width:22px; height:22px; border-radius:50%; background:var(--accent-soft);
                     color:var(--accent-hi); font-size:0.65rem; font-weight:700; display:flex;
                     align-items:center; justify-content:center; flex-shrink:0; }
    .bep-action-block { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
    .bep-action-label { font-size:0.73rem; color:var(--fg-3); }
    .bep-action-row { display:flex; align-items:flex-start; gap:8px; }
    /* Autocomplete pill input */
    .bep-ac-wrap { position:relative; flex:1; }
    .bep-ac-field { display:flex; flex-wrap:wrap; gap:5px; align-items:center;
                    padding:4px 8px; background:var(--surface-2); border:1px solid var(--border);
                    border-radius:var(--r-sm); min-height:34px; cursor:text; }
    .bep-ac-field:focus-within { border-color:var(--accent); }
    .bep-ac-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 8px;
                   background:var(--accent-soft); border:1px solid var(--accent);
                   border-radius:20px; font-size:0.75rem; color:var(--accent-hi); }
    .bep-ac-pill-x { background:none; border:none; color:var(--accent-hi); cursor:pointer;
                     font-size:0.9rem; padding:0 2px; line-height:1; opacity:0.7; }
    .bep-ac-pill-x:hover { opacity:1; }
    .bep-ac-input { border:none; outline:none; background:transparent; color:var(--fg);
                    font-size:0.78rem; font-family:var(--font-ui); min-width:80px; flex:1; padding:2px 0; }
    .bep-ac-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:10;
                       background:var(--surface-2); border:1px solid var(--border);
                       border-radius:var(--r-sm); box-shadow:0 4px 12px rgba(0,0,0,0.3);
                       max-height:180px; overflow-y:auto; }
    .bep-ac-opt { display:flex; align-items:center; gap:8px; padding:7px 10px;
                  cursor:pointer; font-size:0.8rem; color:var(--fg-2); }
    .bep-ac-opt:hover { background:var(--hover); color:var(--fg); }
    .bep-ac-opt img { width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
    .bep-ac-opt-init { width:20px; height:20px; border-radius:50%; background:var(--accent-soft);
                       color:var(--accent-hi); font-size:0.6rem; font-weight:700; display:flex;
                       align-items:center; justify-content:center; flex-shrink:0; }
    .bep-ac-empty { padding:8px 10px; font-size:0.78rem; color:var(--fg-4); }
    .bep-btn { padding:6px 14px; border-radius:var(--r-sm); border:1px solid var(--accent);
               background:var(--accent-soft); color:var(--accent-hi); font-size:0.78rem; font-weight:500;
               cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
    .bep-btn:hover { background:var(--accent); color:#fff; }
    .bep-btn:disabled { opacity:0.4; cursor:not-allowed; }
    .bep-btn-full { width:100%; justify-content:center; margin-top:4px; }
    .bep-result { font-size:0.73rem; margin-top:6px; padding:5px 8px; border-radius:var(--r-sm); display:none; }
    .bep-result.ok { background:rgba(34,197,94,0.1); color:#4ade80; border:1px solid rgba(34,197,94,0.2); }
    .bep-result.warn { background:rgba(240,166,59,0.1); color:#F0A63B; border:1px solid rgba(240,166,59,0.2); }
    .bep-empty { font-size:0.78rem; color:var(--fg-4); font-style:italic; }
    .bep-divider { height:1px; background:var(--border); margin:10px 0; }
    /* search status row */
    .users-search-status-row { height: 1.2rem; margin-bottom: 4px; }
    .users-search-status { font-size: 0.7rem; color: var(--fg-3); }

    /* ── Global tooltip ──────────────────────────── */
    #tooltip {
      position: fixed; z-index: 9999; pointer-events: none;
      background: var(--surface-2); color: var(--fg); border: 1px solid var(--border-bright);
      border-radius: var(--r-sm); padding: 4px 9px; font-size: 0.73rem;
      white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
      opacity: 0; transform: translateY(4px); transition: opacity 0.1s ease, transform 0.1s ease;
    }
    #tooltip.visible { opacity: 1; transform: translateY(0); }

    /* Nickname truncation tooltip */
    .nick-truncated { position: relative; display: inline; cursor: default; }
    .nick-truncated .nick-tooltip {
      visibility: hidden; opacity: 0;
      position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
      background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 3px 7px; font-size: 0.75rem;
      white-space: nowrap; pointer-events: none; z-index: 100; transition: opacity 0.15s;
    }
    .nick-truncated:hover .nick-tooltip,
    .nick-truncated.tooltip-open .nick-tooltip { visibility: visible; opacity: 1; }

    .gift-level-badge .gift-badge-img { width: 14px; height: 14px; }

    .lookup-btn {
      background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
      color: var(--fg-3); cursor: pointer; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500;
      padding: 4px 10px; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
    }
    .lookup-btn:hover { color: var(--accent-hi); border-color: var(--accent); }

    /* ── Changelog view ─────────────────────────────── */
    #changelogView { display: none; }

    /* ── Gifter Levels ──────────────────────────────────────────────────── */
    #levelsView { display: none; }
    .lv-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px 64px; }
    .lv-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
    .lv-title { font:700 1.15rem var(--font-heading); margin:0 0 5px; }
    .lv-sub { color:var(--fg-2); font-size:13px; margin:0; }
    .lv-rate-tools { display:flex; align-items:center; gap:16px; flex:none; }
    .lv-rate { text-align:right; }
    .lv-rate span { display:block; color:var(--fg-4); font-size:11px; font-weight:600; letter-spacing:.06em; }
    .lv-rate strong { display:block; color:var(--fg); font:600 13px var(--font-mono); margin-top:3px; }
    .lv-rate-divider { width:1px; height:32px; background:var(--border); }
    .lv-currency { position:relative; }
    .lv-currency button { height:38px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--fg); cursor:pointer; font:13px var(--font-mono); }
    .lv-currency button i:first-child { color:var(--dim); font-size:14px; }
    .lv-currency button i:last-child { color:var(--fg-4); font-size:12px; }
    .lv-currency-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; width:210px; padding:6px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:200; }
    .lv-currency-menu.is-open { display:block; }
    .lv-currency-option { width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px; border:0; border-radius:var(--r-sm); background:none; color:var(--fg); cursor:pointer; text-align:left; font-size:.85rem; }
    .lv-currency-option:hover { background:var(--hover); }
    .lv-currency-option.is-selected { color:var(--accent-hi); }
    .lv-currency-option code { width:36px; color:inherit; font:12px var(--font-mono); }
    .lv-compare { display:flex; align-items:center; flex-wrap:wrap; gap:16px; min-height:76px; padding:16px 20px; margin-bottom:18px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
    .lv-compare-left { flex:0 1 420px; display:flex; align-items:center; gap:10px; min-width:420px; }
    .lv-compare-label { align-self:flex-start; color:var(--fg-4); font-size:11px; font-weight:700; letter-spacing:.06em; white-space:nowrap; }
    .lv-pick { min-width:130px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
    .lv-pick small { display:block; color:var(--fg-4); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
    .lv-pick strong { display:block; margin-top:3px; color:var(--fg); font:13px var(--font-mono); }
    .lv-pick strong.is-empty { color:var(--fg-4); font-weight:400; }
    .lv-arrow { color:var(--fg-4); font-size:16px; }
    .lv-helper { flex:1 1 360px; min-width:280px; color:var(--fg-2); font-size:12px; }
    .lv-active-stats { display:flex; align-items:center; gap:22px; padding-left:16px; border-left:1px solid var(--border); }
    .lv-stat-label { display:block; color:var(--fg-4); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
    .lv-stat-value { display:flex; align-items:center; gap:5px; margin-top:4px; color:#5AA8E8; font:600 24px var(--font-mono); }
    .lv-stat-value i,.lv-coin-icon { width:17px; height:17px; object-fit:contain; flex:none; }
    .lv-stat-money { display:block; margin-top:5px; color:var(--fg); font:600 15px var(--font-mono); }
    .lv-compare-range { margin-left:auto; color:var(--dim); font:11px var(--font-mono); white-space:nowrap; }
    .lv-clear { border:1px solid var(--border); border-radius:7px; background:var(--surface-2); color:var(--fg); padding:7px 11px; cursor:pointer; font-size:12px; }
    .lv-table-panel { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
    .lv-table-scroll { overflow-x:auto; }
    .lv-table { min-width:760px; }
    .lv-table-row,.lv-table-head { display:grid; grid-template-columns:150px 1fr 1fr 1fr 110px; gap:12px; align-items:center; padding:9px 16px; }
    .lv-table-head { position:sticky; top:0; z-index:3; background:#15161F; color:var(--fg-4); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
    .lv-table-head > span:not(:first-child),.lv-cell-right { text-align:right; }
    .lv-tier-head { position:sticky; top:37px; z-index:2; display:flex; align-items:center; gap:8px; padding:8px 16px; border-top:1px solid var(--border); background:#15161F; font-size:11px; }
    .lv-tier-head i { width:6px; height:6px; border-radius:50%; }
    .lv-tier-name { font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
    .lv-tier-range { color:var(--fg-4); font-weight:600; }
    .lv-table-row { min-height:48px; border-top:1px solid var(--border); cursor:pointer; user-select:none; transition:background .12s,opacity .12s,box-shadow .12s; }
    .lv-table-row:hover { background:rgba(123,127,243,.06); }
    .lv-table-row.is-range { background:rgba(123,127,243,.06); }
    .lv-table-row.is-end { background:rgba(123,127,243,.14); box-shadow:inset 2px 0 0 var(--accent); }
    .lv-table-row.is-dim { opacity:.45; }
    .lv-level-cell { display:flex; align-items:center; gap:10px; color:var(--fg); font-size:13px; font-weight:600; }
    .lv-badge { width:15px; height:15px; flex:none; object-fit:contain; }
    .lv-cell-diamond,.lv-cell-money { font:600 13px var(--font-mono); }
    .lv-cell-diamond { color:#5AA8E8; }
    .lv-cell-diamond i { margin-right:5px; font-size:12px; }
    .lv-cell-diamond .lv-coin-icon { width:12px; height:12px; margin-right:5px; }
    .lv-cell-muted { color:var(--dim); font:12px var(--font-mono); }
    .lv-cell-money { color:var(--fg); font-size:12px; }
    .lv-note { margin-top:12px; color:var(--fg-4); font-size:11px; line-height:1.6; }
    @media (max-width: 760px) { .lv-wrap { padding:20px 14px 48px; } .lv-header { flex-wrap:wrap; } .lv-rate-tools { width:100%; justify-content:flex-start; } .lv-rate { text-align:left; } .lv-compare-left { flex-basis:100%; min-width:280px; } .lv-helper { flex-basis:100%; } .lv-active-stats { border-left:0; border-top:1px solid var(--border); padding:12px 0 0; width:100%; } }
    .cl-wrap { max-width: none; margin: 0; padding: 28px 28px 60px; }
    .cl-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
    .cl-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
    .cl-sub { font-size: 0.8rem; color: var(--fg-3); margin: 0; }
    .cl-loading { text-align: center; padding: 60px; color: var(--fg-3); font-size: 1.4rem; }
    /* Rendered markdown */
    .cl-body h2 { font-size: 1.1rem; font-weight: 700; margin: 40px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 10px; }
    .cl-body h2 .cl-ver { color: var(--accent-hi); }
    .cl-body h2 .cl-date { font-size: 0.72rem; font-weight: 400; color: var(--fg-4); margin-left: auto; }
    .cl-body h3 { font-size: 0.82rem; font-weight: 600; color: var(--fg-2); margin: 14px 0 8px; }
    .cl-body ul { margin: 0 0 8px 0; padding-left: 18px; }
    .cl-body li { font-size: 0.82rem; color: var(--fg-2); line-height: 1.65; margin-bottom: 4px; }
    .cl-body li strong { color: var(--fg); }
    .cl-body hr { border: none; border-top: 1px solid var(--border); margin: 8px 0 0; }
    .cl-body p { font-size: 0.82rem; color: var(--fg-3); margin: 0 0 16px; }
    @media (max-width: 768px) { .cl-wrap { padding: 20px 14px 60px; } .cl-body h2 { font-size: 1rem; } }

    /* ── Activity view ───────────────────────────────── */
    #activityView { display: none; }
    .ac-view { padding: 28px 28px 60px; }
    .ac-header { margin-bottom: 20px; }
    .ac-header-main { }
    .ac-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; margin-bottom: 4px; }
    .ac-subtitle { font-size: 0.82rem; color: var(--fg-3); max-width: 600px; }
    /* Stats row */
    .ac-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
    .ac-stat-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 14px 16px;
    }
    .ac-stat-card:hover { border-color: var(--border-2); }
    .ac-stat-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin-bottom: 6px; }
    .ac-stat-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); line-height: 1; margin-bottom: 4px; font-family: var(--font-mono); }
    .ac-stat-sub { font-size: 0.72rem; color: var(--fg-3); line-height: 1.4; }
    .ac-stat-sub.up { color: var(--success); }
    .ac-stat-sub.down { color: var(--danger); }
    .ac-stat-sub.warn { color: var(--warn); }
    /* Body */
    .ac-body { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
    /* Feed panel */
    .ac-feed-panel, .ac-panel {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
    }
    .ac-panel-header {
      display: flex; align-items: center; gap: 10px; padding: 12px 16px;
      background: var(--surface-2); border-bottom: 1px solid var(--border);
    }
    .ac-panel-title { font-size: 0.82rem; font-weight: 600; color: var(--fg); }
    .ac-feed-meta { font-size: 0.72rem; color: var(--fg-3); margin-left: 2px; }
    .ac-live-dot {
      margin-left: auto; display: flex; align-items: center; gap: 5px;
      font-size: 0.72rem; color: var(--success);
    }
    .ac-live-pip {
      width: 7px; height: 7px; border-radius: 50%; background: var(--success);
      animation: ac-pulse 2s ease-in-out infinite;
    }
    @keyframes ac-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }
    .ac-badge-count {
      margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
      background: var(--warn-soft); border: 1px solid var(--warn); color: var(--warn);
      border-radius: 20px; padding: 1px 7px; min-width: 20px; text-align: center;
    }
    #acFlagsCount { background: rgba(242,88,107,.15); border: 0; color: var(--danger); }
    /* Feed body */
    .ac-feed-body { max-height: 68vh; overflow-y: auto; }
    .ac-day-group-label {
      padding: 8px 16px 6px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--fg-3); background: var(--bg);
      position: sticky; top: 0; z-index: 1;
    }
    .ac-event-row {
      display: flex; align-items: center; gap: 10px; padding: 10px 16px;
      border-bottom: 1px solid var(--border); cursor: default;
      transition: background 0.1s;
    }
    .ac-event-row:hover { background: var(--hover); }
    .ac-event-row:last-child { border-bottom: none; }
    .ac-ev-avatar {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--tt-cyan), var(--tt-magenta));
      display: flex; align-items: center; justify-content: center;
      font-size: 0.82rem; font-weight: 700; color: #fff; overflow: hidden;
    }
    .ac-ev-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .ac-ev-main { flex: 1; min-width: 0; }
    .ac-ev-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
    .ac-ev-nick { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
    .ac-ev-uid { font-family: var(--font-mono); font-size: 0.71rem; color: var(--fg-3); white-space: nowrap; }
    .ac-ev-desc { font-size: 0.78rem; color: var(--fg-2); line-height: 1.35; }
    .ac-ev-desc .mono { font-family: var(--font-mono); font-size: 0.75rem; }
    .ac-ev-time { font-size: 0.68rem; color: var(--fg-3); flex-shrink: 0; white-space: nowrap; }
    .ac-ev-arrow { color: var(--fg-4); font-size: 0.85rem; flex-shrink: 0; }
    /* Event type badges */
    .ac-type-badge {
      display: inline-flex; align-items: center; font-size: 0.58rem; font-weight: 700;
      border-radius: var(--r-xs); padding: 2px 5px; text-transform: uppercase;
      letter-spacing: 0.3px; border: 1px solid; white-space: nowrap; flex-shrink: 0;
    }
    .ac-type-spike { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.4); color: var(--warn); }
    .ac-type-drop { background: var(--danger-soft); border-color: rgba(248,113,113,0.4); color: var(--danger); }
    .ac-type-flw { background: var(--success-soft); border-color: rgba(52,211,153,0.4); color: var(--success); }
    .ac-type-rename { background: rgba(129,140,248,0.10); border-color: rgba(129,140,248,0.35); color: var(--accent-hi); }
    .ac-type-nick { background: rgba(129,140,248,0.10); border-color: rgba(129,140,248,0.35); color: var(--accent-hi); }
    .ac-type-avatar { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.35); color: #c4b5fd; }
    .ac-type-bio { background: rgba(156,163,175,0.10); border-color: rgba(156,163,175,0.3); color: var(--fg-3); }
    .ac-type-level { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.3); color: var(--warn); }
    .ac-type-remark { background: rgba(45,212,191,0.10); border-color: rgba(45,212,191,0.35); color: #2dd4bf; }
    .ac-type-alt { background: rgba(100,116,139,0.12); border-color: rgba(100,116,139,0.35); color: #94a3b8; }
    /* Flags panel */
    .ac-flags-body, .ac-team-body { }
    .ac-flag-row {
      display: flex; align-items: center; gap: 10px; padding: 10px 16px;
      border-bottom: 1px solid var(--border);
    }
    .ac-flag-row:last-child { border-bottom: none; }
    .ac-flag-av {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--tt-cyan), var(--tt-magenta));
      display: flex; align-items: center; justify-content: center;
      font-size: 0.78rem; font-weight: 700; color: #fff; overflow: hidden;
    }
    .ac-flag-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .ac-flag-info { flex: 1; min-width: 0; }
    .ac-flag-who { font-size: 0.8rem; font-weight: 600; }
    .ac-flag-uid { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fg-3); }
    .ac-flag-desc { font-size: 0.76rem; color: var(--fg-2); margin-top: 1px; }
    .ac-flag-time { font-size: 0.67rem; color: var(--fg-3); flex-shrink: 0; }
    /* Team panel */
    .ac-team-row {
      display: flex; align-items: center; gap: 10px; padding: 9px 16px;
      border-bottom: 1px solid var(--border);
    }
    .ac-team-row:last-child { border-bottom: none; }
    .ac-team-initials {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
      background: linear-gradient(135deg, #5b6ee0, #8b5cf6);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.73rem; font-weight: 600; color: #fff;
    }
    .ac-team-initials img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .ac-team-name { font-size: 0.8rem; font-weight: 500; flex-shrink: 0; min-width: 60px; }
    .ac-team-cnt { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-3); flex-shrink: 0; min-width: 20px; text-align: right; }
    .ac-empty { padding: 24px 16px; text-align: center; font-size: 0.82rem; color: var(--fg-3); }
    .ac-loading { padding: 36px; text-align: center; font-size: 0.82rem; color: var(--fg-3); }
    .ac-team-sub { margin-left: auto; font-size: 0.68rem; color: var(--fg-3); }
    /* Responsive */
    @media (max-width: 960px) {
      .ac-stats-row { grid-template-columns: repeat(3, 1fr); }
      .ac-body { grid-template-columns: 1fr; }
      .ac-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .ac-right-col { order: -1; }
      .ac-right-col .ac-panel { margin-top: 0 !important; }
    }
    @media (max-width: 768px) {
      .ac-view { padding: 16px 14px 60px; }
      .ac-stats-row { grid-template-columns: repeat(2, 1fr); }
      .ac-right-col { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .ac-stats-row { grid-template-columns: 1fr 1fr; }
    }

    /* Activity revamp */
    .ac-view { padding: 24px 28px 60px; }
    .ac-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
    .ac-title { font-size:1.15rem; letter-spacing:0; margin:0 0 4px; }
    .ac-subtitle { margin:0; }
    .ac-header-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
    .ac-live-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px; background:var(--surface-2); color:var(--success); font:700 .68rem var(--font-ui); text-transform:uppercase; }
    .ac-live-pill #acRefreshCountdown { color:var(--fg-4); font:11px var(--font-mono); text-transform:none; }
    .ac-stats-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-bottom:18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
    .ac-stat-card { min-width:0; text-align:left; cursor:pointer; padding:16px 18px; border:0; border-right:1px solid var(--border); border-radius:0; background:transparent; transition:background .12s,border-color .12s; }
    .ac-stat-card:last-child { border-right:0; }
    .ac-stat-card:hover { background:var(--surface-2); border-color:var(--border); }
    .ac-stat-card.is-active { background:var(--accent-soft); border-color:rgba(123,127,243,.5); }
    .ac-stat-label { font-size:11px; letter-spacing:.06em; }
    .ac-stat-value { font-size:26px; letter-spacing:0; }
    .ac-stat-sub { font:11px var(--font-mono); }
    @media (max-width:960px) {
      .ac-stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .ac-stat-card:nth-child(even) { border-right:0; }
      .ac-stat-card:nth-child(n+3) { border-top:1px solid var(--border); }
      .ac-stat-card:nth-child(5) { grid-column:1 / -1; border-right:0; }
    }
    .ac-body { display:grid; grid-template-columns:216px minmax(480px,1fr) 268px; gap:16px; align-items:start; }
    .ac-panel, .ac-feed-panel { border-radius:14px; }
    .ac-filter-panel { padding:16px; overflow:visible; }
    .ac-filter-head { display:flex; align-items:center; justify-content:space-between; color:var(--fg-3); font-size:11px; font-weight:700; letter-spacing:.06em; }
    .ac-filter-head button { border:0; background:none; color:var(--accent); cursor:pointer; font:600 11px var(--font-ui); }
    .ac-filter-content { display:flex; flex-direction:column; gap:18px; }
    .ac-filter-group { display:flex; flex-direction:column; gap:4px; }
    .ac-filter-label { color:var(--fg-3); font-size:11px; font-weight:700; letter-spacing:.06em; margin-bottom:3px; }
    .ac-filter-row, .ac-check-row { display:flex; align-items:center; gap:8px; min-height:27px; padding:4px 6px; border-radius:6px; color:var(--fg-2); font-size:12px; cursor:pointer; }
    .ac-filter-row:hover, .ac-check-row:hover, .ac-filter-row.is-active { background:var(--accent-soft); color:var(--accent); }
    .ac-filter-row input, .ac-check-row input { position:absolute; opacity:0; pointer-events:none; }
    .ac-filter-row > span:first-of-type { width:13px; height:13px; flex:none; border:1px solid var(--border); border-radius:50%; background:var(--surface-2); }
    .ac-filter-row input:checked + span:first-of-type { border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--accent); }
    .ac-check-row > span { width:15px; height:15px; flex:none; border:1px solid var(--border); border-radius:4px; background:var(--surface-2); }
    .ac-check-row input:checked + span { background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 4px #fff; }
    #acTypeFilters .ac-check-row { min-height:32px; padding:6px 10px; }
    #acTypeFilters .ac-check-row > span { order:0; width:8px; height:8px; box-sizing:border-box; border:2px solid var(--border); background:transparent; box-shadow:none; border-radius:50%; }
    #acTypeFilters .ac-check-row > i { display:none; }
    #acTypeFilters .ac-check-row input:checked + span { background:var(--ac-type-color); border-color:var(--ac-type-color); box-shadow:none; }
    #acTypeFilters .ac-check-row:has(input:checked) { background:var(--ac-type-bg); color:var(--ac-type-color); }
    #acTypeFilters .ac-check-row em { margin-left:auto; color:var(--ac-type-color, var(--fg-4)); }
    .ac-check-row b { font-weight:400; }
    .ac-filter-count { margin-left:auto; color:var(--fg-4); font:11px var(--font-mono); }
    .ac-type-dot { width:6px; height:6px; border-radius:50%; background:var(--fg-4); }
    .ac-type-dot.username { background:var(--danger); } .ac-type-dot.nickname { background:var(--accent); } .ac-type-dot.avatar { background:#3b82f6; } .ac-type-dot.bio { background:#14b8a6; } .ac-type-dot.note { background:var(--success); }
    #acTypeFilters .ac-check-row:has(input[data-ac-type="username"]) { --ac-type-color:var(--danger); --ac-type-bg:rgba(242,88,107,.15); }
    #acTypeFilters .ac-check-row:has(input[data-ac-type="nickname"]) { --ac-type-color:var(--accent); --ac-type-bg:rgba(123,127,243,.15); }
    #acTypeFilters .ac-check-row:has(input[data-ac-type="avatar"]) { --ac-type-color:#3b82f6; --ac-type-bg:rgba(59,130,246,.15); }
    #acTypeFilters .ac-check-row:has(input[data-ac-type="bio"]) { --ac-type-color:#14b8a6; --ac-type-bg:rgba(20,184,166,.15); }
    #acTypeFilters .ac-check-row:has(input[data-ac-type="note"]) { --ac-type-color:var(--success); --ac-type-bg:rgba(52,211,153,.15); }
    .ac-flag-check { color:var(--danger); }
    .ac-filter-mobile-head { display:none; }
    .ac-feed-panel { min-width:0; }
    .ac-panel-header { min-height:0; padding:12px 16px; background:transparent; border-bottom:1px solid var(--border); }
    .ac-panel-title { margin:0; font-size:.7rem; font-weight:800; color:var(--fg-4); letter-spacing:.06em; text-transform:uppercase; }
    .ac-feed-body { max-height:72vh; overflow:auto; }
    .ac-day-group-label { display:flex; align-items:center; gap:7px; padding:9px 16px 7px; background:#15161F; border-bottom:1px solid var(--border); cursor:pointer; }
    .ac-day-group-label i { transition:transform .15s; } .ac-day-group-label.is-collapsed i { transform:rotate(-90deg); }
    .ac-day-count { margin-left:auto; font:11px var(--font-mono); color:var(--fg-3); }
    .ac-event-row { align-items:flex-start; gap:11px; padding:13px 18px; }
    .ac-event-row { content-visibility:auto; contain-intrinsic-size:82px; }
    .ac-ev-avatar { width:34px; height:34px; background:var(--surface-2); }
    .ac-ev-main { display:flex; flex-direction:column; gap:8px; }
    .ac-ev-who { margin:0; gap:6px; }
    .ac-level-badge { flex:none; }
    .ac-ev-nick { max-width:170px; }
    .ac-ev-context { margin-left:auto; color:var(--fg-4); font:11px var(--font-mono); white-space:nowrap; }
    .ac-ev-group { color:var(--fg-4); font:11px var(--font-ui); }
    .ac-ev-flag { color:var(--danger); background:rgba(242,88,107,.15); border-radius:20px; padding:2px 6px; font-size:10px; font-weight:700; }
    .ac-change-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px; color:var(--fg-2); }
    .ac-change-chip { padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; }
    .ac-change-chip.username { color:var(--danger); background:rgba(242,88,107,.15); }
    .ac-change-chip.nickname { color:var(--accent); background:var(--accent-soft); }
    .ac-change-chip.avatar { color:#3b82f6; background:rgba(59,130,246,.15); }
    .ac-change-chip.bio { color:#14b8a6; background:rgba(20,184,166,.15); }
    .ac-change-chip.avatar { width:auto; height:auto; display:inline-flex; flex:0 0 auto; overflow:visible; cursor:default; }
    .ac-change-chip.note { color:var(--success); background:rgba(52,211,153,.15); }
    .ac-old { color:var(--fg-3); text-decoration:line-through; font:12px var(--font-mono); }
    .ac-new { color:var(--fg); font:600 12px var(--font-mono); }
    .ac-change-line i { color:var(--fg-4); font-size:12px; }
    .ac-change-toggle { border:0; background:none; color:var(--accent); cursor:pointer; font-size:12px; padding:0; }
    .ac-event-collapsed .ac-expanded-change { display:none; }
    .ac-avatar-diff { display:inline-flex; align-items:center; gap:7px; }
    .ac-avatar-diff img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
    .ac-avatar-diff img:first-child { opacity:.55; }
    .ac-avatar-empty { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-4); font:12px var(--font-mono); }
    .ac-note-text { color:var(--fg); font-style:italic; }
    @media (max-width:1300px) { .ac-body { grid-template-columns:216px minmax(0,1fr); } .ac-right-col { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:16px; order:-1; } .ac-right-col .ac-panel { margin-top:0 !important; } }
    @media (max-width:768px) { .ac-view { padding:16px 14px 60px; } .ac-header { flex-direction:column; } .ac-header-actions { width:100%; justify-content:space-between; } .ac-body { display:flex; flex-direction:column; } .ac-filter-panel,.ac-feed-panel,.ac-right-col { width:100%; } .ac-filter-mobile-head { display:flex; align-items:center; justify-content:space-between; color:var(--fg); font-weight:600; } .ac-filter-mobile-head button { background:none; border:0; color:var(--fg-3); font-size:16px; } .ac-filter-content { display:none; } .ac-filter-panel.is-open .ac-filter-content { display:flex; margin-top:14px; } .ac-right-col { display:flex; flex-direction:column; } }

    /* ── Admin view ───────────────────────────────── */
    .admin-container { max-width: 680px; margin: 0 auto; }
    .back-btn {
      background: none; border: 1px solid var(--border);
      border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer;
      font-family: var(--font-ui); font-size: 0.83rem; padding: 6px 12px;
      transition: color 0.15s, border-color 0.15s;
      margin-bottom: 28px; display: inline-flex; align-items: center; gap: 6px;
    }
    .back-btn:hover { color: var(--fg); border-color: var(--border-bright); }
    .admin-page-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; letter-spacing: -0.01em; }
    .admin-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
    .admin-section-title { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 12px 18px; font-size: 0.79rem; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
    .admin-section-body { padding: 18px; }
    .add-user-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
    @media (max-width: 480px) { .add-user-grid { grid-template-columns: 1fr; } }
    .admin-input {
      width: 100%; background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-ui); font-size: 0.86rem;
      padding: 9px 11px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .admin-input:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
    .admin-input::placeholder { color: var(--fg-3); }
    .admin-row-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
    .admin-check { display: flex; align-items: center; gap: 6px; font-size: 0.83rem; color: var(--fg-2); cursor: pointer; user-select: none; }
    .admin-check input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }
    .admin-add-btn {
      background: var(--accent); border: none; border-radius: var(--r-sm); color: #0b0b14; cursor: pointer;
      font-family: var(--font-ui); font-size: 0.83rem; font-weight: 600; padding: 8px 18px; transition: background 0.15s;
    }
    .admin-add-btn:hover { background: var(--accent-hi); }
    .admin-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .admin-msg { font-size: 0.8rem; padding: 7px 11px; border-radius: var(--r-sm); margin-bottom: 12px; display: none; }
    .admin-msg.error { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.22); color: var(--danger); }
    .admin-msg.success { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.22); color: var(--success); }
    .users-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
    .users-table th { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); font-weight: 500; }
    .users-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
    .users-table tr:last-child td { border-bottom: none; }
    .badge-admin-tag { background: var(--accent-soft); color: var(--accent-hi); font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: var(--r-xs); text-transform: uppercase; letter-spacing: 0.3px; border: 1px solid var(--accent-ring); }
    .badge-user-tag { background: var(--surface-3); color: var(--fg-3); font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: var(--r-xs); text-transform: uppercase; letter-spacing: 0.3px; border: 1px solid var(--border); }
    .del-btn {
      background: none; border: 1px solid rgba(248,113,113,0.30); border-radius: var(--r-sm);
      color: var(--danger); cursor: pointer; font-size: 0.73rem; padding: 3px 8px;
      transition: background 0.15s; font-family: var(--font-ui);
    }
    .del-btn:hover { background: var(--danger-soft); border-color: rgba(248,113,113,0.5); }
    .del-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    .users-loading { padding: 18px; text-align: center; color: var(--fg-3); font-size: 0.83rem; }

    /* ── Agency badge ───────────────────────────────── */
    .agency-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--accent-hi); font-size: 0.66rem; font-weight: 600; border-radius: var(--r-xs); padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.3px; }
    .agency-badge i { font-size: 0.68rem; }

    /* ── Alt accounts ──────────────────────────────── */
    .alt-badge { display: inline-flex; align-items: center; background: rgba(232,121,168,0.10); border: 1px solid rgba(232,121,168,0.22); color: var(--tt-magenta); font-size: 0.56rem; font-weight: 700; border-radius: var(--r-xs); padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: middle; margin-left: 4px; }
    .alts-header { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 12px 18px; cursor: pointer; user-select: none; }
    .alts-title { font-size: 0.8rem; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; }
    .alts-body { padding: 8px 14px 12px; }
    .alt-main-banner { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }
    .alt-main-banner:hover { opacity: 0.85; }
    .alt-main-label { font-size: 0.7rem; color: var(--fg-3); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
    .alt-pill { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
    .alt-pill-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
    .alt-pill-initials { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: var(--fg-3); flex-shrink: 0; }
    .alt-pill-text { min-width: 0; }
    .alt-pill-username { font-size: 0.7rem; color: var(--fg-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
    .alt-pill-nick { font-size: 0.8rem; font-weight: 600; color: var(--fg); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .alt-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
    .alt-item:last-of-type { border-bottom: none; }
    .alt-item:hover { background: var(--hover); }
    .alt-lookup-btn { flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-3); cursor: pointer; font-family: var(--font-ui); font-size: 0.7rem; padding: 3px 8px; transition: color 0.15s, border-color 0.15s; }
    .alt-lookup-btn:hover { color: var(--accent-hi); border-color: var(--accent); }
    .alt-unlink-btn { flex-shrink: 0; background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: 0.8rem; padding: 3px 5px; line-height: 1; transition: color 0.15s; }
    .alt-unlink-btn:hover { color: var(--danger); }
    .alts-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .alt-action-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; font-family: var(--font-ui); font-size: 0.76rem; padding: 4px 10px; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 5px; }
    .alt-action-btn:hover { color: var(--accent-hi); border-color: var(--accent); }
    .alt-inline-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
    .alt-inline-input { flex: 1; min-width: 130px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-ui); font-size: 0.8rem; padding: 5px 9px; outline: none; }
    .alt-inline-input:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
    .alt-inline-confirm { background: var(--accent); border: none; border-radius: var(--r-sm); color: #0b0b14; cursor: pointer; font-family: var(--font-ui); font-size: 0.76rem; padding: 5px 11px; transition: background 0.15s; font-weight: 600; }
    .alt-inline-confirm:hover { background: var(--accent-hi); }
    .alt-inline-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
    .alt-inline-cancel { background: none; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-3); cursor: pointer; font-size: 0.76rem; padding: 5px 7px; }
    .alt-inline-msg { font-size: 0.73rem; color: var(--fg-3); }
    .alt-inline-msg.error { color: var(--danger); }
    .alts-empty { font-size: 0.78rem; color: var(--fg-3); padding: 4px 0 7px; }

    /* ── Screenshots card ───────────────────────────── */
    .ud-scr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 12px 14px 0; }
    .ud-scr-thumb {
      position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
      cursor: pointer; background: var(--surface-2);
    }
    .ud-scr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s; }
    .ud-scr-thumb:hover img { opacity: 0.82; }
    .ud-scr-del {
      position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
      background: rgba(0,0,0,0.55); border: none; border-radius: 50%; color: #fff;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 0.68rem; opacity: 0; transition: opacity 0.15s;
    }
    .ud-scr-thumb:hover .ud-scr-del { opacity: 1; }
    .ud-scr-del:hover { background: var(--danger); }
    .ud-scr-dropzone {
      margin: 12px 14px 14px; padding: 14px; border-radius: var(--r-sm);
      background: #1A1A21; border: 1px dashed var(--border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: border-color 0.15s, background 0.15s;
    }
    .ud-scr-dropzone:hover, .ud-scr-dropzone.drag-over {
      border-color: var(--accent); background: rgba(99,102,241,0.07);
    }
    .ud-scr-dropzone span { font-size: 0.78rem; color: var(--fg-3); }
    /* Lightbox */
    .ud-scr-lb {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center;
    }
    .ud-scr-lb img { max-width: 92vw; max-height: 90vh; border-radius: var(--r-sm); object-fit: contain; }
    .ud-scr-lb-close {
      position: absolute; top: 18px; right: 22px; background: none; border: none;
      color: #fff; font-size: 1.6rem; cursor: pointer; line-height: 1; opacity: 0.8;
    }
    .ud-scr-lb-close:hover { opacity: 1; }

    /* ── Admin agencies ─────────────────────────────── */
    .agency-row { display: flex; align-items: flex-start; padding: 11px 18px; border-bottom: 1px solid var(--border); gap: 12px; }
    .agency-row:last-child { border-bottom: none; }
    .agency-row-name { font-weight: 600; font-size: 0.88rem; flex: 1; min-width: 0; padding-top: 2px; }
    .agency-members-wrap { flex: 2; min-width: 0; }
    .agency-member-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
    .agency-member-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px; font-size: 0.76rem; }
    .agency-member-remove { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: 0.68rem; padding: 0; line-height: 1; transition: color 0.15s; }
    .agency-member-remove:hover { color: var(--danger); }
    .agency-add-member-row { display: flex; gap: 6px; align-items: center; }
    .agency-add-select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-ui); font-size: 0.78rem; padding: 4px 7px; cursor: pointer; outline: none; max-width: 170px; }
    .agency-add-select:focus { border-color: var(--accent); }
    .agency-add-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; font-family: var(--font-ui); font-size: 0.76rem; padding: 4px 9px; transition: color 0.15s, border-color 0.15s; }
    .agency-add-btn:hover { color: var(--accent-hi); border-color: var(--accent); }
    .tag-agency-select { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-ui); font-size: 0.8rem; padding: 4px 7px; outline: none; cursor: pointer; max-width: 160px; }
    .tag-agency-select:focus { border-color: var(--accent); }

    /* ── Misc ──────────────────────────────────────── */
    .private-badge-mobile { display: none; }
    @media (max-width: 600px) {
      .private-badge-desktop { display: none; }
      .private-badge-mobile { display: inline-flex; margin-top: 3px; font-size: 0.52rem; padding: 1px 4px; }
      .username-row { flex-wrap: wrap; }
      .username-row .at-username { flex: 1 1 100%; }
    }

    /* ── Sidebar hamburger (mobile only) ──────────── */
    .sb-hamburger {
      display: none;
      background: none; border: none; color: var(--fg-2); cursor: pointer;
      font-size: 1.1rem; padding: 0 10px; height: 48px;
      align-items: center; justify-content: center; flex-shrink: 0;
      transition: color 0.15s;
    }
    .sb-hamburger:hover { color: var(--fg); }

    /* ── Sidebar backdrop (mobile overlay) ──────────── */
    .sb-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 199;
      backdrop-filter: blur(2px);
      cursor: pointer; /* required for iOS click events to fire on divs */
      -webkit-tap-highlight-color: transparent;
    }
    .sb-backdrop.visible { display: block; }

    /* ═══════════════════════════════════════════════
       MOBILE RESPONSIVE  (≤ 768 px)
       ═══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      html { font-size: 16px; } /* reset scale on mobile */

      /* App shell: full width, sidebar hidden */
      #app.app-ready { grid-template-columns: 1fr; }

      .sb-hamburger { display: flex; }

      /* Sidebar — hidden off-screen by default */
      .sb {
        display: none;
        position: fixed; top: 0; left: 0;
        width: 14.5rem; height: 100vh;
        z-index: 200; overflow-y: auto;
        padding: 0.875rem 0.625rem;
        align-items: flex-start;
        transition: transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94);
      }

      /* Sidebar — visible overlay when expanded.
         No horizontal container padding so border-top on bottom sections
         naturally spans the full sidebar width. */
      #sidebar.sb--expanded {
        display: flex;
        padding: 0.875rem 0;
      }
      #sidebar.sb--expanded .sb__brand   { padding: 0.5rem 0.75rem 0.875rem; }
      #sidebar.sb--expanded .sb__group   { padding: 0 0.375rem; width: 100%; }
      #sidebar.sb--expanded .sb__divider { margin: 0.375rem 0; }
      #sidebar.sb--expanded #navAdminGroup { padding: 0 0.375rem; width: 100%; box-sizing: border-box; }
      #sidebar.sb--expanded #sbAgencySection { width: 100%; box-sizing: border-box; border-radius: 0; padding: 0.625rem 0.75rem; }
      #sidebar.sb--expanded .sb__agency  { padding: 0.625rem 0.75rem; border-radius: 0; }
      #sidebar.sb--expanded .sb__user    { padding: 0.625rem 0.75rem; width: 100%; box-sizing: border-box; }

      #sbUsersSubItems { display: none !important; }

      /* Topbar — keep the primary lookup controls inside narrow viewports. */
      #appContent { width: 100%; min-width: 0; }
      .app-topbar {
        width: 100%; min-width: 0; box-sizing: border-box; overflow: visible;
        height: 96px; padding: 32px 10px 0; gap: 6px; position: sticky; top: 0; z-index: 150;
      }
      .app-topbar .tb-search-wrap { min-width: 0; }
      .app-topbar .tb-divider { display: none; }
      .app-topbar .tb-lang-btn { width: 34px; padding: 0; justify-content: center; }
      .app-topbar .tb-lang-btn #tbLangLabel,
      .app-topbar .tb-lang-btn .tb-lang-caret { display: none; }
      .app-topbar .tb-search-btn { padding: 0 10px; }

      /* Home / dashboard */

      /* Tracked users */
      #memberAgencyView .agd-hero-card { margin: 16px 14px 22px; padding: 16px; }
      #memberAgencyView .agd-body { padding: 0 14px; }
      .tracked-table-wrap { border-radius: 0; border-left: none; border-right: none; }
      .uv-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
      .uv-header { padding: 14px 14px 10px; flex-direction: column; gap: 8px; }
      .uv-header-actions { order: -1; width: 100%; }
      .uv-header-main { order: 0; width: 100%; }
      .uv-scope { padding: 8px 14px 4px; }
      .uv-tabs { padding: 0 14px; overflow-x: auto; overflow-y: hidden; }
      .uv-title { font-size: 1.1rem; }

      /* Admin view */
      #adminView { padding: 0; }

      .admin-card { padding: 16px; }
      .add-user-grid { grid-template-columns: 1fr; }

      /* ── User detail view (lookup results) ─────────── */
      #userDetailView { padding: 12px 12px 32px; }

      /* Hero */
      .ud-hero-body { padding: 14px; gap: 10px; }
      .ud-hero-top { gap: 12px; }
      .ud-avatar { width: 60px; height: 60px; font-size: 1.4rem; }
      .ud-name { font-size: 1.05rem; }
    }

    @media (max-width: 480px) {
      .ud-stat-value { font-size: 1rem; }
      .ud-actions { gap: 4px; }
      .ud-action-btn { font-size: 0.72rem; }
      .ud-split-btn-side { font-size: 0.72rem; }
    }

    /* ═══════════════════════════════════════════════════════════
       USER DETAIL VIEW  (ud- namespace)
       ═══════════════════════════════════════════════════════════ */
    #userDetailView {
      display: none; flex-direction: column;
      padding: 20px 24px 40px;
      gap: 16px;
      min-height: calc(100vh - 48px);
      box-sizing: border-box;
    }

    /* ── Hero card ──────────────────────────────────────── */
    .ud-hero-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-md); overflow: hidden;
    }
    .ud-hero-body {
      padding: 22px;
      display: flex; flex-direction: column;
      gap: 14px;
    }
    .ud-hero-top {
      display: flex; gap: 20px; align-items: flex-start;
    }
    .ud-avatar {
      width: 88px; height: 88px; border-radius: 50%;
      background: linear-gradient(135deg, var(--tt-cyan), var(--tt-magenta));
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; font-weight: 700; color: #fff;
      flex-shrink: 0; overflow: hidden; cursor: pointer;
    }
    .ud-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .ud-avatar { position: relative; }
    .ud-avatar:hover { opacity: 1; transition: none; }
    .ud-avatar:hover img, .ud-avatar:hover .ud-avatar-placeholder { filter: brightness(0.72); transition: filter 0.15s; }
    .ud-avatar-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 0; transition: opacity 0.15s; pointer-events: none; color: #fff; font-size: 1.1rem; }
    .ud-avatar:hover .ud-avatar-zoom { opacity: 1; }
    .ud-hero-info { flex: 1; min-width: 0; }
    .ud-untrack-btn {
      flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(248,113,113,0.45); border-radius: var(--r-sm);
      background: rgba(248,113,113,0.08); color: var(--danger);
      cursor: pointer; font-size: 1.25rem; transition: background 0.15s, border-color 0.15s;
    }
    .ud-untrack-btn:hover { background: rgba(248,113,113,0.16); border-color: var(--danger); }
    .ud-name-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
    }
    .ud-name {
      font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px;
    }
    .ud-badge {
      font-size: 0.67rem; font-weight: 600; border-radius: 20px;
      padding: 2px 9px; display: inline-flex; align-items: center; gap: 3px;
    }
    .ud-badge-verified { background: rgba(52,211,153,0.12); color: var(--success); border: 1px solid rgba(52,211,153,0.22); }
    .ud-badge-private { background: var(--surface-3); color: var(--fg-3); border: 1px solid var(--border); }
    .ud-badge-gift { color: #fff; border: none; }
    .ud-badge-active  { background: rgba(52,211,153,0.12); color: var(--success); border: 1px solid rgba(52,211,153,0.22); }
    .ud-badge-paused  { background: rgba(251,191,36,0.12); color: var(--warn);    border: 1px solid rgba(251,191,36,0.22); }
    .ud-badge-deleted { background: rgba(239,68,68,0.12);  color: var(--danger);  border: 1px solid rgba(239,68,68,0.22); }
    .ud-meta-row {
      font-size: 0.8125rem; color: var(--fg-3); display: flex; flex-wrap: wrap;
      align-items: center; gap: 0; margin-bottom: 0; font-family: var(--font-mono);
    }
    .ud-meta-row span { white-space: nowrap; }
    .ud-meta-sep { color: var(--fg-4); margin: 0 6px; font-family: var(--font-ui); }
    .ud-bio {
      font-size: 0.8125rem; color: var(--fg-2); white-space: pre-wrap;
      word-break: break-word; line-height: 1.55; margin-top: 10px;
      max-width: 540px;
    }
    .ud-pills-row {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
    }
    .ud-pill {
      font-size: 0.72rem; color: var(--fg-3); background: var(--surface-2);
      border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px;
      font-family: var(--font-ui);
    }
    @media (max-width: 768px) {
      .ud-pills-row { flex-direction: column; gap: 5px; margin-top: 8px; }
      .ud-pill { border-radius: var(--r-sm); padding: 5px 10px; display: flex; align-items: center; gap: 6px; }
    }

    /* ── Hero actions (horizontal row below pills) ──────── */
    .ud-actions {
      display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px;
      margin-top: 10px; align-items: center;
    }
    .ud-action-btn {
      height: 30px; padding: 0 12px; border-radius: var(--r-sm);
      font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      border: 1px solid var(--border); background: var(--surface-2); color: var(--fg);
      white-space: nowrap; width: auto; box-sizing: border-box; text-decoration: none;
    }
    .ud-action-btn:hover { border-color: var(--border-bright); background: var(--surface-3); }
    .ud-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .ud-action-btn-primary {
      background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
    }
    .ud-action-btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }

    /* ── Section tabs (Overview / Live / History / Remarks) ──── */
    .ud-tabs { display: flex; gap: 22px; padding: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .ud-tab { height: 38px; padding: 0 2px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--fg-3); font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color 0.12s, border-color 0.12s; white-space: nowrap; }
    .ud-tab:hover { color: var(--fg); }
    .ud-tab.active { border-bottom-color: var(--accent); color: var(--fg); font-weight: 600; }
    .ud-tabpanel { display: none; }
    .ud-tabpanel.active { display: block; }
    #udTabLive.active { display: flex; flex-direction: column; gap: 16px; }

    /* ── Mid row: stats panel + chart side by side ──────────── */
    .ud-mid-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    @media (max-width: 768px) {
      .ud-mid-row { grid-template-columns: 1fr; }
    }

    .ud-last-chat-card { margin-top:16px; }
    .ud-live-activity-header { gap:16px; }
    .ud-last-chat-latest { color:var(--fg-3); font:0.75rem var(--font-mono); white-space:nowrap; }
    .ud-last-chat-list { display:flex; flex-direction:column; gap:12px; padding:18px 20px; }
    .ud-last-chat-skel-row { display:flex; flex-direction:column; gap:6px; }
    .ud-last-chat-item { min-width:0; }
    .ud-last-chat-meta { display:flex; align-items:center; gap:6px; min-width:0; font-size:0.75rem; line-height:1.2; }
    .ud-last-chat-broadcaster { display:inline-flex; align-items:center; gap:6px; min-width:0; padding:0; border:0; background:none; color:inherit; cursor:pointer; font:inherit; }
    .ud-last-chat-broadcaster:hover .ud-last-chat-streamer { color:var(--accent); }
    .ud-last-chat-avatar { width:14px; height:14px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex:0 0 14px; }
    .ud-last-chat-avatar-fallback { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:0.52rem; font-weight:700; }
    .ud-last-chat-streamer { color:var(--fg); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ud-last-chat-handle, .ud-last-chat-room { color:var(--fg-3); font-size:0.6875rem; white-space:nowrap; }
    .ud-last-chat-time { color:var(--fg-3); font:0.6875rem var(--font-mono); margin-left:auto; white-space:nowrap; flex-shrink:0; }
    .ud-last-chat-message { display:table; max-width:calc(100% - 20px); margin:5px 0 0 20px; padding:6px 10px; border:0; border-radius:8px; background:var(--surface-2); color:var(--fg); cursor:pointer; font:inherit; font-size:0.82rem; line-height:1.35; text-align:left; overflow-wrap:anywhere; }
    .ud-last-chat-message:hover { background:var(--surface-3); }
    .ud-last-chat-time { border:0; background:none; cursor:pointer; padding:0; font:inherit; }
    .ud-live-focus { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
    .ud-last-chat-empty { color:var(--fg-3); font-size:0.78rem; }

    /* ── Stats 2×2 panel (inside .ud-panel-card) ─────────────── */
    .ud-stats-2x2 {
      display: grid; grid-template-columns: 1fr 1fr; height: 100%;
    }
    .ud-stat {
      padding: 16px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .ud-stats-2x2 .ud-stat:nth-child(2),
    .ud-stats-2x2 .ud-stat:nth-child(4) { border-right: none; }
    .ud-stats-2x2 .ud-stat:nth-child(3),
    .ud-stats-2x2 .ud-stat:nth-child(4) { border-bottom: none; }
    .ud-stat-label {
      font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em;
      text-transform: uppercase; color: var(--fg-3);
    }
    .ud-stat-value {
      font-size: 1.25rem; font-weight: 600; font-family: var(--font-mono);
      color: var(--fg); letter-spacing: -0.02em; line-height: 1; margin-top: 4px;
    }
    .ud-stat-delta {
      font-size: 0.6875rem; font-family: var(--font-mono); color: var(--fg-3); margin-top: 2px;
    }
    .ud-stat-delta.up { color: var(--success); }
    .ud-stat-delta.down { color: var(--danger); }

    /* ── UD Skeleton loading state ──────────────────────── */
    @keyframes ud-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .ud-skel {
      display: inline-block;
      background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
      background-size: 200% 100%;
      animation: ud-shimmer 1.5s linear infinite;
      border-radius: 4px;
      vertical-align: middle;
    }
    .ud-skel-avatar  { width: 88px; height: 88px; border-radius: 50%; display: block; }
    .ud-skel-name    { width: 180px; height: 1.4rem; }
    .ud-skel-meta    { width: 280px; height: 0.85rem; margin-top: 4px; }
    .ud-skel-stat    { width: 55px; height: 1.4rem; }
    .ud-skel-region  { width: 100%; height: 72px; border-radius: var(--r-sm); display: block; }
    .ud-skel-bio     { width: 100%; height: 3.2rem; border-radius: var(--r-sm); display: block; }

    /* ── Panels container (8fr left / 4fr right) ───────── */
    .ud-panels {
      display: grid; grid-template-columns: 8fr 4fr; gap: 16px; align-items: start;
    }
    .ud-panels-solo {
      display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start;
    }
    .ud-panels-right {
      display: flex; flex-direction: column; gap: 16px;
    }
    .ud-live-monitor-active { color: var(--success); border-color: rgba(52,211,153,0.35); }
    .ud-live-status { display:inline-flex; align-items:center; gap:6px; font-size:0.7rem; color:var(--fg-3); }
    .ud-live-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#71717a; }
    .ud-live-status.is-live { color:#ef4444; }
    .ud-live-status.is-live::before { background:#ef4444; animation:ud-live-pulse 1.4s ease-out infinite; }
    @keyframes ud-live-pulse {
      0% { box-shadow:0 0 0 0 rgba(239,68,68,0.65); }
      70%, 100% { box-shadow:0 0 0 7px rgba(239,68,68,0); }
    }
    .wl-live-badge {
      display:inline-flex; align-items:center; gap:4px; font-size:0.62rem; font-weight:700;
      letter-spacing:0.03em; color:#ef4444; background:rgba(239,68,68,0.12);
      border:1px solid rgba(239,68,68,0.35); border-radius:4px; padding:1px 5px 1px 4px;
      vertical-align:middle; margin-left:6px;
    }
    .wl-live-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:#ef4444; animation:ud-live-pulse 1.4s ease-out infinite; }
    .ud-live-summary {
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
      padding:9px 14px; border-bottom:1px solid var(--border); font-size:0.75rem; color:var(--fg-3);
    }
    .ud-live-summary strong { color:var(--fg); font-family:var(--font-mono); }
    .ud-live-messages {
      position:relative; height:280px; overflow:auto; padding:10px 14px; background:var(--bg);
      font:0.75rem/1.65 var(--font-mono); overflow-wrap:anywhere;
    }
    .ud-live-line { color:var(--fg-2); }
    .ud-live-line--gift { color:#f59e0b; }
    .ud-live-line--join { color:rgba(126,200,227,0.51); }
    .ud-live-line--join .ud-live-username { color:rgba(126,200,227,0.51); }
    .ud-live-line--pk { color:#ec4899; font-weight:600; }
    .ud-live-load-older {
      display:block; width:100%; margin:0 0 8px; padding:6px 10px;
      border:1px solid var(--border); border-radius:var(--r-sm);
      background:var(--surface-2); color:var(--accent-hi); cursor:pointer;
      font:0.72rem var(--font-mono);
    }
    .ud-live-load-older:hover { border-color:var(--border-bright); background:var(--surface-3); }
    .ud-live-jump-latest {
      display:flex; opacity:0; visibility:hidden; pointer-events:none;
      position:absolute; z-index:4; right:18px; bottom:14px;
      align-items:center; gap:6px; border:1px solid var(--border); border-radius:20px;
      padding:7px 14px; color:var(--fg); background:rgba(30,32,42,.72);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      box-shadow:0 4px 14px rgba(0,0,0,.28); cursor:pointer;
      font:600 12px/1.2 var(--font-mono);
      transform:translateY(4px);
      transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    }
    .ud-live-jump-latest.is-visible {
      opacity:1; visibility:visible; pointer-events:auto; transform:none;
      transition-delay:0s;
    }
    .ud-live-jump-latest:hover { border-color:var(--border-bright); color:var(--accent-hi); }
    .ud-live-messages, .la-panel-messages { contain:content; content-visibility:auto; }
    .ud-live-line, .ud-live-date-sep { contain:content; }
    /* ── PK event card (grouped battle events in the live feed) ─────────── */
    .ud-pk-card {
      display: block; font-weight: 400; color: var(--fg-2); font-size: 0.8rem;
      background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border-bright);
      border-radius: var(--r-sm); padding: 8px 10px; margin: 3px 0 7px;
    }
    .ud-pk-card--connected, .ud-pk-card--started { border-left-color: #ec4899; }
    .ud-pk-card--punishment { border-left-color: var(--fg-4); }
    .ud-pk-card--disconnected { border-left-color: var(--warn); }
    .ud-pk-card-time { color: var(--fg-4); font-size: 0.7rem; margin-bottom: 3px; }
    .ud-pk-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
    .ud-pk-card-label { color: #ec4899; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
    .ud-pk-card--punishment .ud-pk-card-label { color: var(--fg-3); }
    .ud-pk-card--disconnected .ud-pk-card-label { color: var(--warn); }
    .ud-pk-card-tag { color: var(--fg-3); font-size: 0.66rem; background: var(--surface-3); border-radius: 10px; padding: 1px 8px; white-space: nowrap; flex-shrink: 0; }
    .ud-pk-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
    .ud-pk-row + .ud-pk-row { border-top: 1px solid var(--border); }
    .ud-pk-dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--surface-3); }
    .ud-pk-name { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ud-pk-score { margin-left: auto; font-family: var(--font-mono); color: var(--fg-3); white-space: nowrap; }
    .ud-pk-result { font-weight: 600; white-space: nowrap; margin-left: 8px; }
    .ud-pk-result--won { color: var(--success); }
    .ud-pk-result--lost { color: var(--danger); }
    .ud-pk-result--draw { color: var(--fg-3); }
    .ud-live-time { color:var(--fg-4); }
    .ud-live-date-sep { display:flex; align-items:center; gap:10px; margin:8px 0; color:var(--fg-4); font-size:0.7rem; }
    .ud-live-date-sep::before, .ud-live-date-sep::after { content:''; flex:1; height:1px; background:var(--border); }
    .ud-live-who { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
    .ud-live-avatar { width:18px; height:18px; border-radius:50%; object-fit:cover; cursor:pointer; flex-shrink:0; vertical-align:middle; }
    .ud-live-avatar--placeholder { display:inline-flex; align-items:center; justify-content:center; background:var(--bg-2); color:var(--fg-4); font-size:0.7rem; cursor:default; }
    .ud-live-username { font-weight:700; color:var(--fg); cursor:pointer; }
        .ud-live-autoscroll { display:inline-flex; align-items:center; gap:6px; margin-left:auto; margin-right:20px; font-size:0.72rem; color:var(--fg-3); cursor:pointer; user-select:none; }
    .ud-toggle-switch--sm { width:1.8em; height:1.05em; }
    .la-view { display:flex; flex-direction:column; height:100%; width:100%; overflow:auto; padding:20px 24px; gap:20px; box-sizing:border-box; }
    .la-header-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 20px; display:flex; flex-direction:column; gap:14px; flex-shrink:0; }
    .la-header-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .la-header-top h2 { margin-right:0; }
    .la-header-top .la-header-controls { margin-left:auto; }
    .la-header-top h2 { margin:0; font-size:1.15rem; }
    .la-panels-badge { font-size:0.72rem; color:var(--fg-3); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px 10px; }
    .la-header-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .la-header-controls .ud-live-autoscroll { margin-left:0; margin-right:0; }
    .la-filter-wrap { position:relative; display:inline-flex; }
    .la-filter-btn { background:none; border:1px solid var(--border-bright); color:var(--fg-3); border-radius:var(--r-sm); padding:5px 10px; font-size:0.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
    .la-filter-btn:hover { color:var(--fg); border-color:var(--fg-4); }
    .la-filter-section.la-filter-dropdown { position:absolute; right:0; left:auto; top:calc(100% + 6px); z-index:100; display:none; flex-direction:column; gap:2px; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 24px rgba(0,0,0,0.4); min-width:180px; max-width:calc(100vw - 24px); padding:10px; }
    .la-filter-section.la-filter-dropdown.open { display:flex; }
    .la-filter-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; font-size:0.8rem; color:var(--fg); }
    .la-currently-live { flex-shrink:0; }
    .la-currently-live-sub-row { display:flex; align-items:center; gap:6px; }
    .la-currently-live-sub { margin:0; font-size:0.78rem; color:var(--fg-3); }
    .la-sub-dot { font-size:0.78rem; color:var(--fg-3); }
    .la-hide-username-btn { background:none; border:none; padding:0; font-size:0.78rem; color:var(--accent, #7B7FF3); cursor:pointer; }
    .la-hide-username-btn:hover { text-decoration:underline; }
    .la-broadcaster-list.la-hide-usernames .la-broadcaster-name { display:none; }
    .la-broadcaster-list.la-hide-usernames .la-broadcaster-item { padding:6px; }
    .la-broadcaster-list { display:flex; flex-wrap:wrap; gap:10px; padding:0; }
    .la-broadcaster-item { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; cursor:pointer; background:var(--surface); border:1px solid var(--border); }
    .la-broadcaster-item:hover { border-color:var(--border-bright); }
    .la-broadcaster-item.la-selected { border-color:var(--accent, #7B7FF3); background:var(--accent-soft); }
    .la-broadcaster-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--bg-2); }
    .la-broadcaster-name { font-size:0.82rem; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
    .la-empty { padding:20px 8px; font-size:0.8rem; color:var(--fg-3); text-align:center; width:100%; }
    .la-event-source { color:var(--accent-hi); font-weight:600; }
    .la-panels { flex:1; min-height:280px; display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(280px, 1fr); gap:10px; background:transparent; overflow:visible; align-items:stretch; }
    .la-view.la-video-open .la-panels { grid-auto-rows:minmax(400px, 1fr); }
    .la-view.la-video-resized .la-panels { flex:0 0 auto; overflow:visible; grid-auto-rows:max-content; align-content:start; }
    .la-view.la-fullscreen { position:fixed; inset:0; z-index:1000; background:var(--bg); }
    body.la-fullscreen-active { overflow:hidden; }
    .la-panel { display:flex; flex-direction:column; min-width:0; min-height:280px; background:#191A23; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
    .la-panel.la-panel-dragging { opacity:0.4; }
    .la-panel-header { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0; cursor:grab; background:#13131A; }
    .la-panel-header:active { cursor:grabbing; }
    .la-panel-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--bg-2); }
    .la-panel-name { font-size:0.82rem; font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .la-panel-diamonds { display:flex; align-items:center; gap:4px; font-size:0.78rem; font-weight:600; color:lightskyblue; flex-shrink:0; cursor:pointer; }
    .la-panel-diamonds:hover { text-decoration:underline; }
    .la-panel-viewers { display:flex; align-items:center; gap:4px; font-size:0.78rem; font-weight:600; color:var(--fg-3); flex-shrink:0; }
    .la-panel-timer { display:flex; align-items:center; gap:4px; font-size:0.78rem; font-weight:600; color:var(--fg-3); flex-shrink:0; }
    .la-panel-collapse-btn { background:none; border:none; color:var(--fg-3); cursor:pointer; font-size:1rem; line-height:1; padding:2px; flex-shrink:0; }
    .la-panel-collapse-btn:hover { color:var(--fg); }
    .la-panel-close { margin-left:8px; background:none; border:none; color:var(--fg-3); cursor:pointer; font-size:1rem; line-height:1; padding:2px; flex-shrink:0; }
    .la-panel-close:hover { color:var(--fg); }
    .la-panel-body { position:relative; display:flex; flex:1; min-height:0; overflow:hidden; }
    .la-panel-messages { position:relative; flex:1; min-width:300px; overflow:auto; min-height:0; height:auto; }
    .la-panel.la-panel-collapsed { min-height:0; height:auto; align-self:start; }
    .la-panel.la-panel-collapsed .la-panel-body { display:none; }
    .la-panel-collapsed .la-panel-collapse-btn i { transform:rotate(-90deg); }
    .la-panel.la-panel-maximized { position:fixed; inset:16px; z-index:1100; }
    body.la-panel-maximized-active { overflow:hidden; }
    .la-panel-icon-btn { background:none; border:1px solid var(--border); color:var(--fg-3); cursor:pointer; font-size:0.95rem; line-height:1; width:26px; height:26px; padding:0; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
    .la-panel-icon-btn:hover { color:var(--fg); }
    .la-panel-livefeed-btn { margin-left:auto; }
    .la-panel-livefeed-btn.is-active { color:#ef4444; border-color:rgba(239,68,68,0.4); }
    .la-panel-video { position:relative; height:100%; aspect-ratio:9/16; min-width:0; flex-shrink:0; background:#000; border-right:1px solid var(--border); overflow:hidden; }
    .la-panel-video-resize { position:absolute; z-index:2; top:0; right:-4px; width:8px; height:100%; cursor:col-resize; touch-action:none; }
    .la-panel-video-resize:hover { background:rgba(123,127,243,.45); }
    body.la-video-resizing, body.la-video-resizing * { cursor:col-resize !important; user-select:none !important; }
    .la-panel-video-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .la-panel-video-inner video { width:100%; height:100%; object-fit:contain; }
    .la-panel-video-loading { color:var(--fg-3); font-size:0.72rem; padding:10px; }
    .la-panel-video-error { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--fg-3); font-size:0.72rem; padding:10px; text-align:center; }
    .la-panel-video-retry { background:none; border:1px solid var(--border-bright, var(--border)); color:var(--fg-2, var(--fg)); border-radius:6px; padding:3px 10px; font-size:0.72rem; cursor:pointer; }
    .la-panel-video-retry:hover { color:var(--fg); }
    .la-panel-video-quality { position:absolute; top:6px; right:6px; }
    .la-panel-video-quality select { background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:0.64rem; padding:2px 4px; border-radius:4px; cursor:pointer; max-width:110px; }
    .la-panel-video-quality select:focus { outline:none; border-color:var(--accent, #7B7FF3); }
    @media (max-width:768px) { .la-panel-livefeed-btn, .la-panel-expand-btn { display:none !important; } }
    .la-cols-control { display:inline-flex; align-items:center; gap:6px; margin-left:12px; }
    .la-cols-btn { background:none; border:1px solid var(--border); color:var(--fg-3); cursor:pointer; font-size:0.85rem; line-height:1; padding:3px 7px; border-radius:6px; }
    .la-cols-btn:hover:not(:disabled) { color:var(--fg); background:var(--bg-hover, rgba(129,140,248,0.08)); }
    .la-cols-btn:disabled { opacity:0.35; cursor:default; }
    .la-cols-count { font-size:0.78rem; color:var(--fg-3); min-width:1.2em; text-align:center; }
    .la-panel-drop-placeholder { border:2px dashed var(--accent, #7B7FF3); border-radius:6px; background:var(--bg-hover, rgba(129,140,248,0.06)); min-height:280px; }
    @media (max-width:480px) { .la-panels { grid-template-columns:1fr !important; } }
    .ud-toggle-switch--sm .ud-toggle-slider::before { height:0.8em; width:0.8em; }
    .ud-toggle-switch--sm input:checked + .ud-toggle-slider::before { transform:translateX(0.75em); }
    .ud-live-filter-wrap { position:relative; display:inline-flex; margin-right:20px; }
    .ud-live-filter-btn {
      background:none; border:1px solid var(--border-bright); color:var(--fg-3);
      border-radius:var(--r-sm); padding:2px 8px; font-size:0.72rem; cursor:pointer;
      display:inline-flex; align-items:center; gap:4px;
    }
    .ud-live-filter-btn:hover { color:var(--fg); border-color:var(--fg-4); }
    .ud-live-filter-dropdown {
      position:absolute; right:0; top:calc(100% + 6px); z-index:100; display:none;
      background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-md);
      box-shadow:0 8px 24px rgba(0,0,0,0.4); min-width:180px; padding:10px;
    }
    .ud-live-filter-dropdown.open { display:block; }
    .ud-live-filter-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.83rem; color:var(--fg-2); }
    .ud-live-filter-row + .ud-live-filter-row { margin-top:10px; }

    /* Toggle switch, styled to match app accent colors */
    .ud-toggle-switch { position:relative; display:inline-block; width:2.4em; height:1.4em; flex:none; }
    .ud-toggle-switch input { opacity:0; width:0; height:0; }
    .ud-toggle-slider {
      position:absolute; cursor:pointer; inset:0; background-color:var(--surface-3, var(--border-bright));
      border:1px solid var(--border-bright); transition:.2s; border-radius:32px;
    }
    .ud-toggle-slider::before {
      position:absolute; content:""; height:1.1em; width:1.1em; border-radius:50%;
      left:1px; bottom:1px; background-color:#fff; transition:transform .2s ease-in-out;
      box-shadow:0 1px 2px rgba(0,0,0,0.3);
    }
    .ud-toggle-switch input:checked + .ud-toggle-slider { background-color:var(--accent-hi); border-color:var(--accent-hi); }
    .ud-toggle-switch input:checked + .ud-toggle-slider::before { transform:translateX(1em); }
    .ud-live-empty { padding:18px; color:var(--fg-3); font-size:0.8rem; text-align:center; }
    .ud-live-messages:has(.ud-live-empty-wrap) { display:flex; align-items:center; justify-content:center; }
    .ud-live-empty-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
    .ud-live-force-check-btn {
      display:inline-flex; align-items:center; gap:6px; background:none; cursor:pointer;
      border:1px solid var(--border-bright); color:var(--fg-2); border-radius:var(--r-sm);
      padding:5px 12px; font-size:0.75rem; font-family:var(--font-ui);
    }
    .ud-live-force-check-btn:hover:not(:disabled) { color:var(--fg); border-color:var(--accent-hi); }
    .ud-live-force-check-btn:disabled { opacity:0.6; cursor:default; }
    .ud-live-sessions { overflow:auto; }
    .ud-live-session {
      width:100%; display:block; position:relative; text-align:left; padding:10px 14px; cursor:pointer;
      border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--fg);
      font-family:var(--font-ui);
    }
    .ud-live-session:hover { background:var(--hover); }
    .ud-live-session-time { font-size:0.76rem; font-weight:600; }
    .ud-live-session-meta { margin-top:3px; font-size:0.68rem; color:var(--fg-3); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
    .ud-live-session-meta i { font-size:0.68rem; }
    .ud-live-sep { font-size:1.3em; line-height:0; color:var(--fg-4); }
    .ud-live-session-gallery-btn { position:absolute; right:14px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid var(--border); border-radius:var(--r-sm); background:transparent; color:var(--fg-3); cursor:pointer; }
    .ud-live-session-gallery-btn:hover { color:var(--accent-hi); border-color:var(--border-bright); }
    .ud-live-session-screenshots { flex:0 0 auto; padding:0 8px 12px; }
    .ud-live-session-screenshots-title { color:var(--fg-3); font-size:0.72rem; margin-bottom:7px; }
    .ud-live-session-screenshot-strip { display:flex; gap:8px; overflow-x:auto; }
    .ud-live-session-screenshot { display:block; flex:0 0 120px; aspect-ratio:16/9; overflow:hidden; border:0; border-radius:var(--r-sm); padding:0; background:var(--surface-2); cursor:pointer; }
    .ud-live-session-screenshot img { width:100%; height:100%; display:block; object-fit:contain; }
    .ud-live-session-screenshot:hover img { opacity:0.82; }
    .ud-live-screenshot-gallery-modal { max-width:1100px; max-height:90vh; }
    .ud-live-screenshot-viewer { position:relative; display:flex; align-items:center; justify-content:center; min-height:240px; max-height:calc(90vh - 230px); overflow:hidden; border:1px solid var(--border); border-radius:var(--r-sm); background:#090a0e; }
    .ud-live-screenshot-viewer img { display:block; max-width:100%; max-height:calc(90vh - 250px); width:auto; height:auto; object-fit:contain; }
    .ud-live-screenshot-nav { position:absolute; top:50%; z-index:1; width:38px; height:58px; border:1px solid var(--border-2); border-radius:var(--r-sm); background:rgba(15,16,23,0.82); color:var(--fg); font-size:1.35rem; opacity:0; transform:translateY(-50%); transition:opacity .15s, background .15s; cursor:pointer; }
    .ud-live-screenshot-viewer:hover .ud-live-screenshot-nav, .ud-live-screenshot-viewer:focus-within .ud-live-screenshot-nav { opacity:1; }
    .ud-live-screenshot-nav:hover { background:var(--surface-2); color:var(--accent-hi); }
    .ud-live-screenshot-prev { left:12px; }
    .ud-live-screenshot-next { right:12px; }
    .ud-live-screenshot-caption { min-height:1.2em; color:var(--fg-3); font-size:.72rem; text-align:center; }
    .ud-live-screenshot-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
    .ud-live-screenshot-thumbnail { flex:0 0 112px; padding:4px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); color:var(--fg-3); font:inherit; cursor:pointer; }
    .ud-live-screenshot-thumbnail img { display:block; width:102px; height:58px; object-fit:cover; border-radius:3px; }
    .ud-live-screenshot-thumbnail span { display:block; overflow:hidden; margin-top:4px; font-size:.62rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
    .ud-live-screenshot-thumbnail:hover, .ud-live-screenshot-thumbnail.active { border-color:var(--accent); }
    .ud-live-screenshot-gallery-empty { padding:48px 12px; text-align:center; color:var(--fg-3); font-size:0.82rem; }

    /* ── Shared panel card ──────────────────────────────── */
    .ud-panel-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-md); overflow: auto;
      resize: vertical; min-height: 120px;
    }
    /* ── Live Activity fullscreen mode ──────────────────── */
    .ud-live-fullscreen-btn {
      background: none; border: none; cursor: pointer; color: var(--fg-3);
      display: flex; align-items: center; padding: 2px 4px; border-radius: var(--r-xs);
      font-size: 1rem; line-height: 1;
    }
    .ud-live-fullscreen-btn:hover { color: var(--fg); background: var(--hover); }
    #udLiveActivityCard {
      display: flex; flex-direction: column;
      /* A resizable flex column needs a genuine starting height, not
         auto/hug-content — otherwise its flex:1 child (a scrollable list
         with lots of content) has no fixed budget to be clipped to and
         balloons out to fit all of its content instead of scrolling. */
      height: 50vh;
    }
    #udLiveActivityCard .ud-live-body {
      position: relative; display: flex; flex: 1; min-height: 0; overflow: hidden;
    }
    /* .ud-live-messages' base rule is a fixed height:280px. That used to get
       overridden by flex:1 (flex-basis wins over height) back when this was
       a direct child of the outer column flex container. Now it's nested one
       level deeper inside .ud-live-body, a ROW container — flex:1 there
       resizes width, not height, so the fixed height silently wins again and
       the chat box stops stretching to fill the resized card. height:auto
       restores default cross-axis stretch behavior. */
    #udLiveActivityCard .ud-live-body .ud-live-messages {
      flex: 1; min-height: 0; height: auto;
    }
    #udLiveActivityCard.ud-live-fullscreen {
      position: fixed; inset: 0; z-index: 1000; border-radius: 0;
      resize: none; height: auto;
    }
    body.ud-live-fullscreen-active { overflow: hidden; }
    /* Above 1028px the card is stretched to match PK Opponents' height (see
       #udPkOpponentsRow below) — let the list grow to fill that instead of
       leaving blank space beneath a fixed 8-row cap. At/below 1028px the row
       collapses to a single column with nothing to match, so the list goes
       back to fitting its own content, capped then scrollable. */
    #udPastSessionsCard { display: flex; flex-direction: column; }
    #udPastSessionsCard .ud-live-sessions { flex: 1; min-height: 0; overflow-y: auto; }
    @media (max-width: 1028px) {
      #udPastSessionsCard .ud-live-sessions { flex: none; max-height: calc(8 * 52px); }
    }
    .app-modal.ud-live-session-modal {
      width: 92vw; max-width: none; height: 80vh;
      display: flex; flex-direction: column;
    }
    @media (min-width: 900px) {
      .app-modal.ud-live-session-modal { width: 60vw; }
    }
    .ud-live-session-modal .ud-live-messages { flex: 1; min-height: 0; margin-top: -12px; }
    /* Alts panel needs visible overflow so its inline autocomplete dropdown
       can extend outside the card boundary. Relationship panels get their
       resize handle back via overflow:auto — their autocomplete dropdown
       (.ud-rel-ac-drop) is positioned fixed via _relAcPosition() instead. */
    #udRelPanels { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
    #udAltsPanel { overflow: visible; }
    #udRelBroadcasterRow, #udRelSupporterRow, #udPkOpponentsRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
    @media (max-width: 1028px) {
      /* Below tablet the row is a single column, so there's nothing to
         balance — Past Live Sessions fits its own content (capped, then
         scroll) instead of stretching to match PK Opponents. */
      #udPkOpponentsRow { align-items: start; }
    }
    @media (max-width: 768px) {
      #udRelBroadcasterRow, #udRelSupporterRow, #udPkOpponentsRow { grid-template-columns: 1fr; }
    }
    .ud-pk-bar-wrap { position: relative; }
    .ud-pk-bar-hit:hover rect { opacity: 0.75; }
    .ud-rel-stretch-card { display: flex; flex-direction: column; }
    .ud-rel-stretch-card .ud-rel-list { flex: 1; }
    /* Needs a genuine starting height like #udLiveActivityCard above — its
       two chart wraps are flex:1 children, and without a fixed parent height
       they fall back to sizing from their own SVG content, which the SVG's
       own render then measures to size itself, compounding larger forever. */
    #udDiamondsChartCard { height: 280px; }
    @media (max-width: 1028px) {
      #udDiamondsChartCard { height: 480px; }
    }
    .ud-rel-pager { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 16px; }
    .ud-rel-pager-btn { height:28px; width:28px; min-width:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); font-size:0.8rem; font-family:var(--font-ui); cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--fg-3); transition:all 0.1s; }
    .ud-rel-pager-btn:hover:not(:disabled) { color:var(--fg); border-color:var(--border-bright); }
    .ud-rel-pager-btn:disabled { opacity:0.35; cursor:default; }
    .ud-rel-pager-page { font-family:var(--font-mono); font-size:0.75rem; color:var(--fg-3); letter-spacing:0.06em; min-width:44px; text-align:center; }
    .ud-rel-pager-info { font-size:0.7rem; color:var(--fg-3); }

    /* ── Chart panel ────────────────────────────────────── */
    .ud-chart-panel-split {
      display: flex; flex: 1; min-height: 0; gap: 16px;
    }
    .ud-chart-panel-split > .ud-chart-panel { flex: 1 1 0; min-width: 0; }
    @media (max-width: 768px) {
      .ud-chart-panel-split { flex-direction: column; }
    }
    .ud-chart-panel {
      flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; gap: 4px;
    }
    .ud-chart-controls {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
      padding: 10px 14px 8px; flex-shrink: 0;
    }
    .ud-chart-tabs { display: flex; gap: 3px; }
    .ud-chart-tab {
      height: 26px; padding: 0 10px; border-radius: var(--r-sm);
      font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500;
      cursor: pointer; border: 1px solid var(--border); background: var(--surface-2);
      color: var(--fg-3); transition: all 0.15s;
    }
    .ud-chart-tab:hover { color: var(--fg); border-color: var(--border-bright); }
    .ud-chart-tab.active {
      background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi);
    }
    .ud-chart-svg-wrap { flex: 1; position: relative; min-height: 0; }
    /* Fixed height so the SVG height computed from wrap height stays a stable
       fixed point across re-renders — letting it hug content (e.g. padding+
       line-height) would compound a few px larger every ResizeObserver tick
       and grow the panel unboundedly. */
    .ud-chart-total-row { height: 22px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; font-size: 0.72rem; color: var(--fg-3); }
    .ud-chart-svg-wrap svg { width: 100%; height: 100%; display: block; }
    .ud-chart-empty { font-size: 0.8rem; color: var(--fg-3); text-align: center; padding: 30px 0; }
    .ud-chart-data-hidden { font-size: 0.78rem; color: var(--fg-3); }

    /* ── Panel shared header ────────────────────────────── */
    .ud-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--border);
    }
    .ud-panel-title {
      font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--fg-3);
    }

    /* ── Role badges ────────────────────────────────────── */
    .role-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.52rem; font-weight:700; letter-spacing:0.4px; padding:1px 5px; border-radius:var(--r-xs); text-transform:uppercase; vertical-align:middle; }
    .role-badge--broadcaster { background:rgba(139,92,246,0.15); color:#a78bfa; border:1px solid rgba(139,92,246,0.3); }
    .role-badge--supporter   { background:rgba(20,184,166,0.15);  color:#2dd4bf; border:1px solid rgba(20,184,166,0.3); }

    /* Role selector in action bar */
    .ud-role-selector { display:inline-flex; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
    .ud-role-btn { font-size:0.72rem; padding:5px 10px; background:transparent; border:none; color:var(--fg-3); cursor:pointer; transition:background 0.1s,color 0.1s; display:flex; align-items:center; gap:4px; }
    .ud-role-btn:not(:last-child) { border-right:1px solid var(--border); }
    .ud-role-btn:hover { background:var(--hover); color:var(--fg); }
    .ud-role-btn.is-active--broadcaster { background:rgba(139,92,246,0.15); color:#a78bfa; }
    .ud-role-btn.is-active--supporter   { background:rgba(20,184,166,0.15);  color:#2dd4bf; }

    /* Monitor Live / Settings split button in action bar */
    .ud-split-btn { display:inline-flex; height:30px; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
    .ud-split-btn-side {
      height:100%; padding:0 12px; background:var(--surface-2); border:none;
      font-family:var(--font-ui); font-size:0.78rem; font-weight:500; color:var(--fg);
      cursor:pointer; display:flex; align-items:center; gap:6px;
      transition:background 0.15s,color 0.15s; white-space:nowrap;
    }
    .ud-split-btn-side:not(:last-child) { border-right:1px solid var(--border); }
    .ud-split-btn-side:hover { background:var(--surface-3); }
    .ud-split-btn-side:disabled { opacity:0.4; cursor:not-allowed; }
    .ud-split-btn-side.ud-live-monitor-active { color:var(--success); background:rgba(52,211,153,0.12); }

    /* Relationship panels */
    .ud-rel-panel { }
    .ud-rel-list { }
    .ud-rel-row { display:flex; align-items:center; gap:10px; padding:9px 16px; border-bottom:1px solid var(--border); font-size:0.83rem; cursor:pointer; transition:background 0.1s; }
    .ud-rel-row:hover { background:var(--hover); }
    .ud-rel-row:last-child { border-bottom:none; }
    .ud-rel-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex-shrink:0; }
    .ud-rel-name { flex:1; min-width:0; }
    .ud-rel-handle { font-size:0.72rem; color:var(--fg-3); }
    .ud-rel-diamonds { display:inline-flex; align-items:center; gap:2px; font-size:0.7rem; color:inherit; margin-right:6px; }
    .ud-rel-diamonds i { font-size:0.7rem; color:lightskyblue; }
    .ud-rel-diamonds--in, .ud-rel-diamonds--out { display:inline-flex; align-items:center; gap:2px; color:inherit; }
    .ud-rel-diamonds-sep { color:var(--fg-4); }
    .ud-rel-badge { display:inline-flex; align-items:center; gap:3px; font-weight:600; border-radius:20px; cursor:pointer; transition:background 0.1s; font-size:0.62rem; padding:1px 6px; }
    .ud-rel-badge--friend { background:rgba(34,197,94,0.15); color:#4ade80; border:1px solid rgba(34,197,94,0.3); }
    .ud-rel-badge--foe    { background:rgba(242,88,107,0.15);  color:#F2586B; border:1px solid rgba(242,88,107,0.3); }
    .ud-rel-badge--auto   { background:rgba(123,127,243,0.15); color:#9A9DF7; border:1px solid rgba(123,127,243,0.3); }
    .ud-rel-badge i { font-size:0.62rem; }
    .ud-pk-pill { display:inline-flex; align-items:center; font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:20px; }
    .ud-pk-pill--win  { background:rgba(52,211,153,0.15); color:var(--success); }
    .ud-pk-pill--loss { background:rgba(242,88,107,0.15); color:var(--danger); }
    .ud-rel-remove { background:transparent; border:none; color:var(--fg-4); cursor:pointer; padding:2px 4px; border-radius:3px; font-size:0.9rem; }
    .ud-rel-remove:hover { color:var(--fg); background:var(--surface-3); }
    .ud-rel-filter-row { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid var(--border); }
    .ud-rel-search-wrap { flex:1; display:flex; align-items:center; gap:5px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px 8px; }
    .ud-rel-search-wrap i { color:var(--fg-4); font-size:0.78rem; flex-shrink:0; }
    .ud-rel-search { flex:1; background:none; border:none; color:var(--fg); font-size:0.78rem; outline:none; min-width:0; }
    .ud-rel-search::placeholder { color:var(--fg-4); }
    .ud-rel-perpage { background:var(--surface-2); border:1px solid var(--border); color:var(--fg); font-size:0.72rem; border-radius:var(--r-sm); padding:3px 4px; cursor:pointer; flex-shrink:0; }
    .ud-rel-add-unknown { display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer; color:var(--fg-2); font-size:0.78rem; transition:background 0.12s; border-top:1px dashed var(--border); }
    .ud-rel-add-unknown:hover { background:var(--surface-2); color:var(--fg); }
    .ud-rel-add-unknown i { font-size:1rem; color:var(--accent); flex-shrink:0; }
    .ud-rel-add-unknown strong { color:var(--fg); font-weight:600; }
    .ud-rel-add-row { display:flex; align-items:center; gap:7px; padding:12px 16px; border-top:1px solid var(--border); }
    .ud-rel-add-wrap { position:relative; flex:1; min-width:0; }
    .ud-rel-add-input { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--fg); font-size:0.8rem; padding:5px 9px; outline:none; font-family:var(--font-ui); }
    .ud-rel-add-input:focus { border-color:var(--accent-ring); }
    .ud-rel-add-btn { font-size:0.75rem; padding:5px 12px; flex-shrink:0; }
    .ud-rel-toggle { display:inline-flex; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; flex-shrink:0; }
    .ud-rel-toggle-btn { font-size:0.7rem; padding:4px 9px; background:transparent; border:none; color:var(--fg-3); cursor:pointer; }
    .ud-rel-toggle-btn:not(:last-child) { border-right:1px solid var(--border); }
    .ud-rel-toggle-btn.is-active--friend { background:rgba(34,197,94,0.15); color:#4ade80; }
    .ud-rel-toggle-btn.is-active--foe    { background:rgba(242,88,107,0.15);  color:#F2586B; }
    /* Autocomplete dropdown */
    .ud-rel-ac-drop { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:200; overflow:hidden; display:none; }
    .ud-rel-ac-drop.is-open { display:block; }
    .ud-rel-ac-item { display:flex; align-items:center; gap:9px; padding:7px 11px; cursor:pointer; font-size:0.82rem; transition:background 0.1s; }
    .ud-rel-ac-item:hover, .ud-rel-ac-item.is-focused { background:var(--hover); }
    .ud-rel-ac-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; background:var(--surface-3); flex-shrink:0; }
    .ud-rel-ac-name { flex:1; min-width:0; }
    .ud-rel-ac-nick { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ud-rel-ac-handle { font-size:0.7rem; color:var(--fg-3); }

    /* ── UD History timeline ────────────────────────────── */
    .ud-history-filter {
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--r-sm); color: var(--fg-2); font-family: var(--font-ui);
      font-size: 0.76rem; padding: 3px 8px; outline: none; cursor: pointer;
    }
    .ud-history-body { padding: 8px 0; }
    .ud-timeline-item {
      display: grid; grid-template-columns: 100px 24px 1fr;
      gap: 0 8px; padding: 8px 16px; position: relative;
    }
    .ud-tl-date {
      text-align: right; flex-shrink: 0; padding-top: 2px;
    }
    .ud-tl-date-main { font-size: 0.7rem; color: var(--fg-3); font-family: var(--font-mono); line-height: 1.4; }
    .ud-tl-date-rel { font-size: 0.65rem; color: var(--fg-4); }
    .ud-tl-dot-col {
      display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 3px;
    }
    .ud-tl-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--accent); border: 2px solid var(--surface); flex-shrink: 0; z-index: 1;
    }
    .ud-tl-dot.minor      { background: var(--fg-4); }
    .ud-tl-dot.rename     { background: var(--accent); }
    .ud-tl-dot.bio        { background: var(--tt-cyan); }
    .ud-tl-dot.avatar     { background: var(--tt-magenta); }
    .ud-tl-dot.region     { background: var(--warn); }
    .ud-tl-dot.annotation { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
    .ud-tl-vline {
      width: 2px; background: var(--border); flex: 1; min-height: 14px; margin-top: 2px;
    }
    .ud-tl-content { padding-bottom: 6px; min-width: 0; display: flex; flex-direction: column; }
    .ud-tl-label { font-size: 0.82rem; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
    .ud-tl-label.minor { opacity: 0.45; }
    .ud-tl-val { font-size: 0.8rem; }
    .ud-tl-val .val-old { color: var(--fg-3); text-decoration: line-through; }
    .ud-tl-val .val-new { color: var(--tt-cyan); }
    .ud-tl-val .arrow { color: var(--fg-4); margin: 0 4px; }
    .ud-tl-val.minor { opacity: 0.45; }
    .ud-tl-diff-block { margin-top: 5px; font-size: 0.78rem; line-height: 1.5; }
    .ud-tl-diff-old {
      background: rgba(248,113,113,0.1); border-left: 2px solid var(--danger);
      padding: 3px 6px; text-decoration: line-through; color: var(--fg-3);
      white-space: pre-wrap; word-break: break-word; margin-bottom: 3px;
    }
    .ud-tl-diff-new {
      background: rgba(52,211,153,0.08); border-left: 2px solid var(--success);
      padding: 3px 6px; color: var(--fg); white-space: pre-wrap; word-break: break-word;
    }
    .ud-tl-del-btn {
      background: none; border: none; color: var(--fg-4); cursor: pointer;
      font-size: 0.8rem; padding: 3px; line-height: 1; margin-left: auto;
      transition: color 0.15s; opacity: 0.5; align-self: flex-start;
    }
    .ud-tl-del-btn:hover { color: var(--danger); opacity: 1; }
    .ud-tl-avatar-thumb {
      width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
      cursor: pointer; border: 2px solid var(--border); transition: border-color 0.15s;
      flex-shrink: 0;
    }
    .ud-tl-avatar-thumb:hover { border-color: var(--accent); }
    .ud-tl-avatar-pair {
      display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap;
    }
    .ud-tl-avatar-pair .arrow { font-size: 0.9rem; color: var(--fg-3); }
    .ud-history-footer {
      padding: 10px 16px; font-size: 0.72rem; color: var(--fg-3);
      border-top: 1px solid var(--border); display: flex; justify-content: space-between;
      font-family: var(--font-mono);
    }
    .ud-history-empty { padding: 20px; font-size: 0.83rem; color: var(--fg-3); }

    /* ── UD Remarks panel ───────────────────────────────── */
    .ud-remarks-list { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 8px; }
    .ud-remark-item {
      padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 0.84rem;
    }
    .ud-remark-item.deleted { opacity: 0.5; }
    .ud-remark-header {
      display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
    }
    .ud-remark-user-avatar { display: none; }
    .ud-remark-author { font-size: 0.78rem; font-weight: 600; color: var(--fg-2); }
    .ud-remark-vis { font-size: 0.78rem; color: var(--fg-4); }
    .ud-remark-time { font-size: 0.72rem; color: var(--fg-4); margin-left: auto; }
    .mention-chip { display:inline-block; background:var(--accent-soft); color:var(--accent-hi); border:1px solid var(--accent-ring); border-radius:999px; padding:0 6px; font-size:0.78em; font-weight:600; line-height:1.6; white-space:nowrap; }
    .ud-remark-text {
      color: var(--fg); white-space: pre-wrap; word-break: break-word;
      line-height: 1.5; margin-bottom: 5px;
    }
    .ud-remark-text.deleted-text { font-style: italic; }
    .ud-remark-actions { display: flex; gap: 10px; }
    .ud-remark-action-btn {
      background: none; border: none; color: var(--fg-3); font-size: 0.72rem;
      cursor: pointer; padding: 0; text-decoration: underline; transition: color 0.15s;
      font-family: var(--font-ui);
    }
    .ud-remark-action-btn:hover { color: var(--fg); }
    .ud-remark-action-btn.del:hover { color: var(--danger); }
    .ud-remarks-compose {
      padding: 12px 16px; border-top: 1px solid var(--border);
    }
    .ud-remark-textarea {
      width: 100%; box-sizing: border-box; background: var(--surface-2);
      border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg);
      font-family: var(--font-ui); font-size: 0.84rem; padding: 9px 11px;
      resize: vertical; min-height: 64px; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .ud-remark-textarea:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
    .ud-remarks-empty { padding: 16px; font-size: 0.83rem; color: var(--fg-3); }

    /* ── UD Alts panel ──────────────────────────────────── */
    .ud-alt-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
    }
    .ud-alt-item:last-of-type { border-bottom: none; }
    .ud-alt-item:hover { background: var(--hover); }
    .ud-alt-avatar {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; font-weight: 700; color: #fff; overflow: hidden;
    }
    .ud-alt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .ud-alt-info { flex: 1; min-width: 0; }
    .ud-alt-nick { font-size: 0.83rem; font-weight: 600; color: var(--fg); }
    .ud-alt-handle { font-size: 0.73rem; color: var(--fg-3); font-family: var(--font-mono); }
    .ud-alt-chevron { color: var(--fg-4); font-size: 0.85rem; flex-shrink: 0; }
    .ud-alts-actions { padding: 10px 16px; display: flex; gap: 7px; flex-wrap: wrap; }
    .ud-alt-inline-row { padding: 0 16px 10px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
    .ud-alts-empty { padding: 16px; font-size: 0.83rem; color: var(--fg-3); }
    .ud-alt-unlink-btn {
      background: none; border: none; color: var(--fg-3); cursor: pointer;
      font-size: 0.8rem; padding: 3px 5px; line-height: 1; transition: color 0.15s;
      flex-shrink: 0;
    }
    .ud-alt-unlink-btn:hover { color: var(--danger); }
    .ud-main-banner {
      display: flex; align-items: center; gap: 8px; padding: 10px 16px;
      border-bottom: 1px solid var(--border); cursor: pointer;
    }
    .ud-main-banner:hover { background: var(--hover); }
    .ud-main-label { font-size: 0.7rem; color: var(--fg-3); font-weight: 600; white-space: nowrap; flex-shrink: 0; }

    /* ── Region / language info card ───────────────────────────── */
    .ud-region-card {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--r-sm); overflow: hidden; margin-top: 10px;
      max-width: 600px;
    }
    .ud-region-cell {
      padding: 8px 12px; border-right: 1px solid var(--border);
    }
    .ud-region-cell:last-child { border-right: none; }
    .ud-region-cell-label {
      font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--fg-4); margin-bottom: 3px;
    }
    .ud-region-cell-value {
      font-size: 0.875rem; font-weight: 600; color: var(--fg); margin-bottom: 2px;
    }
    .ud-region-cell-sub { font-size: 0.65rem; color: var(--fg-4); }
    .ud-badge-warn { background: rgba(251,191,36,0.12); color: var(--warn); border: 1px solid rgba(251,191,36,0.25); }

    /* ── User detail — mobile overrides ─────────────────────────── */
    @media (max-width: 768px) {
      #userDetailView { padding: 12px 12px 80px; }

      /* Hero body: avatar + info, 2-col */
      .ud-hero-body { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
      .ud-avatar { width: 56px; height: 56px; font-size: 1.4rem; }
      .ud-skel-avatar { width: 56px; height: 56px; }
      .ud-name { font-size: 1.05rem; max-width: 100%; }

      /* Actions already row on desktop; just shrink font on mobile */
      .ud-action-btn { font-size: 0.75rem; }
      .ud-split-btn-side { font-size: 0.75rem; }

      /* Mid row + panels: stack to single column on mobile */
      .ud-mid-row { grid-template-columns: 1fr; }
      .ud-panels { grid-template-columns: 1fr; }
      /* Remarks + Alts above History on mobile */
      .ud-panels-right { order: -1; }

      /* Stats 2×2: stays 2-col, smaller padding */
      .ud-stat { padding: 10px 14px; }
      .ud-stat-value { font-size: 1.1rem; }

      /* Chart */
      .ud-chart-svg-wrap { min-height: 160px; }

      /* Panel headers — no sticky on mobile */
      .ud-panel-header { position: static; }

      /* Region card: 2-col on mobile (detected+locked top, language full-width below) */
      .ud-region-card { grid-template-columns: 1fr 1fr; }
      .ud-region-cell:nth-child(3) { grid-column: 1 / -1; border-right: none; border-top: 1px solid var(--border); }

      /* History */
      .ud-timeline-item { grid-template-columns: 72px 20px 1fr; gap: 0 6px; padding: 8px 10px; }
    }

    /* ═══════════════════════════════════════════════
       TABLET PORTRAIT  (769px – 1024px, portrait orientation)
       ═══════════════════════════════════════════════ */
    @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
      /* Sidebar — collapse to hamburger overlay like mobile */
      #app.app-ready { grid-template-columns: 1fr; }
      .sb-hamburger { display: flex; }
      .sb {
        display: none;
        position: fixed; top: 0; left: 0;
        width: 14.5rem; height: 100vh;
        z-index: 200; overflow-y: auto;
        padding: 0.875rem 0.625rem;
        align-items: flex-start;
        transition: transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94);
      }
      #sidebar.sb--expanded {
        display: flex;
        padding: 0.875rem 0;
      }
      #sidebar.sb--expanded .sb__brand   { padding: 0.5rem 0.75rem 0.875rem; }
      #sidebar.sb--expanded .sb__group   { padding: 0 0.375rem; width: 100%; }
      #sidebar.sb--expanded .sb__divider { margin: 0.375rem 0; }
      #sidebar.sb--expanded #navAdminGroup { padding: 0 0.375rem; width: 100%; box-sizing: border-box; }
      #sidebar.sb--expanded #sbAgencySection { width: 100%; box-sizing: border-box; border-radius: 0; padding: 0.625rem 0.75rem; }
      #sidebar.sb--expanded .sb__agency  { padding: 0.625rem 0.75rem; border-radius: 0; }
      #sidebar.sb--expanded .sb__user    { padding: 0.625rem 0.75rem; width: 100%; box-sizing: border-box; }
      #sbUsersSubItems { display: none !important; }
      .app-topbar { height: 96px; padding: 32px 10px 0; position: sticky; top: 0; z-index: 150; }

      /* User detail bottom panels: History full width, Remarks full width,
         Linked Alts | Screenshots side by side (1:1). Mid row (stats/chart)
         and relationship rows (fans/circles) keep their default 1:1 split. */
      .ud-panels { grid-template-columns: 1fr; }
      .ud-panels-right { flex-direction: row; flex-wrap: wrap; gap: 16px; }
      .ud-panels-right > .ud-panel-card { flex: 1 1 100%; }
      .ud-panels-right > #udAltsPanel,
      .ud-panels-right > #udScreenshotsPanel { flex: 1 1 calc(50% - 8px); min-width: 0; }
    }

    /* ═══════════════════════════════════════════════
       USER DETAIL — force every panel to a single full-width
       column at 1028px and below, regardless of orientation.
       Overrides the tablet-portrait split above.
       ═══════════════════════════════════════════════ */
    @media (max-width: 1028px) {
      .ud-mid-row,
      .ud-panels,
      #udRelBroadcasterRow, #udRelSupporterRow, #udPkOpponentsRow {
        grid-template-columns: 1fr;
      }
      .ud-chart-panel-split { flex-direction: column; }
      .ud-panels-right {
        flex-direction: column; flex-wrap: nowrap;
      }
      .ud-panels-right > .ud-panel-card,
      .ud-panels-right > #udAltsPanel,
      .ud-panels-right > #udScreenshotsPanel {
        flex: 1 1 100%; min-width: 0;
      }
    }

    /* ── Member agency view ──────────────────────────── */
    #memberAgencyView { display: none; }

    /* ── Workspace settings redesign (ws-*) ──────────── */
    #adminView { display: none; padding: 0; min-height: calc(100vh - 48px); background: var(--bg); }
    .ws-wrap { max-width: none; padding: 28px 36px 60px; }
    .ws-wrap.agd-open { max-width: none; }
    .ws-breadcrumb { font-size: 0.75rem; color: var(--fg-3); margin-bottom: 10px; letter-spacing: 0.01em; }
    .ws-breadcrumb span { color: var(--fg-2); }
    .ws-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
    .ws-title { font-size: 1.15rem; font-weight: 700; color: var(--fg); letter-spacing: 0; }
    .ws-subtitle { font-size: 0.83rem; color: var(--fg-3); margin-bottom: 22px; }
    .ws-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-top: 4px; }
    .ws-btn-secondary {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
      color: var(--fg-2); cursor: pointer; font-family: var(--font-ui); font-size: 0.8rem;
      padding: 7px 14px; transition: color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 5px;
    }
    .ws-btn-secondary:hover { color: var(--fg); border-color: var(--border-bright); }
    .ws-btn-primary {
      background: var(--accent); border: none; border-radius: var(--r-sm);
      color: #0b0b14; cursor: pointer; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
      padding: 7px 14px; transition: background 0.15s; display: inline-flex; align-items: center; gap: 5px;
    }
    .ws-btn-primary:hover { background: var(--accent-hi); }
    .ws-btn-primary:disabled, .ws-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Tabs */
    .ws-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
    .ws-tab {
      background: none; border: none; border-bottom: 2px solid transparent;
      color: var(--fg-3); cursor: pointer; font-family: var(--font-ui); font-size: 0.83rem;
      padding: 10px 16px; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px;
      transition: color 0.15s, border-color 0.15s;
    }
    .ws-tab:hover { color: var(--fg-2); }
    .ws-tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
    .ws-tab.disabled { opacity: 0.4; cursor: not-allowed; }
    .ws-tab-badge {
      background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px;
      color: var(--fg-3); font-size: 0.67rem; font-weight: 600; padding: 1px 6px; line-height: 1.5;
    }
    .ws-tab.active .ws-tab-badge { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent-hi); }

    /* Tab panes */
    .ws-tab-pane { display: none; }
    .ws-tab-pane.active { display: block; }

    /* Section header row */
    .ws-section-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .ws-section-title { font-size: 0.92rem; font-weight: 700; color: var(--fg); }
    .ws-count-chip { background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; color: var(--fg-3); font-size: 0.7rem; font-weight: 600; padding: 1px 8px; }
    .ws-section-hdr-end { margin-left: auto; }
    .ws-omar-usage-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; }
    .ws-omar-usage-bar { background: var(--surface-3); border-radius: 999px; height: 10px; overflow: hidden; width: 100%; }
    .ws-omar-usage-fill { background: var(--accent-hi); border-radius: 999px; height: 100%; transition: width 0.3s ease, background 0.3s ease; }
    .ws-omar-usage-fill.warn { background: #eab308; }
    .ws-omar-usage-fill.danger { background: #ef4444; }
    .ws-omar-usage-label { color: var(--fg-3); font-size: 0.78rem; margin-top: 8px; }
    .ws-link-btn {
      background: none; border: none; color: var(--accent-hi); cursor: pointer;
      font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; padding: 0;
      transition: opacity 0.15s;
    }
    .ws-link-btn:hover { opacity: 0.75; }

    /* Agency cards grid */
    .ws-agency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
    @media (max-width: 900px) { .ws-agency-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .ws-agency-grid { grid-template-columns: 1fr; } }
    .ws-agency-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
      padding: 16px; display: flex; flex-direction: column; gap: 10px;
    }
    .ws-agency-card-top { display: flex; align-items: center; gap: 10px; }
    .ws-avatar-circle {
      width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; font-size: 0.9rem; font-weight: 700; color: #fff; flex-shrink: 0;
      letter-spacing: 0.02em;
    }
    .ws-avatar-sm {
      width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .ws-agency-card-name { font-size: 0.9rem; font-weight: 700; color: var(--fg); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ws-agency-card-id { font-size: 0.7rem; color: var(--fg-4); font-family: var(--font-mono); }
    .ws-agency-menu-btn {
      background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: 1.1rem;
      padding: 2px 4px; border-radius: var(--r-sm); transition: background 0.15s;
    }
    .ws-agency-menu-btn:hover { background: var(--hover); color: var(--fg); }
    .ws-agency-stats { display: flex; gap: 14px; }
    .ws-agency-stat { display: flex; flex-direction: column; gap: 1px; }
    .ws-agency-stat-label { font-size: 0.62rem; font-weight: 700; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.07em; }
    .ws-agency-stat-val { font-size: 1rem; font-weight: 700; color: var(--fg); }
    .ws-agency-members-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .ws-members-overflow { font-size: 0.65rem; color: var(--fg-3); font-weight: 600; }

    /* Invite form */
    .ws-invite-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
      padding: 18px; margin-bottom: 28px;
    }
    .ws-invite-label { font-size: 0.83rem; font-weight: 700; color: var(--fg); margin-bottom: 2px; }
    .ws-invite-sub { font-size: 0.76rem; color: var(--fg-3); margin-bottom: 14px; }
    .ws-invite-form { display: flex; flex-direction: column; gap: 10px; }
    .ws-invite-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .ws-invite-inputs .admin-input { flex: 1; min-width: 120px; }
    .ws-invite-inputs select.admin-input { flex: 0 1 160px; min-width: 120px; }
    .ws-invite-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .ws-invite-check { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--fg-2); cursor: pointer; white-space: nowrap; user-select: none; }
    .ws-invite-check input[type=checkbox] { display: none; }
    .ws-check-box {
      width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0;
      border: 1px solid var(--border-bright); background: transparent;
      display: grid; place-items: center; transition: background 0.15s, border-color 0.15s;
    }
    .ws-check-box .ph { font-size: 9px; color: #0b0b14; opacity: 0; transition: opacity 0.1s; }
    .ws-invite-check.is-checked .ws-check-box { background: var(--accent); border-color: var(--accent); }
    .ws-invite-check.is-checked .ws-check-box .ph { opacity: 1; }
    .ws-invite-check.is-checked { color: var(--fg); }

    /* Users table */
    .ws-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: clip; }
    .ws-table-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
    .ws-search-input {
      background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
      color: var(--fg); font-family: var(--font-ui); font-size: 0.8rem; padding: 6px 10px;
      outline: none; width: 180px; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .ws-search-input:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
    .ws-search-input::placeholder { color: var(--fg-4); }
    .ws-users-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.83rem; }
    .ws-users-table th { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-4); font-weight: 600; white-space: nowrap; }
    .ws-users-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .ws-users-table tr:last-child td { border-bottom: none; }
    .ws-user-cell { display: flex; flex-direction: column; gap: 2px; }
    .ws-user-name-row { display: flex; align-items: center; gap: 6px; }
    .ws-user-name { font-weight: 600; color: var(--fg); }
    .ws-you-chip { background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--accent-hi); font-size: 0.6rem; font-weight: 700; border-radius: 999px; padding: 1px 5px; text-transform: lowercase; }
    .ws-user-uid { font-size: 0.69rem; color: var(--fg-4); font-family: var(--font-mono); }
    .ws-actions-cell { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
    .ws-impersonate-btn {
      background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
      color: var(--fg-2); cursor: pointer; font-family: var(--font-ui); font-size: 0.72rem;
      padding: 3px 8px; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
    }
    .ws-impersonate-btn:hover { color: var(--accent-hi); border-color: var(--accent); }
    .ws-num-cell { font-variant-numeric: tabular-nums; color: var(--fg-2); }

    /* New agency name input */
    #newAgencyName.admin-input { background: var(--surface-2); }

    /* Agencies tab — stats row */
    .ws-statgrid {
      display: grid; gap: 1px; background: var(--border);
      border: 1px solid var(--border); border-radius: var(--r-md);
      overflow: hidden; margin-bottom: 18px;
    }
    .ws-statgrid--3 { grid-template-columns: repeat(3, 1fr); }
    .ws-stat {
      background: var(--surface); padding: 14px 18px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .ws-stat__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); }
    .ws-stat__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); font-family: var(--font-mono); }
    .ws-stat__delta { font-size: 0.72rem; color: var(--fg-3); font-family: var(--font-mono); }
    .ws-stat__delta.up   { color: var(--success); }
    .ws-stat__delta.warn { color: var(--warn); }

    /* Agencies tab — filter bar */
    .ws-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .ws-filter-bar .ws-search-input { flex: 1; max-width: 400px; width: auto; }
    .ws-sort-select {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
      color: var(--fg-2); font-family: var(--font-ui); font-size: 0.8rem; padding: 6px 10px;
      cursor: pointer; outline: none; transition: border-color 0.15s;
    }
    .ws-sort-select:focus { border-color: var(--accent-ring); }

    /* Agencies tab — table */
    .ws-ag-table td:nth-child(n+4) { color: var(--fg-2); }
    .ws-av-stack { display: inline-flex; align-items: center; }
    .ws-av-stack .ws-avatar-sm { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
    .ws-av-stack .ws-avatar-sm:first-child { margin-left: 0; }
    .ws-av-overflow { font-size: 0.65rem; color: var(--fg-3); font-weight: 600; margin-left: 6px; }
    .ws-ag-name { font-weight: 600; font-size: 0.85rem; color: var(--fg); }
    .ws-ag-id { font-size: 0.69rem; color: var(--fg-4); font-family: var(--font-mono); }
    .ws-ag-gradient {
      width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0;
      display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.72rem;
      letter-spacing: 0.03em;
    }
    .ws-table-foot {
      padding: 9px 16px; border-top: 1px solid var(--border);
      display: flex; align-items: center; font-size: 0.76rem; color: var(--fg-3);
    }
    .ws-chevron-cell { color: var(--fg-4); text-align: right; }
    .ws-pill-warn {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--warn-soft); border: 1px solid rgba(251,191,36,0.22);
      color: var(--warn); border-radius: 999px; font-size: 0.68rem; font-weight: 600;
      padding: 2px 7px;
    }
    @media (max-width: 720px) {
      .ws-statgrid--3 { grid-template-columns: 1fr 1fr; }
      .ws-ag-table td:nth-child(n+4) { display: none; }
      .ws-ag-table th:nth-child(n+4) { display: none; }
    }

    /* Agency detail view */
    #wsAgencyDetail { display: none; }
    .ws-wrap.agd-open > *:not(#wsAgencyDetail) { display: none !important; }
    .ws-wrap.agd-open #wsAgencyDetail { display: block; }
    /* App user detail overlay (same pattern as agency detail) */
    #wsAppUserDetail { display: none; }
    .ws-wrap.aud-open > *:not(#wsAppUserDetail) { display: none !important; }
    .ws-wrap.aud-open #wsAppUserDetail { display: block; }
    /* Shared account/profile styles */
    .aup-hero { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
    .aup-avatar-wrap { position:relative; flex-shrink:0; }
    .aup-avatar {
      width:80px; height:80px; border-radius:50%;
      background:linear-gradient(135deg,#5b6ee0,#8b5cf6);
      display:grid; place-items:center; color:#fff; font-size:28px; font-weight:700;
      overflow:hidden;
    }
    .aup-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .aup-avatar-overlay {
      position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,0.5);
      display:grid; place-items:center; opacity:0; transition:opacity 0.15s; cursor:pointer;
      color:#fff; font-size:1.1rem;
    }
    .aup-avatar-wrap:hover .aup-avatar-overlay { opacity:1; }
    .aup-hero-info { flex:1; min-width:0; }
    .aup-name { font-size:1.35rem; font-weight:700; letter-spacing:-0.02em; color:var(--fg); }
    .aup-sub { font-size:0.78rem; color:var(--fg-3); font-family:var(--font-mono); margin-top:4px; display:flex; gap:12px; flex-wrap:wrap; }
    .aup-body { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }
    @media (max-width:720px) { .aup-body { grid-template-columns:1fr; } }
    .aup-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
    .aup-card-hd { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
    .aup-card-hd h3 { margin:0; font-size:0.7rem; font-weight:800; color:var(--fg); }
    .aup-card-hd-end { margin-left:auto; }
    .aup-card-body { padding:16px; display:flex; flex-direction:column; gap:14px; }
    .aup-field { display:flex; flex-direction:column; gap:4px; }
    .aup-label { font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--fg-4); }
    .aup-input { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--fg); font-family:var(--font-ui); font-size:0.85rem; padding:7px 10px; outline:none; width:100%; box-sizing:border-box; transition:border-color 0.15s; }
    .aup-input:focus { border-color:var(--accent); }
    .aup-input[readonly],.aup-input:disabled { opacity:0.5; cursor:default; }
    .aup-save-btn { background:var(--accent); color:#fff; border:none; border-radius:var(--r-sm); padding:8px 16px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:var(--font-ui); transition:opacity 0.15s; width:100%; margin-top:4px; }
    .aup-save-btn:hover { opacity:0.88; } .aup-save-btn:disabled { opacity:0.4; cursor:default; }
    .aup-msg { font-size:0.75rem; min-height:16px; }
    .aup-msg.ok { color:#22c55e; } .aup-msg.err { color:var(--danger); }
    .aup-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
    .aup-stat { text-align:center; }
    .aup-stat-val { font-size:1.4rem; font-weight:700; color:var(--fg); display:block; }
    .aup-stat-lbl { font-size:0.68rem; color:var(--fg-3); text-transform:uppercase; letter-spacing:0.05em; }
    .aup-danger-zone { border-top:1px solid var(--border); padding:14px 16px; }
    .aup-danger-title { font-size:0.75rem; font-weight:600; color:var(--danger); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
    /* Sessions card */
    .pv-session-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:0.82rem; }
    .pv-session-row:last-child { border-bottom:none; }
    .pv-session-icon { width:34px; height:34px; border-radius:8px; background:var(--surface-3); display:grid; place-items:center; flex-shrink:0; }
    .pv-session-info { flex:1; min-width:0; }
    .pv-session-device { font-weight:600; color:var(--fg); display:flex; align-items:center; gap:6px; }
    .pv-session-meta { font-size:0.72rem; color:var(--fg-3); margin-top:1px; }
    .pv-session-badge { font-size:0.65rem; background:var(--accent-soft); color:var(--accent-hi); border:1px solid var(--accent-ring); border-radius:99px; padding:1px 7px; font-weight:600; }
    .pv-session-revoke { background:none; border:1px solid var(--border); color:var(--fg-3); border-radius:var(--r-sm); padding:4px 10px; font-size:0.72rem; cursor:pointer; font-family:var(--font-ui); transition:color 0.15s,border-color 0.15s; }
    .pv-session-revoke:hover { color:var(--danger); border-color:var(--danger); }
    /* 2FA card */
    .pv-2fa-status { display:flex; align-items:center; gap:8px; padding:14px 16px; }
    .pv-2fa-badge { font-size:0.72rem; font-weight:600; padding:3px 10px; border-radius:99px; }
    .pv-2fa-badge.on { background:#22c55e22; color:#22c55e; border:1px solid #22c55e55; }
    .pv-2fa-badge.off { background:var(--surface-3); color:var(--fg-3); border:1px solid var(--border); }
    .pv-2fa-setup { padding:0 16px 16px; display:flex; flex-direction:column; gap:14px; }
    .pv-2fa-qr { display:flex; justify-content:center; padding:8px 0; }
    .pv-2fa-qr svg { width:180px; height:180px; border-radius:8px; background:#fff; padding:8px; }
    .pv-2fa-secret { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 12px; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.08em; text-align:center; cursor:pointer; word-break:break-all; color:var(--fg); }
    .pv-2fa-secret:hover { border-color:var(--accent); }
    .pv-backup-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
    .pv-backup-code { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px; font-family:var(--font-mono); font-size:0.8rem; text-align:center; color:var(--fg); letter-spacing:0.05em; }
    /* Passkeys */
    .pv-passkey-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:0.82rem; }
    .pv-passkey-row:last-child { border-bottom:none; }
    .pv-passkey-icon { width:34px; height:34px; border-radius:8px; background:var(--surface-3); display:grid; place-items:center; flex-shrink:0; color:var(--fg-3); font-size:1.1rem; }
    .pv-passkey-info { flex:1; min-width:0; }
    .pv-passkey-name { font-weight:600; color:var(--fg); }
    .pv-passkey-meta { font-size:0.72rem; color:var(--fg-3); margin-top:1px; }
    /* Login 2FA step */
    .login-2fa-step { display:none; flex-direction:column; gap:14px; }
    /* Profile view */
    #profileView { display:none; min-height:calc(100vh - 48px); background:var(--bg); padding:0; }
    .pv-wrap { max-width:none; padding:28px 28px 60px; position:relative; }
    .pv-close-btn { position:absolute; top:24px; right:32px; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); color:var(--fg-3); cursor:pointer; }
    .pv-close-btn:hover { color:var(--fg); background:var(--surface-3); }
    .agd-hero { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
    .agd-avatar {
      width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
      display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 22px;
    }
    .agd-hero-info { flex: 1; min-width: 0; }
    .agd-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
    .agd-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
    .agd-meta { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--fg-3); font-family: var(--font-mono); flex-wrap: wrap; margin-top: 2px; }
    .agd-meta-sep { color: var(--fg-4); }
    .agd-hero-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-top: 2px; }
    .agd-pill-active {
      background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.22);
      color: var(--success); border-radius: 999px; font-size: 0.68rem; font-weight: 600;
      padding: 2px 8px; display: inline-flex; align-items: center; gap: 5px;
    }
    .agd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; }
    /* Member agency view: hero + stats merged into a single card row */
    #memberAgencyView .agd-hero-card {
      display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
      padding: 20px 24px; margin-bottom: 22px;
    }
    #memberAgencyView .agd-hero-card .agd-hero { margin-bottom: 0; flex: 1; min-width: 220px; }
    #memberAgencyView .agd-hero-card .ws-statgrid {
      background: none; border: none; gap: 28px; margin-bottom: 0; width: auto; flex-shrink: 0;
    }
    #memberAgencyView .agd-hero-card .ws-stat { background: none; padding: 0; text-align: right; gap: 2px; }
    #memberAgencyView .agd-hero-card .ws-stat__value { font-size: 1.3rem; }
    @media (max-width: 720px) {
      #memberAgencyView .agd-hero-card { flex-direction: column; align-items: flex-start; }
      #memberAgencyView .agd-hero-card .ws-statgrid { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 16px; }
      #memberAgencyView .agd-hero-card .ws-stat { text-align: left; }
    }
    .ws-statgrid--4 { grid-template-columns: repeat(4, 1fr); }
    #hvStats .ws-stat__label { font-size: 0.6rem; }
    #homeView .agd-card-hd h3 { color: var(--fg-4); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
    #hvLiveNowCount { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-3); }
    #hvFavouritesCount { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-3); }
    .hv-favourites-title { display: inline-flex; align-items: center; gap: 6px; }
    .hv-favourites-title i { color: var(--accent-hi); font-size: 0.82rem; }
    .agd-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 22px; }
    .agd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
    .agd-card-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .agd-card-hd h3 { margin: 0; font-size: 0.7rem; font-weight: 800; color: var(--fg); }
    .agd-card-hd .sub { font-size: 0.75rem; color: var(--fg-3); }
    .agd-card-hd-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
    .agd-members-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
    .agd-members-table th { text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-4); font-weight: 600; }
    .agd-members-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .agd-members-table tr:last-child td { border-bottom: none; }
    .agd-members-table tr:hover td { background: var(--hover); }
    .agd-role-admin { background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--accent-hi); font-size: 0.62rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; text-transform: uppercase; }
    .agd-role-member { background: var(--surface-3); border: 1px solid var(--border); color: var(--fg-3); font-size: 0.62rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; text-transform: uppercase; }
    .agd-danger-card { background: var(--surface); border: 1px solid rgba(248,113,113,0.25); border-radius: var(--r-md); overflow: hidden; }
    .agd-danger-hd { padding: 12px 16px; border-bottom: 1px solid rgba(248,113,113,0.18); }
    .agd-danger-hd h3 { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--danger); }
    .agd-danger-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .agd-danger-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
    .agd-danger-row-info { flex: 1; min-width: 0; }
    .agd-danger-row-title { font-size: 0.8rem; font-weight: 500; color: var(--fg); }
    .agd-danger-row-desc { font-size: 0.73rem; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
    .agd-rename-form { display: flex; gap: 8px; margin-top: 8px; }
    .agd-rename-form .admin-input { flex: 1; font-size: 0.82rem; padding: 6px 10px; background: var(--surface-3); }
    .agd-add-member-row { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
    .agd-add-select { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-ui); font-size: 0.8rem; padding: 6px 10px; outline: none; transition: border-color 0.15s; }
    .agd-add-select:focus { border-color: var(--accent-ring); }
    .agd-empty { padding: 22px 16px; text-align: center; font-size: 0.8rem; color: var(--fg-4); }
    /* Personal workspace dashboard (home landing page) */
    .hv-header { margin-bottom: 18px; }
    .hv-header h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--fg); }
    #graphView .nx-head h1 { font-size: 1.15rem; letter-spacing: 0; }
    .hv-subtitle { margin: 3px 0 0; font-size: 0.82rem; color: var(--fg-3); }
    .hv-hero-row { display: flex; gap: 18px; margin-bottom: 18px; align-items: stretch; flex-wrap: wrap; }
    .hv-hero-card { flex: 2 1 420px; margin-bottom: 0; overflow: visible; position: relative; z-index: 2; }
    .hv-ratio-card { flex: 1 1 240px; margin-bottom: 0; }
    .hv-hero-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
    .hv-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .hv-hero-total { display: flex; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 120px; }
    .hv-hero-total-value { font-size: 2rem; font-weight: 700; color: var(--fg); line-height: 1; }
    .hv-hero-total-label { display: none; }
    .hv-hero-delta { font-size: 0.8rem; font-weight: 600; color: var(--success, #3fbf6f); }
    .hv-hero-delta.is-negative { color: var(--danger, #e5484d); }
    .hv-filter-row { display: inline-flex; gap: 1px; background: var(--surface-3); border-radius: var(--r-sm); padding: 3px; }
    .hv-filter-btn { border: none; background: transparent; color: var(--fg-3); font-size: 0.78rem; padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer; transition: all 0.15s; }
    .hv-filter-btn:hover { color: var(--fg); }
    .hv-filter-btn.is-active { background: var(--surface-2); color: var(--fg); font-weight: 500; }
    .hv-trend-note { font-size: 0.72rem; color: var(--fg-4); margin: 0; }
    .hv-trend-chart-wrap { position: relative; width: 100%; min-height: 160px; z-index: 1; }
    #hvTrendChartTip { z-index: 1000 !important; }
    .hv-trend-month-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.68rem; color: var(--fg-4); font-family: var(--font-mono); }
    .hv-ratio-body { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .hv-ratio-donut-wrap { position: relative; width: 160px; height: 160px; }
    .hv-ratio-donut circle { transition: stroke-dasharray 0.4s; }
    .hv-ratio-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
    .hv-ratio-donut-total { font-size: 1.35rem; font-weight: 700; color: var(--fg); line-height: 1; }
    .hv-ratio-donut-total-label { font-size: 0.6rem; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.03em; }
    .hv-split-legend { display: flex; flex-direction: column; gap: 8px; font-size: 0.78rem; color: var(--fg-3); width: 100%; }
    .hv-split-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .hv-split-label { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
    .hv-split-label--viewer { color: var(--fg); }
    .hv-split-value { color: var(--fg); font-weight: 600; }
    .hv-split-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .hv-split-dot--streamer { background: var(--accent); }
    .hv-split-dot--viewer { background: var(--success); }
    .hv-live-title { display: inline-flex; align-items: center; gap: 7px; }
    .hv-live-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: ud-live-pulse 1.4s ease-out infinite; flex-shrink: 0; }
    .hv-live-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hv-live-list > .agd-empty { grid-column: 1 / -1; }
    .hv-live-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; cursor: pointer; transition: background 0.1s; }
    .hv-live-row:hover { background: var(--hover); }
    .hv-live-row:last-child { border-bottom: none; }
    .hv-live-row:nth-child(3n+1), .hv-live-row:nth-child(3n+2) { border-right: 1px solid var(--border); }
    @media (max-width: 1100px) {
      .hv-live-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hv-live-row:nth-child(3n+1), .hv-live-row:nth-child(3n+2) { border-right: none; }
      .hv-live-row:nth-child(odd) { border-right: 1px solid var(--border); }
    }
    @media (max-width: 720px) { .hv-live-list { grid-template-columns: 1fr; } .hv-live-row:nth-child(odd) { border-right: none; } }
    .hv-leaderboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
    .hv-leaderboard { display: flex; flex-direction: column; }
    @media (max-width: 860px) { .hv-leaderboard-row { grid-template-columns: 1fr; } }

    .hv-bottom-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
    .hv-side-stack { display: flex; flex-direction: column; gap: 18px; }
    @media (max-width: 1100px) { .hv-bottom-grid { grid-template-columns: 1fr; } }

    .hv-gains-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; cursor: pointer; transition: background 0.1s; }
    .hv-gains-row:hover { background: var(--hover); }
    .hv-gains-row:last-child { border-bottom: none; }
    .hv-gains-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .hv-gains-pct { font-family: var(--font-mono); font-size: 0.6rem; flex-shrink: 0; }
    .hv-gains-more { text-align: center; padding: 10px 14px; font-size: 0.78rem; color: var(--fg-4); cursor: pointer; }
    .hv-gains-more:hover { background: var(--hover); }

    .hv-flags-body { display: flex; flex-direction: column; }
    .hv-flag-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; cursor: pointer; transition: background 0.1s; }
    .hv-flag-row:hover { background: var(--hover); }
    .hv-flag-row:last-child { border-bottom: none; }
    .hv-flag-icon { width: 22px; height: 22px; border-radius: 7px; background: var(--warn); color: #1a1206; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; }
    .hv-flag-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
    .hv-flag-name { font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
    .hv-flag-pct { font-family: var(--font-mono); font-size: 0.6rem; color: var(--warn); flex-shrink: 0; }

    /* Inbox */
    #inboxPanel { position:fixed; top:56px; right:24px; width:320px; max-height:440px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 28px rgba(0,0,0,0.5); z-index:500; display:none; flex-direction:column; overflow:hidden; }
    @media (max-width: 768px) { #inboxPanel { right:12px; top:52px; width:min(320px, calc(100vw - 24px)); } }
    .inbox-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-size:0.82rem; font-weight:800; flex-shrink:0; }
    .inbox-header-actions { display:flex; align-items:center; gap:10px; }
    .inbox-clear-assets { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; color:var(--fg); cursor:pointer; font:0.72rem var(--font-ui); }
    .inbox-clear-assets i { font-size:14px; }
    .inbox-list { overflow-y:auto; flex:1; }
    .inbox-footer { padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0; }
    .inbox-footer .inbox-clear-assets { width:100%; justify-content:center; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); }
    .inbox-item { display:flex; align-items:flex-start; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.1s, transform 0.2s, opacity 0.2s; }
    .inbox-item.swiping { transition:none; }
    /* Pull-to-refresh indicator */
    .ptr-indicator { display:flex; align-items:center; justify-content:center; gap:8px; height:0; overflow:hidden; transition:height 0.2s; font-size:0.78rem; color:var(--fg-3); }
    .ptr-indicator.ptr-ready { height:44px; }
    .ptr-indicator i { transition:transform 0.3s; }
    .ptr-indicator.ptr-ready i { transform:rotate(180deg); }
    .inbox-time-col { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
    .inbox-del-btn { background:none; border:none; color:var(--fg-4); cursor:pointer; font-size:0.72rem; padding:0; border-radius:3px; opacity:0; transition:opacity 0.15s, color 0.15s; line-height:1; }
    .inbox-item:hover .inbox-del-btn { opacity:1; }
    .inbox-del-btn:hover { color:var(--danger); }
    .inbox-item:hover { background:var(--hover); }
    .inbox-item:last-child { border-bottom:none; }
    .inbox-item.unread { background:var(--accent-soft); }
    .inbox-item.unread:hover { background:var(--hover); }
    .inbox-avatar { width:28px; height:28px; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; font-size:0.7rem; font-weight:600; flex-shrink:0; margin-top:1px; }
    .inbox-body { flex:1; min-width:0; }
    .inbox-title { font-size:0.78rem; color:var(--fg); line-height:1.3; }
    .inbox-preview { font-size:0.72rem; color:var(--fg-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .inbox-time { font-size:0.68rem; color:var(--fg-4); white-space:nowrap; flex-shrink:0; margin-top:2px; }
    .inbox-empty { padding:28px 14px; text-align:center; font-size:0.8rem; color:var(--fg-4); }
    @media (max-width:768px) { #inboxPanel { left:8px; right:8px; width:auto; bottom:70px; } }
    /* Audit log */
    .audit-row { display:grid; grid-template-columns:11rem 1fr max-content max-content; align-items:center; gap:0 12px; padding:10px 20px; border-bottom:1px solid var(--border); font-size:0.8rem; }
    .audit-row:last-child { border-bottom:none; }
    .audit-time { font-size:0.72rem; color:var(--fg-4); white-space:nowrap; font-family:var(--font-mono); }
    .audit-action { font-weight:600; color:var(--fg-4); font-size:0.65rem; }
    .audit-action.danger { color:var(--danger); font-size:0.65rem; }
    .ws-alts-loading { padding:15px 30px; text-align:center; color:var(--fg-4); font-size:0.82rem; }
    .audit-actor { color:var(--fg-3); font-size:0.75rem; white-space:nowrap; }
    .audit-ip { font-size:0.72rem; color:var(--fg-4); font-family:var(--font-mono); white-space:nowrap; }
    .agd-back-btn { background: none; border: none; color: var(--fg-3); cursor: pointer; font-family: var(--font-ui); font-size: 0.8rem; padding: 0; display: inline-flex; align-items: center; gap: 5px; transition: color 0.15s; margin-bottom: 16px; }
    .agd-back-btn:hover { color: var(--fg); }
    .agd-left-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
    .agd-right-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
    .agd-activity-feed { display: flex; flex-direction: column; }
    .agd-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; cursor: pointer; transition: background 0.1s; }
    .agd-activity-item:hover { background: var(--hover); }
    .agd-activity-item:last-child { border-bottom: none; }
    .agd-activity-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.65rem; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; }
    .agd-activity-body { flex: 1; min-width: 0; }
    .agd-activity-title { font-size: 0.8rem; color: var(--fg); line-height: 1.3; }
    .agd-activity-title strong { font-weight: 600; }
    .agd-activity-sub { font-size: 0.72rem; color: var(--fg-3); margin-top: 2px; }
    .agd-activity-time { font-size: 0.7rem; color: var(--fg-4); flex-shrink: 0; white-space: nowrap; margin-top: 2px; }
    @media (max-width: 860px) { .agd-body { grid-template-columns: 1fr; } .ws-statgrid--4 { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 720px) { .agd-hero { flex-wrap: wrap; } .agd-hero-actions { width: 100%; } }

    /* Agency card 3-dot dropdown */
    .ws-agency-card-top { position: relative; }
    .ws-card-menu-wrap { position: relative; }
    .ws-card-menu-btn {
      background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: 1rem;
      padding: 3px 6px; border-radius: var(--r-sm); transition: background 0.15s, color 0.15s;
      display: flex; align-items: center;
    }
    .ws-card-menu-btn:hover { background: var(--hover); color: var(--fg); }
    .ws-card-dropdown {
      position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
      background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-md);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 130px; padding: 4px; display: none;
    }
    .ws-card-dropdown.open { display: block; }
    .ws-card-menu-item {
      display: flex; align-items: center; gap: 8px; padding: 8px 10px;
      border-radius: var(--r-sm); font-size: 0.8rem; cursor: pointer; color: var(--fg-2);
      border: none; background: none; width: 100%; text-align: left; font-family: var(--font-ui);
      transition: background 0.12s, color 0.12s;
    }
    .ws-card-menu-item:hover { background: var(--hover); color: var(--fg); }
    .ws-card-menu-item.danger { color: var(--danger); }
    .ws-card-menu-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

    @media (max-width: 720px) {
      .ws-wrap { padding: 16px 14px 60px; }
      .ws-agency-grid { grid-template-columns: 1fr 1fr; }
      .ws-invite-inputs { flex-direction: column; align-items: stretch; }
      .ws-invite-inputs select.admin-input { flex: 1; }
      .ws-users-table th:nth-child(n+3), .ws-users-table td:nth-child(n+3) { display: none; }
    }
    @media (max-width: 480px) {
      .ws-agency-grid { grid-template-columns: 1fr; }
    }
  /* ── App Modal (replaces alert / confirm / prompt) ───────────────── */
  .app-modal-backdrop {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity 0.15s;
  }
  .app-modal-backdrop.open { opacity: 1; }
  .app-modal {
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--r-lg); padding: 24px 24px 20px;
    min-width: 280px; max-width: 650px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: translateY(8px); transition: transform 0.15s;
    display: flex; flex-direction: column; gap: 16px;
  }
  .app-modal-backdrop.open .app-modal { transform: translateY(0); }
  .app-modal-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
  }
  .app-modal-icon.warn { background: rgba(251,146,60,0.12); color: #fb923c; }
  .app-modal-icon.danger { background: rgba(242,88,107,0.12); color: #F2586B; }
  .app-modal-icon.info { background: var(--accent-soft); color: var(--accent-hi); }
  .app-modal-header { display: flex; align-items: flex-start; gap: 12px; }
  .app-modal-title { font-size: 0.93rem; font-weight: 600; color: var(--fg); line-height: 1.4; padding-top: 7px; flex: 1; }
  .app-modal-body { font-size: 0.85rem; color: var(--fg-2); line-height: 1.55; }
  .app-modal-input {
    width: 100%; padding: 8px 11px; font-size: 0.88rem;
    background: var(--surface-2); border: 1px solid var(--border-2);
    border-radius: var(--r-sm); color: var(--fg);
    font-family: var(--font-ui); outline: none;
    transition: border-color 0.12s;
  }
  .app-modal-input:focus { border-color: var(--accent); }
  .app-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .app-modal-btn {
    height: 34px; padding: 0 16px; border-radius: var(--r-sm);
    font-family: var(--font-ui); font-size: 0.83rem; font-weight: 500;
    cursor: pointer; border: 1px solid var(--border-2);
    background: var(--surface-2); color: var(--fg-2);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .app-modal-btn:hover { color: var(--fg); border-color: var(--border-bright); }
  .app-modal-btn.primary {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent-hi);
  }
  .app-modal-btn.primary:hover { background: rgba(129,140,248,0.18); }
  .app-modal-btn.danger {
    background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.35);
    color: #F2586B;
  }
  .app-modal-btn.danger:hover { background: rgba(248,113,113,0.18); }

  /* ── Live user profile card popover ───────────────────────────────── */
  .luc-modal {
    display: none; position: fixed; z-index: 10600; width: 340px; max-width: 420px;
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 16px; gap: 10px;
    flex-direction: column; align-items: stretch; text-align: left;
  }
  .luc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .luc-idblock { min-width: 0; }
  .luc-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .luc-nickname { font-size: 1rem; font-weight: 700; color: var(--fg); overflow-wrap: break-word; }
  .luc-nickname .tt-gift-badge { margin-right: 5px; vertical-align: middle; }
  .luc-handle { font-size: 0.8rem; color: var(--fg-3); margin-top: 2px; overflow-wrap: break-word; }
  .luc-stats { display: flex; gap: 20px; justify-content: flex-start; padding: 2px 0; }
  .luc-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .luc-stat-val { font-size: 0.75rem; font-weight: 700; color: var(--fg); }
  .luc-stat-label { font-size: 0.6rem; color: var(--fg-4); text-transform: uppercase; letter-spacing: .04em; }
  .luc-stats--diamonds { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; }
  .luc-stats--diamonds .luc-stat-val { display: flex; align-items: center; gap: 4px; }
  i.ph-sketch-logo { font-size: 0.6rem; }
  .luc-stats--diamonds .luc-stat-val .ph-sketch-logo { color: lightskyblue; }
  .luc-bio { font-size: 0.8rem; color: var(--fg-2); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
  .luc-actions { display: flex; align-items: center; gap: 8px; width: 100%; }
  .luc-actions .app-modal-btn.primary { flex: 1; }
  .luc-icon-btn { height: 34px; width: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
  .luc-error { font-size: 0.82rem; color: var(--fg-3); }

  /* ── Diamonds daily breakdown modal ───────────────────────────────── */
  .ud-diamonds-bd-modal { max-width: 420px; padding: 20px 20px 16px; gap: 12px; }
  .ud-pk-record-modal { min-width: 35vw; }
  .ud-pk-record-modal .ud-diamonds-bd-row:nth-child(odd) { background: var(--surface-2); }
  .ud-pk-record-modal .ud-pk-record-row { display: block; }
  .ud-pk-record-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .ud-pk-record-date { min-width: 0; flex: 1; font-size: 0.83rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ud-pk-record-format { flex-shrink: 0; font-size: 0.72rem; color: var(--fg-3); }
  .ud-pk-record-scores { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 5px; font-size: 0.83rem; font-weight: 600; color: var(--accent-hi); font-family: var(--font-mono); white-space: nowrap; }
  .ud-diamonds-bd-title { font-size: 0.93rem; font-weight: 600; color: var(--fg); display: flex; align-items: center; justify-content: space-between; }
  .ud-diamonds-bd-total { font-size: 0.78rem; color: var(--fg-3); font-family: var(--font-mono); }
  .ud-diamonds-bd-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
  .ud-diamonds-bd-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-sm); }
  .ud-diamonds-bd-row:hover { background: var(--surface-2); }
  .ud-pk-record-modal .ud-diamonds-bd-row:nth-child(odd):hover { background: var(--surface-2); }
  .ud-pk-record-modal .ud-diamonds-bd-row:nth-child(even):hover { background: transparent; }
  .ud-diamonds-bd-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
  .ud-diamonds-bd-name { flex: 1; min-width: 0; font-size: 0.83rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ud-diamonds-bd-handle { font-size: 0.72rem; color: var(--fg-3); }
  .ud-diamonds-bd-amount { font-size: 0.83rem; font-weight: 600; color: var(--accent-hi); font-family: var(--font-mono); flex-shrink: 0; white-space: nowrap; }
  .ud-diamonds-bd-empty { padding: 24px 4px; text-align: center; color: var(--fg-3); font-size: 0.83rem; }

  /* ── Onboarding wizard (spotlight tour) ───────────────────────────── */
  .ob-clickblock {
    position: fixed; inset: 0; z-index: 9997;
    background: rgba(0,0,0,0.35);
    opacity: 0; transition: opacity 0.2s;
  }
  .ob-clickblock.open { opacity: 1; }
  .ob-spotlight {
    position: fixed; z-index: 9998; pointer-events: none;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.75), 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft), 0 0 28px 4px var(--accent-hi);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.2s;
    opacity: 0;
  }
  .ob-spotlight.open { opacity: 1; }
  .ob-tooltip {
    position: fixed; z-index: 9999;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--r-lg); padding: 24px 24px 20px;
    width: 420px; max-width: calc(100vw - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 16px;
    opacity: 0; transform: translateY(6px);
    transition: top 0.25s ease, left 0.25s ease, opacity 0.2s, transform 0.2s;
  }
  .ob-tooltip.open { opacity: 1; transform: translateY(0); }
  .ob-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .ob-skip-group { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .ob-section-count { display: inline-block; min-width: 2.1em; color: var(--fg-2); font: 500 0.7rem var(--font-mono); text-align: right; white-space: nowrap; }
  .ob-title { font-size: 0.93rem; font-weight: 600; color: var(--fg); line-height: 1.4; }
  .ob-skip-section { flex: 0 0 auto; margin: -4px -4px 0 0; padding: 4px; border: 0; background: none; color: var(--fg-3); font: 500 0.75rem var(--font-ui); cursor: pointer; white-space: nowrap; }
  .ob-skip-section:hover { color: var(--fg); text-decoration: underline; }
  .ob-body { font-size: 0.85rem; color: var(--fg-2); line-height: 1.55; }
  .ob-dots { display: flex; justify-content: center; gap: 6px; }
  .ob-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); transition: background 0.15s, width 0.15s; }
  .ob-dot.active { background: var(--accent); width: 16px; border-radius: 3px; }
  .ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .ob-skip-link { color: var(--danger); font: 500 0.83rem var(--font-ui); text-decoration: none; cursor: pointer; }
  .ob-skip-link:hover { color: var(--danger); text-decoration: underline; }
  .ob-btn {
    height: 34px; padding: 0 16px; border-radius: var(--r-sm);
    font-family: var(--font-ui); font-size: 0.83rem; font-weight: 500;
    cursor: pointer; border: 1px solid var(--border-2);
    background: var(--surface-2); color: var(--fg-2);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .ob-btn:hover { color: var(--fg); border-color: var(--border-bright); }
  .ob-btn.primary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
  .ob-btn.primary:hover { background: rgba(129,140,248,0.18); }
  .ob-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
  @media (max-width: 640px) {
    .ob-tooltip { width: calc(100vw - 32px); }
  }

/* ── Graph View ─────────────────────────────────────────────── */
#graphView { background: var(--bg); position: relative; display: flex; flex-direction: row; }
.gv-controls {
  width: 200px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); padding: 14px 12px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.gv-ctrl-title {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px;
}
.gv-ctrl-section { display: flex; flex-direction: column; gap: 5px; }
.gv-filter {
  display: flex; align-items: center; gap: 7px; font-size: 0.78rem;
  color: var(--fg-2); cursor: pointer; user-select: none;
}
.gv-filter input { accent-color: var(--accent); cursor: pointer; }
.gv-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid transparent;
}
.gv-search {
  width: 100%; padding: 5px 9px; font-size: 0.8rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--fg); outline: none;
  font-family: var(--font-ui);
}
.gv-search:focus { border-color: var(--accent); }
.gv-ctrl-stats { font-size: 0.72rem; color: var(--fg-3); line-height: 1.6; margin-top: auto; }
.gv-reset-btn {
  height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--fg-2); font-size: 0.78rem; font-family: var(--font-ui);
  cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.gv-reset-btn:hover { color: var(--fg); border-color: var(--border-bright); }
.gv-canvas-wrap { flex: 1; position: relative; overflow: hidden; }
.gv-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  font-size: 0.88rem; color: var(--fg-2); pointer-events: none;
}
.gv-node-tip {
  position: absolute; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: 0.78rem;
  color: var(--fg-2); pointer-events: none; z-index: 10; max-width: 200px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4); line-height: 1.5;
}
.gv-node-tip strong { color: var(--fg); display: block; font-size: 0.83rem; }
/* Node right-click context menu */
.gv-ctx-menu {
  position: absolute; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 4px 0; z-index: 100; min-width: 170px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); user-select: none;
}
.gv-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 0.8rem; color: var(--fg-2);
  cursor: pointer; transition: background 0.1s, color 0.1s;
}
.gv-ctx-item:hover { background: var(--accent-soft); color: var(--accent-hi); }
.gv-ctx-item i { font-size: 0.9rem; flex-shrink: 0; }
.nx-action-row { display:flex; gap:8px; }
.nx-action-row .nx-action { flex:1; }
.nx-action-icon { width:42px; flex:none; }
.nx-action-icon i { font-size:1.15rem; }
.nx-search .nx-search-results { position:absolute; z-index:100; left:0; right:0; top:calc(100% + 6px); display:flex !important; flex-direction:column !important; gap:2px; height:auto !important; max-height:360px; overflow-y:auto; box-sizing:border-box; padding:5px; background:#191A23; border:1px solid #232531; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.nx-search .nx-search-results button { position:static !important; display:flex !important; flex:0 0 44px; align-items:center; width:100%; min-height:44px; box-sizing:border-box; margin:0; padding:7px 8px; border:0; border-radius:6px; background:transparent; color:#F2F3F7; text-align:left; line-height:1.2; }
.nx-search .nx-search-results button:hover { background:#232531; }
.nx-role-icon { margin-left:6px; color:var(--fg-3); font-size:.85em; }
.nx-diamond-icon { margin-right:5px; color:lightskyblue; font-size:.9em; }
/* Canvas graph */
#graphSvg { touch-action: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  #graphView { flex-direction: column; }
  .gv-controls { width: 100%; height: auto; max-height: 200px; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 12px; gap: 8px; }
  .gv-ctrl-section { gap: 4px; }
  .gv-ctrl-title { margin-bottom: 3px; }
  .gv-canvas-wrap { flex: 1; min-height: 0; }
}

/* ── User tags ── */
.ud-tags-row { display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 0 2px; }
.ud-tag-chip { display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 8px;border-radius:999px;font-size:0.72rem;font-weight:500;background:var(--surface-2);border:1px solid var(--border);color:var(--fg-2);cursor:default; }
.ud-tag-chip .ud-tag-del { cursor:pointer;opacity:0.5;padding:0 2px;line-height:1;border:none;background:none;color:inherit;font-size:0.8rem; }
.ud-tag-chip .ud-tag-del:hover { opacity:1; }
.ud-tag-add-btn { display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:0.72rem;background:var(--surface-2);border:1px dashed var(--border-bright);color:var(--fg-3);cursor:pointer; }
.ud-tag-add-btn:hover { background:var(--surface-3);color:var(--fg-2); }
.ud-tag-add-wrap { position:relative;display:inline-block; }
.ud-tag-add-drop { position:absolute;top:100%;left:0;z-index:50;background:var(--surface-3);border:1px solid var(--border-bright);border-radius:var(--r-sm);box-shadow:0 4px 12px rgba(0,0,0,.18);min-width:160px;max-height:180px;overflow-y:auto;display:none; }
.ud-tag-add-drop.is-open { display:block; }
.ud-tag-ac-item { padding:6px 10px;font-size:0.78rem;cursor:pointer; }
.ud-tag-ac-item:hover { background:var(--surface-4); }
.uv-tag-chip { display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:0.62rem;font-weight:500;cursor:pointer;border:1px solid transparent; }
.uv-tag-filter-row { display:flex;flex-wrap:wrap;gap:5px;padding:7px 0 3px;align-items:center; }
.uv-tag-filter-chip { padding:2px 10px;border-radius:999px;font-size:0.72rem;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--fg-2); }
.uv-tag-filter-chip.active { background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-hi); }

/* ── Remark visibility ── */
.ud-vis-dd { position:relative;display:inline-block;margin-bottom:7px; }
.ud-vis-dd-btn { display:flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;padding:0 12px;font-size:0.8rem;font-weight:500;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer;white-space:nowrap;transition:background 0.15s; }
.ud-vis-dd-btn:hover { background:var(--surface-2); }
.ud-vis-dd-caret { font-size:0.65rem;color:var(--fg-3);margin-left:1px; }
.ud-vis-dd-menu { position:absolute;bottom:calc(100% + 6px);left:0;min-width:170px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,0.35);z-index:50;padding:6px;display:none; }
.ud-vis-dd-menu.open { display:block; }
.ud-vis-dd-item { display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:0.85rem;border-radius:var(--r-sm);cursor:pointer;color:var(--fg);white-space:nowrap; }
.ud-vis-dd-item:hover { background:var(--hover); }
.ud-vis-dd-item.active { color:var(--accent-hi); }
.ud-vis-icon { font-size:0.68rem;opacity:0.7;background:none;border:none;padding:0 4px 0 0;cursor:pointer;line-height:1;color:var(--fg-4); }
.ud-vis-icon:hover { opacity:1; }

/* ── Relationship notes ── */
.ud-rel-note { font-size:0.7rem;color:var(--fg-3);font-style:italic;padding:2px 0 0 2px;min-height:0;line-height:1.35; }
.ud-rel-note-btn { background:none;border:none;cursor:pointer;color:var(--fg-4);padding:2px 4px;font-size:0.75rem;line-height:1;opacity:0.7; }
.ud-rel-note-btn:hover { opacity:1;color:var(--accent-hi); }
.ud-rel-note-edit { display:flex;gap:5px;align-items:center;padding:4px 0;width:100%; }
.ud-rel-note-input { flex:1;font-size:0.75rem;padding:3px 7px;border-radius:var(--r-sm);border:1px solid var(--accent-ring);background:var(--surface-2);color:var(--fg);outline:none; }
/* Relationship row level pills — inline with nickname */
.ud-lv-pill { display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:1px 5px;font-size:0.58rem;font-weight:700;color:#fff;white-space:nowrap;vertical-align:middle;line-height:1.5; }
.ud-lv-pill img { width:13px;height:13px;object-fit:contain;vertical-align:middle; }
.ud-fc-pill { cursor:pointer;transition:filter 0.15s; }
.ud-fc-pill:hover { filter:brightness(1.18); }
.ud-fc-pill-empty { background:transparent;border:1px dashed rgba(145,64,46,0.5);color:rgba(145,64,46,0.7);cursor:pointer;transition:background 0.15s,color 0.15s;font-size:0.7rem; }
.ud-fc-pill-empty:hover { background:rgba(145,64,46,0.12);color:#91402E; }
.ud-sent-pill { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;cursor:pointer;transition:filter 0.15s;vertical-align:middle;flex-shrink:0;background:rgba(100,116,139,0.28); }
.ud-sent-pill i { font-size:0.75rem;line-height:1;display:block; }
.ud-sent-pill:hover { filter:brightness(1.15); }
.ud-sent-pill.s-positive { color:#ef4444; }
.ud-sent-pill.s-negative { color:#111827; }
/* Add-user progress modal */
.add-user-modal-backdrop { position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;animation:aum-fadein 0.15s ease; }
.add-user-modal-card { background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg, 14px);padding:32px 40px;min-width:230px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 16px 48px rgba(0,0,0,0.55);animation:aum-slidein 0.18s ease; }
.add-user-modal-icon { font-size:2.4rem;line-height:1; }
.add-user-modal-icon.spinning { animation:spin 0.9s linear infinite;color:var(--accent); }
.add-user-modal-icon.success { color:#22c55e;animation:aum-pop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.add-user-modal-icon.error { color:var(--danger, #ef4444); }
.add-user-modal-text { font-size:0.88rem;color:var(--fg-2);text-align:center;line-height:1.5; }
@keyframes aum-fadein { from { opacity:0 } to { opacity:1 } }
@keyframes aum-slidein { from { opacity:0;transform:scale(0.93) translateY(8px) } to { opacity:1;transform:none } }
@keyframes aum-pop { 0% { transform:scale(0) } 70% { transform:scale(1.15) } 100% { transform:scale(1) } }
/* Relationship edit modal (FC level + note) */
.rel-edit-modal { position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;box-shadow:0 8px 28px rgba(0,0,0,0.4);min-width:190px;display:flex;flex-direction:column;gap:8px; }
.rem-title { font-size:0.72rem;font-weight:600;color:var(--fg-3); }
.rem-input { width:100%;font-size:0.8rem;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--fg);outline:none;box-sizing:border-box; }
.rem-input:focus { border-color:var(--accent-ring); }
.rem-input[type=number] { width:80px; }
.rem-btns { display:flex;gap:6px;justify-content:flex-end; }

/* ── Timeline annotations ── */
.ud-annotation-strip { display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 2px;align-items:center; }
.ud-annotation-chip { display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-sm);font-size:0.7rem;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);color:#f59e0b; }
.ud-annotation-chip button { background:none;border:none;cursor:pointer;color:inherit;opacity:0.6;padding:0 1px;font-size:0.8rem; }
.ud-annotation-chip button:hover { opacity:1; }
.ud-annot-add-btn { font-size:0.72rem;padding:2px 9px;border-radius:var(--r-sm);border:1px dashed rgba(251,191,36,.4);background:transparent;color:#f59e0b;cursor:pointer;opacity:0.8; }
.ud-annot-add-btn:hover { opacity:1;background:rgba(251,191,36,.08); }

/* ── Admin tools section ── */
.ws-tools-section { margin-top:24px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); }
.ws-tools-title { font-size:0.8rem;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px; }
.ws-tools-row { display:flex;flex-wrap:wrap;gap:10px;align-items:center; }
    /* Email input in users table */
    .ws-email-input {
      background: transparent; border: 1px solid transparent; border-radius: 5px;
      color: var(--fg-2); font-size: 0.78rem; font-family: var(--font-ui);
      padding: 3px 6px; width: 100%; min-width: 140px; outline: none;
      transition: border-color 0.15s, background 0.15s;
    }
    .ws-email-input:hover { border-color: var(--border); }
    .ws-email-input:focus { border-color: var(--accent); background: var(--surface-2); }
    .ws-email-input.saved { border-color: #22c55e88; color: var(--fg); }
    /* Auth forgot / reset views */
    .auth-back-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 12px; color: var(--fg-3); cursor: pointer;
      margin-bottom: 18px; transition: color 0.15s;
    }
    .auth-back-link:hover { color: var(--fg); }
    .auth-result-msg { font-size: 13px; margin: 12px 0 0; min-height: 18px; }
    .auth-result-msg.ok { color: #22c55e; }
    .auth-result-msg.err { color: var(--danger); }
    /* Shared full-width page shell. Keep page titles on one common grid. */
    .page-shell {
      width: 100%;
      min-height: calc(100vh - 48px);
      box-sizing: border-box;
      padding: 28px 28px 60px;
    }
    .page-shell.lv-wrap,
    .page-shell.ws-wrap { max-width: none; margin: 0; }
    @media (max-width: 768px) {
      .page-shell { padding: 16px 14px 60px; }
    }

    /* Settings redesign */
    .ws-legacy { display:none !important; }
    .settings-page { padding: 28px 36px 60px; }
    .settings-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }
    .settings-header h1 { font:700 20px var(--font-heading); color:var(--fg); }
    .settings-header p, .settings-pane-head p { margin-top:4px; color:var(--fg-3); font-size:13px; }
    .settings-primary { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:9px; padding:9px 15px; background:var(--accent); color:#fff; font:600 12px var(--font-ui); cursor:pointer; }
    .settings-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 18px; margin-bottom:14px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
    .settings-summary-cell { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .settings-summary-cell > span { color:var(--fg-3); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
    .settings-summary-cell > strong { color:var(--fg); font:600 17px var(--font-mono); }
    .settings-summary-cell > strong.warn { color:#F0A63B; }
    .settings-summary-cell > small { overflow:hidden; color:var(--fg-3); font:11px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
    .settings-summary-progress { display:block; height:7px; margin-top:3px; overflow:hidden; border-radius:4px; background:var(--surface-2); }
    .settings-summary-progress b { display:block; width:0; min-width:2%; height:100%; border-radius:4px; background:var(--accent); }
    .settings-summary-progress-a b { background:#4CC9A4; }
    .settings-summary-progress-b b { background:#7AA2FF; }
    .settings-summary-progress b.warn { background:#F0A63B; }
    .settings-summary-progress b.danger { background:var(--danger); }
    .settings-tabs { gap:4px; margin-bottom:14px; overflow-x:auto; flex-wrap:nowrap; }
    .settings-tabs .settings-tab { height:auto; padding:9px 16px; font-size:13px; font-weight:600; }
    .settings-layout { display:block; }
    .settings-content { width:100%; min-width:0; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
    .settings-content .ws-tab-pane { display:none; margin:0; }
    .settings-content .ws-tab-pane.active { display:block; }
    .settings-content #wsAltsBody { padding:15px 30px; }
    .settings-pane-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border); }
    .settings-pane-head h2 { color:var(--fg); font-size:14px; font-weight:600; }
    .settings-pane-head > span { color:var(--fg-3); font:11px var(--font-mono); }
    .settings-filters { display:flex; flex-direction:column; gap:11px; padding:14px 18px; border-bottom:1px solid var(--border); }
    .settings-search { display:flex; align-items:center; gap:9px; padding:8px 12px; background:var(--surface-2); border-radius:9px; color:var(--fg-3); }
    .settings-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--fg); font:13px var(--font-ui); }
    .settings-chip-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .settings-filters .settings-chip-row { gap:10px; }
    .settings-filters #wsAgencyFilterChips { display:contents; }
    .settings-chip { border:1px solid var(--border); border-radius:20px; padding:6px 12px; background:var(--surface-2); color:var(--fg-3); font:600 12px var(--font-ui); cursor:pointer; }
    .settings-chip.active { border-color:transparent; background:var(--accent); color:#fff; }
    .settings-bulk { display:flex; align-items:center; gap:8px; padding:9px 18px; background:var(--accent-soft); border-bottom:1px solid var(--border); color:var(--accent-hi); font-size:12px; }
    .settings-bulk[hidden] { display:none; }
    .settings-bulk span { flex:1; }
    .settings-bulk button { border:0; border-radius:7px; padding:5px 8px; background:transparent; color:var(--fg-2); font-size:11px; cursor:pointer; }
    .settings-bulk button.danger { color:var(--danger); background:var(--danger-soft); }
    .settings-bulk select { padding:5px 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); color:var(--fg-2); font-size:11px; }
    .settings-table-scroll { overflow-x:auto; }
    .settings-users-table, .settings-agencies-table { min-width:680px; width:100%; border-collapse:collapse; table-layout:auto; }
    .settings-users-table th, .settings-agencies-table th { padding:10px 18px; background:#15161F; color:var(--fg-3); font-size:11px; font-weight:600; text-align:left; text-transform:uppercase; white-space:nowrap; }
    .settings-users-table td, .settings-agencies-table td { padding:10px 18px; border-top:1px solid var(--border); color:var(--fg-2); font-size:12px; }
    .settings-check-cell { width:42px; padding-left:18px !important; padding-right:0 !important; }
    .settings-user-check { appearance:none; width:15px; height:15px; margin:0; border:1.5px solid var(--border); border-radius:4px; background:transparent; cursor:pointer; }
    .settings-user-check:checked { border-color:var(--accent); background:var(--accent); }
    .settings-user-check:checked::after { display:block; color:#fff; content:'✓'; font-size:12px; font-weight:700; line-height:12px; text-align:center; }
    .settings-row-selected td { background:rgba(123,127,243,.07); }
    .settings-last-active { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font:11px var(--font-mono); color:var(--fg-3); }
    .settings-last-active i { width:7px; height:7px; border-radius:50%; background:var(--border); }
    .settings-last-active i.fresh { background:var(--success); }
    .settings-last-active i.recent { background:#F0A63B; }
    .ws-user-menu-wrap { position:relative; display:inline-flex; }
    .ws-user-menu-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); color:var(--fg-3); cursor:pointer; }
    .ws-user-menu { position:absolute; top:30px; right:0; z-index:20; display:flex; flex-direction:column; gap:2px; width:168px; padding:6px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); box-shadow:0 8px 24px rgba(0,0,0,.4); }
    .ws-user-menu[hidden] { display:none; }
    .ws-user-menu button { border:0; border-radius:6px; padding:8px 9px; background:transparent; color:var(--fg); font:12px var(--font-ui); text-align:left; cursor:pointer; }
    .ws-user-menu button:hover { background:var(--accent-soft); }
    .ws-user-menu button.danger { color:var(--danger); }
    .settings-users-table tr:hover td, .settings-agencies-table tr:hover td { background:rgba(123,127,243,.05); }
    .settings-users-table .ws-avatar-circle { width:30px; height:30px; flex:none; }
    .settings-users-table .ws-user-name { font-size:13px; }
    .settings-users-table .ws-user-uid { font-size:11px; color:var(--fg-3); }
    .settings-users-table .settings-group-row td { padding:10px 18px; background:#15161F; border-top:1px solid var(--border); color:var(--fg); }
    .settings-users-table .settings-group-row span { margin-left:10px; color:var(--fg-3); font:11px var(--font-mono); }
    .settings-users-table .badge-admin-tag, .settings-users-table .badge-user-tag { display:inline-block; border-radius:20px; padding:4px 9px; font-size:11px; }
    .settings-users-table .badge-admin-tag { background:var(--accent-soft); color:var(--accent-hi); }
    .settings-users-table .badge-user-tag { background:var(--surface-2); color:var(--fg-3); }
    .settings-agencies-table td:first-child { color:var(--fg); font-weight:600; }
    .settings-api-body { display:flex; flex-direction:column; gap:16px; padding:18px; }
    .settings-api-body label { color:var(--fg-3); font-size:11px; font-weight:600; }
    .settings-api-body p { margin:6px 0 10px; color:var(--fg-2); font-size:12px; }
    .settings-api-body small { color:var(--fg-3); font-size:11px; }
    .mono { font-family:var(--font-mono); }
    .settings-progress { height:8px; margin-bottom:8px; overflow:hidden; border-radius:8px; background:var(--surface-2); }
    .settings-progress i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
    .settings-progress i.warn { background:#F0A63B; }
    .settings-progress i.danger { background:var(--danger); }
    .settings-api-quota-table { overflow:hidden; border:1px solid var(--border); border-radius:12px; }
    .settings-api-quota-head, .settings-api-quota-row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:center; }
    .settings-api-quota-head { padding:12px 16px; border-bottom:1px solid var(--border); color:var(--fg-3); font-size:11px; font-weight:600; text-transform:uppercase; }
    .settings-api-quota-row { padding:14px 16px; border-bottom:1px solid var(--border); }
    .settings-api-quota-row:last-child { border-bottom:0; }
    .settings-api-quota-row > strong { color:var(--fg); font-size:13px; font-weight:700; }
    .settings-api-metric-stack { display:flex; min-width:0; flex-direction:column; gap:12px; }
    .settings-api-metric { display:flex; min-width:0; flex-direction:column; gap:6px; }
    .settings-api-metric-label { color:var(--fg-3); font-size:11px; font-weight:600; }
    .settings-api-metric-line { display:flex; min-width:0; align-items:baseline; justify-content:space-between; gap:10px; }
    .settings-api-metric-value, .settings-api-metric-pct { font-size:12px; white-space:nowrap; }
    .settings-api-metric-value { overflow:hidden; color:var(--fg); text-overflow:ellipsis; }
    .settings-api-metric-pct { color:var(--fg-3); }
    .settings-api-metric-pct.danger { color:var(--danger); }
    .settings-api-metric-bar { display:block; height:6px; overflow:hidden; border-radius:6px; background:var(--surface-2); }
    .settings-api-metric-fill { display:block; width:0; min-width:2%; height:100%; border-radius:inherit; }
    .settings-api-fill-omar { background:var(--accent); }
    .settings-api-fill-a { background:#4CC9A4; }
    .settings-api-fill-b { background:#7AA2FF; }
    .settings-api-fill-c { background:#D77ACF; }
    .settings-api-snapshot { color:var(--fg-3); font-size:12px; }
    .settings-api-snapshot { display:block; }
    .settings-tool-row button { border:1px solid var(--border); border-radius:7px; padding:6px 10px; background:transparent; color:var(--fg-2); font-size:11px; cursor:pointer; }
    .settings-tool-row { display:flex; align-items:center; gap:12px; padding:14px 18px; }
    .settings-tool-row > div { display:flex; flex-direction:column; gap:4px; flex:1; }
    .settings-tool-row b { color:var(--fg); font-size:13px; }
    .settings-tool-row small { color:var(--fg-3); font-size:12px; }
    .settings-modal { position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,9,14,.68); }
    .settings-modal[hidden] { display:none; }
    .settings-modal-card { width:100%; max-width:452px; overflow:hidden; border-radius:18px; background:var(--surface); box-shadow:0 24px 64px rgba(0,0,0,.55); }
    .settings-modal-card header, .settings-modal-card footer { display:flex; align-items:center; gap:12px; padding:17px 20px; border-bottom:1px solid var(--border); }
    .settings-modal-card header > div { flex:1; }
    .settings-modal-card h2 { color:var(--fg); font:700 15px var(--font-heading); }
    .settings-modal-card header p { margin-top:4px; color:var(--fg-3); font-size:12px; }
    .settings-modal-card header button { width:28px; height:28px; border:0; border-radius:8px; background:var(--surface-2); color:var(--fg-2); cursor:pointer; }
    .settings-modal-body { display:flex; flex-direction:column; gap:10px; padding:20px; }
    .settings-modal-body label, .settings-role-label { color:var(--fg-3); font-size:11px; font-weight:600; text-transform:uppercase; }
    .settings-modal-body input:not([type=checkbox]) { display:block; width:100%; margin-top:7px; padding:10px 13px; border:0; border-radius:9px; outline:0; background:var(--surface-2); color:var(--fg); font:13px var(--font-ui); }
    .settings-modal-card footer { justify-content:flex-end; border-top:1px solid var(--border); border-bottom:0; }
    @media (max-width:768px) { .settings-page { padding:16px 14px 60px; } .settings-header { align-items:stretch; flex-direction:column; } .settings-header .settings-primary { align-self:flex-start; } .settings-content { min-width:0; } .settings-modal { align-items:flex-end; padding:0; } .settings-modal-card { max-width:none; border-radius:18px 18px 0 0; } }