/* ============================================================
   Obsidian — theme.css (authoritative component library)
   Dark, focused product UI: near-black layered surfaces, hairline
   translucent borders, crisp Inter type, restrained indigo→violet
   accents. Canonical class contract per themes/ARCHITECTURE.md.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{--color-background:#09090b;--color-surface:#131316;--color-surface-2:#1a1a1f;--color-border:rgba(255,255,255,.08);--color-border-strong:rgba(255,255,255,.16);--color-text:#fafafa;--color-text-secondary:#9f9fa8;--color-text-muted:#6f6f78;--color-primary:#6366f1;--color-secondary:#8b5cf6;--color-accent:#22d3ee;--color-success:#34d399;--color-error:#f87171;--color-warning:#fbbf24;--radius-lg:10px;--radius-md:8px;--radius-sm:6px;--shadow-pop:0 8px 30px rgba(0,0,0,.45);--glow-primary:0 0 0 1px rgba(99,102,241,.4),0 4px 20px rgba(99,102,241,.25);--grad-primary:linear-gradient(135deg,#6366f1,#8b5cf6);--font-head:'Inter',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--color-background);color:var(--color-text);font-family:var(--font-body);font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--color-text);letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- Layout: app shell ---------- */
.app-shell{display:flex;min-height:100vh}
.app-shell>.page-main{flex:1;min-width:0;position:relative}
.page-main::before{content:"";position:absolute;inset:0;background:radial-gradient(600px at 20% 0%,rgba(99,102,241,.10),transparent);pointer-events:none}
.page-inner{position:relative;padding:0 28px 40px}

/* ---------- Topbar ---------- */
.topbar{height:64px;display:flex;align-items:center;gap:14px;padding:0 28px;border-bottom:1px solid var(--color-border);position:relative}
.page-title{font:700 22px var(--font-head);letter-spacing:-.02em;line-height:1.2}
.crumb{font:500 12px var(--font-body);color:var(--color-text-muted);margin-top:2px}
.crumb b{color:var(--color-text-secondary);font-weight:500}
.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);cursor:pointer;position:relative;transition:all .15s ease}
.icon-btn:hover{background:rgba(255,255,255,.06);color:var(--color-text);border-color:var(--color-border-strong)}
.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.icon-btn .ping{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:999px;background:var(--color-accent);box-shadow:0 0 0 2px #09090b}
.topbar-avatar{width:34px;height:34px;border-radius:999px;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;font:600 12px var(--font-body);cursor:pointer;transition:all .15s ease}
.topbar-avatar:hover{box-shadow:var(--glow-primary)}

/* ---------- Sidebar ---------- */
.sidebar{width:240px;flex:0 0 240px;background:#0d0d10;border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:0 12px 16px}
.logo-row{height:56px;display:flex;align-items:center;gap:10px;padding:0 8px;border-bottom:1px solid var(--color-border);margin-bottom:12px}
.logo-mark{width:26px;height:26px;border-radius:7px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 1px rgba(99,102,241,.4),0 2px 10px rgba(99,102,241,.3)}
.logo-name{font:700 14px var(--font-body);letter-spacing:-.01em}
.logo-name span{color:var(--color-text-secondary);font-weight:500}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-md);font:500 13px var(--font-body);color:var(--color-text-secondary);text-decoration:none;margin-bottom:2px;transition:all .15s ease;cursor:pointer}
.nav-item svg{width:16px;height:16px;flex:0 0 16px}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--color-text)}
.nav-item.active{background:rgba(99,102,241,.14);color:var(--color-text)}
.nav-item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--color-primary)}
.nav-badge{margin-left:auto;font:600 10.5px var(--font-mono);color:var(--color-accent);background:rgba(34,211,238,.12);padding:1px 7px;border-radius:999px}
.nav-count{margin-left:auto;font:500 11px var(--font-mono);color:var(--color-text-muted)}
.nav-section-label{font:600 11px var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin:20px 12px 6px}
.sidebar-spacer{flex:1}
.user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);transition:all .15s ease}
.user-card:hover{border-color:var(--color-border-strong)}
.user-avatar{width:28px;height:28px;border-radius:999px;background:rgba(99,102,241,.2);color:#a5a8ff;display:flex;align-items:center;justify-content:center;font:600 11px var(--font-body);flex:0 0 28px}
.user-meta{min-width:0}
.user-name{font:600 12.5px var(--font-body);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font:500 11px var(--font-body);color:var(--color-text-muted)}
.user-card svg{margin-left:auto;color:var(--color-text-muted);flex:0 0 16px}

/* ---------- Cards ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}
.card-title{font:600 14px var(--font-head)}
.card-sub{font:500 12px var(--font-body);color:var(--color-text-muted);margin-top:2px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ghost-icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}
.ghost-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--color-text)}
.divider{border:none;border-top:1px solid var(--color-border);margin:16px 0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-md);font:600 13px var(--font-body);cursor:pointer;border:1px solid transparent;transition:all .15s ease}
.btn-primary{background:var(--grad-primary);color:#fff}
.btn-primary:hover{filter:brightness(1.1);box-shadow:var(--glow-primary)}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:transparent;border-color:var(--color-border-strong);color:var(--color-text)}
.btn-secondary:hover{background:rgba(255,255,255,.06)}
.btn-ghost{background:transparent;color:var(--color-text-secondary)}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--color-text)}
.btn-danger{background:rgba(248,113,113,.12);color:var(--color-error);border-color:rgba(248,113,113,.3)}
.btn-danger:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.45)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.btn-sm{height:30px;padding:0 11px;font-size:12px}
.btn-lg{height:42px;padding:0 20px;font-size:14px}

/* ---------- Forms ---------- */
input,select,textarea{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:400 13.5px var(--font-body);height:38px;padding:0 12px;width:100%;transition:all .15s ease}
input::placeholder,textarea::placeholder{color:var(--color-text-muted)}
textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}
label{display:block;font:500 12px var(--font-body);color:var(--color-text-secondary);margin-bottom:6px}
.field-error{border-color:rgba(248,113,113,.55)!important}
.field-error:focus{box-shadow:0 0 0 3px rgba(248,113,113,.22)!important;border-color:var(--color-error)!important}
.helper-text{font:400 12px var(--font-body);color:var(--color-text-muted);margin-top:6px}
.error-msg{display:flex;align-items:center;gap:6px;font:500 12px var(--font-body);color:var(--color-error);margin-top:6px}
.error-msg svg{width:13px;height:13px;flex:0 0 13px}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse}
th{background:var(--color-surface-2);color:var(--color-text-secondary);font:600 11px var(--font-body);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:10px 16px}
td{padding:12px 16px;border-bottom:1px solid var(--color-border);font-size:13px}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(255,255,255,.03)}
tbody tr:last-child td{border-bottom:none}

/* ---------- Pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--font-body);padding:3px 10px;border-radius:999px}
.pill .dot{width:6px;height:6px;border-radius:999px;background:currentColor}
.pill-success{background:rgba(52,211,153,.12);color:var(--color-success)}
.pill-error{background:rgba(248,113,113,.12);color:var(--color-error)}
.pill-warning{background:rgba(251,191,36,.12);color:var(--color-warning)}
.pill-neutral{background:rgba(255,255,255,.06);color:var(--color-text-secondary)}

/* ---------- Alerts ---------- */
.alert{display:flex;align-items:flex-start;gap:10px;border-radius:var(--radius-lg);padding:12px 14px;font-size:13px;border:1px solid transparent;margin-bottom:12px}
.alert:last-child{margin-bottom:0}
.alert svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
.alert b{font-weight:600}
.alert p{color:var(--color-text-secondary);font-size:12.5px;margin-top:1px}
.alert-success{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.30);color:var(--color-success)}
.alert-warning{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.30);color:var(--color-warning)}
.alert-error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.30);color:var(--color-error)}
.alert-title{color:var(--color-text)}

/* ---------- Avatar ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:999px;background:rgba(99,102,241,.2);color:#a5a8ff;font:600 12px var(--font-body);overflow:hidden;object-fit:cover}
.avatar img{width:100%;height:100%;border-radius:999px;object-fit:cover;display:block}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5);padding:24px;width:100%;max-width:460px}

/* ---------- Stats ---------- */
.stat-value{font:700 26px var(--font-mono);letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.stat-value.hero{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font:500 12px var(--font-body);color:var(--color-text-secondary)}


/* ══ Project-specific additions (generated) ══ */
/* ===== ThinkMetrics — Project-specific CSS ===== */
/* theme.css is automatically prepended; these are app extensions only. */

/* --- Layout Contract (required by every page) --- */
.app-shell { display: flex; min-height: 100vh; }
.app-shell > .page-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- Page inner content wrapper --- */
.page-inner { padding: 24px 28px 48px; flex: 1; }
.page-inner > :first-child { margin-top: 0; }

/* --- Topbar --- */
.topbar { display: flex; align-items: center; gap: 16px; padding: 0 28px; height: 56px; border-bottom: 1px solid var(--color-border); background: rgba(13,13,16,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; }
.topbar-spacer { flex: 1; }

/* --- Topbar search --- */
.topbar-search { position: relative; width: 280px; margin-left: auto; }
.topbar-search input { height: 34px; padding-left: 34px; padding-right: 52px; font-size: 13px; }
.topbar-search .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); width: 15px; height: 15px; pointer-events: none; }
.topbar-search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 500 10.5px var(--font-mono); color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 5px; padding: 1px 6px; background: var(--color-surface); }

/* --- Icon button --- */
.icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all 150ms ease; position: relative; flex-shrink: 0; }
.icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }
.icon-btn .ping { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-surface); }

/* --- Topbar avatar --- */
.topbar-avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; font: 600 12px var(--font-body); color: #fff; cursor: pointer; flex-shrink: 0; }

/* --- Mobile menu toggle --- */
.menu-toggle { display: none; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); cursor: pointer; }

/* --- KPI / stat grid --- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; transition: all 150ms ease; }
.kpi-card:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; font: 500 12px var(--font-body); color: var(--color-text-secondary); }
.kpi-head svg { width: 16px; height: 16px; color: var(--color-text-muted); }
.kpi-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 12px var(--font-body); color: var(--color-text-muted); }

/* --- Trend indicator --- */
.trend { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--font-mono); }
.trend svg { width: 12px; height: 12px; }
.trend-up { color: var(--color-success); }
.trend-down { color: var(--color-error); }
.trend-warn { color: var(--color-warning); }
.trend-flat { color: var(--color-text-muted); }

/* --- Hero stat (one per page, gradient text) --- */
.stat-value.hero { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Panel rows --- */
.panel-row { display: grid; gap: 16px; margin-top: 16px; }
.panel-row.cols-2 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.panel-row.cols-2-even { grid-template-columns: 1fr 1fr; }
.panel-row.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Card header --- */
.card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.card-sub { font: 400 12px var(--font-body); color: var(--color-text-secondary); margin-top: 2px; }

/* --- Ghost icon button --- */
.ghost-icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: all 150ms ease; flex-shrink: 0; }
.ghost-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }

/* --- Chart wrapper --- */
.chart-wrap { margin-top: 4px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-x { display: flex; justify-content: space-between; padding: 8px 34px 0 34px; font: 500 11px var(--font-mono); color: var(--color-text-muted); }

/* --- Legend --- */
.legend { display: flex; align-items: center; gap: 16px; font: 500 12px var(--font-body); color: var(--color-text-secondary); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* --- Activity feed --- */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.feed-item:last-child { border-bottom: none; padding-bottom: 2px; }
.feed-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.feed-icon svg { width: 14px; height: 14px; }
.fi-indigo { background: rgba(99,102,241,.14); color: #a5a8ff; }
.fi-success { background: rgba(52,211,153,.12); color: var(--color-success); }
.fi-warning { background: rgba(251,191,36,.12); color: var(--color-warning); }
.fi-error { background: rgba(248,113,113,.12); color: var(--color-error); }
.fi-accent { background: rgba(34,211,238,.12); color: var(--color-accent); }
.feed-text { font: 400 12.5px var(--font-body); color: var(--color-text-secondary); line-height: 1.45; }
.feed-text b { color: var(--color-text); font-weight: 600; }
.feed-time { font: 500 11px var(--font-mono); color: var(--color-text-muted); margin-top: 2px; }

/* --- Table card --- */
.table-card { padding: 0; overflow: hidden; margin-top: 16px; }
.table-card .card-header { padding: 16px 20px; margin-bottom: 0; border-bottom: 1px solid var(--color-border); }
.td-num { text-align: right; }
th.td-num { text-align: right; }
.td-id { color: var(--color-text); font-weight: 500; }
.td-meta { color: var(--color-text-secondary); }
.mono { font-family: var(--font-mono); }

/* --- Route cell --- */
.route { display: flex; align-items: center; gap: 8px; color: var(--color-text); }
.route svg { width: 13px; height: 13px; color: var(--color-text-muted); }

/* --- Form grid --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.form-actions .btn-ghost { margin-left: auto; }

/* --- Bottom row --- */
.bottom-row { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 16px; margin-top: 16px; align-items: start; }

/* --- Progress meter --- */
.meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width 300ms ease; }
.meter-fill.success { background: var(--color-success); }
.meter-fill.warning { background: var(--color-warning); }
.meter-fill.error { background: var(--color-error); }

/* --- Funnel --- */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-step { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.funnel-bar { flex: 1; height: 28px; border-radius: var(--radius-sm); background: linear-gradient(90deg, rgba(99,102,241,0.3), rgba(139,92,246,0.2)); position: relative; display: flex; align-items: center; padding: 0 10px; }
.funnel-label { font: 500 12px var(--font-body); color: var(--color-text-secondary); min-width: 120px; }
.funnel-value { font: 600 13px var(--font-mono); color: var(--color-text); }
.funnel-pct { font: 500 11px var(--font-mono); color: var(--color-text-muted); margin-left: auto; }

/* --- Tab bar --- */
.tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; overflow-x: auto; }
.tab-item { padding: 10px 16px; font: 500 13px var(--font-body); color: var(--color-text-secondary); border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; transition: all 150ms ease; margin-bottom: -1px; white-space: nowrap; }
.tab-item:hover { color: var(--color-text); }
.tab-item.active { color: var(--color-text); border-bottom-color: var(--color-primary); }

/* --- Breadcrumb --- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font: 500 12px var(--font-body); color: var(--color-text-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; transition: color 150ms ease; cursor: pointer; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb .sep { color: var(--color-text-muted); }
.breadcrumb .current { color: var(--color-text); }

/* --- Search input --- */
.search-input { position: relative; }
.search-input input { height: 34px; padding-left: 32px; font-size: 13px; width: 100%; }
.search-input .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); width: 14px; height: 14px; pointer-events: none; }

/* --- Empty state --- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-state svg { width: 40px; height: 40px; color: var(--color-text-muted); margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font: 600 15px var(--font-body); color: var(--color-text); margin: 0 0 6px; }
.empty-state p { font: 400 13px var(--font-body); color: var(--color-text-secondary); margin: 0; max-width: 320px; }

/* --- Skeleton loader --- */
.skeleton { background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 50%, var(--color-surface) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-line { height: 12px; margin-bottom: 8px; border-radius: var(--radius-sm); }
.skeleton-line:last-child { margin-bottom: 0; width: 60%; }

/* --- Segmented control --- */
.segmented { display: inline-flex; padding: 3px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); gap: 2px; }
.segmented button { padding: 5px 12px; font: 500 12px var(--font-body); color: var(--color-text-secondary); border: none; background: transparent; border-radius: 5px; cursor: pointer; transition: all 150ms ease; }
.segmented button:hover { color: var(--color-text); }
.segmented button.active { background: rgba(255,255,255,0.08); color: var(--color-text); }

/* --- Detail list --- */
.detail-list { display: flex; flex-direction: column; }
.detail-row { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border); gap: 16px; }
.detail-row:last-child { border-bottom: none; }
.detail-key { font: 500 12px var(--font-body); color: var(--color-text-secondary); white-space: nowrap; }
.detail-val { font: 500 13px var(--font-body); color: var(--color-text); text-align: right; }
.detail-val.mono { font-family: var(--font-mono); }

/* --- Status dot --- */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.status-dot.live { background: var(--color-success); box-shadow: 0 0 0 3px rgba(52,211,153,0.2); animation: pulse-dot 2s ease infinite; }
.status-dot.idle { background: var(--color-text-muted); }
.status-dot.warn { background: var(--color-warning); }
.status-dot.error { background: var(--color-error); }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 3px rgba(52,211,153,0.2); } 50% { box-shadow: 0 0 0 5px rgba(52,211,153,0.1); } }

/* --- Sparkline --- */
.sparkline { display: inline-block; vertical-align: middle; }
.sparkline svg { width: 60px; height: 20px; }

/* --- Code block --- */
.code-block { font: 500 12.5px var(--font-mono); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--color-text-secondary); overflow-x: auto; line-height: 1.6; }
.code-block .kw { color: var(--color-secondary); }
.code-block .num { color: var(--color-accent); }
.code-block .str { color: var(--color-success); }

/* --- Info tooltip trigger --- */
.info-tip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-muted); font: 600 9px var(--font-body); cursor: help; margin-left: 4px; transition: all 150ms ease; vertical-align: middle; }
.info-tip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* --- Cohort retention table --- */
.cohort-table { width: 100%; border-collapse: collapse; }
.cohort-table th, .cohort-table td { text-align: center; padding: 8px 10px; font: 500 12px var(--font-mono); border: 1px solid var(--color-border); }
.cohort-table th { background: var(--color-surface-2); color: var(--color-text-secondary); font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.cohort-table td:first-child { text-align: left; color: var(--color-text); font-weight: 500; }
.cohort-cell { border-radius: 4px; padding: 4px 6px; display: inline-block; min-width: 36px; }
.cohort-good { background: rgba(52,211,153,0.14); color: var(--color-success); }
.cohort-mid { background: rgba(251,191,36,0.14); color: var(--color-warning); }
.cohort-bad { background: rgba(248,113,113,0.14); color: var(--color-error); }
.cohort-na { color: var(--color-text-muted); }

/* --- Section heading --- */
.section-heading { font: 600 16px var(--font-body); letter-spacing: -0.01em; color: var(--color-text); margin: 24px 0 12px; }
.section-heading:first-child { margin-top: 0; }

/* --- Page radial glow --- */
.page-glow { position: fixed; top: 0; left: 240px; right: 0; height: 400px; background: radial-gradient(600px at 20% 0%, rgba(99,102,241,0.08), transparent); pointer-events: none; z-index: 0; }
.page-main > * { position: relative; z-index: 1; }

/* --- Auth pages --- */
.auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-background); position: relative; overflow: hidden; }
.auth-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, rgba(99,102,241,0.12), transparent 70%); pointer-events: none; }
.auth-card { width: 100%; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; position: relative; z-index: 1; box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-logo .logo-mark { width: 32px; height: 32px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; color: #fff; }
.auth-logo .logo-name { font: 700 18px var(--font-head); letter-spacing: -0.02em; color: var(--color-text); }
.auth-title { font: 700 20px var(--font-head); letter-spacing: -0.02em; color: var(--color-text); margin: 0 0 6px; }
.auth-sub { font: 400 13px var(--font-body); color: var(--color-text-secondary); margin: 0 0 24px; }
.auth-foot { margin-top: 20px; text-align: center; font: 400 12px var(--font-body); color: var(--color-text-muted); }
.auth-foot a { color: var(--color-primary); text-decoration: none; cursor: pointer; }
.auth-foot a:hover { text-decoration: underline; }

/* --- Environment badge --- */
.env-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font: 600 11px var(--font-mono); }
.env-badge.prod { background: rgba(248,113,113,0.12); color: var(--color-error); border: 1px solid rgba(248,113,113,0.3); }
.env-badge.staging { background: rgba(251,191,36,0.12); color: var(--color-warning); border: 1px solid rgba(251,191,36,0.3); }
.env-badge.dev { background: rgba(34,211,238,0.12); color: var(--color-accent); border: 1px solid rgba(34,211,238,0.3); }

/* --- Toggle switch --- */
.toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); border-radius: 999px; transition: 150ms ease; }
.toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: var(--color-text-secondary); border-radius: 999px; transition: 150ms ease; }
.toggle input:checked + .toggle-slider { background: rgba(99,102,241,0.3); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); background: var(--color-primary); }

/* --- Sidebar user card --- */
.user-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; transition: all 150ms ease; }
.user-card:hover { background: rgba(255,255,255,0.05); }
.user-avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; font: 600 12px var(--font-body); color: #fff; flex-shrink: 0; }
.user-meta { flex: 1; min-width: 0; }
.user-name { font: 500 13px var(--font-body); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font: 400 11px var(--font-body); color: var(--color-text-muted); }
.sidebar-spacer { flex: 1; }

/* --- Logo row --- */
.logo-row { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--color-border); }
.logo-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.logo-name { font: 700 15px var(--font-head); letter-spacing: -0.02em; color: var(--color-text); }
.logo-name span { color: var(--color-text-secondary); font-weight: 500; }

/* --- Nav count/badge --- */
.nav-count { margin-left: auto; font: 500 11px var(--font-mono); color: var(--color-text-muted); background: rgba(255,255,255,0.06); padding: 1px 7px; border-radius: 999px; }
.nav-badge { margin-left: auto; font: 600 9px var(--font-mono); color: var(--color-accent); background: rgba(34,211,238,0.12); padding: 2px 6px; border-radius: 999px; letter-spacing: 0.05em; }

/* --- Alert banner (top of dashboards) --- */
.alert-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 16px; font: 400 13px var(--font-body); }
.alert-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.alert-banner .alert-banner-action { margin-left: auto; }

/* --- Heatmap cell --- */
.heatmap-cell { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; font: 500 10px var(--font-mono); color: var(--color-text-muted); }
.heatmap-cell.h0 { background: rgba(255,255,255,0.03); }
.heatmap-cell.h1 { background: rgba(99,102,241,0.15); color: #a5a8ff; }
.heatmap-cell.h2 { background: rgba(99,102,241,0.3); color: #c5c7ff; }
.heatmap-cell.h3 { background: rgba(99,102,241,0.5); color: #fafafa; }
.heatmap-cell.h4 { background: rgba(99,102,241,0.7); color: #fff; }

/* --- Responsive --- */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-row.cols-2, .panel-row.cols-2-even { grid-template-columns: 1fr; }
  .panel-row.cols-3 { grid-template-columns: 1fr; }
  .bottom-row { grid-template-columns: 1fr; }
  .page-glow { left: 0; }
}
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .app-shell > .sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); z-index: 200; transition: transform 200ms ease; width: 240px; }
  .app-shell > .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.5); }
  .menu-toggle { display: inline-flex; }
  .page-inner { padding: 16px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .topbar-search { display: none; }
  .topbar { padding: 0 16px; }
}

/* ============ ThinkMetrics — Login page ============ */
/* Page-specific styles only; component library comes from theme.css */

/* ---------- Auth shell ---------- */
.auth-shell{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--color-background);overflow:hidden}
.auth-glow{position:absolute;inset:0;background:radial-gradient(680px at 50% -8%,rgba(99,102,241,0.16),transparent 62%),radial-gradient(560px at 82% 112%,rgba(139,92,246,0.10),transparent 60%);pointer-events:none}
.auth-shell::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 78%);pointer-events:none}

/* ---------- Card ---------- */
.auth-card{position:relative;width:100%;max-width:428px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:34px 34px 26px;box-shadow:0 1px 0 rgba(255,255,255,0.03) inset,0 24px 60px rgba(0,0,0,0.55)}

/* ---------- Brand ---------- */
.auth-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:10px}
.auth-brand .logo-mark{width:32px;height:32px;border-radius:9px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 1px rgba(99,102,241,0.45),0 6px 22px rgba(99,102,241,0.32)}
.auth-brand .logo-name{font:700 18px var(--font-body);letter-spacing:-0.02em;color:var(--color-text)}
.auth-brand .logo-name span{color:var(--color-text-secondary);font-weight:500}

/* ---------- Environment badge ---------- */
.env-badge-row{display:flex;justify-content:center;margin-bottom:20px}
.env-badge{display:inline-flex;align-items:center;gap:8px;font:600 11.5px var(--font-body);letter-spacing:0.01em;padding:5px 13px 5px 11px;border-radius:999px;border:1px solid;cursor:pointer;transition:transform 150ms ease,box-shadow 150ms ease;user-select:none}
.env-badge:hover{transform:translateY(-1px)}
.env-badge:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.env-badge .dot{width:6px;height:6px;border-radius:999px;flex:0 0 6px}
.env-badge .label{white-space:nowrap}
.env-badge .chev{margin-left:2px;opacity:0.6;display:flex;align-items:center}
.env-badge .chev svg{width:11px;height:11px;display:block}
.env-badge.env-staging{background:rgba(251,191,36,0.10);border-color:rgba(251,191,36,0.30);color:var(--color-warning)}
.env-badge.env-staging .dot{background:var(--color-warning);box-shadow:0 0 8px rgba(251,191,36,0.7)}
.env-badge.env-uat{background:rgba(34,211,238,0.10);border-color:rgba(34,211,238,0.30);color:var(--color-accent)}
.env-badge.env-uat .dot{background:var(--color-accent);box-shadow:0 0 8px rgba(34,211,238,0.7)}
.env-badge.env-prod{background:rgba(52,211,153,0.10);border-color:rgba(52,211,153,0.30);color:var(--color-success)}
.env-badge.env-prod .dot{background:var(--color-success);box-shadow:0 0 8px rgba(52,211,153,0.7)}

/* ---------- Heading ---------- */
.auth-heading{text-align:center;margin-bottom:22px}
.auth-heading h1{font:700 22px/1.2 var(--font-body);letter-spacing:-0.02em;color:var(--color-text)}
.auth-heading p{margin-top:7px;font:400 13px/1.55 var(--font-body);color:var(--color-text-secondary)}

/* ---------- Error banner ---------- */
.auth-error{display:none;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:8px;background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.30);margin-bottom:16px}
.auth-error.show{display:flex;animation:shake 0.4s ease}
.auth-error svg.ic{width:16px;height:16px;flex:0 0 16px;color:var(--color-error);margin-top:1px}
.auth-error b{display:block;font:600 12.5px var(--font-body);color:#fecaca;margin-bottom:1px}
.auth-error span.msg{font:400 12px/1.5 var(--font-body);color:#fca5a5}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}

/* ---------- Form ---------- */
.auth-form{display:flex;flex-direction:column;gap:15px}
.auth-field{position:relative}
.auth-field > label{display:block;font:500 12px var(--font-body);color:var(--color-text-secondary);margin-bottom:6px}
.auth-field > label .req{color:var(--color-error);margin-left:2px}
.auth-field .input-wrap{position:relative}
.auth-field .input-wrap svg.lead{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);width:16px;height:16px;transition:color 150ms ease;pointer-events:none}
.auth-field input.auth-input{width:100%;height:42px;padding:0 12px;background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);font:400 13.5px var(--font-body);transition:border-color 150ms ease,box-shadow 150ms ease}
.auth-field input.auth-input.with-icon{padding-left:38px}
.auth-field input.auth-input.with-trail{padding-right:42px}
.auth-field input.auth-input::placeholder{color:var(--color-text-muted)}
.auth-field input.auth-input:hover{border-color:rgba(255,255,255,0.16)}
.auth-field input.auth-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.25)}
.auth-field:focus-within svg.lead{color:var(--color-primary)}
.auth-field .trail-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:6px;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 150ms ease,color 150ms ease}
.auth-field .trail-btn:hover{background:rgba(255,255,255,0.06);color:var(--color-text)}
.auth-field .trail-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.auth-field .trail-btn svg{width:15px;height:15px}
.auth-field .field-error-msg{display:none;align-items:center;gap:6px;margin-top:6px;font:500 12px var(--font-body);color:var(--color-error)}
.auth-field .field-error-msg svg{width:13px;height:13px;flex:0 0 13px}
.auth-field.error input.auth-input{border-color:rgba(248,113,113,0.55)}
.auth-field.error input.auth-input:focus{box-shadow:0 0 0 3px rgba(248,113,113,0.18)}
.auth-field.error .field-error-msg{display:flex}
.auth-field.error svg.lead{color:var(--color-error)}

/* ---------- Row: remember + change password ---------- */
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-2px}
.auth-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:500 12.5px var(--font-body);color:var(--color-text-secondary);user-select:none;position:relative}
.auth-check input{position:absolute;opacity:0;width:0;height:0}
.auth-check .box{width:16px;height:16px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-background);display:flex;align-items:center;justify-content:center;transition:all 150ms ease;flex:0 0 16px}
.auth-check .box svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(0.5);transition:all 150ms ease}
.auth-check input:checked + .box{background:var(--grad-primary);border-color:transparent}
.auth-check input:checked + .box svg{opacity:1;transform:scale(1)}
.auth-check input:focus-visible + .box{box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.auth-check:hover .box{border-color:rgba(255,255,255,0.16)}
.auth-link{font:500 12.5px var(--font-body);color:var(--color-primary);text-decoration:none;cursor:pointer;background:none;border:none;padding:0;transition:color 150ms ease}
.auth-link:hover{color:var(--color-secondary);text-decoration:underline;text-underline-offset:2px}
.auth-link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary);border-radius:4px}

/* ---------- Submit ---------- */
.btn-submit{position:relative;width:100%;height:42px;border-radius:8px;border:none;background:var(--grad-primary);color:#fff;font:600 13.5px var(--font-body);letter-spacing:0.01em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter 150ms ease,box-shadow 150ms ease,transform 150ms ease;box-shadow:0 0 0 1px rgba(99,102,241,0.4),0 6px 20px rgba(99,102,241,0.28)}
.btn-submit:hover{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(99,102,241,0.5),0 8px 26px rgba(99,102,241,0.38)}
.btn-submit:active{transform:translateY(1px)}
.btn-submit:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.btn-submit:disabled{cursor:not-allowed;filter:saturate(0.7) brightness(0.85)}
.btn-submit .spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:999px;animation:spin 0.7s linear infinite;display:none}
.btn-submit.loading .label{opacity:0.65}
.btn-submit.loading .spinner{display:block}
.btn-submit.loading .arrow{display:none}
.btn-submit .arrow{display:flex;align-items:center}
.btn-submit .arrow svg{width:15px;height:15px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Rate limit ---------- */
.rate-row{display:none;align-items:center;justify-content:center;gap:9px;font:500 11.5px var(--font-mono);color:var(--color-text-muted);margin-top:-2px}
.rate-row.show{display:flex}
.rate-row .dots{display:flex;gap:4px}
.rate-row .dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,0.14);transition:background 150ms ease}
.rate-row .dots i.lost{background:rgba(248,113,113,0.5)}
.rate-row .dots i.warn{background:var(--color-warning)}

/* ---------- Divider ---------- */
.auth-divider{display:flex;align-items:center;gap:12px;margin:4px 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--color-border)}
.auth-divider span{font:500 11px var(--font-body);text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted)}

/* ---------- SSO ---------- */
.btn-sso{width:100%;height:40px;border-radius:8px;border:1px solid var(--color-border);background:transparent;color:var(--color-text);font:600 13px var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:background 150ms ease,border-color 150ms ease}
.btn-sso:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16)}
.btn-sso:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary)}
.btn-sso svg{width:15px;height:15px}
.sso-note{display:none;margin-top:8px;text-align:center;font:500 11.5px/1.5 var(--font-body);color:var(--color-text-muted)}
.sso-note.show{display:block}

/* ---------- Demo hint ---------- */
.demo-hint{margin-top:14px;padding:10px 12px;border-radius:8px;background:rgba(34,211,238,0.06);border:1px solid rgba(34,211,238,0.18);font:500 11px/1.6 var(--font-mono);color:var(--color-text-secondary)}
.demo-hint b{color:var(--color-accent);font-weight:600}
.demo-hint code{color:var(--color-text);background:rgba(255,255,255,0.05);padding:1px 5px;border-radius:4px}
.demo-hint .auth-link{font:500 11px var(--font-mono);color:var(--color-accent)}

/* ---------- Footer ---------- */
.auth-foot{margin-top:18px;text-align:center;font:400 12.5px var(--font-body);color:var(--color-text-secondary)}
.auth-foot .auth-link{color:var(--color-text)}
.auth-foot .auth-link:hover{color:var(--color-primary)}

/* ---------- Security strip ---------- */
.security-strip{margin-top:20px;padding-top:18px;border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.security-item{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--font-body);color:var(--color-text-muted)}
.security-item svg{width:12px;height:12px;color:var(--color-text-muted)}
.security-item .mono{font:500 11px var(--font-mono);color:var(--color-text-secondary)}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .auth-card{padding:28px 22px 22px}
  .auth-heading h1{font-size:20px}
  .security-strip{gap:12px}
}

.tm-generated-style-6aa34d7432e7{display:none}