/* Lumen component layer. Tokens live in /static/design/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); font-weight: 680; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 6px; border: 1px solid var(--border); }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
pre.terminal { background: #060d1d; color: #d6e4f5; border-color: rgba(255,255,255,0.1); padding: var(--space-5); line-height: 1.7; box-shadow: var(--shadow-lg); }
pre.terminal .t-comment { color: #7f93b0; }
.section-foot { margin-top: var(--space-5); }
.align-self-start { align-self: start; }
.hero-figure { margin: 0; }
.hero-figure figcaption { margin-top: var(--space-3); text-align: center; font-size: var(--text-xs); color: #8ea2be; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: rgba(92, 208, 230, 0.35); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 100; background: var(--surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.skip-link:focus { top: var(--space-3); }

/* ---- Layout ------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster-between { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (max-width: 640px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-7); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: var(--text-sm); }
.xsmall { font-size: var(--text-xs); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); font-weight: 650; color: var(--accent); margin-bottom: var(--space-3); }
.lead { font-size: var(--text-lg); color: var(--text-muted); max-width: 62ch; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.6rem; height: 1.6rem; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.6rem; padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill); border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 600; font-size: var(--text-sm); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { border-color: var(--accent); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); --btn-border: transparent; box-shadow: 0 6px 18px -8px var(--accent); }
.btn-primary:hover { --btn-bg: var(--accent-hover); color: var(--accent-contrast); border-color: transparent; }
.btn-gradient { --btn-fg: #04111f; --btn-border: transparent; background: var(--brand-gradient); box-shadow: 0 10px 30px -12px rgba(92, 208, 230, 0.8); }
.btn-gradient:hover { color: #04111f; filter: brightness(1.05); }
.btn-ghost { --btn-bg: transparent; --btn-border: transparent; }
.btn-ghost:hover { --btn-bg: var(--surface-2); border-color: transparent; }
.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: transparent; }
.btn-danger:hover { color: #fff; filter: brightness(1.08); border-color: transparent; }
.btn-outline-danger { --btn-fg: var(--danger); --btn-border: color-mix(in srgb, var(--danger) 45%, transparent); --btn-bg: transparent; }
.btn-sm { min-height: 2.1rem; padding: 0.35rem 0.8rem; font-size: var(--text-xs); }
.btn-lg { min-height: 3.1rem; padding: 0.75rem 1.5rem; font-size: var(--text-md); }
.btn-block { width: 100%; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label, .label { font-weight: 600; font-size: var(--text-sm); }
.field .help, .helptext { color: var(--text-subtle); font-size: var(--text-xs); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.62rem 0.8rem; min-height: 2.75rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input[aria-invalid="true"], .field-error input { border-color: var(--danger); }
.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.checkbox input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: var(--text-sm); }
.errorlist li::before { content: "• "; }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ---- Cards, badges, alerts --------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.card-tight { padding: var(--space-4); }
.card-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.card-header h2, .card-header h3 { margin: 0; font-size: var(--text-lg); }
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-fast), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med); }
.card-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 650; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
.badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.85; }
.badge-plain::before { display: none; }
.badge-success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.badge-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.badge-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.badge-info { color: var(--info); background: var(--info-soft); border-color: transparent; }
.badge-accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--text-sm); }
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: var(--success-soft); border-color: transparent; }
.alert-warning { background: var(--warning-soft); border-color: transparent; }
.alert-danger, .alert-error { background: var(--danger-soft); border-color: transparent; }
.alert-info { background: var(--info-soft); border-color: transparent; }
.alert .icon { margin-top: 0.15rem; }
.alert-success .icon { color: var(--success); }
.alert-warning .icon { color: var(--warning); }
.alert-danger .icon, .alert-error .icon { color: var(--danger); }
.alert-info .icon { color: var(--info); }
.messages { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-weight: 650; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface-2); }
.table th, .table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table .actions { text-align: right; white-space: nowrap; }
.empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); }
.empty .icon { margin: 0 auto var(--space-3); width: 2rem; height: 2rem; color: var(--accent); }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-sm); }
dl.kv dt { color: var(--text-muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
dl.kv dd .badge { white-space: normal; margin-bottom: 0.25rem; }
@media (max-width: 480px) {
  dl.kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  dl.kv dd { margin-bottom: var(--space-3); }
}

/* ---- Meters & stats ------------------------------------------------------ */
.stat { display: grid; gap: var(--space-1); }
.stat-label { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; }
.stat-value { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.stat-note { font-size: var(--text-xs); color: var(--text-subtle); }
.meter { height: 0.5rem; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.meter.warn > span { background: var(--warning); }
.meter.full > span { background: var(--danger); }
.status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; background: var(--text-subtle); }
.status-ok { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.status-degraded { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.status-failed { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.status-unknown { background: var(--text-subtle); }

/* ---- Site header & footer ------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.site-header .bar { display: flex; align-items: center; gap: var(--space-5); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font-weight: 720; letter-spacing: -0.02em; font-size: 1.12rem; }
.brand img { width: 2rem; height: 2rem; border-radius: 9px; }
.brand:hover { color: var(--text); }
.nav { display: flex; gap: var(--space-1); align-items: center; }
.nav a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 560; padding: 0.45rem 0.7rem; border-radius: var(--radius-pill); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.header-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.theme-toggle { width: 2.4rem; height: 2.4rem; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.menu-toggle { display: none; }
@media (max-width: 920px) {
  .site-header .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: var(--space-3) var(--space-4) var(--space-5); background: var(--bg-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
  .site-header .nav a { padding: 0.75rem 0.9rem; font-size: var(--text-md); }
  .site-header[data-menu-open="true"] .nav { display: flex; }
  .menu-toggle { display: inline-grid; }
  .header-actions .hide-mobile { display: none; }
}
.site-footer { border-top: 1px solid var(--border); padding-block: var(--space-7) var(--space-6); margin-top: var(--space-8); background: var(--bg-elevated); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
.footer-grid h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.footer-grid a { color: var(--text-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--text); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.banner { padding: 0.6rem 0; font-size: var(--text-sm); text-align: center; background: var(--warning-soft); color: var(--text); border-bottom: 1px solid var(--border); }

/* ---- Marketing ----------------------------------------------------------- */
.hero { position: relative; overflow: hidden; color: #eaf3fb; background: var(--brand-hero); padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 7rem); isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.65), transparent 85%); z-index: -1; }
.hero h1 { font-size: var(--text-4xl); font-weight: 720; letter-spacing: -0.035em; max-width: 17ch; color: #fff; }
.hero .lead { color: #b9c8dd; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); }
.hero .eyebrow { color: var(--lm-cyan-300); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .btn:not(.btn-gradient) { --btn-bg: rgba(255,255,255,0.06); --btn-fg: #eaf3fb; --btn-border: rgba(255,255,255,0.22); }
.hero-proof { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); color: #a9bbd3; font-size: var(--text-sm); }
.hero-proof span { display: inline-flex; gap: 0.45rem; align-items: center; }
.hero-proof .icon { color: var(--lm-teal-300); }
.device { position: relative; border-radius: 22px; padding: 14px; background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); }
.device-screen { border-radius: 14px; background: #0b1530; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.mock-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #dbe7f5; font-weight: 600; font-size: 0.9rem; }
.mock-body { padding: 18px 16px; display: grid; gap: 12px; }
.mock-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.45; color: #e5eef8; background: #14213f; border: 1px solid rgba(255,255,255,0.06); }
.mock-msg.own { margin-left: auto; background: #133152; border-color: rgba(92,208,230,0.22); }
.mock-meta { font-size: 0.72rem; color: #8ea2be; margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.mock-shield { display: inline-flex; gap: 6px; align-items: center; font-size: 0.75rem; color: var(--lm-teal-300); background: rgba(60,207,182,0.12); padding: 4px 10px; border-radius: 999px; }
.feature-icon { width: 2.75rem; height: 2.75rem; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--space-4); }
.feature-icon.violet { background: var(--info-soft); color: var(--info); }
.feature-icon.teal { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }
.feature h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.feature p { color: var(--text-muted); margin: 0; font-size: var(--text-sm); }
.section-head { max-width: 68ch; margin-bottom: var(--space-6); }
.section-head.center { margin-inline: auto; }
.band { background: var(--surface); border-block: 1px solid var(--border); }
.band-dark { background: var(--lm-midnight-900); color: #e3ecf7; }
.band-dark .muted, .band-dark .lead { color: #a9bbd3; }
.band-dark .card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #e3ecf7; box-shadow: none; }
.band-dark .card p { color: #a9bbd3; }
.steps { counter-reset: step; display: grid; gap: var(--space-4); }
.step { position: relative; padding-left: 3.25rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent-soft); color: var(--accent); font-size: var(--text-sm); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.check-list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.check-list li .icon { color: var(--success); margin-top: 0.15rem; }
.x-list li .icon { color: var(--text-subtle); }
.pricing { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--space-4); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.plan .price { font-size: 2.4rem; font-weight: 740; letter-spacing: -0.03em; }
.plan .price small { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
.plan .check-list { flex: 1; }
.faq details { border-bottom: 1px solid var(--border); padding: var(--space-4) 0; }
.faq summary { cursor: pointer; font-weight: 620; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: var(--space-3) 0 0; color: var(--text-muted); }
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--space-7); font-size: var(--text-xl); }
.prose h3 { margin-top: var(--space-5); font-size: var(--text-lg); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: var(--space-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-4) 0; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); }
@media (max-width: 640px) { .prose table { display: block; overflow-x: auto; } }
.page-head { padding-block: var(--space-8) var(--space-6); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.03em; }
.diagram { width: 100%; height: auto; }
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-7); }
.docs-nav { position: sticky; top: 5.5rem; align-self: start; font-size: var(--text-sm); }
.docs-nav ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: 2px; }
.docs-nav a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; }
.docs-nav a:hover, .docs-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
@media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; } .docs-nav { position: static; } }

/* ---- Auth (entrance) pages ---------------------------------------------- */
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-aside { background: var(--brand-hero); color: #e3ecf7; padding: var(--space-7); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-aside h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); max-width: 18ch; letter-spacing: -0.03em; }
.auth-aside p { color: #a9bbd3; max-width: 44ch; }
.auth-aside .brand { color: #fff; }
.auth-main { display: grid; place-items: center; padding: var(--space-7) var(--space-5); }
.auth-panel { width: min(100%, 440px); }
.auth-panel h1 { font-size: var(--text-2xl); }
@media (max-width: 880px) { .auth-layout { grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-main { padding-top: var(--space-5); } }
.auth-mobile-brand { display: none; margin-bottom: var(--space-6); }
@media (max-width: 880px) { .auth-mobile-brand { display: inline-flex; } }

/* ---- App shell (portal + ops) ------------------------------------------- */
.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar nav { display: grid; gap: 2px; }
.sidebar .nav-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subtle); font-weight: 650; padding: var(--space-3) var(--space-3) var(--space-1); }
.sidebar nav a { display: flex; gap: var(--space-3); align-items: center; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 560; }
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); }
.sidebar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sidebar-foot { margin-top: auto; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.user-chip { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm); color: #04111f; background: var(--brand-gradient); flex: none; text-transform: uppercase; }
.app-main { padding: var(--space-6) clamp(1rem, 3vw, 2.5rem) var(--space-8); max-width: 1240px; width: 100%; }
.app-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.app-topbar h1 { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.app-topbar p { margin: 0; color: var(--text-muted); }
.mobile-bar { display: none; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-105%); transition: transform var(--dur-med) var(--ease-out); box-shadow: var(--shadow-lg); }
  .app-shell[data-nav-open="true"] .sidebar { transform: none; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-elevated); position: sticky; top: 0; z-index: 40; }
}
.ops-shell .sidebar { background: linear-gradient(180deg, var(--lm-midnight-900), var(--lm-midnight-950)); border-right-color: rgba(255,255,255,0.06); }
.ops-shell .sidebar, .ops-shell .sidebar .brand { color: #e3ecf7; }
.ops-shell .sidebar nav a { color: #a9bbd3; }
.ops-shell .sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ops-shell .sidebar nav a[aria-current="page"] { background: rgba(92,208,230,0.14); color: var(--lm-cyan-300); }
.ops-shell .sidebar .nav-label { color: #6f84a3; }
.ops-shell .user-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: #e3ecf7; }
.ops-shell .sidebar-foot .muted { color: #8ea2be; }
.ops-badge { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-violet-300); border: 1px solid rgba(164,151,250,0.35); border-radius: 999px; padding: 2px 8px; }
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; }
.tabs a { padding: 0.6rem 0.9rem; color: var(--text-muted); text-decoration: none; font-weight: 580; font-size: var(--text-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.danger-zone h2 { color: var(--danger); }
.security-score { display: flex; gap: var(--space-4); align-items: center; }
.ring { --p: 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; }
.ring > span { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 750; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-rows > li { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.list-rows > li:last-child { border-bottom: 0; }
.list-rows .row-label { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; white-space: nowrap; }
.codebox { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-3); overflow-wrap: anywhere; user-select: all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); font-family: var(--font-mono); }
.qr { background: #fff; padding: var(--space-3); border-radius: var(--radius-md); width: max-content; max-width: 100%; }
.qr svg { width: 200px; height: 200px; }
.fade-in { animation: fade-in var(--dur-med) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media print { .site-header, .site-footer, .sidebar, .mobile-bar { display: none !important; } }
.auth-points { color: #cfe0f2; }
.auth-points .icon { color: var(--lm-teal-300); }
.manage-panel { max-width: 760px; }

/* Width/progress utilities (CSP forbids inline styles). */
.grow-1 { flex: 1; }
.danger-icon { color: var(--danger); }
.check-list li .danger-icon { color: var(--danger); }
.meter > span.w-0 { width: 0%; }
.meter > span.w-1 { width: 1%; }
.meter > span.w-2 { width: 2%; }
.meter > span.w-3 { width: 3%; }
.meter > span.w-4 { width: 4%; }
.meter > span.w-5 { width: 5%; }
.meter > span.w-6 { width: 6%; }
.meter > span.w-7 { width: 7%; }
.meter > span.w-8 { width: 8%; }
.meter > span.w-9 { width: 9%; }
.meter > span.w-10 { width: 10%; }
.meter > span.w-11 { width: 11%; }
.meter > span.w-12 { width: 12%; }
.meter > span.w-13 { width: 13%; }
.meter > span.w-14 { width: 14%; }
.meter > span.w-15 { width: 15%; }
.meter > span.w-16 { width: 16%; }
.meter > span.w-17 { width: 17%; }
.meter > span.w-18 { width: 18%; }
.meter > span.w-19 { width: 19%; }
.meter > span.w-20 { width: 20%; }
.meter > span.w-21 { width: 21%; }
.meter > span.w-22 { width: 22%; }
.meter > span.w-23 { width: 23%; }
.meter > span.w-24 { width: 24%; }
.meter > span.w-25 { width: 25%; }
.meter > span.w-26 { width: 26%; }
.meter > span.w-27 { width: 27%; }
.meter > span.w-28 { width: 28%; }
.meter > span.w-29 { width: 29%; }
.meter > span.w-30 { width: 30%; }
.meter > span.w-31 { width: 31%; }
.meter > span.w-32 { width: 32%; }
.meter > span.w-33 { width: 33%; }
.meter > span.w-34 { width: 34%; }
.meter > span.w-35 { width: 35%; }
.meter > span.w-36 { width: 36%; }
.meter > span.w-37 { width: 37%; }
.meter > span.w-38 { width: 38%; }
.meter > span.w-39 { width: 39%; }
.meter > span.w-40 { width: 40%; }
.meter > span.w-41 { width: 41%; }
.meter > span.w-42 { width: 42%; }
.meter > span.w-43 { width: 43%; }
.meter > span.w-44 { width: 44%; }
.meter > span.w-45 { width: 45%; }
.meter > span.w-46 { width: 46%; }
.meter > span.w-47 { width: 47%; }
.meter > span.w-48 { width: 48%; }
.meter > span.w-49 { width: 49%; }
.meter > span.w-50 { width: 50%; }
.meter > span.w-51 { width: 51%; }
.meter > span.w-52 { width: 52%; }
.meter > span.w-53 { width: 53%; }
.meter > span.w-54 { width: 54%; }
.meter > span.w-55 { width: 55%; }
.meter > span.w-56 { width: 56%; }
.meter > span.w-57 { width: 57%; }
.meter > span.w-58 { width: 58%; }
.meter > span.w-59 { width: 59%; }
.meter > span.w-60 { width: 60%; }
.meter > span.w-61 { width: 61%; }
.meter > span.w-62 { width: 62%; }
.meter > span.w-63 { width: 63%; }
.meter > span.w-64 { width: 64%; }
.meter > span.w-65 { width: 65%; }
.meter > span.w-66 { width: 66%; }
.meter > span.w-67 { width: 67%; }
.meter > span.w-68 { width: 68%; }
.meter > span.w-69 { width: 69%; }
.meter > span.w-70 { width: 70%; }
.meter > span.w-71 { width: 71%; }
.meter > span.w-72 { width: 72%; }
.meter > span.w-73 { width: 73%; }
.meter > span.w-74 { width: 74%; }
.meter > span.w-75 { width: 75%; }
.meter > span.w-76 { width: 76%; }
.meter > span.w-77 { width: 77%; }
.meter > span.w-78 { width: 78%; }
.meter > span.w-79 { width: 79%; }
.meter > span.w-80 { width: 80%; }
.meter > span.w-81 { width: 81%; }
.meter > span.w-82 { width: 82%; }
.meter > span.w-83 { width: 83%; }
.meter > span.w-84 { width: 84%; }
.meter > span.w-85 { width: 85%; }
.meter > span.w-86 { width: 86%; }
.meter > span.w-87 { width: 87%; }
.meter > span.w-88 { width: 88%; }
.meter > span.w-89 { width: 89%; }
.meter > span.w-90 { width: 90%; }
.meter > span.w-91 { width: 91%; }
.meter > span.w-92 { width: 92%; }
.meter > span.w-93 { width: 93%; }
.meter > span.w-94 { width: 94%; }
.meter > span.w-95 { width: 95%; }
.meter > span.w-96 { width: 96%; }
.meter > span.w-97 { width: 97%; }
.meter > span.w-98 { width: 98%; }
.meter > span.w-99 { width: 99%; }
.meter > span.w-100 { width: 100%; }
.ring-0 { --p: 0; }
.ring-1 { --p: 1; }
.ring-2 { --p: 2; }
.ring-3 { --p: 3; }
.ring-4 { --p: 4; }
.ring-5 { --p: 5; }
.ring-6 { --p: 6; }
.ring-7 { --p: 7; }
.ring-8 { --p: 8; }
.ring-9 { --p: 9; }
.ring-10 { --p: 10; }
.ring-11 { --p: 11; }
.ring-12 { --p: 12; }
.ring-13 { --p: 13; }
.ring-14 { --p: 14; }
.ring-15 { --p: 15; }
.ring-16 { --p: 16; }
.ring-17 { --p: 17; }
.ring-18 { --p: 18; }
.ring-19 { --p: 19; }
.ring-20 { --p: 20; }
.ring-21 { --p: 21; }
.ring-22 { --p: 22; }
.ring-23 { --p: 23; }
.ring-24 { --p: 24; }
.ring-25 { --p: 25; }
.ring-26 { --p: 26; }
.ring-27 { --p: 27; }
.ring-28 { --p: 28; }
.ring-29 { --p: 29; }
.ring-30 { --p: 30; }
.ring-31 { --p: 31; }
.ring-32 { --p: 32; }
.ring-33 { --p: 33; }
.ring-34 { --p: 34; }
.ring-35 { --p: 35; }
.ring-36 { --p: 36; }
.ring-37 { --p: 37; }
.ring-38 { --p: 38; }
.ring-39 { --p: 39; }
.ring-40 { --p: 40; }
.ring-41 { --p: 41; }
.ring-42 { --p: 42; }
.ring-43 { --p: 43; }
.ring-44 { --p: 44; }
.ring-45 { --p: 45; }
.ring-46 { --p: 46; }
.ring-47 { --p: 47; }
.ring-48 { --p: 48; }
.ring-49 { --p: 49; }
.ring-50 { --p: 50; }
.ring-51 { --p: 51; }
.ring-52 { --p: 52; }
.ring-53 { --p: 53; }
.ring-54 { --p: 54; }
.ring-55 { --p: 55; }
.ring-56 { --p: 56; }
.ring-57 { --p: 57; }
.ring-58 { --p: 58; }
.ring-59 { --p: 59; }
.ring-60 { --p: 60; }
.ring-61 { --p: 61; }
.ring-62 { --p: 62; }
.ring-63 { --p: 63; }
.ring-64 { --p: 64; }
.ring-65 { --p: 65; }
.ring-66 { --p: 66; }
.ring-67 { --p: 67; }
.ring-68 { --p: 68; }
.ring-69 { --p: 69; }
.ring-70 { --p: 70; }
.ring-71 { --p: 71; }
.ring-72 { --p: 72; }
.ring-73 { --p: 73; }
.ring-74 { --p: 74; }
.ring-75 { --p: 75; }
.ring-76 { --p: 76; }
.ring-77 { --p: 77; }
.ring-78 { --p: 78; }
.ring-79 { --p: 79; }
.ring-80 { --p: 80; }
.ring-81 { --p: 81; }
.ring-82 { --p: 82; }
.ring-83 { --p: 83; }
.ring-84 { --p: 84; }
.ring-85 { --p: 85; }
.ring-86 { --p: 86; }
.ring-87 { --p: 87; }
.ring-88 { --p: 88; }
.ring-89 { --p: 89; }
.ring-90 { --p: 90; }
.ring-91 { --p: 91; }
.ring-92 { --p: 92; }
.ring-93 { --p: 93; }
.ring-94 { --p: 94; }
.ring-95 { --p: 95; }
.ring-96 { --p: 96; }
.ring-97 { --p: 97; }
.ring-98 { --p: 98; }
.ring-99 { --p: 99; }
.ring-100 { --p: 100; }
.diag-output, .ticket-body { white-space: pre-wrap; max-height: 28rem; overflow: auto; font-family: var(--font-mono); font-size: var(--text-xs); }
.ticket-body { background: none; border: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-sm); }
.history { gap: 3px; flex-wrap: nowrap; }
.history .status-dot { width: 0.45rem; height: 0.45rem; box-shadow: none; }
.text-right { text-align: right; }