/* Panescope Admin. Same tokens as the extension (viewer.css). */
:root {
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased; font-synthesis: none;
  color-scheme: light;
  --canvas:#f1f2f6; --surface:#ffffff; --surface-2:#f7f8fb; --hover:#edeef4; --text:#252735; --muted:#737789; --faint:#a3a6b5;
  --border:#e3e5ed; --accent:#e8b923; --accent-soft:#fff6d4; --accent-ink:#8a6100; --on-accent:#231c06;
  --danger:#c64b61; --danger-soft:#fdecef; --success:#188038; --success-soft:#e7f5ec; --info:#2f6fd6; --info-soft:#e9f1fd; --warn:#a15c00; --warn-soft:#fff1dc;
  --chart-1:#e8b923; --chart-2:#6c7cff; --chart-3:#e0607e; --chart-4:#2fa774;
  --shadow:0 16px 50px #25283b12; --shadow-sm:0 1px 2px #25283b0d; --scrim:#20223766;
  background:var(--canvas); color:var(--text);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#151619; --surface:#1d1e23; --surface-2:#24252c; --hover:#2d2f38; --text:#ebecf2; --muted:#979aab; --faint:#6b6e7e;
  --border:#32343e; --accent:#f0c636; --accent-soft:#3c341a; --accent-ink:#f4cf58; --on-accent:#231c06;
  --danger:#f48d9e; --danger-soft:#3d2228; --success:#5bd18b; --success-soft:#1b3326; --info:#86aef5; --info-soft:#1e2a40; --warn:#f2b45a; --warn-soft:#3a2c17;
  --chart-1:#f0c636; --chart-2:#8f9bff; --chart-3:#f07d97; --chart-4:#4fc68f;
  --shadow:0 16px 50px #0006; --shadow-sm:0 1px 2px #0004; --scrim:#05060b99;
}
* { box-sizing:border-box; }
html,body { margin:0;min-height:100%;background:var(--canvas); }
body { line-height:1.45; }
button,input,select,textarea { font:inherit;color:inherit; }
a { color:var(--accent-ink);text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.icon { width:18px;height:18px;flex:none;display:block; }
.mono,code { font-family:"JetBrains Mono","Cascadia Code",Consolas,ui-monospace,monospace;font-size:12.5px; }
.muted { color:var(--muted); }
.nowrap { white-space:nowrap; }
.hidden { display:none !important; }
.boot { display:grid;place-items:center;min-height:100vh; }
.spinner { width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Buttons and fields */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-weight:550;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s; }
.btn:hover { background:var(--hover); }
.btn .icon { width:16px;height:16px; }
.btn.primary { background:var(--accent);border-color:var(--accent);color:var(--on-accent); }
.btn.primary:hover { filter:brightness(1.04); }
.btn.danger { color:var(--danger); }
.btn.danger:hover { background:var(--danger-soft);border-color:var(--danger); }
.btn.danger.solid { background:var(--danger);border-color:var(--danger);color:#fff; }
.btn.ghost { border-color:transparent;background:transparent;color:var(--muted); }
.btn.ghost:hover { background:var(--hover);color:var(--text); }
.btn.small { height:30px;padding:0 10px;font-size:12.5px;border-radius:8px; }
.btn.icon-only { width:36px;padding:0; }
.btn.small.icon-only { width:30px; }
.btn:disabled { opacity:.55;cursor:not-allowed; }
.btn.block { width:100%; }
.field { display:grid;gap:6px; }
.field > span { font-size:12.5px;font-weight:600; }
.field small { color:var(--muted);font-size:12px; }
.input,select.input,textarea.input { width:100%;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s; }
textarea.input { height:auto;min-height:76px;padding:9px 12px;resize:vertical; }
.input:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); }
.input.code { letter-spacing:6px;font-size:20px;text-align:center;font-family:"JetBrains Mono",Consolas,monospace;height:48px; }
.check { display:flex;align-items:flex-start;gap:10px;font-size:13px;cursor:pointer; }
.check input { margin-top:2px;width:16px;height:16px;accent-color:var(--accent); }
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.form-grid .wide { grid-column:1 / -1; }
.form-error { min-height:18px;color:var(--danger);font-size:12.5px; }

/* Auth screens */
.auth { display:grid;place-items:center;min-height:100vh;padding:24px 16px;background:radial-gradient(1200px 500px at 50% -10%,var(--accent-soft),transparent 70%),var(--canvas); }
.auth-card { width:min(420px,100%);padding:32px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow); }
.auth-card.wide { width:min(520px,100%); }
.auth-card h1 { margin:18px 0 4px;font-size:22px;letter-spacing:-.4px; }
.auth-card > p { margin:0 0 22px;color:var(--muted); }
.auth-card form { display:grid;gap:14px; }
.auth-divider { display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--faint);font-size:12px; }
.auth-divider::before,.auth-divider::after { content:"";flex:1;height:1px;background:var(--border); }
.auth-foot { margin-top:18px;color:var(--faint);font-size:12px;text-align:center; }
.qr-box { display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2); }
.qr-box svg { display:block;border-radius:8px; }
.secret { word-break:break-all;font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;letter-spacing:1px; }
.steps { display:flex;gap:6px;margin-bottom:6px; }
.steps span { height:4px;flex:1;border-radius:4px;background:var(--border); }
.steps span.on { background:var(--accent); }
.strength { display:grid;grid-template-columns:repeat(4,1fr);gap:4px; }
.strength span { height:4px;border-radius:4px;background:var(--border); }
.strength[data-score="1"] span:nth-child(-n+1) { background:var(--danger); }
.strength[data-score="2"] span:nth-child(-n+2) { background:var(--warn); }
.strength[data-score="3"] span:nth-child(-n+3) { background:var(--accent); }
.strength[data-score="4"] span { background:var(--success); }

/* Brand */
.brand { display:flex;align-items:center;gap:10px; }
.brand-mark { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);flex:none; }
.brand-mark .icon { width:20px;height:20px; }
.brand-name { font-size:15px;font-weight:700;letter-spacing:-.4px;line-height:1.05; }
.brand-name span { display:block;margin-top:4px;font-size:8.5px;font-weight:650;letter-spacing:2.2px;color:var(--muted); }

/* Shell */
.shell { display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh; }
.sidebar { position:sticky;top:0;display:flex;flex-direction:column;gap:4px;height:100vh;padding:20px 12px;border-right:1px solid var(--border);background:var(--surface);overflow-y:auto; }
.sidebar .brand { padding:0 8px 18px; }
.nav-label { margin:14px 10px 6px;color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; }
.nav-item { display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:9px;color:var(--muted);font-weight:550;font-size:13.5px; }
.nav-item:hover { background:var(--hover);color:var(--text);text-decoration:none; }
.nav-item.active { background:var(--accent-soft);color:var(--accent-ink); }
.nav-item .count { margin-left:auto;font-size:11.5px;color:var(--faint); }
.sidebar-foot { margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--border);display:grid;gap:8px; }
.sidebar-foot .btn { justify-content:flex-start;padding:0 8px; }
.who { display:flex;align-items:center;gap:10px;font-size:12.5px; }
.who .avatar { display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);color:var(--muted); }
.who .avatar .icon { width:16px;height:16px; }
.main { min-width:0; }
.topbar { position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:62px;padding:0 28px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(10px); }
.topbar .menu-button { display:none; }
.global-search { position:relative;flex:1;max-width:460px; }
.global-search .icon { position:absolute;left:11px;top:10px;width:16px;height:16px;color:var(--muted); }
.global-search .input { padding-left:34px;background:var(--surface); }
.topbar-spacer { flex:1; }
.mode-badge { display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:750;letter-spacing:.8px; }
.mode-badge::before { content:"";width:7px;height:7px;border-radius:50%;background:currentColor; }
.mode-badge.live { background:var(--success-soft);color:var(--success); }
.mode-badge.test { background:var(--warn-soft);color:var(--warn); }
.content { padding:26px 28px 60px;max-width:1360px; }
.page-head { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap; }
.page-head h1 { margin:0;font-size:24px;letter-spacing:-.5px; }
.page-head p { margin:4px 0 0;color:var(--muted); }
.page-actions { display:flex;gap:8px;flex-wrap:wrap; }
.back { display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;color:var(--muted);font-size:13px; }
.back .icon { width:15px;height:15px; }

/* Cards */
.card { border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm); }
.card-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0; }
.card-head h2 { margin:0;font-size:14.5px;letter-spacing:-.2px; }
.card-head .muted { font-size:12.5px; }
.card-body { padding:16px 18px 18px; }
.grid { display:grid;gap:16px; }
.grid.kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.two { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.grid.halves { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stack { display:grid;gap:16px; }
.kpi { padding:16px 18px; }
.kpi-label { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600; }
.kpi-label .icon { width:15px;height:15px; }
.kpi-value { margin-top:8px;font-size:26px;font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums; }
.kpi-sub { margin-top:4px;color:var(--muted);font-size:12.5px; }
.kpi-sub b { color:var(--text);font-weight:600; }
.banner { display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--border);border-radius:12px;background:var(--info-soft);color:var(--text); }
.banner .icon { color:var(--info); }
.banner.warn { background:var(--warn-soft); }
.banner.warn .icon { color:var(--warn); }
.banner .btn { margin-left:auto; }

/* Tables */
.toolbar { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px; }
.toolbar .input { width:auto;height:34px; }
.toolbar .search { position:relative;flex:1;min-width:200px;max-width:360px; }
.toolbar .search .icon { position:absolute;left:10px;top:9px;width:16px;height:16px;color:var(--muted); }
.toolbar .search .input { width:100%;padding-left:32px; }
.table-wrap { overflow-x:auto; }
table.data { width:100%;border-collapse:collapse;font-size:13px; }
table.data th { position:sticky;top:0;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:650;letter-spacing:.3px;text-align:left;text-transform:uppercase;white-space:nowrap; }
table.data td { padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }
table.data tr.clickable { cursor:pointer; }
table.data tr.clickable:hover td { background:var(--hover); }
table.data td.num,table.data th.num { text-align:right;font-variant-numeric:tabular-nums; }
table.data td.actions { text-align:right;white-space:nowrap; }
table.data .sub { display:block;color:var(--muted);font-size:12px; }
.card > .table-wrap { border-radius:0 0 14px 14px; }
.card > .table-wrap:first-child { border-radius:14px; }
.empty { padding:42px 16px;color:var(--muted);text-align:center; }
.empty .icon { width:28px;height:28px;margin:0 auto 8px;color:var(--faint); }
.pager { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:12.5px; }
.pager div { display:flex;gap:6px; }

/* Badges */
.badge { display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:11.5px;font-weight:650;white-space:nowrap; }
.badge.success { background:var(--success-soft);border-color:transparent;color:var(--success); }
.badge.warn { background:var(--warn-soft);border-color:transparent;color:var(--warn); }
.badge.danger { background:var(--danger-soft);border-color:transparent;color:var(--danger); }
.badge.info { background:var(--info-soft);border-color:transparent;color:var(--info); }
.badge.accent { background:var(--accent-soft);border-color:transparent;color:var(--accent-ink); }
.key-chip { display:inline-flex;align-items:center;gap:6px; }
.copy { display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer; }
.copy:hover { background:var(--hover);color:var(--text); }
.copy .icon { width:14px;height:14px; }

/* Detail */
.detail-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px; }
.detail-head h1 { display:flex;align-items:center;gap:10px;margin:0;font-size:22px;letter-spacing:-.3px;word-break:break-all; }
.detail-head .badges { display:flex;gap:6px;margin-top:8px;flex-wrap:wrap; }
dl.facts { display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px 20px;margin:0; }
dl.facts div { min-width:0; }
dl.facts dt { color:var(--muted);font-size:12px;font-weight:600; }
dl.facts dd { margin:4px 0 0;word-break:break-word; }
.timeline { display:grid;gap:0;margin:0;padding:0;list-style:none; }
.timeline li { display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border); }
.timeline li:last-child { border-bottom:0; }
.timeline .dot { display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--muted); }
.timeline .dot .icon { width:15px;height:15px; }
.timeline .dot.payment { background:var(--success-soft);color:var(--success); }
.timeline .dot.license { background:var(--accent-soft);color:var(--accent-ink); }
.timeline .dot.cancel { background:var(--danger-soft);color:var(--danger); }
.timeline .dot.trial { background:var(--info-soft);color:var(--info); }
.timeline strong { display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.timeline span { color:var(--muted);font-size:12px; }

/* Charts */
.chart { position:relative;width:100%; }
.chart svg { display:block;width:100%;height:auto;overflow:visible; }
.chart .grid-line { stroke:var(--border);stroke-width:1; }
.chart .axis { fill:var(--faint);font-size:10.5px; }
.chart .bar { fill:var(--chart-1);transition:opacity .15s; }
.chart .bar.alt { fill:var(--chart-2); }
.chart .bar.dim { opacity:.35; }
.chart .line { fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round; }
.chart .area { opacity:.12; }
.chart .hover-line { stroke:var(--faint);stroke-dasharray:3 3; }
.legend { display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px; }
.legend i { display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:3px;vertical-align:-1px; }
.chart-tooltip { position:fixed;z-index:100;padding:8px 10px;border-radius:9px;background:#22242f;color:#fff;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:var(--shadow);white-space:nowrap; }
.chart-tooltip b { font-weight:650; }
.donut { display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center; }
.donut svg { width:150px;height:150px; }
.donut .total { font-size:24px;font-weight:700;fill:var(--text); }
.donut .total-label { font-size:10.5px;fill:var(--muted); }
.split-list { display:grid;gap:10px;margin:0;padding:0;list-style:none; }
.split-list li { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px; }
.split-list i { width:10px;height:10px;border-radius:3px; }
.split-list b { font-variant-numeric:tabular-nums; }
.bars { display:grid;gap:12px; }
.bars .row { display:grid;gap:5px; }
.bars .row div { display:flex;justify-content:space-between;font-size:12.5px; }
.bars .track { height:7px;border-radius:7px;background:var(--surface-2);overflow:hidden; }
.bars .fill { height:100%;border-radius:7px;background:var(--chart-1); }
.funnel { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.funnel div { padding:12px;border-radius:10px;background:var(--surface-2); }
.funnel b { display:block;font-size:20px;font-variant-numeric:tabular-nums; }
.funnel span { color:var(--muted);font-size:12px; }
.segmented { display:inline-flex;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface); }
.segmented button { height:28px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer; }
.segmented button.on { background:var(--accent-soft);color:var(--accent-ink); }
.tabs { display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border); }
.tabs a { padding:10px 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--muted);font-weight:600; }
.tabs a:hover { color:var(--text);text-decoration:none; }
.tabs a.on { border-color:var(--accent);color:var(--text); }
.kv { display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:8px 16px;margin:0;font-size:13px; }
.kv dt { color:var(--muted); }
.kv dd { margin:0;word-break:break-word; }
.list-rows { display:grid; }
.list-rows > div { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border); }
.list-rows > div:last-child { border-bottom:0; }
.list-rows .grow { flex:1;min-width:0; }
.list-rows .grow strong { display:block; }
.list-rows .grow span { color:var(--muted);font-size:12.5px; }
.list-rows .dot { display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);flex:none; }
.list-rows .dot .icon { width:16px;height:16px; }

/* Modal and toasts */
.modal-backdrop { position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px 16px;background:var(--scrim);animation:fade .15s; }
.modal { display:flex;flex-direction:column;width:min(520px,100%);max-height:calc(100vh - 40px);border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);animation:rise .18s; }
.modal.wide { width:min(680px,100%); }
.modal-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 0; }
.modal-head h2 { margin:0;font-size:17px; }
.modal-head p { margin:4px 0 0;color:var(--muted);font-size:13px; }
.modal-body { display:grid;gap:14px;padding:18px 22px;overflow-y:auto; }
.modal-foot { display:flex;justify-content:flex-end;gap:8px;padding:0 22px 20px; }
.keys-box { padding:12px;border-radius:10px;background:var(--surface-2);font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.8;user-select:all;white-space:pre-wrap;max-height:240px;overflow:auto; }
@keyframes fade { from { opacity:0; } }
@keyframes rise { from { opacity:0;transform:translateY(8px) scale(.99); } }
.toasts { position:fixed;right:20px;bottom:20px;z-index:80;display:grid;gap:8px; }
.toast { display:flex;align-items:center;gap:10px;max-width:380px;padding:12px 14px;border-radius:11px;background:#22242f;color:#fff;font-size:13px;box-shadow:var(--shadow);animation:rise .18s; }
.toast .icon { width:16px;height:16px;color:#5bd18b; }
.toast.error .icon { color:#f48d9e; }
.skeleton { height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--hover),var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }

@media (max-width:1100px) {
  .grid.kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid.two { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:fixed;inset:0 auto 0 0;z-index:50;width:250px;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow); }
  .shell.nav-open .sidebar { transform:none; }
  .shell.nav-open::after { content:"";position:fixed;inset:0;z-index:40;background:var(--scrim); }
  .topbar { padding:0 16px; }
  .topbar .menu-button { display:inline-flex; }
  .content { padding:20px 16px 48px; }
  .grid.halves { grid-template-columns:minmax(0,1fr); }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .donut { grid-template-columns:minmax(0,1fr);justify-items:center; }
}
@media (max-width:520px) {
  .grid.kpis { grid-template-columns:minmax(0,1fr); }
  .mode-badge { display:none; }
  .auth-card { padding:24px 20px; }
  .qr-box { grid-template-columns:minmax(0,1fr);justify-items:center; }
}
.key-chip code,table.data .mono { white-space:nowrap; }