/* Plexe room-mapping sandbox. Light, monochrome, typography-led. Tokens from the house design spec. */
:root {
  --bg: #fbfbfa; --surface: #ffffff; --surface-2: #f6f6f4; --ink: #191918; --ink-2: #37352f; --ink-3: #787774; --ink-4: #9b9a97; --ink-5: #b9b8b5;
  --line: #ebebea; --line-2: #e3e2e0; --line-3: #d6d5d2; --code-bg: #faf9f7;
  --pos: #0f7b6c; --pos-bg: #ecf3f0; --warn: #c2691f; --warn-bg: #faf3eb; --info: #37618e; --info-bg: #edf1f6;
  --radius: 6px; --radius-s: 4px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-drawer: -1px 0 0 var(--line-2);
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--sans); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01", "tnum" 0; }
a { color: inherit; text-decoration: none; }
a.link { color: var(--ink); border-bottom: 1px solid var(--line-3); transition: border-color 120ms var(--ease); }
a.link:hover { border-color: var(--ink-3); }
h1, h2, h3, h4 { color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: 30px; font-weight: 650; letter-spacing: -0.024em; line-height: 1.15; }
h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.3; }
h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-s); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.muted { color: var(--ink-3); } .faint { color: var(--ink-4); }
.small { font-size: 13px; } .tiny { font-size: 12px; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1px 5px; color: var(--ink); }
pre { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow: auto; white-space: pre; color: var(--ink-2); tab-size: 2; }
pre.out { background: #f4f8f6; border-color: #dfe9e4; }
pre .k { color: var(--info); } pre .s { color: var(--pos); } pre .n { color: #8a5a1f; } pre .b { color: #6b4fb8; } pre .c { color: var(--ink-4); }
.codewrap { position: relative; }
.codewrap .copy { position: absolute; top: 8px; right: 8px; }

/* ---------- shell */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 0; }
.mark { width: 28px; height: 28px; border-radius: 7px; background: var(--ink); display: grid; place-items: center; color: #fff; flex: none; }
.mark svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.brand span { display: block; font-size: 12px; color: var(--ink-4); }
.navgroup { display: flex; flex-direction: column; gap: 2px; }
.navgroup .eyebrow { padding: 0 10px 6px; font-size: 10.5px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius); color: var(--ink-2); font-size: 13.5px; font-weight: 450; transition: background 120ms var(--ease), color 120ms var(--ease); }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.on { background: var(--surface-2); color: var(--ink); font-weight: 560; }
.nav svg { width: 15px; height: 15px; stroke: var(--ink-4); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: stroke 120ms; }
.nav a.on svg, .nav a:hover svg { stroke: var(--ink); }
.nav .kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); }
.tenantcard { margin-top: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.tenantcard .who { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tenantcard b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenantcard .kp { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.meter { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; transition: width 300ms var(--ease); }
.meter.warn i { background: var(--warn); }
.tenantcard .foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-4); }
.tenantcard .foot a:hover { color: var(--ink); }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 40px; height: 52px; border-bottom: 1px solid var(--line); background: rgba(251,251,250,.92); backdrop-filter: saturate(1.2) blur(6px); }
.topbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); }
.topbar .crumbs b { color: var(--ink); font-weight: 560; }
.topbar .right { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink-3); }
.topbar .quota { display: flex; align-items: center; gap: 8px; }
.topbar .quota .meter { width: 90px; }
.content { padding: 40px 40px 80px; max-width: 1140px; width: 100%; display: flex; flex-direction: column; gap: 28px; }
.pagehead { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.pagehead .lead { font-size: 15.5px; color: var(--ink-3); max-width: 68ch; line-height: 1.6; }
.pagehead .actions { display: flex; gap: 8px; margin-top: 6px; }

/* ---------- primitives */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; line-height: 1; }
.chip.pos { color: var(--pos); background: var(--pos-bg); border-color: transparent; }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip.info { color: var(--info); background: var(--info-bg); border-color: transparent; }
.chip.ink { color: #fff; background: var(--ink); border-color: var(--ink); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.method { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--pos); background: var(--pos-bg); border-radius: var(--radius-s); padding: 2px 6px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.card.tight { padding: 0; gap: 0; overflow: hidden; }
.card > .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card > .head h3 { display: flex; align-items: center; gap: 8px; }
.card > .head h3 svg { width: 14px; height: 14px; stroke: var(--ink-4); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.callout svg { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout.warn { background: var(--warn-bg); border-color: transparent; color: #7a4512; }
.callout.info { background: var(--info-bg); border-color: transparent; color: #2c4a6b; }
.callout.pos { background: var(--pos-bg); border-color: transparent; color: #0c5d52; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 3px; }
.stat .l { font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); }
.stat b { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat b small { font-size: 13px; font-weight: 400; color: var(--ink-4); margin-left: 3px; letter-spacing: 0; }
.stat .f { font-size: 12px; color: var(--ink-4); }
.token { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 8px 8px 14px; background: var(--surface); transition: border-color 120ms; }
.token:hover { border-color: var(--line-3); }
.token .method { margin-right: 2px; }
.token code { flex: 1; border: none; background: none; padding: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.02em; }
.token code.masked { letter-spacing: 0.12em; }
.ibtn { position: relative; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--radius-s); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-3); transition: color 120ms, border-color 120ms, background 120ms; }
.ibtn:hover { color: var(--ink); border-color: var(--ink-4); }
.ibtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ibtn.copied { color: var(--pos); border-color: var(--pos); background: var(--pos-bg); }
.ibtn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: var(--radius-s); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; }
.ibtn:hover[data-tip]::after { opacity: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: var(--radius); font-size: 13.5px; font-weight: 560; cursor: pointer; transition: background 120ms, border-color 120ms, opacity 120ms, transform 60ms; }
.btn:hover { background: #2b2b29; border-color: #2b2b29; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line-3); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spin { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.divider { height: 1px; background: var(--line); }

/* steps */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: none; padding-bottom: 2px; }
.step:first-child { padding-top: 2px; }
.step .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-3); display: grid; place-items: center; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--ink-4); margin-top: 1px; }
.step .dot.done { background: var(--pos); border-color: var(--pos); color: #fff; }
.step .dot svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.step b { display: block; font-weight: 560; color: var(--ink); font-size: 13.5px; }
.step .step-done b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-3); }
.step span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; line-height: 1.5; }
.step .go { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 4px 9px; margin-top: 1px; transition: color 120ms, border-color 120ms; }
.step .go:hover { color: var(--ink); border-color: var(--ink-4); }

/* layout helpers */
.cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.cols.even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.sticky { position: sticky; top: 72px; }

/* forms */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 560; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.field label .opt { font-weight: 400; color: var(--ink-4); font-size: 12px; }
.field .hint { font-size: 12px; color: var(--ink-4); line-height: 1.45; }
.field input, .field select, .field textarea { font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 11px; width: 100%; transition: border-color 120ms, box-shadow 120ms; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-5); }
.field textarea { font-family: var(--mono); font-size: 12.5px; min-height: 260px; line-height: 1.55; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(25,25,24,.06); }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9a97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg label { cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; transition: border-color 120ms, background 120ms; }
.seg label:hover { border-color: var(--line-3); }
.seg label b { font-size: 13px; font-weight: 560; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.seg label span { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + label { border-color: var(--ink); background: var(--surface-2); }
.seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
details.adv { border-top: 1px solid var(--line); padding-top: 12px; }
details.adv summary { cursor: pointer; font-size: 12.5px; color: var(--ink-3); list-style: none; display: flex; align-items: center; gap: 6px; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 120ms; }
details.adv[open] summary svg { transform: rotate(90deg); }
details.adv .field { margin-top: 12px; }
.formfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 10px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; margin-bottom: -1px; font-weight: 500; transition: color 120ms; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .spacer { flex: 1; }

/* response */
.sumstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.sumstrip b { color: var(--ink); font-weight: 560; }
.sumstrip .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-3); }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.group { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.group.unplaced { border-style: dashed; }
.group .gh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group .gh b { font-weight: 600; color: var(--ink); font-size: 13.5px; letter-spacing: -0.005em; }
.group .gh .cnt { font-size: 12px; color: var(--ink-4); margin-left: auto; font-variant-numeric: tabular-nums; }
.group .names { display: flex; flex-direction: column; gap: 3px; }
.group .names div { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; padding-left: 10px; border-left: 2px solid var(--line); line-height: 1.45; }
.group .rid { font-family: var(--mono); font-size: 10.5px; color: var(--ink-5); overflow-wrap: anywhere; }
.group .cat { font-size: 11.5px; color: var(--ink-4); }
.skel { display: flex; flex-direction: column; gap: 8px; }
.skel i { display: block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* tables */
.tablewrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); background: var(--surface); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
tr.click { cursor: pointer; transition: background 100ms; } tr.click:hover td { background: var(--surface-2); }
tr.click td:first-child { border-left: 2px solid transparent; }
tr.click:hover td:first-child { border-left-color: var(--ink-3); }
.docs table { font-size: 13px; } .docs th, .docs td { padding: 9px 12px; vertical-align: top; } .docs td:first-child { white-space: nowrap; }
.empty { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13.5px; }
.empty svg { width: 22px; height: 22px; stroke: var(--ink-5); fill: none; stroke-width: 1.8; }

/* filters */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters .segchips { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.filters .segchips a { padding: 6px 11px; font-size: 12.5px; color: var(--ink-3); border-right: 1px solid var(--line); transition: background 100ms, color 100ms; }
.filters .segchips a:last-child { border-right: none; }
.filters .segchips a:hover { color: var(--ink); }
.filters .segchips a.on { background: var(--ink); color: #fff; }
.filters .count { margin-left: auto; font-size: 12.5px; color: var(--ink-4); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(25,25,24,.18); opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease); z-index: 19; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; width: min(780px, 100%); height: 100vh; background: var(--surface); box-shadow: var(--shadow-drawer); transform: translateX(100%); transition: transform 200ms var(--ease); display: flex; flex-direction: column; z-index: 20; }
.drawer.open { transform: translateX(0); }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.drawer .dh .t { display: flex; flex-direction: column; gap: 2px; }
.drawer .dh b { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.drawer .dh span { font-size: 12px; color: var(--ink-4); }
.drawer .dtabs { padding: 0 22px; }
.drawer .db { padding: 18px 22px 40px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 13px; align-items: baseline; }
.kv dt { color: var(--ink-4); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.kv dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* docs */
.docs { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 40px; align-items: start; }
.docs .body { display: flex; flex-direction: column; gap: 14px; max-width: 78ch; }
.docs .body h2 { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.docs .body h2:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }
.docs .body p { color: var(--ink-2); line-height: 1.6; }
.docs .toc { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.docs .toc .eyebrow { margin-bottom: 6px; }
.docs .toc a { padding: 4px 10px; border-left: 2px solid var(--line); color: var(--ink-3); transition: color 120ms, border-color 120ms; }
.docs .toc a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.docs .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.docs .modecard { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.docs .modecard .mh { display: flex; align-items: center; gap: 8px; }
.docs .modecard .mh b { font-size: 14px; font-weight: 600; color: var(--ink); }
.docs .modecard .nums { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-3); }
.docs .modecard .nums b { display: block; font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login .card { width: min(420px, 100%); padding: 30px 30px 26px; gap: 18px; }
.login .brand { padding: 0; }
.login .field input { padding: 10px 40px 10px 12px; font-family: var(--mono); font-size: 13px; }
.login .keywrap { position: relative; }
.login .keywrap .ibtn { position: absolute; right: 5px; top: 5px; border: none; }
.login .foot { font-size: 12px; color: var(--ink-4); line-height: 1.5; }
.err { color: var(--warn); font-size: 13px; display: flex; gap: 6px; align-items: center; }

@media (max-width: 1240px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .cols, .cols.even, .docs { grid-template-columns: 1fr; } .docs .toc { display: none; } .sticky { position: static; } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  .tenantcard { margin-top: 0; min-width: 200px; } .content { padding: 24px 18px 56px; } .topbar { padding: 0 18px; } .seg, .docs .modes { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 6px; }
}