:root {
  color-scheme: light;
  --ink: #111820;
  --muted: #66737c;
  --muted-strong: #4d5b64;
  --page: #f6f8f9;
  --panel: #ffffff;
  --panel-soft: #f9fbfb;
  --soft: #edf2f4;
  --line: #dbe2e6;
  --line-strong: #c6d0d5;
  --green: #16845b;
  --green-soft: #e4f5ed;
  --ready: #70891c;
  --ready-soft: #eef6ce;
  --blue: #146fba;
  --blue-soft: #e7f2fb;
  --amber: #966000;
  --amber-soft: #fff1d3;
  --red: #b23c3c;
  --red-soft: #fdeaea;
  --shadow: 0 10px 30px rgba(22, 34, 43, .06);
  --backdrop: rgba(17, 24, 32, .48);
  /* Code windows are dark in both themes, like an editor. */
  --code-bg: #10171c;
  --code-bar: #19242b;
  --code-edge: #34444e;
  --code-ink: #d9e5eb;
  --code-muted: #8a9ba6;
  --code-blue: #5aa9ed;
  --code-green: #4bd39a;
  --code-lime: #c5df66;
  --code-amber: #f0b84b;
  --code-amber-soft: #3a2c10;
  --code-red: #f07b7b;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf2f4;
  --muted: #91a0aa;
  --muted-strong: #b0bbc2;
  --page: #0b0f12;
  --panel: #11171b;
  --panel-soft: #0e1418;
  --soft: #192126;
  --line: #263139;
  --line-strong: #36434c;
  --green: #4bd39a;
  --green-soft: #102b22;
  --ready: #c5df66;
  --ready-soft: #253016;
  --blue: #5aa9ed;
  --blue-soft: #12263a;
  --amber: #f0b84b;
  --amber-soft: #31250f;
  --red: #f07b7b;
  --red-soft: #32191b;
  --shadow: 0 12px 32px rgba(0, 0, 0, .24);
  --backdrop: rgba(0, 0, 0, .62);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--page); color: var(--ink); }
button, input, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(20, 111, 186, .25); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(16px); }
.nav { width: min(1180px, calc(100% - 32px)); height: 64px; margin: auto; display: flex; align-items: center; gap: 26px; }
.app-shell .nav { width: min(1480px, calc(100% - 36px)); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; font-weight: 760; }
.brand img { width: 42px; height: 34px; display: block; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { padding: 9px 12px; border-radius: 6px; color: var(--muted-strong); text-decoration: none; font-size: 13px; font-weight: 650; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--soft); }

.pilot { display: inline-flex; align-items: center; gap: 8px; color: var(--amber); font-size: 11px; font-weight: 750; }
.pilot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.theme-toggle, .icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; font-size: 19px; line-height: 1; }
.theme-toggle:hover, .icon-button:hover { border-color: var(--line-strong); background: var(--soft); }
.icon-button.spinning { animation: spin .8s linear infinite; }

main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 72px; }
.app-shell main { width: min(1480px, calc(100% - 36px)); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 42px; line-height: 1.08; letter-spacing: 0; }
h2 { font-size: 21px; letter-spacing: 0; }
h3 { font-size: 15px; letter-spacing: 0; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 11px; font-weight: 780; text-transform: uppercase; }
.lede { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.updated { color: var(--muted); font-size: 12px; white-space: nowrap; }
.page-heading, .workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; animation: rise .35s ease-out both; }
.workspace-head h1 { margin-bottom: 5px; font-size: 29px; }
.head-actions { display: flex; align-items: center; gap: 12px; padding-top: 5px; }

.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 6px; padding: 0 15px; background: var(--ink); color: var(--panel); cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 720; transition: transform .14s, opacity .14s, background .14s; }
.button:hover { transform: translateY(-1px); opacity: .9; }
.button.secondary { border-color: var(--line); background: var(--panel); color: var(--ink); }
.button.secondary:hover { border-color: var(--line-strong); background: var(--soft); }
.button.quiet { border-color: transparent; background: transparent; color: var(--muted-strong); }
.button:disabled { opacity: .52; cursor: wait; transform: none; }
.danger-text { color: var(--red) !important; }
/* A person's own words in the admin feedback list keep their line breaks. */
.feedback-text { max-width: 560px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-mail-note { margin-bottom: 16px; }

input, select { width: 100%; height: 43px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 12px; background: var(--panel); color: var(--ink); }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); outline: 0; }
label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 730; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
small { color: var(--muted); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); animation: rise .35s .04s ease-out both; }
.summary-grid.admin-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric { min-width: 0; min-height: 108px; padding: 18px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric > span { display: block; color: var(--muted); font-size: 12px; font-weight: 680; }
.metric strong { display: block; margin-top: 9px; font-size: 25px; line-height: 1.12; overflow-wrap: anywhere; }
.metric small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; }
.metric.good strong { color: var(--green); }.metric.warn strong { color: var(--amber); }.metric.bad strong { color: var(--red); }

.workspace { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 28px; }
.sidebar { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); display: flex; flex-direction: column; }
.account { margin-bottom: 14px; padding: 3px 10px 18px; border-bottom: 1px solid var(--line); }
.account span, .account small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.account strong { display: block; margin: 5px 0; font-size: 14px; overflow-wrap: anywhere; }
.account small { text-transform: none; }
.side-nav, .nav-section { display: grid; gap: 2px; }
.nav-rest { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

.nav-group { margin: 22px 10px 2px; color: var(--muted); font-size: 11px; font-weight: 760; letter-spacing: .03em; text-transform: uppercase; }
.nav-group:first-child { margin-top: 2px; }
.side-nav a { width: 100%; min-height: 38px; display: flex; align-items: center; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: var(--muted-strong); cursor: pointer; text-align: left; text-decoration: none; font-size: 13px; font-weight: 680; }
.side-nav a:hover, .side-nav a.active { background: var(--soft); color: var(--ink); }
.side-nav a.active { box-shadow: inset 2px 0 var(--blue); }
body[data-workspace-mode="provider"] .side-nav a.active { box-shadow: inset 2px 0 var(--green); }
body[data-workspace-mode="client"] .workspace-main .eyebrow { color: var(--blue); }
body[data-workspace-mode="provider"] .workspace-main .eyebrow { color: var(--green); }
.side-actions { display: grid; gap: 5px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.workspace-main { min-width: 0; }

.panel { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); box-shadow: 0 1px 0 rgba(16, 24, 32, .02); }
.panel-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; }
.panel-head p { margin: 4px 0 0; }
.panel-body { padding: 16px; }
.panel + .panel { margin-top: 16px; }
.section { margin-top: 22px; animation: rise .35s .05s ease-out both; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 11px; }
.section-head h2 { margin: 0; }.section-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 23px; border-radius: 4px; padding: 3px 7px; background: var(--soft); color: var(--muted-strong); font-size: 11px; font-weight: 700; }
.tag.good { background: var(--green-soft); color: var(--green); }.tag.ready { background: var(--ready-soft); color: var(--ready); }.tag.warn { background: var(--amber-soft); color: var(--amber); }.tag.bad { background: var(--red-soft); color: var(--red); }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-strong); font-size: 12px; font-weight: 720; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.status.good { color: var(--green); }.status.good::before { background: var(--green); }.status.warn { color: var(--amber); }.status.warn::before { background: var(--amber); }.status.bad { color: var(--red); }.status.bad::before { background: var(--red); }
.status.provider { color: var(--green); }.status.provider::before { background: var(--green); }.status.ready { color: var(--ready); }.status.ready::before { background: var(--ready); }.status.client { color: var(--blue); }.status.client::before { background: var(--blue); }.status.archived { color: var(--muted); }.status.archived::before { background: var(--muted); }

 .admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 14px; }
.chart-body { padding: 10px 14px 4px; } canvas { display: block; width: 100%; height: 210px; }
.legend { display: flex; gap: 13px; color: var(--muted); font-size: 11px; }.legend i { width: 8px; height: 8px; display: inline-block; margin-right: 5px; border-radius: 50%; background: var(--blue); }.legend i.green { background: var(--green); }
 .attention-list { display: grid; }
 .attention-list button { min-height: 65px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid var(--line); padding: 10px 15px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; }
 .attention-list button:last-child { border-bottom: 0; }
 .attention-list button:hover { background: var(--panel-soft); }

 .attention-list strong { display: block; font-size: 12px; } .attention-list small { display: block; margin-top: 4px; font-size: 10px; }
 .attention-list b { color: var(--muted); }
.attention-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }.attention-dot.good { background: var(--green); }.attention-dot.warn { background: var(--amber); }.attention-dot.bad { background: var(--red); }

.segments { display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); }
.segments button { min-height: 36px; border: 0; border-radius: 5px; padding: 0 12px; background: transparent; color: var(--muted-strong); cursor: pointer; font-size: 12px; font-weight: 700; }
.segments button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(16, 24, 32, .12); }

/* Icons: one line style, drawn with the text colour (Ompera.icon). */
.icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button.has-icon { gap: 7px; }

/* Code window (Ompera.codeWindow): a snippet shown like an editor, with a
   title bar, numbered lines and coloured syntax. Each line is its own element,
   so long lines wrap on a phone and the numbers stay in place. */
.code-window { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--code-bg); color: var(--code-ink); overflow: hidden; }
.code-window-bar { min-height: 42px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--code-edge); padding: 0 6px 0 14px; background: var(--code-bar); }
.code-window-dots { display: inline-flex; flex: 0 0 auto; gap: 6px; }
.code-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--code-red); opacity: .9; }
.code-window-dots i:nth-child(2) { background: var(--code-amber); }
.code-window-dots i:nth-child(3) { background: var(--code-green); }
.code-window-title { flex: 1; min-width: 0; overflow: hidden; color: var(--code-muted); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.code-window-copy { min-height: 32px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 6px; padding: 0 10px; background: transparent; color: var(--code-ink); cursor: pointer; font-size: 12px; font-weight: 650; }
.code-window-copy:hover { border-color: var(--code-edge); background: var(--code-bg); }
.code-window-copy:focus-visible, .code-line-copy:focus-visible { outline: 2px solid var(--code-blue); outline-offset: 1px; }
.code-window-copy.is-copied { color: var(--code-green); }
.code-window pre { margin: 0; padding: 14px 16px 16px; font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.code-window code { display: block; padding: 0; background: none; color: inherit; counter-reset: code-line; font: inherit; white-space: normal; }
.code-line { display: block; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-window.is-numbered .code-line { padding-left: 38px; }
.code-window.is-numbered .code-line::before { content: counter(code-line); counter-increment: code-line; position: absolute; left: 0; width: 22px; color: var(--code-muted); opacity: .6; text-align: right; user-select: none; }
.tok-kw { color: var(--code-red); }
.tok-fn { color: var(--code-lime); }
.tok-key { color: var(--code-blue); }
.tok-str { color: var(--code-green); }
.tok-num, .tok-var { color: var(--code-amber); }
.tok-com { color: var(--code-muted); }
/* What the reader has to replace. */
.tok-ph { border-radius: 4px; padding: 1px 5px; background: var(--code-amber-soft); color: var(--code-amber); font-weight: 700; }
/* Settings for an app: one value per row, each with its own Copy. */
.code-window[data-lang="settings"] pre { padding-block: 6px; }
.code-window[data-lang="settings"] .code-line { padding: 9px 46px 9px 0; }
.code-window[data-lang="settings"] .code-line + .code-line { border-top: 1px solid var(--code-bar); }
.code-line-copy { position: absolute; top: 0; right: -8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--code-muted); cursor: pointer; }
.code-line-copy:hover { background: var(--code-bar); color: var(--code-ink); }
.code-line-copy .icon-check { display: none; }
.code-line-copy.is-copied .icon-copy { display: none; }
.code-line-copy.is-copied .icon-check { display: block; color: var(--code-green); }
.microcopy { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.credential-list { display: grid; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.credential-list article { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px; background: var(--panel-soft); }
.credential-list article + article { border-top: 1px solid var(--line); }
.credential-list article > div:first-child { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 9px; }
.credential-list strong { font-size: 13px; }.credential-list code, .credential-list small { grid-column: 1 / -1; }.credential-list small { font-size: 12px; line-height: 1.45; }
.row-actions, .admin-actions { display: flex; align-items: center; gap: 7px; }

.pairing-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; }
.pairing-qr { display: grid; justify-items: center; gap: 9px; }.pairing-qr img { width: 224px; height: 224px; display: block; border: 1px solid var(--line); border-radius: 6px; background: #fff; image-rendering: pixelated; }.pairing-qr span { max-width: 220px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }

.node-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.node-card { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 15px; background: var(--panel-soft); }
.node-card.provider { border-left: 3px solid var(--green); }.node-card.ready { border-color: color-mix(in srgb, var(--ready) 35%, var(--line)); border-left: 3px solid var(--ready); background: color-mix(in srgb, var(--ready-soft) 34%, var(--panel)); }.node-card.client { border-left: 3px solid var(--blue); }.node-card.stopping, .node-card.away { border-color: color-mix(in srgb, var(--amber) 32%, var(--line)); border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber-soft) 28%, var(--panel)); }.node-card.offline { border-color: color-mix(in srgb, var(--red) 32%, var(--line)); border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red-soft) 25%, var(--panel)); }
.node-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.node-top h3 { margin: 0 0 4px; }
.node-card > p { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.node-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 12px; }

.toolbar { display: flex; align-items: center; gap: 11px; margin: 24px 0 16px; }.compact-toolbar { justify-content: space-between; margin-top: 0; }.search { position: relative; flex: 1; max-width: 470px; }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }.table-wrap.flush { border: 0; border-radius: 0; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 10px 12px; background: var(--soft); color: var(--muted); font-size: 11px; letter-spacing: .02em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
td.wrap { min-width: 210px; white-space: normal; } tbody tr:hover { background: var(--panel-soft); } td small { font-size: 11px; }
.character-table td > small { display: block; margin-top: 4px; }
.character-table details { margin-top: 6px; font-size: 12px; }
.character-table details > div { margin-top: 10px; }
/* The operator console has the widest tables; tighter cells keep every column and its action on screen. */
.admin-shell th, .admin-shell td { padding-left: 9px; padding-right: 9px; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.settings-grid > .panel { margin: 0; }
.stack-form > label { margin-top: 0; }.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.detail-list { display: grid; gap: 0; }.detail-list > div { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }.detail-list > div:last-child { border-bottom: 0; }.detail-list span { color: var(--muted); font-size: 12px; }.detail-list strong { font-size: 12px; }
.stack-form .detail-list { margin-top: 18px; }

.account-list { display: grid; gap: 10px; }.account-list > article { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); overflow: hidden; }
.account-card-main { min-height: 78px; display: grid; grid-template-columns: minmax(180px, .9fr) minmax(520px, 1.7fr) auto; align-items: center; gap: 20px; padding: 14px 16px; }
.account-title { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }.account-title > strong { font-size: 13px; }
.account-facts { display: grid; grid-template-columns: repeat(5, minmax(80px, 1fr)); gap: 12px; }.account-facts span { display: block; color: var(--muted); font-size: 9px; }.account-facts strong { display: block; margin-top: 4px; font-size: 11px; }
.account-list details { border-top: 1px solid var(--line); background: var(--panel-soft); }.account-list summary { padding: 10px 16px; color: var(--muted-strong); cursor: pointer; font-size: 10px; font-weight: 700; list-style: none; }.account-list summary::after { content: "+"; float: right; font-size: 15px; }.account-list details[open] summary::after { content: "−"; }
.account-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 8px 16px 16px; }.account-detail-grid h3 { margin-bottom: 10px; font-size: 11px; }
.mini-row { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }.mini-row span { display: grid; gap: 3px; min-width: 0; }.mini-row strong, .mini-row small { font-size: 9px; }.mini-row .status { display: flex; }
.identity-line { min-height: 43px; display: grid; align-content: center; gap: 3px; border-bottom: 1px solid var(--line); }.identity-line span { color: var(--muted); font-size: 9px; }.identity-line code { font-size: 9px; }

.notice { min-height: 52px; display: flex; align-items: center; gap: 12px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 6px; padding: 11px 13px; background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 80%, var(--ink)); font-size: 13px; line-height: 1.45; }.notice strong { flex: 0 0 auto; }.notice span { flex: 1; }.notice.success { border-color: color-mix(in srgb, var(--green) 42%, var(--line)); background: var(--green-soft); color: var(--green); }.notice.warning { border-color: color-mix(in srgb, var(--amber) 42%, var(--line)); background: var(--amber-soft); color: var(--amber); }.notice.danger { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); background: var(--red-soft); color: var(--red); }
/* A notice with a title, a sentence and actions: on a narrow screen the
   sentence takes its own line and the actions go under it. */
.notice.load-error, .notice.feedback-mail-note { flex-wrap: wrap; }.notice.load-error span, .notice.feedback-mail-note span { flex: 1 1 260px; }
.field-error { min-height: 17px; margin: 7px 0 0; color: var(--red) !important; font-size: 12.5px; line-height: 1.4; }
.inline-form { display: grid; grid-template-columns: 150px minmax(240px, 1fr) auto; align-items: end; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }.inline-form .field-error { grid-column: 1 / -1; margin: 0; }.form-grow { min-width: 0; }

.auth-layout { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: 78px; }
.auth-copy h1 { max-width: 660px; }.auth-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 32px; border: 1px solid var(--line); background: var(--line); }.auth-point { min-height: 116px; padding: 17px; background: var(--panel); }.auth-point strong { display: block; font-size: 13px; }.auth-point span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.auth-card { border: 1px solid var(--line); border-radius: 8px; padding: 25px; background: var(--panel); box-shadow: var(--shadow); }.auth-card h2 { margin-bottom: 7px; }.auth-card p { color: var(--muted); font-size: 12px; line-height: 1.5; }.auth-card label { margin-top: 17px; }.auth-card .button { width: 100%; margin-top: 10px; }

.chart-shell { border: 1px solid var(--line); background: var(--panel); padding: 17px; }.chart-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }.chart-toolbar strong { font-size: 13px; }
.model-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }

.skeleton { position: relative; min-height: 108px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); animation: pulse 1.3s infinite; }
.empty { min-height: 220px; display: grid; place-items: center; align-content: center; padding: 28px; text-align: center; }.empty-mark { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: var(--soft); color: var(--green); font-weight: 800; }.empty p { max-width: 440px; margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: 11px; }
.hidden { display: none !important; }

.confirm-dialog { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: var(--backdrop); }
.confirm-dialog form { padding: 22px; }
.confirm-dialog h2 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.confirm-dialog p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.confirm-actions .button { min-height: 42px; }

/* Keyboard users can jump past the header on every public page. */
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 30; transform: translateY(-160%); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 16px; background: var(--panel); color: var(--ink); }
.skip-link:focus { transform: translateY(0); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .62; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .summary-grid.admin-summary { grid-template-columns: repeat(3, 1fr); }.summary-grid.admin-summary .metric:nth-child(3) { border-right: 0; }.summary-grid.admin-summary .metric:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .account-card-main { grid-template-columns: 180px 1fr auto; }.account-facts { grid-template-columns: repeat(3, 1fr); }.account-facts > div:nth-child(n+4) { display: none; }
  .account-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .workspace { grid-template-columns: 1fr; }.sidebar { position: static; max-height: none; flex-direction: row; align-items: center; gap: 12px; overflow-x: auto; padding-bottom: 8px; }.account { min-width: 160px; margin: 0; padding: 0 13px 0 0; border: 0; border-right: 1px solid var(--line); }.side-nav { display: flex; align-items: center; }.nav-group { display: none; }.side-nav a { min-width: max-content; }.side-actions { display: flex; margin: 0 0 0 auto; padding: 0; border: 0; }
   .admin-overview-grid { grid-template-columns: 1fr; }.settings-grid { grid-template-columns: 1fr; }
  .node-grid { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 20px; }.auth-copy { text-align: center; }.auth-copy .lede { margin-left: auto; margin-right: auto; }.auth-card { width: min(100%, 520px); margin: auto; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }.metric:nth-child(2n) { border-right: 0; }.metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  .character-table thead { display: none; }
  .character-table tbody { display: block; }
  .character-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .character-table tr + tr { border-top: 1px solid var(--line); }
  .character-table td { display: block; padding: 6px; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .character-table td:first-child { grid-column: 1 / -1; min-width: 0; }
  .character-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; color: var(--muted); }
  .nav { width: calc(100% - 20px) !important; height: 58px; gap: 8px; }.brand span, .pilot { display: none; }.nav-links { gap: 2px; }.nav-links a { padding: 7px; font-size: 10px; }.theme-toggle { width: 34px; height: 34px; }
  main, .app-shell main { width: calc(100% - 20px); padding-top: 22px; }.workspace-head, .page-heading { display: block; }.workspace-head h1 { font-size: 26px; }.head-actions { margin-top: 12px; justify-content: space-between; }.updated { white-space: normal; }
  .sidebar { width: calc(100vw - 20px); }.account, .side-actions .quiet { display: none; }
  h1 { font-size: 31px; }.auth-points { grid-template-columns: 1fr; }.auth-point { min-height: auto; }.auth-card { padding: 20px; }
  
  
  .summary-grid, .summary-grid.admin-summary { grid-template-columns: 1fr 1fr; }.summary-grid.admin-summary .metric { border-bottom: 1px solid var(--line); }.summary-grid.admin-summary .metric:nth-child(2n) { border-right: 0; }.metric { min-height: 96px; padding: 14px; }.metric strong { font-size: 21px; }
  
  
  .panel-head { align-items: flex-start; }.legend { display: none; } canvas { height: 180px; }
  .inline-form { grid-template-columns: 1fr; }.inline-form .field-error { grid-column: 1; }
  .pairing-body { grid-template-columns: 1fr; padding: 17px; }.pairing-qr img { width: min(224px, 100%); height: auto; aspect-ratio: 1; }
  .credential-list article { align-items: flex-start; }.row-actions { flex-direction: column; align-items: stretch; }
  .settings-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }.search { max-width: none; }.segments { width: 100%; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .account-card-main { grid-template-columns: 1fr; }.account-facts { grid-template-columns: repeat(3, 1fr); }.account-card-main .admin-actions { justify-content: flex-end; }.account-detail-grid { grid-template-columns: 1fr; }
  
}

@media (max-width: 380px) {
  .nav-links > a { padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}