/* Shared visual language for every monitor page. See docs/design/ references. */
:root {
    --bg: #f7f8f5;
    --sidebar: #fff;
    --card: #fff;
    --line: #e4e8e1;
    --line-strong: #d3dbd1;
    --text: #202b25;
    --muted: #6d786f;
    --faint: #89938b;
    --accent: #176448;
    --accent-hover: #104f38;
    --accent-soft: #eaf3ed;
    --radius: 12px;
    --space: 24px;
    --shadow: 0 2px 6px rgba(26, 50, 32, .025);
    --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[data-theme="dark"] {
    --bg: #131a16;
    --sidebar: #171f1a;
    --card: #1b241e;
    --line: #2c392f;
    --line-strong: #405146;
    --text: #e0e9e0;
    --muted: #a0b0a3;
    --faint: #87998b;
    --accent: #8bd0a9;
    --accent-hover: #a0dfbb;
    --accent-soft: #233b2c;
    --ok: #8bd0a9;
    --ok-soft: #223a2b;
    --bad: #f3a199;
    --bad-soft: #462b29;
    --warn: #e2bf78;
    --warn-soft: #3a3324;
    --info: #9bbbdc;
    --info-soft: #253744;
}
.monitor-app { -webkit-font-smoothing: antialiased; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ux-shell { height: 100dvh; }
.ux-sidebar { width: 218px; }
.ux-brand { padding: 25px 22px 22px; gap: 10px; }
.ux-brand-mark { width: 32px; height: 32px; }
.ux-brand-name { color: var(--accent); letter-spacing: .07em; font-size: 15px; }
.ux-brand-sub { letter-spacing: .035em; font-size: 10px; }
.ux-nav { padding: 0 12px 16px; }
.ux-nav-label { padding: 20px 12px 8px; font-size: 10px; letter-spacing: .065em; }
.sidebar-item { min-height: 38px; padding: 9px 12px; margin: 2px 0; font-size: 12.5px; color: var(--muted); gap: 11px; transition: background .15s, color .15s; }
.sidebar-item i { font-size: 13px; width: 17px; }
.sidebar-item:hover { background: var(--bg); color: var(--text); }
.sidebar-item.active, html[data-theme="dark"] .sidebar-item.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.sidebar-item.active i, html[data-theme="dark"] .sidebar-item.active i { color: var(--accent); }
.workspace-nav-new { margin-left: auto; font: 9px var(--mono); color: var(--accent); letter-spacing: .02em; }
.ux-userbox { padding: 16px; }
.ux-user-row { margin: 0; }
.ux-avatar { background: var(--accent-soft); color: var(--accent); width: 32px; height: 32px; }
.ux-topbar { background: var(--card); padding: 19px 30px 17px; gap: 15px; }
.ux-title-block { max-width: 590px; }
#tab-title { font-size: 21px; letter-spacing: -.04em; }
.ux-kicker { font-size: 10px; letter-spacing: .07em; color: var(--faint); }
.ux-title-meta { font-size: 11px; line-height: 1.65; }
.ux-controls { gap: 7px; }
.ux-dates, .ux-range, .ux-kbd, .ux-btn-ghost { background: var(--card); }
.ux-dates { font-size: 11px; min-height: 35px; border-radius: 7px; }
.ux-range { border-radius: 7px; }
.quick-range-btn { font-size: 11px; padding: 5px 8px; border-radius: 5px; white-space: nowrap; }
.quick-range-btn.is-active { background: var(--accent-soft); color: var(--accent); }
.ux-btn { border-radius: 7px; font-size: 12px; transition: background .15s; }
.ux-btn-primary:hover { background: var(--accent-hover); }
.ux-scroll { padding: 26px 30px 48px; }
.workspace-eyebrow { color: var(--accent); font: 10px var(--mono); letter-spacing: .12em; }
.workspace-link { color: var(--accent); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.workspace-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.workspace-heading h3 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; margin-top: 7px; }
.workspace-heading p { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.7; }
.ux-life { border-radius: 10px; background: var(--card); padding: 18px 22px; border: 1px solid var(--line); margin-bottom: 22px; }
.ux-life-label { font-size: 10px; }
.ux-life-value { font-size: 21px; color: var(--text); letter-spacing: -.04em; }
.ux-kpi, .ux-panel, .tab-pane .bg-white { border-color: var(--line); box-shadow: var(--shadow); }
.tab-pane .rounded-2xl, .tab-pane .rounded-xl, .tab-pane .rounded-lg { border-radius: var(--radius); }
.tab-pane .font-black { font-weight: 650; }
.tab-pane h3 { letter-spacing: -.02em; }
.tab-pane h3.text-sm { font-size: 13px; }
.tab-pane .text-2xl { letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tab-pane table { font-variant-numeric: tabular-nums; }
.tab-pane thead th { font-size: 10px; font-weight: 600; letter-spacing: .025em; background: var(--bg); color: var(--muted); }
.tab-pane tbody td { border-color: var(--line); }
.tab-pane table tbody tr { transition: background .12s; }
.tab-pane table tbody tr:hover { background: var(--accent-soft); }
.tab-pane .text-slate-400 { color: var(--faint); }
.tab-pane input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .tab-pane select, .tab-pane textarea {
    border-color: var(--line-strong); background-color: var(--card); color: var(--text);
}
.tab-pane input:focus, .tab-pane select:focus { --tw-ring-color: transparent; border-color: var(--accent); }
.task-list-toolbar { margin-bottom: 20px; }
.task-list-card { border-radius: 12px; border-color: var(--line); box-shadow: var(--shadow); }
.ux-empty-well { background: var(--bg); }
.workspace-growth-head { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 22px; }
.workspace-growth-head h3 { color: var(--text); }
.workspace-growth-head a { color: var(--accent); border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.workspace-growth-head a:hover { background: var(--accent-soft); }
#ph-status { background: var(--accent-soft); color: var(--accent); }
#ph-status[data-status="partial"], #ph-status[data-status="stale"] { background: var(--warn-soft); color: var(--warn); }
#ph-status[data-status="unavailable"], #ph-status[data-status="not_configured"] { background: var(--bad-soft); color: var(--bad); }
#ph-warning { background: var(--warn-soft); border-color: var(--line); color: var(--warn); }
.workspace-funnel-bar { height: 100%; border-radius: 999px; background: var(--accent); }
.workspace-funnel-bar.is-last { background: #8faf94; }
#tab-content-product-experience .text-2xl { color: var(--text); }
#ph-activation-rate, #ph-retention-d1, #ph-activation-summary { color: var(--accent) !important; }
#tab-content-overview .ux-kpi-card { padding: 20px; }
#tab-content-overview .ux-kpi-card > .flex:first-child > .w-10 { background: var(--accent-soft); color: var(--accent); width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
#tab-content-overview .ux-kpi-body { flex: 0 0 auto; justify-content: flex-start; }
.workspace-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.workspace-metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.workspace-metric > span { color: var(--muted); font-size: 11px; }
.workspace-metric > strong { display: block; color: var(--text); font-size: 27px; font-weight: 600; letter-spacing: -.04em; margin: 9px 0 6px; font-variant-numeric: tabular-nums; }
.workspace-metric > small { color: var(--faint); font-size: 10px; }
.workspace-disclosure { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.workspace-disclosure > summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.workspace-disclosure[open] > summary { margin-bottom: 12px; }
.ux-login-wrap { background: var(--bg); }
.ux-login { width: min(440px, 100%); padding: 40px; border-radius: 16px; box-shadow: 0 20px 70px -40px rgba(23, 100, 72, .3); }
.ux-login h1 { color: var(--text); font-size: 26px; }
.ux-login p.lead { font-size: 12px; color: var(--muted); }
.ux-login-mark { width: 42px; height: 42px; }
/* Video workspace owns its geometry; only its surfaces inherit the design system. */
.monitor-app .vi-left, .monitor-app .vi-right, .monitor-app .vi-toolbar { background: var(--card); border-color: var(--line); color: var(--text); }
.monitor-app .vi-panel-title, .monitor-app .vi-task-summary strong, .monitor-app .vi-ctx-title { color: var(--text); }
.monitor-app .vi-media-item, .monitor-app .vi-tool-btn, .monitor-app .vi-time, .monitor-app .vi-status-line { color: var(--muted); }
.monitor-app .vi-media-item.active { background: var(--accent-soft); color: var(--accent); }
.monitor-app .vi-context-summary, .monitor-app .vi-preview, .monitor-app .vi-json-wrap { background: var(--bg); border-color: var(--line); }
@media (min-width: 1650px) { .ux-scroll > .tab-pane { max-width: 1660px; margin-inline: auto; } }
@media (max-width: 1200px) { .ux-topbar { padding: 15px 22px; } .ux-scroll { padding: 22px; } .ux-title-meta { max-width: 490px; } }
@media (max-width: 767px) {
    .ux-topbar { padding: 13px 16px; gap: 12px; }
    .ux-scroll { padding: 18px 14px 36px; }
    .ux-controls { display: grid; grid-template-columns: minmax(0, 1fr) 35px 35px; gap: 6px; }
    .ux-dates { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
    .ux-dates input[type="date"] { min-width: 0; }
    .ux-range { min-width: 0; justify-content: space-around; }
    .ux-controls .ux-kbd { display: none; }
    .ux-controls .ux-updated, .ux-controls .ux-tz { display: none; }
    .ux-life { padding: 16px; }
    .workspace-heading { align-items: flex-start; }
    .workspace-heading h3 { font-size: 19px; }
    .workspace-heading .workspace-link { font-size: 11px; }
    .workspace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .workspace-metric { padding: 15px; }
    .workspace-metric > strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }