:root {
        --bg: #0a0c0f;
        --surface: #111418;
        --surface2: #181c22;
        --surface3: #1e232b;
        --border: #22272f;
        --border2: #2e3540;
        --accent: #f5a623;
        --accent2: #e8891a;
        --green: #3ecf8e;
        --red: #f26b6b;
        --blue: #5b8def;
        --purple: #a78bfa;
        --teal: #2dd4bf;
        --orange: #fb923c;
        --muted: #5a6475;
        --text: #d8dde6;
        --text2: #9aa3b0;
      }
      html[data-theme="light"] {
        --bg: #f5f4f1;
        --surface: #ffffff;
        --surface2: #f0ede8;
        --surface3: #e8e4de;
        --border: #ddd9d1;
        --border2: #c9c3b8;
        --accent: #c97f00;
        --accent2: #b86d00;
        --green: #16803c;
        --red: #b91c1c;
        --blue: #1d4ed8;
        --purple: #7c3aed;
        --teal: #0f766e;
        --orange: #c2540a;
        --muted: #8a8278;
        --text: #1a1815;
        --text2: #4a4540;
      }
      html[data-theme="light"] body {
        background-image:
          linear-gradient(rgba(201,127,0,0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(201,127,0,0.025) 1px, transparent 1px);
      }
      html[data-theme="light"] header {
        background: rgba(255,255,255,0.92);
      }
      html[data-theme="light"] .cp2-appbar {
        background: rgba(245,244,241,0.94);
      }
      html[data-theme="light"] .kpi-topbar {
        background: rgba(245,244,241,0.94);
      }
      html[data-theme="light"] .cd-action-bar {
        background: rgba(240,237,232,0.8);
      }
      html[data-theme="light"] .login-screen {
        background: #f5f4f1;
      }
      html[data-theme="light"] .login-screen::before {
        background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(201,127,0,0.06) 0%, transparent 70%);
      }
      html[data-theme="light"] .login-card {
        background: rgba(255,255,255,0.7);
        border-color: rgba(0,0,0,0.09);
        box-shadow: 0 24px 80px rgba(0,0,0,0.1);
      }
      html[data-theme="light"] .login-brand-name { color: rgba(0,0,0,0.85); }
      html[data-theme="light"] .login-brand-sub  { color: rgba(0,0,0,0.4); }
      html[data-theme="light"] .login-field label { color: rgba(0,0,0,0.45); }
      html[data-theme="light"] .login-field input {
        background: rgba(0,0,0,0.04);
        border-color: rgba(0,0,0,0.12);
        color: var(--text);
      }
      html[data-theme="light"] .login-field input:focus {
        border-color: rgba(201,127,0,0.5);
        background: rgba(201,127,0,0.04);
      }
      html[data-theme="light"] .login-field input::placeholder { color: rgba(0,0,0,0.25); }
      html[data-theme="light"] .login-divider { background: rgba(0,0,0,0.08); }
      html[data-theme="light"] .login-error {
        background: rgba(185,28,28,0.07);
        border-color: rgba(185,28,28,0.25);
        color: #b91c1c;
      }
      /* theme toggle button */
      .theme-toggle-btn {
        appearance: none; background: none; border: none;
        color: var(--muted); cursor: pointer; padding: 4px 6px;
        display: inline-flex; align-items: center; border-radius: 6px;
        transition: color .15s, background .15s; flex-shrink: 0;
      }
      .theme-toggle-btn:hover { color: var(--text); background: var(--surface2); }
      .theme-toggle-btn svg { width: 16px; height: 16px; display: block; }
      /* sun shown in dark mode (click → light); moon shown in light mode (click → dark) */
      html:not([data-theme="light"]) .theme-icon-sun { display: none; }
      html[data-theme="light"] .theme-icon-moon { display: none; }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: "Space Grotesk", sans-serif;
        min-height: 100vh;
        overflow-x: hidden;
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image:
          linear-gradient(rgba(245, 166, 35, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(245, 166, 35, 0.02) 1px, transparent 1px);
        background-size: 40px 40px;
      }
      header {
        z-index: 10;
        border-bottom: 1px solid var(--border);
        height: 60px;
        background: rgba(17, 20, 24, 0.9);
        backdrop-filter: blur(12px);
        position: sticky;
        top: 0;
      }
      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 2rem;
        width: 100%;
      }
      body.client-mode .header-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 48px;
        justify-content: flex-start;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: "JetBrains Mono", monospace;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.08em;
        color: var(--accent);
      }
      .logo-icon {
        width: 28px;
        height: 28px;
        background: var(--accent);
        border-radius: 6px;
        display: grid;
        place-items: center;
      }
      .nav-clock {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-family: "JetBrains Mono", monospace;
        line-height: 1.3;
      }
      .nav-clock-time {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text);
        letter-spacing: 0.06em;
      }
      .nav-clock-date {
        font-size: 0.65rem;
        color: var(--muted);
        letter-spacing: 0.04em;
      }
      /* avg badge on score card */
      .score-avg-badge {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        background: rgba(90, 100, 117, 0.15);
        border-radius: 4px;
        padding: 1px 5px;
        margin-top: 5px;
        display: inline-block;
      }
      .score-count {
        font-size: 0.62rem;
        color: var(--muted);
        margin-top: 2px;
      }
      .status-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        color: var(--green);
        background: rgba(62, 207, 142, 0.08);
        border: 1px solid rgba(62, 207, 142, 0.2);
        padding: 4px 10px;
        border-radius: 99px;
      }
      .status-dot {
        width: 6px;
        height: 6px;
        background: var(--green);
        border-radius: 50%;
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      main {
        position: relative;
        z-index: 1;
        margin-left: 240px;
        padding: 2rem;
        transition: margin-left .22s cubic-bezier(.4,0,.2,1);
      }
      main.sb-collapsed { margin-left: 52px; }
      /* ── Sidebar ─────────────────────────────────────────────────── */
      .sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        width: 240px;
        bottom: 0;
        background: var(--surface);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        z-index: 9;
        overflow: hidden;
        transition: width .22s cubic-bezier(.4,0,.2,1);
      }
      .sidebar.collapsed { width: 52px; }
      .sidebar.collapsed .sidebar-label { display: none !important; }
      /* collapse toggle row */
      .sidebar-toggle-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .sidebar.collapsed .sidebar-toggle-row { justify-content: center; padding: 8px 0; }
      .sidebar-toggle-btn {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        padding: 4px 5px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        line-height: 1;
      }
      .sidebar-toggle-btn:hover { color: var(--text); background: var(--surface2); }
      /* nav items */
      .sidebar-nav { flex: 1; padding: 6px 0; }
      .nav-item {
        display: flex; align-items: center; gap: 10px;
        padding: .6rem .9rem; cursor: pointer; color: var(--text2);
        font-size: .82rem; font-weight: 500; border-radius: 6px;
        margin: 1px 8px; transition: background .15s, color .15s; user-select: none;
        white-space: nowrap; overflow: hidden;
      }
      .nav-item:hover { background: var(--surface2); color: var(--text); }
      .nav-item.active { background: rgba(245,166,35,.12); color: var(--accent); }
      .sidebar.collapsed .nav-item { justify-content: center; padding: .6rem 0; margin: 1px 0; border-radius: 0; }
      /* shared dashboard page wrapper */
      .dash-overview { padding: 2rem 2.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
      .dash-overview-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
      .dash-overview-title { font-family:"JetBrains Mono",monospace; font-size:1.1rem; font-weight:700; letter-spacing:.04em; color:var(--text); }
      .dash-layout { display:flex; gap:1.5rem; align-items:flex-start; }
      .dash-main { flex:1; min-width:0; }
      .dash-sidebar { width:300px; flex-shrink:0; position:sticky; top:1.5rem; }
      /* stat cards row */
      .dash-stat-row { display:flex; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
      .dash-stat-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.5rem; min-width:120px; flex:1; }
      .dash-stat-val { font-family:"JetBrains Mono",monospace; font-size:1.75rem; font-weight:700; line-height:1; margin-bottom:6px; color:var(--text); }
      .dash-stat-label { font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
      /* generic section block */
      .dash-section { margin-bottom:2rem; }
      .dash-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
      .dash-section-label { font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
      .dash-section-meta { font-size:.68rem; color:var(--muted); }
      /* incidents sidebar card */
      .dash-incidents-card { background:var(--surface2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
      .dash-incidents-card.has-active { border-color:rgba(242,107,107,.3); }
      .dash-incidents-card-header { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; background:var(--surface3); border-bottom:1px solid var(--border); }
      .dash-incidents-card-title { font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
      .dash-incidents-body { max-height:calc(100vh - 220px); overflow-y:auto; }
      .dash-incidents-empty { padding:1.25rem 1rem; text-align:center; font-size:.8rem; color:var(--muted); }
      /* ── Dashboard notification cards (per-client grouped) ── */
      .notif-client-list { display:flex; flex-direction:column; gap:8px; }
      .notif-client-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
      .notif-client-card.has-active { border-color:rgba(242,107,107,.3); }
      .notif-client-header { display:flex; align-items:center; gap:8px; padding:.55rem 1rem; background:var(--surface3); border-bottom:1px solid var(--border); }
      .notif-client-name { font-size:.78rem; font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .notif-active-badge { font-size:.63rem; font-weight:700; padding:2px 8px; border-radius:20px; background:rgba(242,107,107,.12); color:var(--red); border:1px solid rgba(242,107,107,.2); flex-shrink:0; }
      .notif-page-row { display:flex; align-items:center; gap:10px; padding:.5rem 1rem; border-bottom:1px solid rgba(255,255,255,.03); }
      .notif-page-row:last-child { border-bottom:none; }
      .notif-page-row.ongoing { background:rgba(242,107,107,.03); }
      .notif-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
      .notif-dot.ongoing { background:var(--red); box-shadow:0 0 5px rgba(242,107,107,.6); animation:pulse 2s infinite; }
      .notif-dot.resolved { background:var(--green); opacity:.6; }
      .notif-page-info { flex:1; min-width:0; }
      .notif-page-name { font-size:.78rem; font-weight:500; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .notif-page-url { font-size:.63rem; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .notif-badge { font-size:.63rem; font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:.04em; flex-shrink:0; }
      .notif-badge.ongoing { background:rgba(242,107,107,.12); color:var(--red); }
      .notif-badge.resolved { background:rgba(62,207,142,.1); color:var(--green); }
      .notif-duration { font-size:.68rem; color:var(--muted); white-space:nowrap; flex-shrink:0; }
      .incident-dismiss-btn {
        background:none; border:1px solid var(--border2); border-radius:5px;
        color:var(--muted); cursor:pointer; font-size:.68rem; padding:3px 9px;
        font-family:inherit; transition:all .15s; flex-shrink:0; margin-left:4px;
      }
      .incident-dismiss-btn:hover { border-color:var(--red); color:var(--red); }
      /* downtime log */
      .dl-section { margin-top:1.5rem; } /* uptime page and incidents page — dashboard uses .dash-section */

      /* ── Monitors page ──────────────────────────────── */
      .monitors-page { padding: 1.5rem 2rem; max-width: 1400px; width: 100%; margin: 0 auto; }
      .monitors-sticky-top { position:sticky; top:60px; z-index:4; background:var(--bg); padding-top:1.25rem; }
      .monitors-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; flex-wrap:wrap; gap:8px; }
      .monitors-title { font-size:1.1rem; font-weight:700; color:var(--text); margin:0; }
      .monitors-col-head { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; border-bottom:1px solid var(--border); }
      .monitors-col-head th { padding:.55rem 1.25rem; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--bg); }
      .monitors-col-head th.score { text-align:center; }
      /* flat single-table layout — one <tbody> per client for guaranteed column alignment */
      .monitors-flat-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
      .monitors-flat-table > thead { display:none; }
      .monitor-group-spacer td { height:14px; }
      .monitor-group-header-row > td { background:var(--surface2); border-top:1px solid var(--border); border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid rgba(255,255,255,.07); padding:.85rem 1.4rem; border-radius:12px 12px 0 0; overflow:visible; }
      .monitor-client-tbody.has-down .monitor-group-header-row > td { background:rgba(242,107,107,0.06); border-top:2px solid rgba(242,107,107,0.55); }
      .monitor-client-tbody.has-down .monitor-group-header-row > td:first-child { border-left:2px solid rgba(242,107,107,0.55); }
      .monitor-client-tbody.has-down .monitor-group-header-row > td:last-child { border-right:2px solid rgba(242,107,107,0.55); }
      .monitor-client-tbody.has-down .monitor-flat-page-row > td:first-child { border-left:2px solid rgba(242,107,107,0.35); }
      .monitor-client-tbody.has-down .monitor-flat-page-row > td:last-child { border-right:2px solid rgba(242,107,107,0.35); }
      .monitor-client-tbody.has-down .monitor-flat-page-row:last-child > td { border-bottom:2px solid rgba(242,107,107,0.55); }
      .monitor-client-tbody.has-down .monitor-flat-page-row:last-child > td:first-child { border-radius:0 0 0 10px; }
      .monitor-client-tbody.has-down .monitor-flat-page-row:last-child > td:last-child { border-radius:0 0 10px 0; }
      .monitor-flat-page-row { cursor:pointer; }
      .monitor-flat-page-row > td { background:var(--surface); border-bottom:1px solid rgba(255,255,255,.04); padding:.72rem 1.25rem; font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .monitor-flat-page-row > td:first-child { border-left:1px solid var(--border); }
      .monitor-flat-page-row > td:last-child { border-right:1px solid var(--border); }
      .monitor-flat-page-row:hover > td { background:rgba(255,255,255,.025); }
      .monitor-flat-page-row.last-in-group > td { border-bottom:1px solid var(--border); }
      .monitor-flat-page-row.last-in-group > td:first-child { border-bottom-left-radius:12px; }
      .monitor-flat-page-row.last-in-group > td:last-child { border-bottom-right-radius:12px; }
      .monitor-no-pages-row > td { background:var(--surface); color:var(--muted); font-size:.8rem; padding:1rem 1.4rem; border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0 0 12px 12px; }
      /* ── Client Detail redesign (cd-) ───────────────────────────────────────── */
      .cd-wrap { display:flex; flex-direction:column; min-height:100%; }
      .cd-breadcrumb { display:flex; align-items:center; gap:6px; padding:.85rem 1.5rem .35rem; font-size:.72rem; color:var(--muted); }
      .cd-back-btn { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.72rem; font-family:inherit; display:flex; align-items:center; gap:4px; padding:0; transition:color .15s; }
      .cd-back-btn:hover { color:var(--text); }
      .cd-breadcrumb-sep { color:var(--border2); }
      .cd-breadcrumb-cur { color:var(--text2); font-weight:600; }
      .cd-header { display:flex; align-items:center; justify-content:space-between; padding:.35rem 1.5rem .85rem; gap:1rem; flex-wrap:wrap; }
      .cd-header-left { display:flex; align-items:center; gap:12px; }
      .cd-avatar { width:42px; height:42px; background:var(--surface3); border:1px solid var(--border2); border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.9rem; color:var(--accent); flex-shrink:0; }
      .cd-title { font-family:"JetBrains Mono",monospace; font-size:1.2rem; font-weight:700; color:var(--text); }
      .cd-subtitle { font-size:.72rem; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
      .cd-subtitle a { color:var(--muted); text-decoration:none; }
      .cd-subtitle a:hover { color:var(--text2); }
      .cd-header-badge { padding:.3rem .8rem; border-radius:6px; font-size:.62rem; font-weight:700; letter-spacing:.07em; font-family:"JetBrains Mono",monospace; white-space:nowrap; }
      .cd-header-badge.down { background:rgba(242,107,107,.12); color:var(--red); border:1px solid rgba(242,107,107,.3); }
      .cd-header-badge.up { background:rgba(62,207,142,.08); color:var(--green); border:1px solid rgba(62,207,142,.2); }
      .cd-incident-banner { background:rgba(242,107,107,.06); border:1px solid rgba(242,107,107,.22); border-radius:8px; padding:.8rem 1.1rem; margin:0 1.5rem .6rem; display:flex; align-items:center; gap:.85rem; }
      .cd-incident-banner-icon { color:var(--red); font-size:1rem; flex-shrink:0; opacity:.9; }
      .cd-incident-banner-body { flex:1; min-width:0; }
      .cd-incident-banner-title { font-size:.82rem; font-weight:600; color:var(--text); }
      .cd-incident-banner-meta { font-size:.7rem; color:var(--muted); margin-top:2px; }
      .cd-incident-banner-actions { display:flex; gap:5px; flex-shrink:0; }
      .cd-incident-banner-actions .btn { padding:.3rem .75rem; font-size:.72rem; }
      .cd-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; padding:0 1.5rem .85rem; }
      .cd-kpi-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:.85rem 1rem; }
      .cd-kpi-card-down { border-color:rgba(242,107,107,.25); background:rgba(242,107,107,.04); }
      .cd-kpi-label { font-size:.57rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
      .cd-kpi-value { font-family:"JetBrains Mono",monospace; font-size:1.55rem; font-weight:700; line-height:1; }
      .cd-kpi-value.crit { color:var(--red); }
      .cd-kpi-value.warn { color:var(--orange); }
      .cd-kpi-sub { font-size:.65rem; color:var(--muted); margin-top:.3rem; }
      .cd-kpi-sub.down { color:rgba(242,107,107,.8); }
      .cd-kpi-sub.warn { color:var(--orange); }
      .cd-action-bar { display:flex; align-items:center; gap:.4rem; padding:.6rem 1.5rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(17,20,24,.6); flex-wrap:wrap; }
      .cd-action-bar-label { font-size:.57rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-right:.3rem; flex-shrink:0; }
      .cd-action-bar-spacer { flex:1; }
      .cd-btn-add { color:var(--accent) !important; }
      .cd-btn-del { color:rgba(242,107,107,.7) !important; }
      .cd-monitors-section { padding:.75rem 1.5rem 1.5rem; }
      .cd-monitors-header { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; margin-bottom:.4rem; }
      .cd-monitors-title { font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
      .cd-monitors-count { color:var(--accent); margin-left:.4rem; }
      .cd-monitors-table { width:100%; border-collapse:collapse; }
      .cd-monitors-table thead th { padding:.5rem .75rem; font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
      .cd-monitor-row { cursor:pointer; }
      .cd-monitor-row:hover td { background:rgba(255,255,255,.02); }
      .cd-monitor-row td { padding:.7rem .75rem; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
      .cd-monitor-row:last-child td { border-bottom:none; }
      .cd-monitor-row.row-down { background:rgba(242,107,107,.03); }
      .cd-monitor-row.row-down td:first-child { border-left:3px solid rgba(242,107,107,.45); padding-left:calc(.75rem - 3px); }
      .cd-status-pill { display:inline-flex; align-items:center; gap:4px; padding:.22rem .55rem; border-radius:5px; font-size:.62rem; font-weight:700; font-family:"JetBrains Mono",monospace; letter-spacing:.04em; white-space:nowrap; }
      .cd-status-pill.down { background:rgba(242,107,107,.15); color:var(--red); border:1px solid rgba(242,107,107,.3); }
      .cd-status-pill.up { background:rgba(62,207,142,.1); color:var(--green); border:1px solid rgba(62,207,142,.2); }
      .cd-status-pill.unknown { background:var(--surface3); color:var(--muted); border:1px solid var(--border2); }
      .cd-status-since { font-size:.62rem; color:var(--muted); margin-top:3px; }
      .cd-status-since.down { color:rgba(242,107,107,.75); }
      .cd-monitor-name { font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; display:flex; align-items:center; gap:5px; }
      .cd-monitor-url { font-size:.63rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
      .cd-ping-val { font-family:"JetBrains Mono",monospace; font-size:.8rem; font-weight:600; }
      .cd-ping-val.down { color:var(--red); }
      .cd-ping-val.warn { color:var(--orange); }
      .cd-ping-avg { font-size:.62rem; color:var(--muted); margin-top:2px; }
      .cd-lh-scores { display:flex; gap:10px; align-items:flex-end; }
      .cd-lh-score { text-align:center; }
      .cd-lh-score-val { font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:700; }
      .cd-lh-score-key { font-size:.53rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:1px; }
      .cd-lh-stale { font-size:.58rem; color:var(--orange); font-weight:600; margin-top:3px; font-family:"JetBrains Mono",monospace; letter-spacing:.04em; }
      .cd-endpoint-label { font-size:.65rem; color:var(--muted); font-style:italic; }
      .cd-uptime-pct { font-family:"JetBrains Mono",monospace; font-size:.82rem; font-weight:700; }
      .cd-uptime-pct.warn { color:var(--orange); }
      .cd-uptime-pct.crit { color:var(--red); }
      .cd-uptime-sub { font-size:.62rem; color:var(--muted); margin-top:2px; }
      .cd-last-check { font-size:.78rem; color:var(--text2); }
      .cd-next-check { font-size:.62rem; color:var(--muted); margin-top:2px; }
      .cd-act-row { display:flex; gap:4px; align-items:center; justify-content:flex-end; }
      .cd-act-btn { background:none; border:1px solid var(--border2); border-radius:5px; color:var(--muted); cursor:pointer; font-size:.7rem; width:26px; height:26px; display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s; padding:0; font-family:inherit; }
      .cd-act-btn:hover { background:var(--surface3); color:var(--text); }
      .cd-act-btn.pinned { color:var(--accent); border-color:rgba(245,166,35,.35); }
      .cd-act-btn.del:hover { background:rgba(242,107,107,.12); color:var(--red); border-color:rgba(242,107,107,.3); }
      .endpoint-tag { font-size:.55rem; font-weight:700; letter-spacing:.05em; background:rgba(91,141,239,.15); color:var(--blue); border:1px solid rgba(91,141,239,.25); border-radius:4px; padding:.1rem .35rem; font-family:"JetBrains Mono",monospace; flex-shrink:0; }
      .monitor-add-page-row { display:none; }
      .monitor-add-page-row > td { background:var(--surface2); border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid rgba(255,255,255,.07); padding:.75rem 1.4rem; }
      .monitor-client-info { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
      .monitor-client-name { font-size:.92rem; font-weight:600; color:var(--text); }
      .monitor-client-name-link { display:inline-flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; color:var(--text); font-size:.92rem; font-weight:600; padding:0; }
      .monitor-client-name-link:hover .mcnl-text { text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); text-underline-offset:2px; }
      .monitor-client-name-link .mcnl-arrow { color:var(--muted); opacity:.5; flex-shrink:0; transition:opacity .15s; }
      .monitor-client-name-link:hover .mcnl-arrow { opacity:1; }
      .monitor-client-url { font-size:.7rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .monitor-uptime-pill { font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:20px; background:rgba(62,207,142,.12); color:var(--green); white-space:nowrap; border:1px solid rgba(62,207,142,.2); flex-shrink:0; }
      .monitor-uptime-pill.has-down { background:rgba(242,107,107,.1); color:var(--red); border-color:rgba(242,107,107,.2); }
      .monitor-ff-toggle { display:flex; gap:3px; flex-shrink:0; }
      .monitor-header-btn { display:flex; align-items:center; gap:5px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 10px; font-size:.75rem; cursor:pointer; transition:color .15s,border-color .15s,background .15s; white-space:nowrap; flex-shrink:0; }
      .monitor-header-btn:hover { color:var(--text); border-color:var(--border2); background:rgba(255,255,255,.04); }
      .monitor-header-btn.arrow { padding:5px 8px; border-radius:6px; }
      .monitor-page-score { font-family:'JetBrains Mono',monospace; font-size:.75rem; font-weight:700; text-align:center; display:block; }
      .monitors-pagination { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; border-top:1px solid var(--border); margin-top:.5rem; }
      .monitors-page-info { font-size:.72rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }
      .monitors-page-btns { display:flex; gap:6px; }
      .monitors-add-client-form { border:1px solid var(--border); border-radius:8px; padding:.9rem 1rem; margin-bottom:1.25rem; background:var(--surface2); display:none; }
      .monitors-add-client-form.open { display:block; }
      /* ── Monitor type badges ─────────────────────────── */
      .monitor-type-badge { display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:4px; text-transform:uppercase; vertical-align:middle; margin-left:6px; }
      .monitor-type-badge.page { background:rgba(99,153,255,.15); color:#6399ff; }
      .monitor-type-badge.endpoint { background:rgba(167,107,255,.15); color:#a76bff; }
      /* ── Add-type selector ───────────────────────────── */
      .add-type-row { display:flex; gap:5px; margin-bottom:10px; }
      .add-type-btn { padding:4px 11px; font-size:.72rem; font-weight:500; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:5px; cursor:pointer; transition:all .15s; }
      .add-type-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
      .add-type-btn:disabled { opacity:.4; cursor:default; }
      /* ── Monitors type filter pills ──────────────────── */
      .monitors-type-filter { display:flex; gap:5px; padding-bottom:.75rem; }
      .monitors-tf-btn { padding:4px 12px; font-size:.72rem; font-weight:500; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:20px; cursor:pointer; transition:all .15s; }
      .monitors-tf-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
      /* ── Service Desk modal ──────────────────────────── */
      .sd-overlay {
        display: none; position: fixed; inset: 0; z-index: 400;
        background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
        align-items: center; justify-content: center;
      }
      .sd-overlay.open { display: flex; }
      .sd-modal {
        background: var(--surface); border: 1px solid var(--border2);
        border-radius: 14px; width: min(520px, 96vw); max-height: 90vh;
        overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,.7);
        scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
      }
      .sd-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1.25rem; border-bottom: 1px solid var(--border);
        position: sticky; top: 0; background: var(--surface); z-index: 1;
      }
      .sd-modal-title {
        font-family: "JetBrains Mono", monospace; font-size: .75rem;
        font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
      }
      .sd-modal-close {
        background: none; border: none; color: var(--muted); cursor: pointer;
        font-size: 1rem; line-height: 1; padding: 3px 6px; border-radius: 5px;
        transition: color .15s;
      }
      .sd-modal-close:hover { color: var(--text); }
      .sd-modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
      .sd-field { display: flex; flex-direction: column; gap: 5px; }
      .sd-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
      .sd-input, .sd-textarea, .sd-select {
        background: var(--surface2); border: 1px solid var(--border2); border-radius: 7px;
        color: var(--text); font-family: inherit; font-size: .82rem; padding: .5rem .75rem;
        transition: border-color .15s; outline: none; width: 100%; box-sizing: border-box;
      }
      .sd-input:focus, .sd-textarea:focus, .sd-select:focus { border-color: var(--accent); }
      .sd-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
      .sd-select option { background: var(--surface2); }
      .sd-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
      .sd-modal-footer {
        display: flex; justify-content: flex-end; gap: .6rem;
        padding: .9rem 1.25rem; border-top: 1px solid var(--border);
        position: sticky; bottom: 0; background: var(--surface);
      }
      .sd-btn {
        padding: .42rem 1.1rem; border-radius: 7px; font-size: .8rem;
        font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid; transition: all .15s;
      }
      .sd-btn.cancel { background: none; color: var(--muted); border-color: var(--border2); }
      .sd-btn.cancel:hover { color: var(--text); border-color: var(--border2); background: var(--surface2); }
      .sd-btn.submit { background: rgba(245,166,35,.15); color: var(--accent); border-color: rgba(245,166,35,.35); }
      .sd-btn.submit:hover { background: rgba(245,166,35,.25); }
      .sd-btn:disabled { opacity: .45; cursor: default; }
      /* ── Incidents page ─────────────────────────────── */
      .incidents-page { padding: 1.5rem 2rem; max-width: 1200px; width: 100%; margin: 0 auto; }
      .incidents-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
      .incidents-title { font-size:1.1rem; font-weight:700; color:var(--text); margin:0; }
      /* Incident detail view */
      .inc-detail-back { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:.8rem; font-family:inherit; padding:0; margin-bottom:1.25rem; transition:color .15s; }
      .inc-detail-back:hover { color:var(--text); }
      .inc-detail-status-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; flex-wrap:wrap; }
      .inc-detail-badge { font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; flex-shrink:0; }
      .inc-detail-badge.ongoing { background:rgba(242,107,107,.15); color:var(--red); border:1px solid rgba(242,107,107,.3); }
      .inc-detail-badge.resolved { background:rgba(62,207,142,.1); color:var(--green); border:1px solid rgba(62,207,142,.25); }
      .inc-detail-title { font-size:1.1rem; font-weight:700; color:var(--text); margin:0; }
      .inc-detail-subtitle { font-size:.75rem; color:var(--muted); margin-top:5px; }
      .inc-detail-meta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.65rem; margin:1.25rem 0; }
      .inc-detail-meta-card { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:.7rem 1rem; }
      .inc-detail-meta-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:5px; }
      .inc-detail-meta-val { font-family:"JetBrains Mono",monospace; font-size:.85rem; font-weight:600; color:var(--text); line-height:1.3; }
      .inc-detail-meta-val.red { color:var(--red); }
      .inc-detail-meta-val.green { color:var(--green); }
      .inc-detail-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.75rem; }
      .inc-detail-btn { display:inline-flex; align-items:center; gap:6px; padding:.42rem 1rem; border-radius:7px; font-size:.78rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all .15s; border:1px solid; }
      .inc-detail-btn.primary { background:rgba(245,166,35,.12); color:var(--accent); border-color:rgba(245,166,35,.3); }
      .inc-detail-btn.primary:hover { background:rgba(245,166,35,.2); }
      .inc-detail-btn.success { background:rgba(62,207,142,.1); color:var(--green); border-color:rgba(62,207,142,.25); }
      .inc-detail-btn.success:hover { background:rgba(62,207,142,.18); }
      .inc-detail-btn.secondary { background:var(--surface2); color:var(--text2); border-color:var(--border2); }
      .inc-detail-btn.secondary:hover { background:var(--surface3); color:var(--text); }
      .inc-detail-btn.danger { background:rgba(242,107,107,.1); color:var(--red); border-color:rgba(242,107,107,.25); margin-left:auto; }
      .inc-detail-btn.danger:hover { background:rgba(242,107,107,.2); }
      .inc-detail-btn:disabled { opacity:.45; cursor:default; }
      .inc-detail-section-title { font-family:"JetBrains Mono",monospace; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
      .inc-detail-section { margin-bottom:1.75rem; }
      .inc-root-cause { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:.85rem 1.1rem; }
      .inc-root-cause-row { display:flex; gap:.75rem; align-items:flex-start; padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.78rem; }
      .inc-root-cause-row:last-child { border-bottom:none; }
      .inc-root-key { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.07em; font-weight:600; width:130px; flex-shrink:0; padding-top:2px; }
      .inc-root-val { color:var(--text); font-family:"JetBrains Mono",monospace; font-size:.75rem; line-height:1.5; }
      .inc-timeline-chart { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:16px 12px 10px; }
      .inc-notes-box { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:.85rem 1.1rem; min-height:3rem; }
      .inc-notes-empty { font-size:.78rem; color:var(--muted); font-style:italic; }
      .inc-notes-actions { display:flex; gap:6px; margin-top:.65rem; }
      .inc-notes-md { font-size:.8rem; color:var(--text); line-height:1.75; }
      .inc-notes-md h1,.inc-notes-md h2 { font-size:.95rem; font-weight:700; color:var(--text); margin:.9rem 0 .3rem; border-bottom:1px solid var(--border); padding-bottom:.2rem; }
      .inc-notes-md h3 { font-size:.85rem; font-weight:600; color:var(--text); margin:.7rem 0 .25rem; }
      .inc-notes-md p { margin:.35rem 0; }
      .inc-notes-md strong { color:var(--text); font-weight:700; }
      .inc-notes-md em { font-style:italic; color:var(--muted); }
      .inc-notes-md ul,.inc-notes-md ol { margin:.3rem 0 .3rem 1.3rem; padding:0; }
      .inc-notes-md li { margin:.12rem 0; }
      .inc-notes-md code { background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:1px 5px; font-family:"JetBrains Mono",monospace; font-size:.73rem; }
      .inc-notes-md blockquote { border-left:3px solid var(--accent); padding-left:.75rem; color:var(--muted); margin:.4rem 0; }
      .inc-notes-md hr { border:none; border-top:1px solid var(--border); margin:.6rem 0; }
      /* EasyMDE dark theme */
      .EasyMDEContainer .CodeMirror { background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--border2) !important; border-top:none !important; border-radius:0 0 6px 6px !important; font-family:"JetBrains Mono",monospace !important; font-size:.78rem !important; line-height:1.75 !important; padding:.5rem .65rem !important; }
      .EasyMDEContainer .editor-toolbar { background:var(--surface2) !important; border:1px solid var(--border2) !important; border-bottom:1px solid var(--border) !important; border-radius:6px 6px 0 0 !important; padding:3px 6px !important; opacity:1 !important; }
      .EasyMDEContainer .editor-toolbar button { color:var(--muted) !important; background:transparent !important; border:1px solid transparent !important; border-radius:3px !important; width:26px !important; height:22px !important; }
      .EasyMDEContainer .editor-toolbar button:hover, .EasyMDEContainer .editor-toolbar button.active { background:var(--border) !important; color:var(--text) !important; border-color:var(--border2) !important; }
      .EasyMDEContainer .editor-toolbar i.separator { border-left:1px solid var(--border2) !important; border-right:none !important; }
      .EasyMDEContainer .editor-preview, .EasyMDEContainer .editor-preview-side { background:var(--surface) !important; color:var(--text) !important; border-color:var(--border2) !important; font-size:.8rem !important; line-height:1.75 !important; }
      .EasyMDEContainer .editor-statusbar { display:none !important; }
      .EasyMDEContainer .CodeMirror-cursor { border-left:2px solid var(--accent) !important; }
      .EasyMDEContainer .CodeMirror-selected { background:rgba(255,255,255,.08) !important; }
      .EasyMDEContainer .cm-s-easymde .cm-header { color:var(--text) !important; font-weight:700 !important; }
      .EasyMDEContainer .cm-s-easymde .cm-strong { color:var(--text) !important; }
      .EasyMDEContainer .cm-s-easymde .cm-em { color:var(--muted) !important; }
      .EasyMDEContainer .cm-s-easymde .cm-quote { color:var(--muted) !important; }
      .EasyMDEContainer .cm-s-easymde .cm-link,.EasyMDEContainer .cm-s-easymde .cm-url { color:var(--accent) !important; }
      .EasyMDEContainer .cm-s-easymde .cm-code { background:var(--surface2) !important; color:var(--accent) !important; border-radius:3px !important; }
      .editor-preview h1,.editor-preview h2 { font-size:.95rem; font-weight:700; border-bottom:1px solid var(--border); padding-bottom:.2rem; margin:.8rem 0 .3rem; }
      .editor-preview h3 { font-size:.85rem; font-weight:600; margin:.6rem 0 .2rem; }
      .editor-preview code { background:var(--surface2); border:1px solid var(--border); border-radius:3px; padding:1px 5px; font-family:"JetBrains Mono",monospace; font-size:.73rem; }
      .editor-preview blockquote { border-left:3px solid var(--accent); padding-left:.75rem; color:var(--muted); margin:.4rem 0; }
      .editor-preview-side h1,.editor-preview-side h2 { font-size:.95rem; font-weight:700; border-bottom:1px solid var(--border); padding-bottom:.2rem; }
      .editor-preview-side code { background:var(--surface2); border-radius:3px; padding:1px 5px; font-family:"JetBrains Mono",monospace; font-size:.73rem; }
      .inc-tl-marker { font-size:.62rem; padding:1px 6px; border-radius:3px; white-space:nowrap; }
      .inc-tl-marker.down { background:rgba(242,107,107,.15); color:var(--red); }
      .inc-tl-marker.up { background:rgba(62,207,142,.12); color:var(--green); }
      /* navigable rows in downtime log */
      .dl-detail-row.navigable { cursor:pointer; }
      .dl-detail-row.navigable:hover { background:rgba(255,255,255,.04); }
      .dl-view-arrow { color:var(--muted); font-size:.85rem; flex-shrink:0; }

      .dl-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
      .dl-title { font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
      .dl-filters { display:flex; gap:4px; }
      .dl-filter-btn { padding:2px 10px; font-size:.68rem; font-family:inherit; border-radius:4px; border:1px solid var(--border2); background:none; color:var(--muted); cursor:pointer; transition:all .15s; }
      .dl-filter-btn.active, .dl-filter-btn:hover { background:var(--surface3); color:var(--text); border-color:var(--border2); }
      /* downtime log — client blocks */
      .dl-client-block { margin-bottom:1.5rem; }
      .dl-client-header { padding:0 .25rem; margin-bottom:.5rem; }
      .dl-client-name { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
      /* grouped downtime rows */
      .dl-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
      .dl-dot.ongoing { background:var(--red); box-shadow:0 0 0 3px rgba(242,107,107,.3); animation:pulse 2s infinite; }
      .dl-dot.resolved { background:var(--red); opacity:.45; }
      .dl-page { flex:1; min-width:0; overflow:hidden; }
      .dl-page-name { font-size:.78rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .dl-page-client { font-size:.65rem; color:var(--muted); }
      .dl-duration { font-family:"JetBrains Mono",monospace; font-size:.69rem; font-weight:600; padding:2px 7px; border-radius:4px; white-space:nowrap; flex-shrink:0; }
      .dl-duration.ongoing { color:var(--red); background:rgba(242,107,107,.12); }
      .dl-duration.resolved { color:var(--text2); background:var(--surface3,var(--border)); }
      .dl-group { margin-bottom:3px; border-radius:7px; background:var(--surface2); border:1px solid var(--border); overflow:hidden; }
      .dl-group.ongoing { border-color:rgba(242,107,107,.25); }
      .dl-group-header { display:flex; align-items:center; gap:.75rem; padding:.55rem .75rem; cursor:pointer; user-select:none; transition:background .15s; }
      .dl-group-header:hover { background:var(--surface3); }
      .dl-group-meta { margin-left:auto; font-size:.68rem; color:var(--muted); white-space:nowrap; flex-shrink:0; }
      .dl-chevron { font-size:.55rem; color:var(--muted); margin-left:.35rem; flex-shrink:0; transition:transform .2s; display:inline-block; }
      .dl-group.open .dl-chevron { transform:rotate(90deg); }
      .dl-group-body { display:none; border-top:1px solid var(--border); }
      .dl-group.open .dl-group-body { display:block; }
      .dl-detail-row { display:flex; align-items:center; gap:.6rem; padding:.32rem .75rem .32rem 2.1rem; border-bottom:1px solid var(--border); }
      .dl-detail-row:last-child { border-bottom:none; }
      .dl-detail-row.ongoing { background:rgba(242,107,107,.03); }
      .dl-detail-ts { font-family:"JetBrains Mono",monospace; font-size:.66rem; color:var(--text2); white-space:nowrap; }
      .dl-detail-ts.red { color:var(--red); }
      .dl-detail-sep { color:var(--muted); font-size:.6rem; flex-shrink:0; }
      .dl-detail-row.acked { opacity:.5; }
      .dl-ack-btn { margin-left:.5rem; flex-shrink:0; background:none; border:1px solid var(--border2); border-radius:5px; color:var(--muted); cursor:pointer; font-size:.63rem; padding:2px 8px; font-family:inherit; transition:all .15s; white-space:nowrap; }
      .dl-ack-btn:hover { border-color:var(--green); color:var(--green); }
      .dl-ack-btn:disabled { opacity:.4; cursor:default; }
      .dl-acked-mark { margin-left:.5rem; flex-shrink:0; font-size:.63rem; color:var(--green); opacity:.7; white-space:nowrap; }
      .dl-unacked-badge { font-size:.62rem; font-weight:600; padding:2px 8px; border-radius:20px; background:rgba(242,107,107,.12); color:var(--red); border:1px solid rgba(242,107,107,.2); white-space:nowrap; flex-shrink:0; }
      .dl-all-acked { font-size:.62rem; color:var(--green); opacity:.6; white-space:nowrap; flex-shrink:0; }
      .outage-badge { font-size:.62rem; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
      .outage-badge.outage-down { background:rgba(242,107,107,.15); color:#f26b6b; border:1px solid rgba(242,107,107,.25); }
      .outage-badge.outage-err  { background:rgba(249,115,22,.12);  color:#f97316; border:1px solid rgba(249,115,22,.25); font-variant-numeric:tabular-nums; }
      .dl-inc-id { font-family:monospace; font-size:.68rem; color:var(--muted); margin-left:.25rem; }
      .dl-inc-main { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
      .dl-inc-id-main { font-family:monospace; font-size:.8rem; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .dl-inc-meta-row { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
      .dl-inc-similar { font-size:.68rem; color:var(--muted); }
      .dl-inc-sep { font-size:.65rem; color:var(--border); }
      .dl-inc-err { font-size:.68rem; color:#f97316; font-variant-numeric:tabular-nums; }
      .dl-inc-status { font-size:.68rem; font-weight:600; }
      .dl-inc-status.ongoing { color:#f26b6b; }
      .dl-inc-status.ongoing-acked { color:#f97316; }
      .dl-inc-status.acked { color:var(--green); }
      .dl-inc-status.resolved { color:var(--muted); }
      .dl-inc-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
      .outage-monitors-list { display:flex; flex-direction:column; gap:3px; }
      .outage-monitor-row { display:flex; align-items:center; gap:.65rem; padding:.5rem .75rem; border-radius:7px; background:var(--surface2); border:1px solid var(--border); cursor:pointer; transition:background .15s; }
      .outage-monitor-row:hover { background:var(--surface3); }
      .outage-monitor-row.ongoing { border-color:rgba(242,107,107,.25); }
      .outage-monitors-toggle { margin-top:6px; background:none; border:1px solid var(--border); border-radius:6px; color:var(--accent); font-size:.72rem; font-weight:600; padding:5px 14px; cursor:pointer; font-family:"Space Grotesk",sans-serif; width:100%; transition:background .15s; }
      .outage-monitors-toggle:hover { background:var(--surface2); }
      .dl-monitor-type-badge { font-size:.58rem; font-weight:600; padding:1px 5px; border-radius:3px; background:var(--bg3); color:var(--muted); margin-left:.25rem; vertical-align:middle; text-transform:uppercase; }
      .dl-empty { padding:.75rem; font-size:.75rem; color:var(--muted); text-align:center; }
      .dl-load-more { display:block; width:100%; margin-top:.4rem; padding:.4rem; font-size:.7rem; color:var(--muted); background:none; border:1px dashed var(--border2); border-radius:6px; cursor:pointer; text-align:center; font-family:inherit; transition:all .15s; }
      .dl-load-more:hover { color:var(--text1); border-color:var(--text2); }

      /* client filter */
      .dl-client-filter-wrap { position:relative; display:inline-block; }
      .dl-client-filter-btn { display:flex; align-items:center; gap:5px; padding:2px 10px; font-size:.68rem; font-family:inherit; border-radius:4px; border:1px solid var(--border2); background:none; color:var(--muted); cursor:pointer; transition:all .15s; white-space:nowrap; }
      .dl-client-filter-btn:hover, .dl-client-filter-btn.active { background:var(--surface3); color:var(--text); border-color:var(--accent); }
      .dl-client-filter-btn .dl-cf-count { background:var(--accent); color:#07090c; border-radius:999px; padding:0 5px; font-size:.6rem; font-weight:700; line-height:1.5; }
      .dl-client-dropdown { position:absolute; top:calc(100% + 4px); left:0; z-index:200; background:var(--surface); border:1px solid var(--border2); border-radius:8px; min-width:200px; max-height:260px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.35); display:none; flex-direction:column; }
      .dl-client-dropdown.open { display:flex; }
      .dl-client-dropdown-search { padding:6px 10px; border-bottom:1px solid var(--border2); }
      .dl-client-dropdown-search input { width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:5px; padding:4px 8px; font-size:.72rem; color:var(--text); font-family:inherit; outline:none; box-sizing:border-box; }
      .dl-client-option { display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:.75rem; cursor:pointer; transition:background .1s; }
      .dl-client-option:hover { background:var(--surface2); }
      .dl-client-option input[type=checkbox] { accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
      .dl-client-option-name { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .dl-cf-tags { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
      .dl-cf-tag { display:flex; align-items:center; gap:4px; padding:1px 8px 1px 8px; background:rgba(245,166,35,0.12); border:1px solid rgba(245,166,35,0.3); border-radius:999px; font-size:.65rem; color:var(--accent); font-family:"JetBrains Mono",monospace; }
      .dl-cf-tag button { background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-size:.7rem; line-height:1; opacity:.7; }
      .dl-cf-tag button:hover { opacity:1; }
      /* platform toggle for dashboard scores */
      .dash-platform-toggle { display:flex; align-items:center; gap:3px; }
      .dash-platform-btn {
        padding:3px 11px; font-size:.7rem; font-weight:600; border-radius:5px;
        border:1px solid var(--border2); background:none; color:var(--muted);
        cursor:pointer; transition:all .15s;
      }
      .dash-platform-btn:hover { border-color:var(--border2); color:var(--text2); }
      .dash-platform-btn.active { background:var(--surface3); border-color:var(--border2); color:var(--text); }
      /* dashboard system status badge */
      .dash-status-ok { display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--muted); }
      .dash-status-ok::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; }
      .dash-status-incident { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:.72rem; font-weight:600; background:rgba(242,107,107,.12); color:var(--red); border:1px solid rgba(242,107,107,.25); }
      .dash-status-incident::before { content:'●'; font-size:.6rem; }
      /* clients dashboard */
      .clients-dash { padding: 1.5rem 2rem; }
      .clients-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.25rem; }
      .clients-dash-title { font-family:"JetBrains Mono",monospace; font-size:1rem; font-weight:700; letter-spacing:.04em; color:var(--text); }
      .clients-dash-count { font-size:.72rem; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:99px; padding:2px 8px; font-family:"JetBrains Mono",monospace; }
      .clients-dash-add { display:none; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; margin-bottom:1.25rem; }
      .clients-dash-add.open { display:block; }
      .clients-dash-add-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
      .clients-dash-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:1rem; flex-wrap:wrap; }
      .clients-dash-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
      /* uptime dashboard */
      .uptime-dash { padding: 2rem 2.5rem; max-width:1200px; width:100%; margin:0 auto; }
      .uptime-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
      .uptime-dash-title { font-family:"JetBrains Mono",monospace; font-size:1.1rem; font-weight:700; letter-spacing:.04em; color:var(--text); }
      .uptime-live-badge { font-size:.68rem; color:var(--green); font-weight:600; letter-spacing:.04em; animation:pulse 2s infinite; }
      .uptime-dash-summary { display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
      .uptime-stat-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.5rem; min-width:110px; flex:1; }
      .uptime-stat-val { font-family:"JetBrains Mono",monospace; font-size:1.75rem; font-weight:700; line-height:1; margin-bottom:6px; }
      .uptime-stat-label { font-size:.65rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
      .uptime-dash-body { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:2.5rem; }
      .uptime-table { width:100%; border-collapse:collapse; table-layout:fixed; }
      .uptime-table th { padding:.7rem 1.25rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); text-align:left; background:var(--surface2); }
      .uptime-table-row { cursor:pointer; transition:background .1s; }
      .uptime-table-row:hover { background:var(--surface2); }
      .uptime-table-row td { padding:.85rem 1.25rem; border-bottom:1px solid var(--border); font-size:.8rem; }
      .uptime-table-row.row-has-down { background:rgba(242,107,107,0.04); }
      .uptime-table-row.row-has-down:hover { background:rgba(242,107,107,0.08); }
      .uptime-table-row.row-has-down td:first-child { border-left:3px solid rgba(242,107,107,0.6); }
      .dash-pulse-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 5px var(--red); animation:pulseDashDot 1.4s ease-out infinite; flex-shrink:0; vertical-align:middle; }
      @keyframes pulseDashDot { 0%{opacity:1;transform:scale(1)} 60%{opacity:.3;transform:scale(1.6)} 100%{opacity:1;transform:scale(1)} }
      .uptime-table-group-row td { padding:.5rem 1.25rem; background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); }
      .uptime-client-group { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
      .uptime-table-url { color:var(--muted); font-size:.7rem; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
      .uptime-status-badge { font-size:.68rem; padding:2px 8px; border-radius:99px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
      .uptime-status-badge.up { background:rgba(62,207,142,.12); color:var(--green); border:1px solid rgba(62,207,142,.2); }
      .uptime-status-badge.down { background:rgba(242,107,107,.12); color:var(--red); border:1px solid rgba(242,107,107,.2); }
      .uptime-status-badge.unknown { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
      /* su-dot kept for uptime table rows */
      .su-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
      .su-dot.up { background: var(--green); }
      .su-dot.slow { background: var(--orange); }
      .su-dot.down { background: var(--red); }
      .su-dot.unknown { background: var(--border2); }
      /* uptime settings panel */
      .uptime-settings-panel {
        position: fixed; top: 0; right: -420px; width: 420px; height: 100vh;
        background: var(--surface); border-left: 1px solid var(--border);
        z-index: 1100; display: flex; flex-direction: column;
        transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -8px 0 40px rgba(0,0,0,.45);
      }
      .uptime-settings-panel.open { right: 0; }
      .uptime-settings-panel-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1.25rem; border-bottom: 1px solid var(--border);
        background: var(--surface2); position: sticky; top: 0; z-index: 1; flex-shrink: 0;
      }
      .uptime-settings-panel-title {
        font-size: .88rem; font-weight: 700; color: var(--teal);
        display: flex; align-items: center; gap: .5rem;
      }
      .uptime-settings-panel-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; }
      .us-field { display: flex; flex-direction: column; gap: .35rem; }
      .us-field label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
      .us-field .us-input-row { display: flex; align-items: center; gap: .6rem; }
      .us-field .us-unit { font-size: .8rem; color: var(--muted); flex-shrink: 0; }
      .us-field .us-hint { font-size: .7rem; color: var(--muted); line-height: 1.5; margin-top: .1rem; }
      .us-status-card {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 8px; padding: .85rem 1rem;
        display: flex; flex-direction: column; gap: .5rem;
      }
      .us-status-row { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; }
      .us-status-label { color: var(--muted); }
      .us-status-val { color: var(--text); font-weight: 600; font-family: "JetBrains Mono", monospace; }
      .us-info-box {
        background: rgba(45,212,191,.06); border: 1px solid rgba(45,212,191,.2);
        border-radius: 8px; padding: .75rem 1rem;
        font-size: .72rem; color: var(--text2); line-height: 1.6;
      }
      /* ── SMTP settings panel ── */
      .smtp-panel { position:fixed; top:0; right:-420px; width:420px; height:100vh; background:var(--surface); border-left:1px solid var(--border); z-index:200; display:flex; flex-direction:column; transition:right .25s cubic-bezier(.4,0,.2,1); overflow:hidden; }
      .smtp-panel.open { right:0; }
      .smtp-panel-topbar { display:flex; align-items:center; padding:.9rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
      .smtp-panel-title { font-family:"JetBrains Mono",monospace; font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--accent); }
      .smtp-panel-body { flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
      .smtp-field { display:flex; flex-direction:column; gap:4px; }
      .smtp-field label { font-size:.68rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
      .smtp-field input[type=text],.smtp-field input[type=number],.smtp-field input[type=password],.smtp-field input[type=email] { background:var(--surface2); border:1px solid var(--border2); border-radius:6px; padding:.45rem .75rem; color:var(--text); font-family:inherit; font-size:.82rem; width:100%; outline:none; transition:border-color .15s; }
      .smtp-field input:focus { border-color:var(--accent); }
      .smtp-row { display:flex; gap:.75rem; }
      .smtp-row .smtp-field { flex:1; }
      .smtp-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.6rem .75rem; background:var(--surface2); border:1px solid var(--border); border-radius:7px; }
      .smtp-toggle-label { font-size:.8rem; color:var(--text); }
      .smtp-toggle-sub { font-size:.67rem; color:var(--muted); margin-top:1px; }
      .smtp-save-msg { font-size:.75rem; text-align:center; min-height:1.2em; }
      /* ── Client notification panel ── */
      .cn-panel { position:fixed; top:0; right:-400px; width:400px; height:100vh; background:var(--surface); border-left:1px solid var(--border); z-index:200; display:flex; flex-direction:column; transition:right .25s cubic-bezier(.4,0,.2,1); overflow:hidden; }
      .cn-panel.open { right:0; }
      .cn-panel-topbar { display:flex; align-items:center; padding:.9rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
      .cn-panel-title { font-family:"JetBrains Mono",monospace; font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--accent); }
      .cn-panel-body { flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
      /* footer */
      .sidebar-footer {
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        position: relative;
      }
      .sidebar-user-menu {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        display: none;
        box-shadow: 0 -6px 20px rgba(0,0,0,.35);
      }
      .sidebar-footer.menu-open .sidebar-user-menu { display: block; }
      .sidebar-menu-item {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 10px 14px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--text2);
        font-size: .73rem;
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
        font-family: 'Space Grotesk', sans-serif;
        transition: background .12s, color .12s;
      }
      .sidebar-menu-item:last-child { border-bottom: none; }
      .sidebar-menu-item:hover { background: var(--surface2); color: var(--text); }
      .sidebar-menu-item.menu-danger:hover { color: var(--red); }
      .sidebar-user-btn {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 10px 12px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        transition: background .15s;
      }
      .sidebar-user-btn:hover { background: var(--surface2); }
      .sidebar.collapsed .sidebar-user-btn { justify-content: center; padding: 10px 0; }
      .sidebar-user-avatar {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: rgba(245,166,35,.12);
        border: 1px solid rgba(245,166,35,.22);
        display: grid;
        place-items: center;
        font-size: .68rem;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        color: var(--accent);
        flex-shrink: 0;
      }
      .sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; }
      .sidebar-user-name {
        font-size: .72rem;
        font-weight: 600;
        color: var(--text);
        font-family: 'JetBrains Mono', monospace;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .sidebar-user-role-badge {
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--accent);
        display: block;
      }
      .sidebar-user-chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s; }
      .sidebar-footer.menu-open .sidebar-user-chevron { transform: rotate(180deg); }
      .panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
      }
      .panel:has(.score-grid) { overflow: hidden; }
      .panel-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
      }
      .panel-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        padding-top: 2px;
        flex-shrink: 0;
      }
      .form-body {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .field label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text2);
        margin-bottom: 6px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .field input,
      .field select {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 8px;
        padding: 10px 12px;
        color: var(--text);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.82rem;
        outline: none;
        transition: border-color 0.2s;
        appearance: none;
      }
      .field input:focus,
      .field select:focus {
        border-color: var(--accent);
      }
      .field input::placeholder {
        color: var(--muted);
      }
      .btn {
        padding: 10px 18px;
        border: none;
        border-radius: 8px;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.18s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .btn-primary {
        background: var(--accent);
        color: #0a0c0f;
        width: 100%;
        justify-content: center;
      }
      .btn-primary:hover {
        background: var(--accent2);
        transform: translateY(-1px);
      }
      .btn-primary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
      }
      .btn-ghost {
        background: transparent;
        color: var(--text2);
        border: 1px solid var(--border2);
        font-size: 0.78rem;
        padding: 6px 12px;
      }
      .btn-ghost:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .btn-ghost:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
      }
      .btn-danger {
        background: transparent;
        color: var(--red);
        border: 1px solid transparent;
        padding: 4px 8px;
        font-size: 0.78rem;
      }
      .btn-danger:hover {
        background: rgba(242, 107, 107, 0.1);
      }
      .btn-purple {
        background: rgba(167, 139, 250, 0.12);
        color: var(--purple);
        border: 1px solid rgba(167, 139, 250, 0.25);
        font-size: 0.78rem;
        padding: 6px 12px;
      }
      .btn-purple:hover {
        background: rgba(167, 139, 250, 0.2);
      }
      .btn-teal {
        background: rgba(45, 212, 191, 0.1);
        color: var(--teal);
        border: 1px solid rgba(45, 212, 191, 0.25);
        font-size: 0.75rem;
        padding: 4px 9px;
        border-radius: 6px;
        white-space: nowrap;
      }
      .btn-teal:hover {
        background: rgba(45, 212, 191, 0.18);
      }
      .ff-toggle {
        display: flex;
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
      }
      .ff-btn {
        padding: 7px 14px;
        border: none;
        background: transparent;
        color: var(--muted);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .ff-btn.active {
        background: var(--surface);
        color: var(--text);
      }
      .ff-btn.active.mobile-active {
        color: var(--blue);
      }
      .ff-btn.active.desktop-active {
        color: var(--teal);
      }
      .ff-platform-badge {
        font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:5px;
        border:1px solid; cursor:default; display:flex; align-items:center; gap:4px;
      }
      .ff-platform-badge.desktop { border-color:rgba(45,212,191,.35); color:var(--teal); background:rgba(45,212,191,.08); }
      .ff-platform-badge.mobile  { border-color:rgba(96,165,250,.35); color:var(--blue); background:rgba(96,165,250,.08); }
      .client-list {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        max-height: 360px;
        min-height: 120px;
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      .client-list::-webkit-scrollbar {
        width: 4px;
      }
      .client-list::-webkit-scrollbar-track {
        background: transparent;
      }
      .client-list::-webkit-scrollbar-thumb {
        background: var(--border2);
        border-radius: 99px;
      }
      .client-list::-webkit-scrollbar-thumb:hover {
        background: var(--muted);
      }
      .client-item {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        transition: background 0.15s;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .client-item:last-child {
        border-bottom: none;
      }
      .client-item:hover {
        background: var(--surface2);
      }
      .client-item.active {
        background: rgba(245, 166, 35, 0.06);
        border-left: 2px solid var(--accent);
      }
      .client-avatar {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--surface2);
        border: 1px solid var(--border2);
        display: grid;
        place-items: center;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--accent);
        flex-shrink: 0;
        font-family: "JetBrains Mono", monospace;
        position: relative;
      }
      .schedule-dot {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--purple);
        border: 2px solid var(--surface);
      }
      .client-info {
        flex: 1;
        min-width: 0;
      }
      .client-name {
        font-size: 0.88rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .client-url {
        font-size: 0.72rem;
        font-family: "JetBrains Mono", monospace;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .client-schedule-label {
        font-size: 0.68rem;
        color: var(--purple);
        margin-top: 1px;
      }
      .client-score {
        font-family: "JetBrains Mono", monospace;
        font-weight: 700;
        font-size: 0.88rem;
      }
      .empty-state {
        padding: 3rem 1.5rem;
        text-align: center;
        color: var(--muted);
      }
      .empty-state .icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
      }
      .empty-state p {
        font-size: 0.85rem;
        line-height: 1.6;
      }
      .right-panel {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 0;
      }

      /* ── Score grid ── */
      .score-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--border);
      }
      .score-card {
        background: var(--surface);
        padding: 1.25rem 1rem;
        text-align: center;
        transition: background 0.2s;
        cursor: pointer;
        position: relative;
      }
      .score-card:hover {
        background: var(--surface2);
      }
      .score-card.selected {
        background: var(--surface2);
      }
      .score-card.selected::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--card-color, var(--accent));
      }
      .score-card-inner {
        pointer-events: none;
      }
      .score-value {
        font-family: "JetBrains Mono", monospace;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 6px;
      }
      .score-label {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .score-hint {
        font-size: 0.62rem;
        color: var(--muted);
        margin-top: 4px;
        opacity: 0;
        transition: opacity 0.2s;
      }
      .score-card:hover .score-hint {
        opacity: 1;
      }
      .score-good {
        color: var(--green);
      }
      .score-medium {
        color: var(--accent);
      }
      .score-poor {
        color: var(--red);
      }
      .score-none {
        color: var(--muted);
      }

      /* ── Date range bar ── */
      .date-range-bar {
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
        background: var(--surface2);
      }
      .date-range-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        flex-shrink: 0;
      }
      .dr-preset {
        padding: 5px 12px;
        border: 1px solid var(--border2);
        border-radius: 6px;
        background: transparent;
        color: var(--text2);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
      }
      .dr-preset:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .dr-preset.active {
        background: rgba(245, 166, 35, 0.1);
        border-color: var(--accent);
        color: var(--accent);
      }
      .dr-custom-btn {
        padding: 5px 12px;
        border: 1px solid var(--border2);
        border-radius: 6px;
        background: transparent;
        color: var(--text2);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        gap: 5px;
        position: relative;
      }
      .dr-custom-btn:hover,
      .dr-custom-btn.active {
        border-color: var(--blue);
        color: var(--blue);
      }
      .dr-custom-btn.active {
        background: rgba(91, 141, 239, 0.1);
      }
      .dr-range-display {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        color: var(--text2);
        padding: 4px 10px;
        border-radius: 6px;
        background: var(--surface3);
        border: 1px solid var(--border2);
        white-space: nowrap;
      }
      .dr-count {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        color: var(--muted);
        margin-left: auto;
      }

      /* ── Calendar picker popup ── */
      .cal-popup {
        position: fixed;
        z-index: 9999;
        background: var(--surface);
        border: 1px solid var(--border2);
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        padding: 1.25rem;
        display: none;
        min-width: 580px;
      }
      .cal-popup.open {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .cal-popup-months {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }
      .cal-month-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
      }
      .cal-month-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--text);
      }
      .cal-nav-btn {
        background: none;
        border: 1px solid var(--border2);
        border-radius: 6px;
        color: var(--text2);
        cursor: pointer;
        padding: 3px 8px;
        font-size: 0.8rem;
        transition: all 0.15s;
      }
      .cal-nav-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
      }
      .cal-dow {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.62rem;
        font-weight: 700;
        text-align: center;
        color: var(--muted);
        padding: 4px 0;
        letter-spacing: 0.06em;
      }
      .cal-day {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.76rem;
        text-align: center;
        padding: 6px 2px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s;
        color: var(--text2);
        border: 1px solid transparent;
      }
      .cal-day:hover:not(.cal-empty):not(.cal-disabled) {
        background: var(--surface2);
        color: var(--text);
        border-color: var(--border2);
      }
      .cal-day.cal-empty {
        cursor: default;
      }
      .cal-day.cal-disabled {
        color: var(--border2);
        cursor: default;
      }
      .cal-day.cal-today {
        color: var(--accent);
        font-weight: 700;
      }
      .cal-day.cal-start,
      .cal-day.cal-end {
        background: var(--accent);
        color: #0a0c0f;
        font-weight: 700;
        border-color: var(--accent);
      }
      .cal-day.cal-in-range {
        background: rgba(245, 166, 35, 0.12);
        color: var(--text);
        border-radius: 0;
      }
      .cal-day.cal-start {
        border-radius: 6px 0 0 6px;
      }
      .cal-day.cal-end {
        border-radius: 0 6px 6px 0;
      }
      .cal-day.cal-start.cal-end {
        border-radius: 6px;
      }
      .cal-popup-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
      }
      .cal-selected-display {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        color: var(--text2);
      }
      .cal-selected-display span {
        color: var(--accent);
      }
      .cal-popup-actions {
        display: flex;
        gap: 0.5rem;
      }
      .cal-clear-btn {
        background: none;
        border: 1px solid var(--border2);
        border-radius: 6px;
        color: var(--muted);
        cursor: pointer;
        padding: 5px 12px;
        font-size: 0.75rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
        transition: all 0.15s;
      }
      .cal-clear-btn:hover {
        border-color: var(--red);
        color: var(--red);
      }
      .cal-apply-btn {
        background: var(--accent);
        border: none;
        border-radius: 6px;
        color: #0a0c0f;
        cursor: pointer;
        padding: 5px 14px;
        font-size: 0.75rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        transition: all 0.15s;
      }
      .cal-apply-btn:hover {
        background: var(--accent2);
      }
      .cal-apply-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      /* ── Chart drawer ── */
      .chart-drawer {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-top: 0px solid var(--border);
      }
      .chart-drawer.open {
        max-height: 4000px;
        border-top-width: 1px;
      }
      .chart-drawer-inner {
        padding: 1.5rem;
        min-width: 0;
        overflow-x: hidden;
      }
      .chart-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
      }
      .chart-drawer-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .chart-close {
        background: none;
        border: none;
        color: var(--muted);
        font-size: 1rem;
        cursor: pointer;
        padding: 2px 6px;
        border-radius: 4px;
        transition: color 0.15s;
      }
      .chart-close:hover {
        color: var(--text);
      }
      .chart-main-wrap {
        height: 200px;
        position: relative;
        margin-bottom: 1.5rem;
      }
      .cwv-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 1rem;
      }
      .cwv-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
      }
      .cwv-card {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 1rem;
        min-width: 0;
        overflow: hidden;
      }
      .cwv-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 0.75rem;
      }
      .cwv-card-label {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .cwv-card-value {
        font-family: "JetBrains Mono", monospace;
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1;
      }
      .cwv-card-rating {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        padding: 2px 6px;
        border-radius: 4px;
        margin-top: 2px;
        display: inline-block;
      }
      .rating-good {
        background: rgba(62, 207, 142, 0.12);
        color: var(--green);
      }
      .rating-ni {
        background: rgba(245, 166, 35, 0.12);
        color: var(--accent);
      }
      .rating-poor {
        background: rgba(242, 107, 107, 0.1);
        color: var(--red);
      }
      .rating-na {
        background: rgba(90, 100, 117, 0.15);
        color: var(--muted);
      }
      .cwv-spark-wrap {
        height: 60px;
        position: relative;
      }

      /* ── Audit bar & history ── */
      .audit-bar {
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
      }
      .audit-info {
        flex: 1;
        min-width: 0;
      }
      .audit-url {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.8rem;
        color: var(--text2);
      }
      .audit-timestamp {
        font-size: 0.72rem;
        color: var(--muted);
        margin-top: 2px;
      }
      .audit-info-display {
        display: flex;
        flex-direction: column;
        gap: 1px;
        cursor: default;
      }
      .audit-name-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
      }
      .audit-edit-btn {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 0.75rem;
        padding: 2px 4px;
        border-radius: 4px;
        opacity: 0;
        transition: opacity 0.15s;
      }
      .audit-info:hover .audit-edit-btn {
        opacity: 1;
      }
      .audit-edit-btn:hover {
        color: var(--accent);
        background: rgba(245, 166, 35, 0.1);
      }
      .audit-edit-form {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.1rem 0;
      }
      .audit-edit-input {
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 6px;
        color: var(--text);
        font-size: 0.85rem;
        padding: 4px 8px;
        outline: none;
        width: 100%;
        min-width: 0;
        transition: border-color 0.15s;
      }
      .audit-edit-input:focus {
        border-color: var(--accent);
      }
      .audit-edit-input.url-input {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
      }
      .audit-edit-actions {
        display: flex;
        gap: 0.4rem;
        margin-top: 0.1rem;
      }
      .schedule-section {
        padding: 1.25rem;
        border-bottom: 1px solid var(--border);
      }
      .schedule-section-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .preset-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 1rem;
      }
      .preset-btn {
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 7px;
        padding: 8px 6px;
        cursor: pointer;
        transition: all 0.15s;
        text-align: center;
      }
      .preset-btn:hover {
        border-color: var(--purple);
        background: rgba(167, 139, 250, 0.06);
      }
      .preset-btn.selected {
        border-color: var(--purple);
        background: rgba(167, 139, 250, 0.1);
      }
      .preset-btn .preset-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text);
        display: block;
      }
      .preset-btn .preset-cron {
        font-size: 0.65rem;
        font-family: "JetBrains Mono", monospace;
        color: var(--muted);
        display: block;
        margin-top: 2px;
      }
      .cron-input-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
      }
      .cron-input-row input {
        flex: 1;
      }
      .cron-hint {
        font-size: 0.68rem;
        color: var(--muted);
        margin-top: 5px;
        font-family: "JetBrains Mono", monospace;
      }
      .schedule-status {
        margin-top: 1rem;
        padding: 10px 12px;
        background: var(--surface2);
        border-radius: 8px;
        border: 1px solid var(--border2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .schedule-status-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .schedule-active-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--purple);
        animation: pulse 2s infinite;
      }
      .schedule-status-text {
        font-size: 0.8rem;
        color: var(--text2);
      }
      .schedule-status-cron {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        color: var(--purple);
      }
      .schedule-actions {
        display: flex;
        gap: 6px;
      }
      .history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
      }
      .history-table th {
        padding: 10px 1rem;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        background: var(--surface2);
        border-bottom: 1px solid var(--border);
      }
      .history-table td {
        padding: 9px 1rem;
        border-bottom: 1px solid var(--border);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.76rem;
      }
      .history-table tr:last-child td {
        border-bottom: none;
      }
      .history-table tr:hover td {
        background: var(--surface2);
      }
      .ff-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.68rem;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
      }
      .ff-mobile {
        background: rgba(91, 141, 239, 0.12);
        color: var(--blue);
      }
      .ff-desktop {
        background: rgba(45, 212, 191, 0.1);
        color: var(--teal);
      }
      .spinner {
        width: 14px;
        height: 14px;
        border: 2px solid rgba(245, 166, 35, 0.2);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        display: inline-block;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      #toast {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .toast-item {
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 0.83rem;
        min-width: 260px;
        animation: slideIn 0.25s ease;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .toast-item.success {
        border-left: 3px solid var(--green);
      }
      .toast-item.error {
        border-left: 3px solid var(--red);
      }
      .toast-item.info {
        border-left: 3px solid var(--purple);
      }
      @keyframes slideIn {
        from {
          transform: translateX(20px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      #viewerOverlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: rgba(10, 12, 15, 0.85);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
      }
      #viewerOverlay.show {
        display: flex;
      }
      #viewerOverlay p {
        color: var(--text2);
        font-size: 0.9rem;
      }
      .big-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(45, 212, 191, 0.15);
        border-top-color: var(--teal);
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
      }
      .welcome {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5rem 2rem;
        text-align: center;
        color: var(--muted);
      }
      .welcome .big-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.4;
      }
      .welcome h2 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text2);
        margin-bottom: 0.5rem;
      }
      .welcome p {
        font-size: 0.85rem;
        max-width: 320px;
        line-height: 1.7;
      }
      .badge {
        display: inline-block;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 4px;
        letter-spacing: 0.06em;
      }
      .badge-running {
        background: rgba(91, 141, 239, 0.15);
        color: var(--blue);
      }
      .badge-failed {
        background: rgba(242, 107, 107, 0.12);
        color: var(--red);
      }
      .badge-ok {
        background: rgba(62, 207, 142, 0.12);
        color: var(--green);
      }
      .progress-bar-wrap {
        height: 3px;
        background: var(--border);
        border-radius: 99px;
        overflow: hidden;
        margin-top: 4px;
      }
      .progress-bar {
        height: 100%;
        border-radius: 99px;
        transition: width 0.5s ease;
      }
      /* ── Client list search + filter ── */
      .client-search-wrap {
        padding: 0.75rem 1rem 0.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .client-search-box {
        position: relative;
      }
      .client-search-box input {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 8px;
        padding: 8px 10px 8px 32px;
        color: var(--text);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.8rem;
        outline: none;
        transition: border-color 0.2s;
      }
      .client-search-box input:focus {
        border-color: var(--accent);
      }
      .client-search-box input::placeholder {
        color: var(--muted);
      }
      .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 0.8rem;
        pointer-events: none;
      }
      .search-clear {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 0.9rem;
        padding: 0 2px;
        line-height: 1;
        display: none;
      }
      .search-clear.visible {
        display: block;
      }
      .search-clear:hover {
        color: var(--text);
      }
      .platform-filter-row {
        display: flex;
        gap: 5px;
        align-items: center;
      }
      .pf-btn {
        flex: 1;
        padding: 4px 0;
        border: 1px solid var(--border2);
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        text-align: center;
      }
      .pf-btn:hover {
        color: var(--text2);
        border-color: var(--border);
      }
      .pf-btn.active-all {
        background: rgba(245, 166, 35, 0.1);
        border-color: var(--accent);
        color: var(--accent);
      }
      .pf-btn.active-mobile {
        background: rgba(91, 141, 239, 0.1);
        border-color: var(--blue);
        color: var(--blue);
      }
      .pf-btn.active-desktop {
        background: rgba(45, 212, 191, 0.1);
        border-color: var(--teal);
        color: var(--teal);
      }
      .pf-btn.active-both {
        background: rgba(167, 139, 250, 0.1);
        border-color: var(--purple);
        color: var(--purple);
      }
      .client-list-empty-filter {
        padding: 2rem 1rem;
        text-align: center;
        color: var(--muted);
        font-size: 0.82rem;
      }
      /* ── Platform picker ── */
      .platform-toggle {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }
      .platform-opt {
        display: none;
      }
      .platform-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 6px;
        border: 1px solid var(--border2);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s;
        background: var(--surface2);
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text2);
        text-align: center;
      }
      .platform-label:hover {
        border-color: var(--accent);
        color: var(--text);
      }
      .platform-opt:checked + .platform-label {
        border-color: var(--accent);
        background: rgba(245, 166, 35, 0.08);
        color: var(--accent);
      }
      .platform-label .pl-icon {
        font-size: 1.1rem;
      }
      /* platform badge on client card */
      .platform-badge {
        font-size: 0.65rem;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 4px;
        letter-spacing: 0.04em;
        font-family: "JetBrains Mono", monospace;
      }
      .pb-mobile {
        background: rgba(91, 141, 239, 0.12);
        color: var(--blue);
      }
      .pb-desktop {
        background: rgba(45, 212, 191, 0.1);
        color: var(--teal);
      }
      .pb-both {
        background: rgba(245, 166, 35, 0.1);
        color: var(--accent);
      }
      /* timezone picker */
      .tz-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }
      .tz-select-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
      }
      .tz-select-btn:hover .nav-clock-time {
        color: var(--accent);
      }
      .tz-badge {
        font-size: 0.6rem;
        font-family: "JetBrains Mono", monospace;
        font-weight: 700;
        color: var(--accent);
        background: rgba(245, 166, 35, 0.1);
        border: 1px solid rgba(245, 166, 35, 0.2);
        padding: 1px 5px;
        border-radius: 4px;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: background 0.15s;
      }
      .tz-badge:hover {
        background: rgba(245, 166, 35, 0.2);
      }
      .tz-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 200;
        background: var(--surface);
        border: 1px solid var(--border2);
        border-radius: 10px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
        padding: 0.5rem;
        display: none;
        min-width: 220px;
        max-height: 320px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      .tz-dropdown.open {
        display: block;
      }
      .tz-search {
        width: 100%;
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 6px;
        padding: 6px 10px;
        color: var(--text);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        outline: none;
        margin-bottom: 0.4rem;
      }
      .tz-search:focus {
        border-color: var(--accent);
      }
      .tz-group-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 4px 8px 2px;
      }
      .tz-option {
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        color: var(--text2);
        transition: background 0.12s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }
      .tz-option:hover {
        background: var(--surface2);
        color: var(--text);
      }
      .tz-option.active {
        background: rgba(245, 166, 35, 0.08);
        color: var(--accent);
      }
      .tz-option-offset {
        font-size: 0.65rem;
        color: var(--muted);
      }
      /* ── Schedule popup ── */
      .sched-popup-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 300;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(3px);
        align-items: center;
        justify-content: center;
      }
      .sched-popup-overlay.open {
        display: flex;
      }
      .sched-popup {
        background: var(--surface);
        border: 1px solid var(--border2);
        border-radius: 14px;
        width: min(540px, 95vw);
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      .sched-popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 1;
        gap: 0.75rem;
      }
      .sched-popup-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--purple);
        flex: 1;
      }
      .sched-tz-badge {
        font-size: 0.62rem;
        color: var(--accent);
        background: rgba(245, 166, 35, 0.08);
        border: 1px solid rgba(245, 166, 35, 0.2);
        border-radius: 6px;
        padding: 2px 8px;
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
      }
      .sched-popup-body {
        padding: 1.25rem;
      }
      .sched-popup-close {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1;
      }
      .sched-popup-close:hover {
        color: var(--text);
        background: var(--surface2);
      }
      /* ── History pagination ── */
      .history-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.6rem 1rem;
        border-top: 1px solid var(--border);
      }
      .pg-btn {
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 6px;
        color: var(--text2);
        cursor: pointer;
        padding: 4px 10px;
        font-size: 0.72rem;
        font-family: "JetBrains Mono", monospace;
        transition: all 0.15s;
      }
      .pg-btn:hover:not(:disabled) {
        border-color: var(--accent);
        color: var(--accent);
      }
      .pg-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }
      .pg-info {
        font-size: 0.7rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
      }
      /* ── Rich insights ── */
      .insights-section {
        padding: 1.25rem 1.5rem 0;
        border-top: 1px solid var(--border);
        max-height: 640px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      #insightsBody {
        padding-bottom: 1.5rem;
      }
      .insights-section::-webkit-scrollbar {
        width: 4px;
      }
      .insights-section::-webkit-scrollbar-track {
        background: transparent;
      }
      .insights-section::-webkit-scrollbar-thumb {
        background: var(--border2);
        border-radius: 99px;
      }
      .insights-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .insights-loading {
        color: var(--muted);
        font-size: 0.82rem;
        padding: 0.5rem 0;
      }
      .insights-group-label {
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 1rem 0 0.4rem;
      }
      /* ── Schedule popup ── */
      .sched-popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 200;
        display: none;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
      }
      .sched-popup-overlay.open {
        display: flex;
      }
      .sched-popup {
        background: var(--surface);
        border: 1px solid var(--border2);
        border-radius: 16px;
        width: min(560px, 95vw);
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
      }
      .sched-popup-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
      }
      .sched-popup-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text);
      }
      .sched-popup-tz {
        font-size: 0.65rem;
        color: var(--accent);
        font-family: "JetBrains Mono", monospace;
        background: rgba(245, 166, 35, 0.08);
        border: 1px solid rgba(245, 166, 35, 0.2);
        padding: 2px 8px;
        border-radius: 4px;
      }
      .sched-popup-close {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        padding: 2px 6px;
        border-radius: 4px;
        transition: color 0.15s;
      }
      .sched-popup-close:hover {
        color: var(--text);
      }
      .sched-popup-body {
        padding: 1.25rem 1.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
      }
      /* ── History pagination ── */
      .history-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.65rem 1rem;
        border-top: 1px solid var(--border);
        font-size: 0.75rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
      }
      .history-pagination-btns {
        display: flex;
        gap: 4px;
      }
      .pg-btn {
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 6px;
        color: var(--text2);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        padding: 4px 10px;
        cursor: pointer;
        transition: all 0.15s;
      }
      .pg-btn:hover:not(:disabled) {
        background: var(--surface3);
        color: var(--text);
      }
      .pg-btn.active {
        background: rgba(245, 166, 35, 0.12);
        border-color: var(--accent);
        color: var(--accent);
      }
      .pg-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      /* ── Rich insights ── */
      .insight-item {
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 0.4rem;
        overflow: hidden;
        transition: border-color 0.15s;
      }
      .insight-item:hover {
        border-color: var(--border2);
      }
      .insight-tag {
        display: inline-block;
        font-size: 0.6rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border2);
        border-radius: 3px;
        padding: 1px 5px;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        margin-right: 3px;
      }
      .insight-item:hover {
        border-color: var(--border2);
      }
      .insight-item-trigger {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 0.9rem;
        cursor: pointer;
        user-select: none;
        transition: background 0.12s;
      }
      .insight-item-trigger:hover {
        background: rgba(255, 255, 255, 0.02);
      }
      .insight-chevron {
        font-size: 0.65rem;
        color: var(--muted);
        transition: transform 0.2s;
        flex-shrink: 0;
        margin-left: auto;
      }
      .insight-item.open .insight-chevron {
        transform: rotate(90deg);
      }
      .insight-item-body {
        display: none;
        border-top: 1px solid var(--border);
        padding: 0.75rem 0.9rem 0.85rem;
      }
      .insight-item.open .insight-item-body {
        display: block;
      }

      .insight-node-snip {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.65rem;
        color: var(--text2);
        background: var(--surface3);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 4px 7px;
        margin-top: 3px;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 60px;
        overflow: hidden;
      }
      .insight-url {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        word-break: break-all;
        color: var(--blue);
      }
      .insight-item-header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.65rem 0.9rem;
        cursor: pointer;
        transition: background 0.12s;
        user-select: none;
      }
      .insight-item-header:hover {
        background: var(--surface3);
      }
      .insight-score-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .insight-title {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text);
        flex: 1;
      }
      .insight-savings {
        font-size: 0.72rem;
        color: var(--accent);
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
      }
      .insight-chevron {
        font-size: 0.65rem;
        color: var(--muted);
        transition: transform 0.2s;
        flex-shrink: 0;
      }
      .insight-item.open .insight-chevron {
        transform: rotate(90deg);
      }
      .insight-body {
        display: none;
        padding: 0 0.9rem 0.85rem;
        border-top: 1px solid var(--border);
      }
      .insight-item.open .insight-body {
        display: block;
      }
      .insight-desc {
        font-size: 0.75rem;
        color: var(--muted);
        line-height: 1.55;
        padding: 0.5rem 0 0.35rem;
      }
      .insight-display-val {
        font-size: 0.75rem;
        color: var(--accent);
        font-family: "JetBrains Mono", monospace;
        padding: 0.15rem 0 0.35rem;
        font-weight: 600;
      }
      .insight-table-wrap {
        overflow-x: auto;
        margin-top: 0.35rem;
        width: 100%;
      }
      .insight-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 0.72rem;
      }
      .insight-table th {
        text-align: left;
        color: var(--muted);
        font-weight: 700;
        letter-spacing: 0.05em;
        padding: 5px 8px;
        border-bottom: 1px solid var(--border);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.62rem;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .insight-table th:first-child {
        width: 50%;
      }
      .insight-table td {
        padding: 5px 8px;
        border-bottom: 1px solid var(--border);
        color: var(--text2);
        vertical-align: top;
        overflow: hidden;
        max-width: 0;
      }
      .insight-table tr:last-child td {
        border-bottom: none;
      }
      .insight-table tr:hover td {
        background: rgba(255, 255, 255, 0.02);
      }
      .insight-td-url {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        color: var(--blue);
      }
      .insight-td-num {
        text-align: right;
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
        color: var(--text);
      }
      .insight-td-savings {
        text-align: right;
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
        color: var(--accent);
      }
      .insight-node-snippet {
        font-size: 0.68rem;
        color: var(--text2);
        font-family: monospace;
        background: var(--surface3);
        border-radius: 4px;
        padding: 3px 7px;
        margin-top: 4px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        border: 1px solid var(--border);
      }
      .insights-empty {
        font-size: 0.8rem;
        color: var(--green);
        padding: 0.4rem 0;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      /* scrollable history panel */
      .history-scroll {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      .history-scroll::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
      .history-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .history-scroll::-webkit-scrollbar-thumb {
        background: var(--border2);
        border-radius: 99px;
      }
      /* history pagination */
      .history-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--border);
        flex-wrap: wrap;
      }
      .hist-pg-btn {
        background: var(--surface2);
        border: 1px solid var(--border2);
        border-radius: 6px;
        color: var(--text2);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        padding: 4px 9px;
        cursor: pointer;
        transition: all 0.15s;
        min-width: 30px;
        text-align: center;
      }
      .hist-pg-btn:hover:not(:disabled) {
        background: var(--surface3);
        border-color: var(--border);
        color: var(--text);
      }
      .hist-pg-btn.active {
        background: rgba(245, 166, 35, 0.1);
        border-color: var(--accent);
        color: var(--accent);
      }
      .hist-pg-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }
      .hist-pg-info {
        font-size: 0.7rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        padding: 0 6px;
      }
      /* delete audit btn */
      .btn-del-audit {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 0.8rem;
        padding: 2px 5px;
        border-radius: 4px;
        transition: all 0.15s;
        line-height: 1;
      }
      .btn-del-audit:hover {
        color: var(--red);
        background: rgba(242, 107, 107, 0.1);
      }
      /* locked FF toggle */
      .ff-btn.locked {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
      }
      @media (max-width: 1050px) {
        .cwv-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 900px) {
        main {
          grid-template-columns: 1fr;
        }
        .score-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .preset-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .cal-popup {
          min-width: unset;
          width: calc(100vw - 2rem);
        }
        .cal-popup-months {
          grid-template-columns: 1fr;
        }
      }
      /* backup panel */
      .backup-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 420px;
        background: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 300;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .backup-panel.open {
        transform: translateX(0);
      }
      .backup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 299;
        display: none;
      }
      .backup-overlay.open {
        display: block;
      }
      .backup-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .backup-panel-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text);
      }
      .backup-panel-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      .backup-section-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 0.6rem;
      }
      .backup-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .backup-file-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-top: 0.25rem;
      }
      .backup-file-item {
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.6rem 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }
      .backup-file-name {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.68rem;
        color: var(--text2);
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .backup-file-size {
        font-size: 0.65rem;
        color: var(--muted);
        white-space: nowrap;
      }
      .backup-file-actions {
        display: flex;
        gap: 0.3rem;
        flex-shrink: 0;
      }
      .backup-empty {
        font-size: 0.8rem;
        color: var(--muted);
        padding: 0.5rem 0;
      }
      .backup-info {
        font-size: 0.76rem;
        color: var(--muted);
        line-height: 1.6;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem 0.9rem;
      }
      .backup-info b {
        color: var(--text2);
      }
      .backup-upload-zone {
        border: 2px dashed var(--border2);
        border-radius: 10px;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      .backup-upload-zone:hover,
      .backup-upload-zone.drag {
        border-color: var(--accent);
        background: rgba(245, 166, 35, 0.04);
      }
      .backup-upload-zone input {
        display: none;
      }
      .backup-upload-icon {
        font-size: 1.75rem;
        margin-bottom: 0.4rem;
      }
      .backup-upload-text {
        font-size: 0.8rem;
        color: var(--muted);
        line-height: 1.5;
      }
      .backup-upload-text b {
        color: var(--text2);
      }
      .backup-restore-progress {
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem 0.9rem;
        font-size: 0.76rem;
        color: var(--text2);
        display: none;
      }
      .backup-restore-progress.show {
        display: block;
      }

      /* ── Pages Overview ──────────────────────────────────────────── */
      .pages-overview-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .pages-header-info { flex: 1; min-width: 0; }
      .pages-header-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .pages-header-url {
        font-size: 0.75rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .pages-header-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-shrink: 0;
      }
      .pages-section-header {
        padding: 1rem 1.5rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .pages-section-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .pages-search-input {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 6px; color: var(--text); font-size: .76rem;
        padding: 4px 10px; outline: none; width: 180px;
      }
      .pages-search-input:focus { border-color: rgba(167,139,250,.5); }
      .pages-search-input::placeholder { color: var(--muted); }
      .pages-pagination {
        display: flex; align-items: center; justify-content: center;
        gap: .75rem; padding: .75rem 1.5rem 1.25rem; font-size: .76rem; color: var(--muted);
      }
      .pages-pagination button {
        background: var(--surface2); border: 1px solid var(--border);
        color: var(--text2); border-radius: 5px; padding: 3px 10px;
        cursor: pointer; font-size: .74rem;
      }
      .pages-pagination button:hover:not(:disabled) { border-color: rgba(167,139,250,.5); color: var(--accent); }
      .pages-pagination button:disabled { opacity: .35; cursor: default; }
      .mobile-switch-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0 .25rem; }
      .mobile-switch-label { font-size:.8rem; color:var(--text2); }
      .mobile-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
      .mobile-switch input { opacity:0; width:0; height:0; }
      .mobile-switch-slider {
        position:absolute; inset:0; background:var(--border2); border-radius:20px; cursor:pointer; transition:.2s;
      }
      .mobile-switch-slider::before {
        content:""; position:absolute; height:14px; width:14px; left:3px; bottom:3px;
        background:#fff; border-radius:50%; transition:.2s;
      }
      .mobile-switch input:checked + .mobile-switch-slider { background:var(--accent); }
      .mobile-switch input:checked + .mobile-switch-slider::before { transform:translateX(16px); }
      .ff-filter-btn {
        background:var(--surface2); border:1px solid var(--border); color:var(--muted);
        border-radius:5px; padding:3px 10px; cursor:pointer; font-size:.72rem;
      }
      .ff-filter-btn.active { border-color:rgba(167,139,250,.5); color:var(--accent); background:rgba(167,139,250,.08); }
      main.client-view .right-panel { max-width: 1400px; margin: 0 auto; }
      .page-detail-wrap { padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
      /* ── Client portal ─────────────────────────────────────────────────────── */
      body.client-mode .sidebar { display: none !important; }
      body.client-mode main { margin-left: 0 !important; padding: 0; }
      .cp-portal { padding: 2rem 2.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
      .cp-hero { margin-bottom: 2rem; }
      .cp-client-name { font-family:"JetBrains Mono",monospace; font-size:1.25rem; font-weight:700; color:var(--text); letter-spacing:.02em; margin-bottom:3px; }
      .cp-client-url { font-size:.78rem; color:var(--muted); }
      .cp-stat-row { display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
      .cp-stat-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:1rem 1.4rem; flex:1; min-width:120px; }
      .cp-stat-val { font-family:"JetBrains Mono",monospace; font-size:1.6rem; font-weight:700; line-height:1; margin-bottom:5px; }
      .cp-stat-label { font-size:.63rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
      .cp-section-label { font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; }
      .cp-pages-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-bottom:2rem; }
      .cp-page-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.25rem; cursor:pointer; transition:border-color .15s,background .15s; display:flex; flex-direction:column; gap:.75rem; }
      .cp-page-card:hover { border-color:var(--border2); background:var(--surface2); }
      .cp-page-card.is-down { border-color:rgba(242,107,107,0.6); border-width:2px; background:rgba(242,107,107,0.04); }
      .cp-page-card.is-down:hover { background:rgba(242,107,107,0.08); }
      .cp-page-card-header { display:flex; align-items:center; gap:8px; }
      .cp-page-name { font-size:.9rem; font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .cp-page-url { font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .cp-scores-row { display:flex; gap:.5rem; }
      .cp-score-item { flex:1; text-align:center; background:var(--surface2); border-radius:7px; padding:.45rem .25rem; border:1px solid var(--border); }
      .cp-score-val { font-family:"JetBrains Mono",monospace; font-size:.95rem; font-weight:700; line-height:1; }
      .cp-score-key { font-size:.55rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
      .cp-page-footer { display:flex; gap:.75rem; font-size:.7rem; color:var(--muted); flex-wrap:wrap; border-top:1px solid var(--border); padding-top:.6rem; }
      .cp-no-pages { color:var(--muted); font-size:.85rem; text-align:center; padding:3rem; }
      .cp-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; flex-wrap:wrap; }
      .cp-hero-main { display:flex; flex-direction:column; gap:4px; }
      .cp-hero-right { display:flex; align-items:flex-start; gap:.6rem; flex-shrink:0; }
      .cp-ai-btn { background:rgba(167,139,250,.08); border:1px solid rgba(167,139,250,.25); border-radius:8px; padding:.45rem 1rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; color:var(--accent); font-size:.8rem; font-weight:700; font-family:inherit; transition:background .15s; white-space:nowrap; }
      .cp-ai-btn:hover { background:rgba(167,139,250,.18); }
      /* Content card — used for pages + downtime sections */
      .cp-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:1.25rem; }
      .cp-card-header { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1.1rem; background:var(--surface3); border-bottom:1px solid var(--border); }
      .cp-card-header-left { display:flex; align-items:center; gap:.5rem; font-family:"JetBrains Mono",monospace; font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
      .cp-card-count { opacity:.6; font-weight:400; }
      /* Pages list table */
      .cp-client-table { width:100%; border-collapse:collapse; table-layout:fixed; }
      .cp-client-table thead th { padding:.5rem 1rem; font-size:.62rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
      .cp-client-table thead th.tc { text-align:center; width:52px; }
      .cp-client-table thead th.tw { width:80px; }
      .cp-client-table tbody tr { cursor:pointer; }
      .cp-client-table tbody tr:hover td { background:var(--surface3); }
      .cp-client-table tbody td { padding:.65rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; overflow:hidden; }
      .cp-client-table tbody tr:last-child td { border-bottom:none; }
      .cp-cell-name { font-size:.84rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .cp-cell-url { font-size:.65rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
      .cp-cell-score { font-family:"JetBrains Mono",monospace; font-size:.85rem; font-weight:700; text-align:center; }
      /* Pages grid in card mode */
      .cp-pages-grid-wrap { padding:.85rem; }
      /* Downtime card — cpDowntimeLog is styled directly */
      .cp-portal #cpDowntimeLog { background:var(--surface2); border:1px solid var(--border); border-radius:10px; margin-bottom:1.25rem; }
      .cp-portal .dl-section { margin:0; }
      .cp-portal #cpDowntimeLog .dl-header { background:var(--surface3); border-bottom:1px solid var(--border); border-radius:10px 10px 0 0; padding:.65rem 1.1rem; margin:0; }
      .cp-portal #cpDowntimeLog .dl-empty { padding:1.25rem; text-align:center; font-size:.8rem; color:var(--muted); }
      .cp-portal #cpDowntimeLog #cpDlBody { padding:.5rem .75rem; }
      .cp-portal #cpDowntimeLog .dl-client-block { margin-bottom:0; }
      .cp-portal #cpDowntimeLog .dl-group { margin-bottom:4px; }
      .cp-portal #cpDowntimeLog .dl-group:last-child { margin-bottom:0; }
      .skeleton { background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
      @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
      /* client logout button in header */
      .client-header-bar { display:none; align-items:center; gap:10px; }
      body.client-mode .client-header-bar { display:flex; margin-left:0; }
      body.client-mode .tz-wrap { display:none; }
      /* client portal tab nav injected into the main header */
      body.client-mode .client-header-bar { margin-left:auto; }
      .cp-header-nav {
        display:none; align-items:center; height:100%;
        gap:0; margin-left:28px;
      }
      #cpHeaderAi { display:none; align-items:center; margin-right:8px; }
      /* cp2-tab inside the main header: full height so underline hits the bottom */
      .cp-header-nav .cp2-tab { height:100%; }
      .client-header-user { font-size:.75rem; color:var(--text2); font-family:"JetBrains Mono",monospace; }
      .pages-grid {
        display: flex;
        flex-direction: column;
        padding: 0 0 0.5rem;
      }
      .ai-summary-card {
        background: var(--surface2);
        border: 1px solid rgba(167,139,250,.3);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 1rem;
      }
      .ai-summary-header {
        background: linear-gradient(90deg, rgba(167,139,250,.08), transparent);
        border-bottom: 1px solid rgba(167,139,250,.15);
        padding: .6rem 1rem;
        display: flex; align-items: center; gap: .5rem;
      }
      .ai-summary-icon { color: var(--accent); font-size: .95rem; flex-shrink:0; }
      .ai-summary-title { color: var(--accent); font-weight: 700; font-size: .82rem; flex: 1; }
      .ai-summary-meta { font-size: .68rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .ai-summary-regen {
        background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.25);
        color: var(--accent); padding: 2px 9px; border-radius: 4px;
        font-size: .72rem; cursor: pointer; font-family: 'JetBrains Mono', monospace;
      }
      .ai-summary-regen:hover { background: rgba(167,139,250,.25); }
      .ai-summary-regen:disabled { opacity: .5; cursor: not-allowed; }
      .ai-summary-body { padding: .85rem 1rem; }
      /* ── AI Summary slide-in panel ───────────────────────────────── */
      .ai-panel-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.4); z-index: 499;
      }
      .ai-panel-overlay.open { display: block; }
      .ai-panel {
        position: fixed; top: 0; right: 0;
        width: min(700px, 100vw); height: 100vh;
        background: var(--surface); border-left: 1px solid var(--border);
        z-index: 500; display: flex; flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
      }
      .ai-panel.open { transform: translateX(0); }
      .ai-panel-topbar {
        display: flex; align-items: center; gap: 8px;
        padding: .6rem .9rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
      }
      .ai-panel-body {
        flex: 1; overflow-y: auto; padding: .75rem 1rem;
        scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
      }
      .ai-summary-text { color: var(--text2); font-size: .83rem; line-height: 1.65; margin-bottom: .75rem; }
      .ai-summary-empty { padding: .85rem 1rem; color: var(--muted); font-size: .82rem; }
      .ai-summary-loading { padding: .85rem 1rem; display: flex; align-items: center; gap: .5rem; }
      .ai-summary-loading-text { color: var(--muted); font-size: .82rem; }
      /* ── Action items ── */
      .ai-action-list { display: flex; flex-direction: column; gap: 6px; margin-top: .75rem; }
      .ai-action-item {
        background: var(--surface); border-radius: 7px; overflow: hidden;
        border: 1px solid rgba(255,255,255,.06);
      }
      .ai-action-item.resolved { opacity: .45; }
      .ai-action-header {
        display: flex; align-items: center; gap: 8px;
        padding: 7px 10px; cursor: pointer; user-select: none;
      }
      .ai-action-header:hover { background: rgba(255,255,255,.03); }
      .ai-pri-badge {
        font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 3px;
        text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
      }
      .ai-pri-critical { background: rgba(239,68,68,.18); color: #ef4444; }
      .ai-pri-high     { background: rgba(245,158,11,.18); color: #f59e0b; }
      .ai-pri-medium   { background: rgba(96,165,250,.18); color: #60a5fa; }
      .ai-pri-low      { background: rgba(148,163,184,.12); color: #94a3b8; }
      .ai-cat-badge {
        font-size: .62rem; color: var(--muted); background: rgba(255,255,255,.05);
        padding: 1px 6px; border-radius: 3px; flex-shrink: 0; text-transform: capitalize;
      }
      .ai-action-title { font-size: .8rem; font-weight: 600; color: var(--text); flex: 1; }
      .ai-action-body {
        padding: 0 10px 10px 10px; font-size: .78rem; color: var(--text2);
        line-height: 1.55; display: none;
      }
      .ai-action-body.open { display: block; }
      .ai-action-rec {
        margin-top: 6px; padding: 6px 9px; background: rgba(167,139,250,.07);
        border-left: 2px solid rgba(167,139,250,.4); border-radius: 3px;
        color: var(--text); font-size: .77rem;
      }
      .ai-action-rec-label { font-size: .65rem; text-transform: uppercase; color: var(--accent); letter-spacing: .06em; margin-bottom: 3px; }
      .ai-audit-refs { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.06); }
      .ai-audit-refs summary { list-style: none; }
      .ai-audit-refs summary::-webkit-details-marker { display: none; }
      .ai-audit-refs-title {
        font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
        color: var(--muted); margin-bottom: .45rem; cursor: pointer;
        display: inline-flex; align-items: center; gap: 5px; user-select: none;
      }
      .ai-audit-refs-title::after { content: '▾'; font-size: .75rem; transition: transform .15s; }
      details.ai-audit-refs[open] .ai-audit-refs-title::after { transform: rotate(-180deg); }
      html[data-theme="light"] .ai-audit-refs { border-top-color: var(--border); }
      .ai-audit-ref-item {
        display: flex; align-items: center; gap: 8px;
        padding: 4px 6px; border-radius: 5px; font-size: .76rem;
      }
      .ai-audit-ref-item:hover { background: rgba(255,255,255,.03); }
      .ai-audit-ref-name { font-weight: 600; color: var(--text); flex: 1; cursor: pointer; }
      .ai-audit-ref-name:hover { color: var(--accent); }
      .ai-audit-ref-meta { font-size: .68rem; color: var(--muted); white-space: nowrap; }
      .ai-audit-ref-btn {
        font-size: .66rem; padding: 2px 8px; border-radius: 4px;
        background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.2);
        color: #a78bfa; cursor: pointer; white-space: nowrap; flex-shrink: 0;
      }
      .ai-audit-ref-btn:hover { background: rgba(167,139,250,.22); border-color: rgba(167,139,250,.45); }
      .ai-audit-ref-btn:disabled { opacity: .4; cursor: default; }
      .ai-action-pages { margin-top: 9px; }
      .ai-action-pages-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; display: block; }
      .ai-pages-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
      .ai-pages-table tr { border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .12s; }
      .ai-pages-table tr:last-child { border-bottom: none; }
      .ai-pages-table tr:hover { background: rgba(167,139,250,.07); }
      .ai-pages-table td { padding: 5px 6px; }
      .ai-pages-table td:first-child { color: #a78bfa; font-weight: 500; white-space: nowrap; padding-right: 12px; }
      .ai-pages-table td:last-child { color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
      .cat-perf { color: #f87171; }
      .cat-a11y { color: #60a5fa; }
      .cat-seo  { color: #34d399; }
      .cat-bp   { color: #fbbf24; }
      /* ── Page card (card view) ───────────────────────────────────── */
      .page-card {
        padding: .7rem 1.25rem;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        transition: background .12s;
      }
      .page-card:last-child { border-bottom: none; }
      .page-card:hover { background: var(--surface2); }
      .page-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: 2px;
      }
      .page-card-title-row {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        flex: 1;
      }
      .page-card-name {
        font-size: .84rem;
        font-weight: 700;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .page-name-edit-btn {
        background: transparent; border: none; color: var(--muted);
        cursor: pointer; font-size: .72rem; padding: 0 2px;
        opacity: 0; transition: opacity .15s; flex-shrink: 0; line-height: 1;
      }
      .page-card:hover .page-name-edit-btn { opacity: 1; }
      .plist-row:hover .page-name-edit-btn { opacity: 1; }
      .page-name-input {
        background: var(--surface); border: 1px solid var(--accent);
        color: var(--text); border-radius: 4px; padding: 1px 6px;
        font-size: .84rem; font-weight: 700; width: 100%; outline: none;
        font-family: inherit;
      }
      .page-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
      .page-card-sub {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: 5px;
      }
      .page-card-url {
        font-size: .67rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }
      .page-uptime-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }
      .page-card-spark-row { margin-bottom: 5px; }
      .page-card-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
      }
      .page-card-scores { display: flex; gap: 4px; flex-shrink: 0; }
      .page-score-item {
        background: var(--surface);
        border-radius: 4px;
        padding: 2px 7px;
        display: flex;
        align-items: center;
        gap: 3px;
      }
      .page-score-label {
        font-size: .56rem;
        color: var(--muted);
        text-transform: uppercase;
        font-family: "JetBrains Mono", monospace;
        letter-spacing: .04em;
      }
      .page-score-val {
        font-size: .76rem;
        font-weight: 700;
        font-family: "JetBrains Mono", monospace;
      }
      .page-last-audited {
        font-size: .63rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .page-card-btns { display: flex; gap: 4px; flex-shrink: 0; }
      /* uptime atoms */
      .uptime-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
        display: inline-block;
      }
      .uptime-dot.up      { background: var(--green); }
      .uptime-dot.down    { background: var(--red); box-shadow: 0 0 0 2px rgba(242,107,107,.22); animation: pulse 1.5s infinite; }
      .uptime-dot.unknown { background: var(--border2); }
      .uptime-pct-badge {
        font-family: "JetBrains Mono", monospace;
        font-size: .62rem;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 4px;
        background: rgba(62,207,142,.1);
        color: var(--green);
        white-space: nowrap;
      }
      .uptime-pct-badge.warn { background: rgba(251,146,60,.1); color: var(--orange); }
      .uptime-pct-badge.crit { background: rgba(242,107,107,.1); color: var(--red); }
      .uptime-ms-label {
        font-family: "JetBrains Mono", monospace;
        color: var(--muted);
        font-size: .62rem;
        white-space: nowrap;
      }
      /* sparkline */
      .uptime-sparkline { display: flex; align-items: flex-end; gap: 1px; }
      .spark-blk { width: 3px; height: 14px; border-radius: 1px; flex-shrink: 0; }
      .spark-up   { background: var(--green); opacity: .65; }
      .spark-down { background: var(--red); }
      .spark-unknown { background: var(--border2); }
      .uptime-spark-empty { font-size: .63rem; color: var(--border2); font-family: "JetBrains Mono", monospace; }
      /* view toggle */
      .pages-view-toggle { display: flex; gap: 2px; }
      .pages-view-btn {
        background: none;
        border: 1px solid var(--border);
        color: var(--muted);
        border-radius: 5px;
        padding: 3px 7px;
        cursor: pointer;
        display: flex;
        align-items: center;
        line-height: 1;
        transition: color .12s, background .12s;
      }
      .pages-view-btn.active { border-color: rgba(167,139,250,.4); color: var(--accent); background: rgba(167,139,250,.06); }
      .pages-view-btn:hover:not(.active) { color: var(--text); }
      /* list / table view */
      .pages-list-table { width: 100%; border-collapse: collapse; }
      .pages-list-table thead th {
        padding: .35rem .75rem;
        text-align: left;
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }
      .pages-list-table thead th.th-center { text-align: center; }
      .plist-row { cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; }
      .plist-row:hover { background: var(--surface2); }
      .plist-row:last-child { border-bottom: none; }
      .plist-row td { padding: .5rem .75rem; vertical-align: middle; }
      .plist-status { width: 20px; }
      .plist-name { min-width: 140px; max-width: 220px; }
      .plist-url {
        font-size: .62rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
      }
      .plist-uptime { min-width: 120px; }
      .plist-uptime-inner { display: flex; align-items: center; gap: 6px; }
      .plist-ms { font-size: .7rem; font-family: "JetBrains Mono", monospace; color: var(--muted); white-space: nowrap; }
      .plist-score { font-size: .76rem; font-weight: 700; font-family: "JetBrains Mono", monospace; text-align: center; width: 38px; }
      .plist-last { font-size: .63rem; color: var(--muted); font-family: "JetBrains Mono", monospace; white-space: nowrap; }
      .plist-acts { width: 56px; }
      .plist-acts-inner { display: flex; gap: 4px; }
      .btn-page-audit {
        background: rgba(245, 166, 35, 0.1);
        border: 1px solid rgba(245, 166, 35, 0.3);
        color: var(--accent);
        border-radius: 6px;
        padding: 3px 9px;
        font-size: 0.7rem;
        cursor: pointer;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
        transition: background 0.15s;
      }
      .btn-page-audit:hover { background: rgba(245, 166, 35, 0.22); }
      .btn-page-audit:disabled { opacity: 0.4; cursor: not-allowed; }
      .btn-page-pin {
        background: none; border: 1px solid var(--border2); color: var(--muted);
        border-radius: 5px; padding: 3px 6px; font-size: .7rem; cursor: pointer; transition: all 0.15s; line-height:1;
      }
      .btn-page-pin:hover { color: var(--accent); border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.06); }
      .btn-page-pin.pinned { color: var(--accent); border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.08); }
      .btn-page-del {
        background: none;
        border: 1px solid var(--border2);
        color: var(--muted);
        border-radius: 6px;
        padding: 3px 7px;
        font-size: 0.7rem;
        cursor: pointer;
        transition: all 0.15s;
      }
      .btn-page-del:hover {
        color: var(--red);
        border-color: rgba(242, 107, 107, 0.4);
        background: rgba(242, 107, 107, 0.06);
      }
      .pages-empty {
        padding: 2.5rem 1.5rem;
        text-align: center;
        color: var(--muted);
        font-size: 0.85rem;
        line-height: 1.7;
      }
      .pages-empty .big-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
      /* Add page inline form */
      .add-page-form {
        border-top: 1px solid var(--border);
        padding: 0.875rem 1.5rem;
        display: none;
        flex-direction: column;
        gap: 0.75rem;
        animation: fadeInDown 0.15s ease;
      }
      .add-page-form.open { display: flex; }
      @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .add-page-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 8px;
        align-items: end;
      }
      .add-page-form-row .field { margin: 0; }
      /* Back-to-pages button inside detail panel */
      .page-back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--muted);
        cursor: pointer;
        font-size: 0.78rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        width: 100%;
        text-align: left;
        transition: color 0.15s, background 0.15s;
      }
      .page-back-btn:hover { color: var(--text); background: var(--surface2); }

      /* ── Login screen ─────────────────────────────────────────────── */
      .login-screen {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #07090c;
        align-items: center;
        justify-content: center;
        font-family: 'Geist', 'Inter', sans-serif;
      }
      .login-screen::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(245,166,35,0.06) 0%, transparent 70%);
        pointer-events: none;
      }
      .login-screen.show { display: flex; }

      .login-card {
        position: relative;
        z-index: 1;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        padding: 2.75rem 2.5rem 2.5rem;
        width: 400px;
        max-width: 92vw;
        box-shadow: 0 24px 80px rgba(0,0,0,0.6);
      }

      .login-brand {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 1.75rem;
      }
      .login-brand-square {
        width: 48px; height: 48px;
        background: #f5a623;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
      }
      .login-brand-text { display: flex; flex-direction: column; gap: 2px; }
      .login-brand-name {
        font-family: "JetBrains Mono", monospace;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        color: rgba(255,255,255,0.92);
        text-transform: uppercase;
        line-height: 1;
      }
      .login-brand-sub {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        color: rgba(255,255,255,0.35);
        text-transform: uppercase;
      }

      .login-divider {
        height: 1px;
        background: rgba(255,255,255,0.07);
        margin-bottom: 1.75rem;
      }

      .login-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 1rem;
      }
      .login-field label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.4);
      }
      .login-field input {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 9px;
        padding: 0.72rem 1rem;
        color: rgba(255,255,255,0.9);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.88rem;
        outline: none;
        transition: border-color 0.2s, background 0.2s;
        width: 100%;
        box-sizing: border-box;
      }
      .login-field input::placeholder { color: rgba(255,255,255,0.2); }
      .login-field input:focus {
        border-color: rgba(245,166,35,0.5);
        background: rgba(245,166,35,0.04);
      }

      .login-btn {
        width: 100%;
        margin-top: 1.5rem;
        padding: 0.82rem;
        background: #f5a623;
        border: none;
        border-radius: 9px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #07090c;
        cursor: pointer;
        transition: opacity 0.15s, transform 0.1s;
      }
      .login-btn:hover { opacity: 0.9; }
      .login-btn:active { transform: scale(0.99); }
      .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

      .login-error {
        background: rgba(242,107,107,0.08);
        border: 1px solid rgba(242,107,107,0.3);
        border-radius: 8px;
        padding: 0.65rem 1rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.75rem;
        color: #f26b6b;
        margin-bottom: 1rem;
        display: none;
        letter-spacing: 0.03em;
      }

      /* ── Header user pill ─────────────────────────────────────────── */
      .user-pill {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 4px 10px 4px 8px;
        font-size: 0.72rem;
        color: var(--text2);
        font-family: "JetBrains Mono", monospace;
      }
      .user-pill-role {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 1px 5px;
        border-radius: 4px;
        background: rgba(245,166,35,0.12);
        color: var(--accent);
        border: 1px solid rgba(245,166,35,0.25);
      }
      .user-pill-role.role-client {
        background: rgba(91,141,239,0.12);
        color: var(--blue);
        border-color: rgba(91,141,239,0.25);
      }

      /* ── User management panel ────────────────────────────────────── */
      .users-panel {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 460px;
        background: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 300;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
      }
      .users-panel.open { transform: translateX(0); }
      .users-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 299;
        display: none;
      }
      .users-overlay.open { display: block; }
      .users-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .users-panel-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .users-panel-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        scrollbar-width: thin;
        scrollbar-color: var(--border2) transparent;
      }
      /* ── User management ───────────────────────────────────────── */
      .usr-toolbar {
        display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
      }
      .usr-search {
        flex: 1; background: var(--surface2); border: 1px solid var(--border2);
        border-radius: 8px; padding: .45rem .85rem; color: var(--text);
        font-family: inherit; font-size: .82rem; outline: none;
        transition: border-color .15s;
      }
      .usr-search:focus { border-color: var(--accent); }

      .user-row {
        display: flex; align-items: center; gap: 1rem;
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .6rem;
        transition: border-color .15s;
      }
      .user-row:hover { border-color: var(--border2); }
      .usr-avatar {
        width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
        background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.18);
        display: flex; align-items: center; justify-content: center;
        font-family: "JetBrains Mono", monospace; font-size: .78rem;
        font-weight: 700; color: var(--accent); letter-spacing: .05em;
      }
      .user-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
      .user-row-name {
        font-size: 0.9rem; font-weight: 600; color: var(--text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        line-height: 1.2;
      }
      .usr-meta-row {
        display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
        font-size: 0.72rem; color: var(--muted);
        font-family: "JetBrains Mono", monospace; line-height: 1.3;
      }
      .usr-meta-email {
        color: var(--text2); overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; max-width: 200px;
      }
      .usr-role-badge {
        display: inline-block; padding: 1px 6px; border-radius: 4px;
        font-size: .65rem; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; font-family: "JetBrains Mono", monospace;
      }
      .usr-role-admin {
        background: rgba(245,166,35,.12); color: var(--accent);
        border: 1px solid rgba(245,166,35,.25);
      }
      .usr-role-client {
        background: rgba(91,141,239,.1); color: var(--blue);
        border: 1px solid rgba(91,141,239,.25);
      }
      .usr-2fa-badge {
        font-family: "JetBrains Mono", monospace; font-size: .6rem;
        font-weight: 700; letter-spacing: .08em;
        background: rgba(62,207,142,.1); color: var(--green);
        border: 1px solid rgba(62,207,142,.25); border-radius: 4px;
        padding: 2px 6px;
      }
      .usr-menu-wrap { position: relative; }
      .usr-menu-btn {
        background: none; border: 1px solid var(--border2); border-radius: 7px;
        color: var(--muted); cursor: pointer; padding: 4px 10px;
        font-size: .85rem; line-height: 1; transition: all .15s;
      }
      .usr-menu-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface3); }
      .usr-menu {
        display: none; position: absolute; right: 0; top: calc(100% + 6px);
        background: var(--surface); border: 1px solid var(--border2);
        border-radius: 10px; min-width: 160px; z-index: 200;
        box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 4px;
        flex-direction: column;
      }
      .usr-menu.open { display: flex; }
      .usr-menu button {
        background: none; border: none; text-align: left; padding: .46rem .75rem;
        border-radius: 7px; color: var(--text2); font-size: .8rem;
        font-family: inherit; cursor: pointer; transition: all .12s; width: 100%;
      }
      .usr-menu button:hover { background: var(--surface2); color: var(--text); }
      .usr-menu button.danger { color: var(--red); }
      .usr-menu button.danger:hover { background: rgba(242,107,107,.08); }
      .usr-menu-sep { height: 1px; background: var(--border); margin: 3px 6px; }

      /* ── AI Settings panel ───────────────────────────────────────── */
      .ai-settings-panel {
        position: fixed;
        top: 0; right: -480px;
        width: 480px; height: 100vh;
        background: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 1001;
        display: flex; flex-direction: column;
        transition: right .25s ease;
        overflow-y: auto;
      }
      .ai-settings-panel.open { right: 0; }

      /* ── API Settings panel ──────────────────────────────────────────── */
      .api-settings-panel {
        position: fixed;
        top: 0; right: -480px;
        width: 480px; height: 100vh;
        background: var(--surface);
        border-left: 1px solid var(--border);
        z-index: 1001;
        display: flex; flex-direction: column;
        transition: right .25s ease;
        overflow: hidden;
      }
      .api-settings-panel.open { right: 0; }
      .api-settings-panel-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1.25rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
        position: sticky; top: 0; z-index: 1; flex-shrink: 0;
      }
      .api-settings-panel-title { font-size: .88rem; font-weight: 700; color: var(--blue); }
      .api-settings-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
      .api-section-label {
        font-family: "JetBrains Mono", monospace;
        font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
        color: var(--muted); margin-bottom: .6rem;
      }
      .api-key-row {
        display: flex; align-items: center; gap: .75rem;
        padding: .65rem .85rem;
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 8px; margin-bottom: .5rem;
      }
      .api-key-name { font-size: .82rem; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .api-key-prefix { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--muted); flex-shrink: 0; }
      .api-key-date { font-size: .68rem; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
      .api-key-delete { background: none; border: 1px solid var(--border2); border-radius: 5px; color: var(--muted); cursor: pointer; font-size: .68rem; padding: 3px 9px; font-family: inherit; transition: all .15s; flex-shrink: 0; }
      .api-key-delete:hover { border-color: var(--red); color: var(--red); }
      .api-create-row { display: flex; gap: .5rem; }
      .api-create-row input { flex: 1; background: var(--surface3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text); font-family: inherit; font-size: .82rem; padding: .5rem .75rem; outline: none; }
      .api-create-row input:focus { border-color: var(--blue); }
      .api-endpoint-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; }
      .api-endpoint-method { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; background: rgba(91,141,239,.15); color: var(--blue); border: 1px solid rgba(91,141,239,.25); margin-bottom: .4rem; }
      .api-endpoint-path { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--text); margin-bottom: .35rem; }
      .api-endpoint-desc { font-size: .72rem; color: var(--text2); line-height: 1.5; }
      .api-endpoint-params { font-size: .68rem; color: var(--muted); margin-top: .4rem; line-height: 1.6; }
      .api-endpoint-params code { font-family: "JetBrains Mono", monospace; color: var(--teal); }
      .api-code-block { font-family: "JetBrains Mono", monospace; font-size: .68rem; color: var(--text2); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .6rem .8rem; margin-top: .5rem; white-space: pre; overflow-x: auto; line-height: 1.6; }
      .api-auth-note { background: rgba(91,141,239,.07); border: 1px solid rgba(91,141,239,.18); border-radius: 7px; padding: .65rem .85rem; font-size: .75rem; color: var(--text2); line-height: 1.6; }
      .api-auth-note code { font-family: "JetBrains Mono", monospace; color: var(--blue); }
      /* one-time key modal */
      .api-key-modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 2000;
        display: none; align-items: center; justify-content: center;
      }
      .api-key-modal-overlay.open { display: flex; }
      .api-key-modal {
        background: var(--surface); border: 1px solid var(--border2);
        border-radius: 12px; padding: 1.5rem; max-width: 480px; width: calc(100% - 2rem);
        display: flex; flex-direction: column; gap: 1rem;
      }
      .api-key-modal-title { font-size: .95rem; font-weight: 700; color: var(--green); }
      .api-key-modal-warn { font-size: .78rem; color: var(--text2); line-height: 1.5; }
      .api-key-modal-key {
        font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--text);
        background: var(--surface2); border: 1px solid var(--border2);
        border-radius: 6px; padding: .65rem .85rem;
        word-break: break-all; user-select: all; cursor: text;
      }
      .api-key-modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }

      /* ── Investigation Logs page ─────────────────────────────────────── */
      .logs-page {
        position: fixed; inset: 0; z-index: 300;
        background: var(--bg); display: flex; flex-direction: column;
        overflow: hidden;
      }
      .logs-page-header {
        display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
        padding: .75rem 1.25rem; border-bottom: 1px solid var(--border);
        background: var(--surface2); gap: 1rem;
      }
      .logs-page-title { font-size: .9rem; font-weight: 700; color: var(--accent); }
      .logs-live-badge {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: .65rem; font-weight: 700; letter-spacing: .08em;
        color: var(--green); background: rgba(16,185,129,.12);
        border: 1px solid rgba(16,185,129,.3); border-radius: 20px;
        padding: 2px 8px; animation: pulse-live 1.4s ease-in-out infinite;
      }
      @keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:.4} }
      .logs-run-select {
        font-size: .75rem; padding: 4px 8px;
        background: var(--surface); border: 1px solid var(--border);
        color: var(--text); border-radius: 6px; max-width: 240px;
      }
      .logs-timeline {
        flex: 1; overflow-y: auto; padding: 1rem 1.25rem;
        display: flex; flex-direction: column; gap: 2px;
      }
      .log-entry {
        display: grid;
        grid-template-columns: 56px 22px auto 1fr auto;
        align-items: start; column-gap: 6px; row-gap: 4px;
        padding: 5px 8px; border-radius: 6px;
        font-size: .78rem; font-family: monospace;
        border-left: 2px solid transparent;
      }
      .log-entry:hover { background: var(--surface); }
      .log-entry.level-info  { border-color: var(--border); }
      .log-entry.level-ai    { border-color: #7c3aed; background: rgba(124,58,237,.04); }
      .log-entry.level-tool  { border-color: #d97706; background: rgba(217,119,6,.04); }
      .log-entry.level-output{ border-color: var(--green); background: rgba(16,185,129,.06); }
      .log-entry.level-error { border-color: var(--red);  background: rgba(239,68,68,.06); }
      .log-time  { color: var(--muted); font-size: .7rem; white-space: nowrap; padding-top: 1px; }
      .log-icon  { text-align: center; font-size: .85rem; }
      .log-badge {
        font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        padding: 1px 5px; border-radius: 3px; white-space: nowrap; margin-top: 2px;
      }
      .log-badge-info   { background: var(--surface2); color: var(--muted); }
      .log-badge-ai     { background: rgba(124,58,237,.18); color: #a78bfa; }
      .log-badge-tool   { background: rgba(217,119,6,.18);  color: #fbbf24; }
      .log-badge-output { background: rgba(16,185,129,.18); color: var(--green); }
      .log-badge-error  { background: rgba(239,68,68,.18);  color: var(--red); }
      .log-msg   { color: var(--text); padding-top: 1px; word-break: break-word; }
      .log-toggle-btn {
        background: none; border: none; color: var(--muted); cursor: pointer;
        font-size: .7rem; padding: 0 4px; opacity: .6;
      }
      .log-toggle-btn:hover { opacity: 1; color: var(--accent); }
      .log-data-wrap {
        grid-column: 2 / -1; margin-top: 4px;
      }
      .log-data {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 6px; padding: 8px 10px;
        font-size: .72rem; color: var(--muted);
        white-space: pre-wrap; word-break: break-all;
        max-height: 200px; overflow-y: auto; margin: 0;
      }
      .logs-empty {
        text-align: center; color: var(--muted);
        padding: 3rem 1rem; font-size: .85rem;
      }
      .logs-complete-banner {
        display: flex; align-items: center; justify-content: center; gap: .75rem;
        background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3);
        border-radius: 8px; padding: .75rem 1.25rem; margin: .5rem 0;
        font-size: .85rem; color: var(--green); font-weight: 600;
      }
      /* ── Rich log content ──────────────────────────────────── */
      .log-rich-wrap { grid-column: 2 / -1; padding-top: 2px; }
      .log-label {
        font-size: .6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; display: block;
      }
      .log-ai-bubble {
        background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2);
        border-radius: 8px; padding: 10px 14px; font-size: .78rem; font-family: inherit;
        color: var(--text); white-space: pre-wrap; word-break: break-word;
        max-height: 400px; overflow-y: auto; line-height: 1.5;
      }
      .log-prompt-block {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 6px; padding: 8px 10px; font-size: .7rem; font-family: monospace;
        color: var(--muted); white-space: pre-wrap; word-break: break-word;
        max-height: 250px; overflow-y: auto; margin: 0 0 4px;
      }
      .log-json-block {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 6px; padding: 8px 10px; font-size: .7rem; font-family: monospace;
        color: var(--text); white-space: pre-wrap; word-break: break-word;
        max-height: 350px; overflow-y: auto; margin: 0;
      }
      .log-action-mini {
        background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2);
        border-radius: 6px; padding: 8px 12px; font-size: .78rem;
      }
      .log-action-mini-title { font-weight: 700; color: var(--text); }
      .log-action-mini-meta { color: var(--muted); font-size: .72rem; margin-top: 3px; }
      .log-summary-bubble {
        background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2);
        border-radius: 8px; padding: 10px 14px; font-size: .78rem; font-family: inherit;
        color: var(--text); white-space: pre-wrap; word-break: break-word;
        max-height: 500px; overflow-y: auto; line-height: 1.5;
      }
      .log-findings-block {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: 6px; padding: 8px 12px; font-size: .78rem;
      }
      .log-findings-summary { color: var(--text); margin-bottom: 4px; line-height: 1.4; }
      .log-findings-issues { list-style: none; padding: 0; margin: 4px 0 0; }
      .log-findings-issue {
        color: var(--muted); font-size: .72rem; padding: 3px 0;
        border-top: 1px solid var(--border); line-height: 1.4;
      }
      .ai-settings-panel-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1.25rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
        position: sticky; top: 0; z-index: 1;
      }
      .ai-settings-panel-title { font-size: .88rem; font-weight: 700; color: var(--accent); }
      .ai-settings-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; }
      .ai-field { display: flex; flex-direction: column; gap: .35rem; }
      .ai-field label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
      .ai-field input, .ai-field select, .ai-field textarea {
        background: var(--surface2); border: 1px solid var(--border);
        color: var(--text); padding: .5rem .75rem; border-radius: 6px;
        font-size: .82rem; font-family: 'JetBrains Mono', monospace;
        width: 100%;
      }
      .ai-field textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
      .ai-field input:focus, .ai-field select:focus, .ai-field textarea:focus {
        outline: none; border-color: var(--accent);
      }
      .ai-hint { font-size: .7rem; color: var(--muted); }
      .ai-row { display: flex; gap: .75rem; }
      .ai-row .ai-field { flex: 1; }
      .ai-section-title {
        font-size: .72rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .08em; color: var(--muted);
        padding-bottom: .5rem; border-bottom: 1px solid var(--border);
      }

      /* ── AI Issue cards (structured JSON output) ────────────────── */
      .ai-issue-card {
        background: var(--surface); border-radius: 7px; padding: 8px 11px;
        border-left: 3px solid var(--red); display: flex; flex-direction: column; gap: 4px;
      }
      .ai-issue-card.warning { border-left-color: var(--orange, #f59e0b); }
      .ai-issue-card.info    { border-left-color: #60a5fa; }
      .ai-issue-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
      .ai-badge {
        font-size: .64rem; padding: 1px 6px; border-radius: 3px;
        font-family: 'JetBrains Mono', monospace; white-space: nowrap;
      }
      .ai-badge-audit { background: rgba(255,255,255,.07); color: var(--muted); cursor: pointer; }
      .ai-badge-audit:hover { color: var(--accent); }
      .ai-badge-page { background: rgba(167,139,250,.1); color: var(--accent); }
      .ai-badge-perf { background: rgba(239,68,68,.12); color: #f87171; }
      .ai-badge-a11y { background: rgba(59,130,246,.12); color: #60a5fa; }
      .ai-badge-seo  { background: rgba(16,185,129,.12); color: #34d399; }
      .ai-badge-bp   { background: rgba(245,158,11,.12); color: #fbbf24; }
      .ai-badge-cat  { background: rgba(255,255,255,.06); color: var(--text2); }
      .ai-issue-finding { font-size: .79rem; color: var(--text); line-height: 1.45; }
      .ai-issue-rec     { font-size: .76rem; color: var(--text2); line-height: 1.4; padding-left: 2px; border-left: 1px solid rgba(255,255,255,.08); margin-left: 2px; }


      /* ── AI Chat widget (floating bottom-right) ─────────────────── */
      .ai-chat-fab {
        position: fixed; bottom: 24px; right: 24px;
        width: 54px; height: 54px; border-radius: 50%;
        background: var(--accent); color: #fff;
        border: none; cursor: pointer; font-size: 1.35rem;
        box-shadow: 0 4px 14px rgba(0,0,0,.4);
        z-index: 1002; display: flex; align-items: center; justify-content: center;
        transition: transform .15s ease, box-shadow .15s ease;
      }
      .ai-chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
      .ai-chat-fab.active { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
      .ai-chat-panel {
        position: fixed;
        bottom: 90px; right: 24px;
        width: 400px; height: 560px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        z-index: 1001;
        display: flex; flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,.4);
        transform: scale(0.92) translateY(16px);
        opacity: 0; pointer-events: none;
        transform-origin: bottom right;
        transition: transform .2s ease, opacity .2s ease;
      }
      .ai-chat-panel.open {
        transform: scale(1) translateY(0);
        opacity: 1; pointer-events: all;
      }
      .ai-chat-panel-header {
        display: flex; align-items: center; gap: .75rem;
        padding: .85rem 1.1rem;
        border-bottom: 1px solid var(--border);
        background: var(--surface2);
        border-radius: 14px 14px 0 0;
        flex-shrink: 0;
      }
      .ai-chat-panel-title { font-size: .88rem; font-weight: 700; color: var(--accent); flex: 1; }
      .ai-chat-client-name { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .ai-chat-messages {
        flex: 1; overflow-y: auto; padding: 1rem;
        display: flex; flex-direction: column; gap: .75rem;
        scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
      }
      .ai-chat-msg { display: flex; flex-direction: column; gap: .2rem; max-width: 88%; }
      .ai-chat-msg.user { align-self: flex-end; }
      .ai-chat-msg.assistant { align-self: flex-start; }
      .ai-chat-bubble {
        padding: .6rem .9rem; border-radius: 10px;
        font-size: .83rem; line-height: 1.55; white-space: pre-wrap;
      }
      .ai-chat-msg.user .ai-chat-bubble {
        background: var(--accent); color: #fff; border-bottom-right-radius: 3px;
      }
      .ai-chat-msg.assistant .ai-chat-bubble {
        background: var(--surface2); color: var(--text);
        border: 1px solid var(--border); border-bottom-left-radius: 3px;
      }
      .ai-chat-msg-time { font-size: .65rem; color: var(--muted); padding: 0 .25rem; }
      .ai-chat-typing {
        align-self: flex-start;
        background: var(--surface2); border: 1px solid var(--border);
        padding: .6rem .9rem; border-radius: 10px; border-bottom-left-radius: 3px;
        display: flex; gap: 4px; align-items: center;
      }
      .ai-chat-typing-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--muted); animation: chatBlink 1.2s infinite;
      }
      .ai-chat-typing-dot:nth-child(2) { animation-delay: .2s; }
      .ai-chat-typing-dot:nth-child(3) { animation-delay: .4s; }
      @keyframes chatBlink {
        0%, 80%, 100% { opacity: .3; transform: scale(1); }
        40% { opacity: 1; transform: scale(1.2); }
      }
      .ai-chat-input-area {
        padding: .75rem 1rem;
        border-top: 1px solid var(--border);
        background: var(--surface2);
        display: flex; gap: .5rem; align-items: flex-end;
        flex-shrink: 0;
        border-radius: 0 0 14px 14px;
      }
      .ai-chat-input {
        flex: 1; background: var(--surface); border: 1px solid var(--border);
        color: var(--text); padding: .5rem .75rem; border-radius: 8px;
        font-size: .83rem; font-family: 'Space Grotesk', sans-serif;
        resize: none; min-height: 42px; max-height: 120px; line-height: 1.45;
      }
      .ai-chat-input:focus { outline: none; border-color: var(--accent); }
      .ai-chat-send { padding: .5rem 1.25rem; height: 42px; white-space: nowrap; width: auto !important; flex-shrink: 0; }

      /* ── Client portal ────────────────────────────────────────────── */
      #clientPortal {
        display: none;
        flex-direction: column;
        min-height: 100vh;
      }
      #clientPortal.show { display: flex; }
      .portal-header {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 1rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-shrink: 0;
      }
      .portal-logo {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .portal-logo-icon {
        width: 24px; height: 24px;
        background: #f5a623;
        border-radius: 6px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      .portal-client-info { flex: 1; min-width: 0; }
      .portal-client-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text);
      }
      .portal-client-url {
        font-size: 0.75rem;
        color: var(--muted);
        font-family: "JetBrains Mono", monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .portal-body {
        flex: 1;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
        padding: 2rem;
      }
      .portal-section-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 1rem;
      }
      /* ── KPI Dashboard ──────────────────────────────────────────────── */
      /* Overview */
      .kpi-overview { padding: 2rem 2.5rem; max-width: 1280px; margin: 0 auto; }
      .kpi-overview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem; }
      .kpi-overview-title { font-size: 1.3rem; font-weight: 700; color: var(--text); }
      .kpi-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
      .kpi-client-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: 1.25rem; cursor: pointer; transition: border-color .15s, transform .12s; }
      .kpi-client-card:hover { border-color: var(--border2); transform: translateY(-1px); }
      .kpi-client-card.status-on_track { border-left-color: var(--green); }
      .kpi-client-card.status-at_risk { border-left-color: var(--accent); }
      .kpi-client-card.status-below_target { border-left-color: var(--red); }
      .kpi-client-card.status-no_goals { border-left-color: var(--muted); }
      .kpi-client-name { font-weight: 700; font-size: .92rem; color: var(--text); }
      .kpi-metric-row { display: flex; align-items: center; gap: .5rem; padding: 4px 0; }
      .kpi-metric-label { color: var(--muted); width: 80px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
      .kpi-metric-bar { flex: 1; height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
      .kpi-metric-fill { height: 100%; border-radius: 2px; }
      .kpi-metric-val { width: 90px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: .75rem; }
      .kpi-status-badge { display: inline-block; border-radius: 100px; padding: 2px 9px; font-size: .65rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
      .kpi-status-badge.on_track { background: rgba(62,207,142,.12); color: var(--green); }
      .kpi-status-badge.at_risk { background: rgba(245,166,35,.12); color: var(--accent); }
      .kpi-status-badge.below_target { background: rgba(242,107,107,.12); color: var(--red); }
      .kpi-status-badge.no_goals { background: var(--surface2); color: var(--muted); }
      /* KPI Overview table */
      .kpi-ov-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
      .kpi-ov-sub { font-size: .74rem; color: var(--muted); margin-top: 3px; }
      .kpi-ov-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 5px; }
      .kpi-ov-pill { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--text2); display: flex; align-items: center; gap: 5px; }
      .kpi-ov-tbl { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; width: 100%; }
      .kpi-ov-tbl-head { display: grid; grid-template-columns: 1fr repeat(4,90px) 130px 140px 32px; gap: 0; padding: 11px 20px 11px 24px; background: var(--surface2); border-bottom: 1px solid var(--border); align-items: center; }
      .kpi-ov-th { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
      .kpi-ov-th.c { text-align: center; }
      .kpi-ov-th.r { text-align: right; }
      .kpi-ov-row { display: grid; grid-template-columns: 1fr repeat(4,90px) 130px 140px 32px; gap: 0; padding: 0 20px 0 24px; min-height: 62px; align-items: center; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; position: relative; }
      .kpi-ov-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-row-edge, transparent); border-radius: 12px 0 0 12px; }
      .kpi-ov-row.status-on_track { --kpi-row-edge: var(--green); }
      .kpi-ov-row.status-at_risk { --kpi-row-edge: var(--accent); }
      .kpi-ov-row.status-below_target { --kpi-row-edge: var(--red); }
      .kpi-ov-row:last-child { border-bottom: none; }
      .kpi-ov-row:hover { background: var(--surface2); }
      .kpi-ov-td { display: flex; align-items: center; }
      .kpi-ov-td.c { justify-content: center; }
      .kpi-ov-td.r { justify-content: flex-end; }
      .kpi-ov-cname { font-size: .95rem; font-weight: 600; color: var(--text); }
      .kpi-ov-badge { font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
      .kpi-ov-badge.pass { color: var(--green); background: rgba(62,207,142,.1); }
      .kpi-ov-badge.warn { color: var(--accent); background: rgba(245,166,35,.1); }
      .kpi-ov-badge.fail { color: var(--red); background: rgba(242,107,107,.1); }
      .kpi-ov-badge.none { color: var(--muted); }
      .kpi-ov-arr { color: var(--border2); font-size: 1.1rem; }
      @media (max-width: 800px) {
        .kpi-ov-tbl-head { grid-template-columns: 1fr repeat(2,90px) 130px; }
        .kpi-ov-tbl-head .hide-sm { display: none; }
        .kpi-ov-row { grid-template-columns: 1fr repeat(2,90px) 130px; }
        .kpi-ov-row .hide-sm { display: none; }
      }
      /* KPI Detail shell */
      .kpi-shell { padding: 0 0 4rem; max-width: 1280px; margin: 0 auto; width: 100%; }
      .kpi-topbar { position: sticky; top: 60px; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; margin-bottom: 0; background: rgba(10,12,15,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
      .kpi-client-hd { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
      .kpi-avatar { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; color: #fff; flex-shrink: 0; letter-spacing: -.01em; }
      .kpi-info-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
      .kpi-info-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .kpi-info-name { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.15; margin: 0; }
      .kpi-platform-badge { height: 21px; padding: 0 9px; border: 1px solid rgba(245,166,35,.35); background: rgba(245,166,35,.08); color: var(--accent); border-radius: 6px; font-size: .62rem; font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; display: inline-flex; align-items: center; flex-shrink: 0; }
      .kpi-info-url { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
      .kpi-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(62,207,142,.15); flex-shrink: 0; }
      .kpi-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
      .kpi-ff-controls { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
      .kpi-ff-btn { appearance: none; height: 30px; padding: 0 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 6px; cursor: pointer; font-size: .72rem; font-family: inherit; transition: all .12s; }
      .kpi-ff-btn.active { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.4); color: var(--accent); }
      .kpi-ff-btn:hover:not(.active) { background: var(--surface2); color: var(--text); }
      .kpi-month-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
      .kpi-month-btn { appearance: none; width: 32px; height: 42px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 7px; cursor: pointer; display: grid; place-items: center; transition: background .12s; }
      .kpi-month-btn:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
      .kpi-month-btn:disabled { opacity: .3; cursor: not-allowed; }
      .kpi-month-cur { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 130px; padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; text-align: center; }
      .kpi-month-cur .km { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: .02em; }
      .kpi-month-cur .kr { font-family: 'JetBrains Mono', monospace; font-size: .57rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
      .kpi-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 1.1rem 0 .6rem; }
      .kpi-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
      .kpi-sec-meta { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .64rem; color: var(--muted); letter-spacing: .04em; }
      .kpi-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 11px; }
      .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; min-width: 0; overflow: hidden; }
      /* Goals banner */
      .kpi-gbanner { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 24px 18px 26px; margin-top: 1rem; margin-bottom: 0; position: relative; overflow: hidden; }
      .kpi-gbanner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kpi-edge, var(--accent)); }
      .kpi-gs-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; display: grid; place-items: center; }
      .kpi-gs-frac { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: .95rem; font-weight: 700; }
      .kpi-gs-txt { display: flex; flex-direction: column; gap: 5px; }
      .kpi-gs-lbl { font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
      .kpi-gs-sub { font-size: 1rem; font-weight: 600; color: var(--text); }
      .kpi-gs-dots { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; max-width: 200px; justify-content: flex-end; }
      .kpi-gs-dot { width: 9px; height: 9px; border-radius: 50%; }
      .kpi-gs-dot.met { background: var(--green); box-shadow: 0 0 0 3px rgba(62,207,142,.12); }
      .kpi-gs-dot.missed { background: var(--red); box-shadow: 0 0 0 3px rgba(242,107,107,.12); }
      /* Status pills */
      .kpi-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 100px; font-family: 'JetBrains Mono', monospace; font-size: .61rem; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
      .kpi-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
      .kpi-pill.pass { color: var(--green); background: rgba(62,207,142,.1); }
      .kpi-pill.warn { color: #fb923c; background: rgba(251,146,60,.1); }
      .kpi-pill.fail { color: var(--red); background: rgba(242,107,107,.1); }
      /* Availability */
      .kpi-up-col { grid-column: span 6; display: flex; flex-direction: column; gap: 12px; }
      .kpi-up-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
      .kpi-big { font-family: 'JetBrains Mono', monospace; font-size: 3.4rem; font-weight: 500; line-height: .9; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 4px; }
      .kpi-big .kpi-u { font-size: 1.25rem; color: var(--muted); font-weight: 400; }
      .kpi-meta-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
      .kpi-spark { height: 44px; margin: 0 -20px; overflow: hidden; }
      .kpi-spark svg { display: block; width: 100%; height: 100%; }
      .kpi-stat-col { grid-column: span 3; display: flex; flex-direction: column; gap: 11px; }
      .kpi-stat-big { font-family: 'JetBrains Mono', monospace; font-size: 2.1rem; font-weight: 500; line-height: .95; letter-spacing: -.02em; color: var(--text); }
      .kpi-stat-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; }
      /* Lighthouse */
      .kpi-lh-col { grid-column: span 3; display: flex; align-items: center; gap: 14px; }
      .kpi-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; display: grid; place-items: center; }
      .kpi-ring svg { display: block; transform: rotate(-90deg); }
      .kpi-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 700; }
      .kpi-lh-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
      .kpi-lh-name { font-size: .83rem; font-weight: 600; color: var(--text); }
      /* CWV */
      .kpi-cwv-col { grid-column: span 4; display: flex; flex-direction: column; gap: 11px; }
      .kpi-cwv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
      .kpi-cwv-abbr { font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; letter-spacing: .07em; color: var(--text); }
      .kpi-cwv-full { font-size: .7rem; color: var(--muted); margin-top: -4px; }
      .kpi-cwv-val { font-family: 'JetBrains Mono', monospace; font-size: 2.1rem; font-weight: 500; line-height: .95; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 5px; }
      .kpi-cwv-val .kpi-u { font-size: .9rem; color: var(--muted); font-weight: 400; }
      .kpi-cwv-bar { height: 7px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
      .kpi-cwv-fill { height: 100%; border-radius: 4px; }
      .kpi-cwv-goal { display: flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: .66rem; min-height: 16px; }
      .kpi-cwv-goal svg { width: 11px; height: 11px; flex-shrink: 0; }
      .kpi-cwv-goal.met { color: var(--green); }
      .kpi-cwv-goal.miss { color: var(--red); }
      .kpi-cwv-goal.none { color: transparent; }
      .kpi-cwv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
      /* Page selector */
      .kpi-page-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: .5rem 0 .6rem; border-bottom: 1px solid var(--border); margin-top: .3rem; margin-bottom: 0; }
      .kpi-page-btn { appearance: none; height: 27px; padding: 0 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 100px; cursor: pointer; font-size: .72rem; font-family: inherit; transition: all .12s; white-space: nowrap; }
      .kpi-page-btn:hover { border-color: var(--border2); color: var(--text); }
      .kpi-page-btn.active { border-color: var(--accent); background: rgba(245,166,35,.1); color: var(--accent); font-weight: 600; }
      /* Trend chips */
      .kpi-chip { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px 0 5px; border-radius: 100px; font-family: 'JetBrains Mono', monospace; font-size: .63rem; border: 1px solid var(--border); color: var(--muted); background: var(--surface2); white-space: nowrap; flex-shrink: 0; }
      .kpi-chip svg { width: 9px; height: 9px; flex-shrink: 0; }
      .kpi-chip.good { color: var(--green); background: rgba(62,207,142,.08); border-color: rgba(62,207,142,.22); }
      .kpi-chip.bad  { color: var(--red);   background: rgba(242,107,107,.08); border-color: rgba(242,107,107,.22); }
      /* Goal badge */
      .kpi-gbdg { display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: .63rem; white-space: nowrap; flex-shrink: 0; }
      .kpi-gbdg svg { width: 10px; height: 10px; flex-shrink: 0; }
      .kpi-gbdg.met  { color: var(--green); }
      .kpi-gbdg.miss { color: var(--red); }
      .kpi-gbdg .gt  { color: var(--muted); }
      .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
      .kpi-vs { font-family: 'JetBrains Mono', monospace; font-size: .63rem; color: var(--muted); }
      /* Trend charts */
      .kpi-chart-col { grid-column: span 6; display: flex; flex-direction: column; }
      .kpi-ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
      .kpi-ch-title { font-size: .85rem; font-weight: 600; color: var(--text); }
      .kpi-ch-now { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--text2); }
      .kpi-ch-body { height: 172px; margin-top: 4px; }
      .kpi-ch-body svg { display: block; width: 100%; height: 100%; }
      /* Goal editor */
      .kpi-goal-editor { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
      .kpi-goal-editor-title { font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 1rem; }
      .kpi-goal-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
      .kpi-goal-input-wrap { display: flex; flex-direction: column; gap: 4px; }
      .kpi-goal-input-label { font-size: .65rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
      .kpi-goal-input { background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); font-size: .82rem; font-family: 'JetBrains Mono', monospace; width: 100%; }
      .kpi-goal-input:focus { outline: none; border-color: var(--accent); }
      @media (max-width: 900px) {
        .kpi-up-col { grid-column: span 12; }
        .kpi-stat-col { grid-column: span 6; }
        .kpi-lh-col { grid-column: span 6; }
        .kpi-cwv-col { grid-column: span 12; }
        .kpi-chart-col { grid-column: span 12; }
      }

      /* ════════════════════════════════════════════════════════════════════
         CLIENT PORTAL v2                          scope: .cp2-portal
         ════════════════════════════════════════════════════════════════════ */
      .cp2-portal { position:relative; z-index:1; }

      /* ── appbar / tab nav ───────────────────────────────────────────── */
      .cp2-appbar {
        position:sticky; top:60px; z-index:20;
        display:flex; align-items:center; gap:8px;
        height:52px; padding:0 28px;
        background:rgba(10,12,15,.94);
        backdrop-filter:blur(10px);
        border-bottom:1px solid var(--border);
      }
      .cp2-tabs { display:flex; align-items:center; height:100%; }
      .cp2-tab {
        appearance:none; background:none; border:0;
        height:100%; padding:0 2px; margin:0 14px 0 0;
        font-family:"Space Grotesk",sans-serif; font-size:14px; font-weight:500;
        color:var(--muted); cursor:pointer;
        display:flex; align-items:center;
        border-bottom:2px solid transparent;
        transition:color .12s;
      }
      .cp2-tab:hover { color:var(--text2); }
      .cp2-tab.active { color:var(--text); border-bottom-color:var(--accent); }
      .cp2-spacer { flex:1; }
      .cp2-action-btn {
        display:inline-flex; align-items:center; gap:7px;
        height:32px; padding:0 13px; border-radius:8px;
        border:1px solid var(--border); background:var(--surface2);
        color:var(--text2); font-family:"Space Grotesk",sans-serif;
        font-size:12.5px; font-weight:500; cursor:pointer; transition:.12s;
        margin-left:6px; white-space:nowrap;
      }
      .cp2-action-btn:hover { color:var(--text); border-color:var(--border2); background:var(--surface3); }

      /* ── view switching ─────────────────────────────────────────────── */
      .cp2-view { display:none; padding:0 48px 32px; max-width:1320px; margin:0 auto; }
      .cp2-view-active { display:block; }

      /* ── section heads ──────────────────────────────────────────────── */
      .cp2-section-head { display:flex; align-items:baseline; gap:12px; margin:28px 0 13px; }
      .cp2-eyebrow { font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
      .cp2-meta { margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); letter-spacing:.04em; }

      /* ── 12-col grid ────────────────────────────────────────────────── */
      .cp2-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }

      /* ── card ───────────────────────────────────────────────────────── */
      .cp2-card {
        background:var(--surface2); border:1px solid var(--border); border-radius:14px;
        padding:18px 20px;
        box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.3);
        min-width:0; position:relative; overflow:hidden;
      }
      .cp2-label { font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

      /* ── client head ────────────────────────────────────────────────── */
      .cp2-client-head { display:flex; align-items:center; gap:14px; margin:24px 0 20px; }
      .cp2-avatar { width:44px; height:44px; border-radius:12px; background:var(--green); display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:18px; color:#fff; flex-shrink:0; }
      .cp2-ttl-row { display:flex; align-items:center; gap:11px; }
      .cp2-ttl { font-size:23px; font-weight:600; letter-spacing:-.015em; margin:0; }
      .cp2-sub { display:flex; align-items:center; gap:14px; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted); margin-top:4px; }
      .cp2-sub-url { display:inline-flex; align-items:center; gap:7px; color:var(--text2); text-decoration:none; }
      .cp2-live { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(62,207,142,.12); flex-shrink:0; }
      .cp2-sub-ctx { color:var(--muted); }
      .cp2-head-controls { margin-left:auto; display:flex; align-items:center; gap:12px; }

      /* ── device seg (scoped override) ───────────────────────────────── */
      .cp2-portal .seg { display:inline-flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
      .cp2-portal .seg button { appearance:none; border:0; background:none; height:30px; padding:0 13px; border-radius:6px; font-family:"Space Grotesk",sans-serif; font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.12s; }
      .cp2-portal .seg button svg { width:13px; height:13px; }
      .cp2-portal .seg button:hover:not(.on) { color:var(--text2); }
      .cp2-portal .seg button.on { background:var(--accent); color:#0d0d0c; font-weight:600; }

      /* ── kpi uptime ─────────────────────────────────────────────────── */
      .cp2-kpi-uptime { grid-column:span 6; display:flex; flex-direction:column; gap:14px; }
      .cp2-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
      .cp2-big { font-family:"JetBrains Mono",monospace; font-size:64px; font-weight:500; line-height:.92; letter-spacing:-.03em; display:inline-flex; align-items:baseline; gap:4px; }
      .cp2-big-unit { font-size:28px; color:var(--muted); font-weight:400; }

      /* ── kpi stat ───────────────────────────────────────────────────── */
      .cp2-kpi-stat { grid-column:span 3; display:flex; flex-direction:column; gap:12px; }
      .cp2-stat-big { font-family:"JetBrains Mono",monospace; font-size:40px; font-weight:500; line-height:.95; letter-spacing:-.02em; color:var(--text); }
      .cp2-stat-sub { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); margin-top:2px; }

      /* ── lighthouse rings ───────────────────────────────────────────── */
      .cp2-lh { grid-column:span 3; display:flex; align-items:center; gap:16px; }
      .cp2-ring { position:relative; width:72px; height:72px; flex-shrink:0; display:grid; place-items:center; }
      .cp2-ring svg { transform:rotate(-90deg); display:block; }
      .cp2-ring-n { position:absolute; inset:0; display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-size:21px; font-weight:600; letter-spacing:-.01em; }
      .cp2-lh-meta { display:flex; flex-direction:column; gap:7px; min-width:0; }
      .cp2-lh-nm { font-size:13.5px; font-weight:600; letter-spacing:-.005em; }

      /* ── pages table ────────────────────────────────────────────────── */
      .cp2-pages-card { grid-column:span 12; padding:0; overflow:hidden; }
      .cp2-ph { display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--border); }
      .cp2-legend { margin-left:auto; display:flex; align-items:center; gap:14px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.04em; color:var(--muted); }
      .cp2-legend i { display:inline-flex; align-items:center; gap:5px; }
      .cp2-legend i b { width:8px; height:8px; border-radius:50%; display:inline-block; }
      .cp2-ptable { width:100%; border-collapse:collapse; }
      .cp2-ptable thead th { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:500; text-align:right; padding:11px 16px; border-bottom:1px solid var(--border); white-space:nowrap; }
      .cp2-ptable thead th.cp2ptl { text-align:left; padding-left:20px; }
      .cp2-ptable tbody tr { cursor:pointer; transition:background .1s; border-bottom:1px solid var(--border); }
      .cp2-ptable tbody tr:last-child { border-bottom:0; }
      .cp2-ptable tbody tr:hover { background:var(--surface3); }
      .cp2-ptable td { padding:14px 16px; text-align:right; font-family:"JetBrains Mono",monospace; font-size:13.5px; font-variant-numeric:tabular-nums; vertical-align:middle; }
      .cp2-ptable td.cp2ptcol { text-align:left; padding-left:20px; width:46%; }
      .cp2-pg-name { display:flex; align-items:center; gap:12px; min-width:0; }
      .cp2-pg-meta { min-width:0; display:flex; flex-direction:column; gap:2px; }
      .cp2-pg-n { font-family:"Space Grotesk",sans-serif; font-size:14px; font-weight:600; color:var(--text); letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
      .cp2-pg-u { font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; display:block; }
      .cp2sc-good { color:var(--green); }
      .cp2sc-ok   { color:var(--orange); }
      .cp2sc-bad  { color:var(--red); }

      /* ── incidents toolbar ──────────────────────────────────────────── */
      .cp2-inc-toolbar { display:flex; align-items:center; gap:14px; margin:0 0 16px; }

      /* ── responsive ─────────────────────────────────────────────────── */
      @media (max-width:1080px) {
        .cp2-kpi-uptime { grid-column:span 12; }
        .cp2-kpi-stat   { grid-column:span 6; }
        .cp2-lh         { grid-column:span 6; }
      }
      @media (max-width:760px) {
        .cp2-view        { padding:0 16px 24px; max-width:none; }
        .cp2-appbar      { padding:0 16px; }
        .cp2-client-head { padding:0 16px; }
        .cp2-col-opt     { display:none; }
      }
      @media (max-width:640px) {
        .cp2-kpi-stat, .cp2-lh { grid-column:span 12; }
        .cp2-ptable td.cp2ptcol { width:auto; }
      }

/* ── KPI shell embedded inside client portal ────────────────────── */
/* The kpi-shell topbar is globally sticky at top:60px (below app header).
   Inside the portal the cp2-appbar already occupies that slot,
   so we make the embedded topbar sticky at top:112px (60+52) instead. */
.cp2-kpi-embedded.kpi-shell { padding-bottom: 2rem; max-width: none; }
.cp2-kpi-embedded .kpi-topbar {
  position: sticky;
  top: 60px; /* sit just below the 60px app header */
  z-index: 9;
}