/* Ninja Builder launch console. Colours are the Ninja tokens (public/css/00-tokens.css);
   layout from the approved mockup; the round gauges are the Lines-WP admin's, unchanged. */
:root {
  color-scheme: dark;
  --bg: #10142f; --bg-elev: #161b3d; --bg-elev2: #1c2250; --bg-sunk: #0c1026;
  --line: #2a3166; --line-soft: #21285a;
  --ink: #eef1fb; --ink-soft: #b3bbe0; --ink-faint: #7b84b3;
  --accent: #1fb2ff; --accent-ink: #071034; --accent-soft: rgba(31,178,255,.14); --accent-line: rgba(31,178,255,.45);
  --ok-ink: #3fd8a4; --warn-ink: #f0b04a; --err-ink: #ff4d85;
  /* status lights and usage colours: fixed across themes */
  --st-on: #22c55e; --st-warn: #f59e0b; --st-err: #ef4444;
  /* chart slots (dataviz reference palette, dark steps; validated on #161b3d) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --grid: #232a5c;
  --gauge-bg: var(--bg-elev2); --gauge-track: var(--bg-sunk);
  --radius: 12px; --radius-sm: 8px; --radius-pill: 999px;
  --shadow-pop: 0 8px 24px rgba(0,0,0,.35);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f1f4fd; --bg-elev: #ffffff; --bg-elev2: #e6ebfa; --bg-sunk: #e9edf9;
    --line: #d5dcf3; --line-soft: #e2e7f8;
    --ink: #10142f; --ink-soft: #3d4677; --ink-faint: #646c93;
    --accent: #0b74c8; --accent-ink: #ffffff; --accent-soft: rgba(11,116,200,.10); --accent-line: rgba(11,116,200,.40);
    --ok-ink: #0d9a6c; --warn-ink: #b8730a; --err-ink: #c4003f;
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
    --grid: #e4e8f6;
    --gauge-bg: var(--bg-sunk); --gauge-track: var(--line);
    --shadow-pop: 0 8px 24px rgba(16,20,47,.14);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f4fd; --bg-elev: #ffffff; --bg-elev2: #e6ebfa; --bg-sunk: #e9edf9;
  --line: #d5dcf3; --line-soft: #e2e7f8;
  --ink: #10142f; --ink-soft: #3d4677; --ink-faint: #646c93;
  --accent: #0b74c8; --accent-ink: #ffffff; --accent-soft: rgba(11,116,200,.10); --accent-line: rgba(11,116,200,.40);
  --ok-ink: #0d9a6c; --warn-ink: #b8730a; --err-ink: #c4003f;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --grid: #e4e8f6;
  --gauge-bg: var(--bg-sunk); --gauge-track: var(--line);
  --shadow-pop: 0 8px 24px rgba(16,20,47,.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
button:not(:disabled), a, [role="button"], select, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-faint); }
.soft { color: var(--ink-soft); }
.small { font-size: 12px; }
.mt { margin-top: 16px; }
.mt0 { margin-top: 0; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boot { padding: 48px; color: var(--ink-faint); }

/* ---- buttons, chips, inputs ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-elev2); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .12s var(--ease), border-color .12s var(--ease); text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--accent-line); text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-elev2); border-color: transparent; color: var(--ink); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--danger { color: var(--err-ink); }
.btn--icon { width: 32px; padding: 0; }
.btn.is-busy { opacity: .7; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.chip--sm { height: 20px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--st-on); }
.dot--warn { background: var(--st-warn); } .dot--err { background: var(--st-err); } .dot--off { background: var(--ink-faint); }
.input { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-sunk); color: var(--ink); font-size: 14px; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input--sm { height: 32px; font-size: 13px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.field .hint { font-size: 12px; color: var(--ink-faint); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; background: transparent; height: 30px; padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--ink-soft); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.switch input { width: 36px; height: 20px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--line); position: relative; margin: 0; transition: background .15s var(--ease); flex: none; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:not(:disabled) { cursor: pointer; }

/* ---- sign in ---- */
/* ---- sign in: brand panel (always night) + the card on a slash ---- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rb-eyes > g { transform-box: view-box; transform-origin: 512px 535px; transform: scale(1, var(--eye-open, 1)); }
@property --eye-open { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes rb-blink { 0%, 93%, 100% { --eye-open: 1; } 96% { --eye-open: .08; } }
@keyframes star-spin { to { transform: rotate(360deg); } }
.login__bot, .card-login__logo { animation: rb-blink 5s infinite; }
.card-login__logo { animation-delay: 1.3s; }
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.login__art { position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, #141a44 0%, #0c1026 70%); color: #eef1fb; border-right: 1px solid #2a3166; }
.login__art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(130,150,230,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(130,150,230,.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(120% 90% at 20% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 20% 30%, #000 30%, transparent 85%); pointer-events: none; }
.login__art::after { content: ""; position: absolute; left: -15%; top: -20%; width: 80%; height: 70%; background: radial-gradient(closest-side, rgba(31,178,255,.18), transparent); pointer-events: none; }
.login__brand { position: absolute; z-index: 1; top: 40px; left: 48px; display: flex; align-items: center; gap: 12px; }
.login__brand svg { width: 44px; height: 44px; }
.login__brand b { display: block; font-size: 17px; color: #eef1fb; }
.login__brand small { display: block; font-size: 13px; color: #8189b8; margin-top: 2px; }
.login__hero { position: relative; z-index: 1; max-width: 52%; }
.login__hero h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.02em; margin: 0; }
.login__hero h2 em { font-style: normal; color: #1fb2ff; white-space: nowrap; }
.login__hero p { color: #b3bbe0; margin: 14px 0 0; font-size: 15px; max-width: 44ch; }
.login__bot { position: absolute; right: -70px; bottom: -60px; width: min(560px, 62%); height: auto; aspect-ratio: 1; }
.login__thrown { position: absolute; left: 46%; top: 24%; width: 70px; height: 70px; color: #1fb2ff; animation: star-spin 1.4s linear infinite; }
.login__trail { position: absolute; top: calc(24% + 35px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(31,178,255,.8)); }
.login__trail.t1 { left: 18%; width: 28%; margin-top: -18px; opacity: .6; }
.login__trail.t2 { left: 10%; width: 36%; height: 4px; }
.login__trail.t3 { left: 24%; width: 22%; margin-top: 18px; opacity: .5; }
.login__panel { position: relative; overflow: hidden; display: grid; place-items: center; padding: 40px 24px; }
.login__panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--ink-soft) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.login__panel::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 46%, var(--accent-soft) 46%, var(--accent-soft) 54%, transparent 54%), linear-gradient(115deg, transparent 49.75%, var(--accent-line) 49.75%, var(--accent-line) 50.15%, transparent 50.15%); pointer-events: none; }
.card-login { position: relative; z-index: 1; width: min(420px, 100%); background: color-mix(in srgb, var(--bg-elev) 94%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 30px 70px rgba(2,4,16,.45); }
.card-login__star { position: absolute; top: -22px; right: -22px; width: 44px; height: 44px; color: #ff2a6d; animation: star-spin 6s linear infinite; }
.card-login__top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.card-login__logo { width: 52px; height: 52px; flex: none; border-radius: 13px; }
/* Light themes: the white robot sits on the app icon's azure tile (logo rule). */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .card-login__logo { background: linear-gradient(160deg, #1f9bff, #0b74c8); padding: 6px; } }
:root[data-theme="light"] .card-login__logo { background: linear-gradient(160deg, #1f9bff, #0b74c8); padding: 6px; }
.card-login__top b { display: block; font-size: 17px; line-height: 1.25; }
.card-login__top small { display: block; color: var(--ink-faint); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.card-login h1 { font-size: 20px; margin: 20px 0 2px; letter-spacing: -.01em; }
.card-login .lead { color: var(--ink-soft); margin: 0 0 22px; }
.card-login .input { height: 44px; border-radius: 10px; }
.card-login .input--code { height: 52px; }
.card-login .btn { width: 100%; height: 44px; font-size: 14px; border-radius: 10px; gap: 10px; }
.btn__star { width: 16px; height: 16px; }
.card-login .btn:hover .btn__star { animation: star-spin .6s linear infinite; }
.steps { display: flex; gap: 6px; } .steps span { height: 4px; width: 28px; border-radius: 4px; background: var(--line); } .steps .on { background: var(--accent); }
.foot-note { font-size: 12px; color: var(--ink-faint); margin: 18px 0 0; }
.foot-note--icon { display: flex; gap: 8px; align-items: flex-start; }
.foot-note .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .login__thrown, .card-login__star, .login__bot, .card-login__logo, .card-login .btn:hover .btn__star { animation: none; } }
.input--code { font-family: var(--mono); font-size: 22px; letter-spacing: .4em; text-align: center; height: 52px; }
.enroll { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.enroll__qr { width: 180px; height: 180px; border-radius: var(--radius-sm); background: #fff; padding: 6px; flex: none; }
.enroll__key { display: grid; gap: 6px; min-width: 0; font-size: 12px; }
.enroll__key code { font-size: 13px; overflow-wrap: anywhere; color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-elev2); font-size: 13px; margin-bottom: 16px; color: var(--ink-soft); overflow-wrap: anywhere; }
.banner--err { border-color: color-mix(in srgb, var(--st-err) 45%, transparent); background: color-mix(in srgb, var(--st-err) 10%, transparent); color: var(--ink); }
.banner--warn { border-color: color-mix(in srgb, var(--st-warn) 45%, transparent); background: color-mix(in srgb, var(--st-warn) 10%, transparent); color: var(--ink); }
.banner--info { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.banner svg { margin-top: 2px; }
.banner > div { min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand b { display: block; font-size: 15px; line-height: 1.2; }
.brand small { display: block; font-size: 12px; opacity: .7; }

.refused { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.refused__card { width: min(480px, 100%); text-align: center; }
.refused__card img { width: 64px; height: 64px; border-radius: 16px; opacity: .9; }
.refused__card h1 { font-size: 22px; margin: 18px 0 8px; }
.refused__card p { color: var(--ink-soft); margin: 0 0 8px; }
.refused__hint { font-size: 13px; }
.ipbox { display: inline-block; margin: 14px 0 6px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }

/* ---- app shell ---- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; border-right: 1px solid var(--line-soft); background: var(--bg); overflow-y: auto; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; font-size: 13.5px; border: 1px solid transparent; text-decoration: none; }
.nav a:hover { background: var(--bg-elev); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); border-color: var(--accent-line); }
.nav a[aria-current="page"] svg { color: var(--accent); }
.nav .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 12px 10px 4px; font-weight: 600; }
.side__foot { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 12px; display: grid; gap: 8px; }
.me { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-sm); padding: 4px; margin: -4px; }
.me:hover { background: var(--bg-elev); text-decoration: none; }
.me > span:last-child { min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; flex: none; text-transform: uppercase; }
.me b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me small { display: block; font-size: 11.5px; color: var(--ink-faint); }
.side__acts { display: flex; gap: 4px; flex-wrap: wrap; }
.col { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 10px 32px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); }
.top .sp { flex: 1; }
.top__menu, .top__brand { display: none; }
.acct { position: relative; }
.acct__btn { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.acct__btn:hover, .acct__btn[aria-expanded=true] { background: var(--bg-elev); border-color: var(--line-soft); }
.acct__btn .avatar { width: 28px; height: 28px; font-size: 13px; }
.acct__name { font-size: 13px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__btn .i { width: 16px; height: 16px; color: var(--ink-faint); }
.acct__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-elev); box-shadow: var(--shadow-pop); z-index: 70; }
.acct__menu[hidden] { display: none; }
.acct__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.acct__head b { display: block; font-size: 13px; }.acct__head small { display: block; font-size: 11.5px; color: var(--ink-faint); }
.acct__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.acct__item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.acct__item .i { width: 16px; height: 16px; color: var(--ink-faint); }
.main { min-width: 0; padding: 26px 32px 48px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head > div:first-child { min-width: 0; }
.head h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.head p { margin: 2px 0 0; color: var(--ink-faint); font-size: 13px; overflow-wrap: anywhere; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }

.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.card { background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card__h h2 { font-size: 14px; font-weight: 600; margin: 0; }
.card__h .sub { font-size: 12px; color: var(--ink-faint); }
.card__h .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card__note { font-size: 12px; margin: 14px 0 0; color: var(--ink-faint); }

.tile .lbl { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.tile .val { font-size: 30px; font-weight: 650; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: proportional-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .val.is-empty { color: var(--ink-faint); }
.tile .delta { font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.up { color: var(--ok-ink); font-weight: 600; } .down { color: var(--err-ink); font-weight: 600; } .flat { color: var(--ink-soft); font-weight: 600; }
.tile svg.spark { display: block; width: 100%; height: 30px; margin-top: 8px; }
.hero .val { font-size: 52px; line-height: 1.05; }

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--ink-faint); font-size: 11px; font-family: var(--sans); }
.chart .lbl-strong { fill: var(--ink); font-weight: 600; font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.ln { height: 2px; width: 14px; border-radius: 2px; }
.sw-s1 { background: var(--s1); } .sw-s2 { background: var(--s2); } .sw-s3 { background: var(--s3); } .sw-s4 { background: var(--s4); }
.hit { fill: transparent; }
.bar-seg { transition: opacity .12s; }
.chart g.col:hover .bar-seg, .chart g.col:focus .bar-seg { opacity: .82; }
.chart g.col:focus, .chart rect.hit:focus { outline: none; }
.tip { position: fixed; z-index: 100; pointer-events: none; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 8px 10px; font-size: 12px; min-width: 150px; max-width: 280px; opacity: 0; transition: opacity .08s; left: 0; top: 0; }
.tip.on { opacity: 1; }
.tip .t { color: var(--ink-faint); margin-bottom: 4px; }
.tip .r { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tip .r span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); min-width: 0; }
.tip .r b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tip .k { width: 12px; height: 2px; border-radius: 2px; display: inline-block; flex: none; }

.hb { display: grid; gap: 10px; }
.hb__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 92px; gap: 12px; align-items: center; font-size: 13px; }
.hb__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hb__name span.t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
.hb__sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.hb__track { height: 12px; position: relative; }
.hb__fill { height: 12px; border-radius: 0 4px 4px 0; min-width: 2px; }
.hb__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.hb__v small { color: var(--ink-faint); margin-left: 4px; }
.cc { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; flex: none; }

.state { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.state.warn { color: var(--warn-ink); } .state.err { color: var(--err-ink); } .state.ok { color: var(--ok-ink); } .state.off { color: var(--ink-faint); }

/* ---- round gauges: exactly the Lines-WP admin's (app/static/admin.css), Ninja tokens.
   (Lines-WP is dark only; in light the card and track use the light set's sunk and line.) ---- */
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gauges--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; background: var(--gauge-bg); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.gauge > svg { width: 100%; max-width: 150px; height: auto; display: block; }
.gauge svg.i { width: 14px; height: 14px; }
.gauge__track { fill: none; stroke: var(--gauge-track); stroke-width: 12; stroke-linecap: round; }
.gauge__fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease), stroke 300ms; }
.gauge__value { font: 700 22px var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.gauge__unit { font: 600 11px var(--sans); fill: var(--ink-faint); }
.gauge__label { font-weight: 650; font-size: 14px; }
.gauge__sub { font-size: 12px; color: var(--ink-faint); text-align: center; overflow-wrap: anywhere; }
.gauge--off { opacity: 0.55; }
.gauges--3 .gauge { padding: 10px 4px 10px; }
.gauges--3 .gauge__label { font-size: 13px; }
.gauge__state { margin-top: 2px; }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.r, table.t th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.t td.nw { white-space: nowrap; }
table.t td.b { font-weight: 600; }
table.t td .acts { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tw { overflow-x: auto; }
.ell { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ell--wide { max-width: 340px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 13px; margin: 0; }
.kv.mt { margin-top: 16px; }
.kv dt { color: var(--ink-faint); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.list { display: grid; }
.list > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.list > div:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .grow b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .grow small { display: block; color: var(--ink-faint); font-size: 12px; overflow-wrap: anywhere; }
.list .grow b.wrap { white-space: normal; overflow-wrap: anywhere; }
.view-table { display: none; }
.card.show-table .view-table { display: block; }
.card.show-table .view-chart { display: none; }
.empty { padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-faint); font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.empty b { color: var(--ink-soft); }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.form-row .input { flex: 1 1 180px; }
.form-row .input--note { flex: 1 1 140px; }
.skel { background: linear-gradient(90deg, var(--bg-elev2), var(--line-soft), var(--bg-elev2)); background-size: 200% 100%; animation: skel 1.2s linear infinite; border-radius: var(--radius-sm); min-height: 16px; }
.skel--chart { height: 220px; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } .gauge__fill { transition: none; } }

/* ---- dialogs and toasts ---- */
dialog.dlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink); padding: 0; box-shadow: var(--shadow-pop); }
dialog.dlg--wide { width: min(640px, calc(100vw - 32px)); }
.hb__all { margin-top: 10px; }
.wmap__svg { display: block; width: 100%; height: auto; }
.wmap__land circle { fill: color-mix(in srgb, var(--ink-soft) 22%, transparent); }
.wmap__dot { fill: var(--s1); stroke: color-mix(in srgb, var(--bg) 60%, transparent); stroke-width: 1.5; }
.wmap__halo { fill: var(--s1); opacity: .16; }
.wmap__n { fill: var(--accent-ink, #071034); font: 700 13px var(--sans, system-ui); pointer-events: none; }
.wmap__pt { cursor: default; } .wmap__pt:hover .wmap__dot { fill: color-mix(in srgb, var(--s1) 70%, white); } .wmap__pt:hover .wmap__halo { opacity: .3; }
dialog.dlg::backdrop { background: rgba(5, 8, 24, .55); }
.dlg__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.dlg__h h2 { font-size: 16px; margin: 0; }
.dlg__b { padding: 14px 18px 4px; }
.dlg__f { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 18px; flex-wrap: wrap; }
.dlg__qr { display: block; width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: var(--radius-sm); margin: 0 auto 12px; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--bg-elev); border: 1px solid var(--line); border-left: 3px solid var(--st-on); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
.toast--err { border-left-color: var(--st-err); }

/* ---- 1100, 860 and 520 ---- */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g21, .g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__art { min-height: 220px; padding: 24px 16px; border-right: 0; border-bottom: 1px solid #2a3166; }
  .login__brand { top: 20px; left: 16px; } .login__brand svg { width: 36px; height: 36px; }
  .login__bot { width: 220px; right: -30px; bottom: -40px; }
  .login__hero { max-width: 60%; }
  .login__hero h2 { font-size: 26px; }
  .login__hero p { display: none; }
  .login__bot { width: 200px; height: 200px; right: -24px; bottom: -30px; }
  .login__thrown { width: 44px; height: 44px; top: 18%; }
  .login__trail { top: calc(18% + 22px); }
  .login__panel { padding: 32px 16px 40px; place-items: start center; }
  .card-login { padding: 24px 20px; }
  .card-login__star { top: -14px; right: -8px; width: 30px; height: 30px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 60; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s var(--ease); box-shadow: var(--shadow-pop); background: var(--bg-elev); visibility: hidden; }
  .side.open { transform: none; visibility: visible; }
  .top { padding: 10px 16px; }
  .top__menu, .top__brand { display: flex; }
  .acct__name, .acct__btn > .i { display: none; }
  .top .brand img { width: 28px; height: 28px; border-radius: 7px; }
  .top .sp { flex: 1; }
  .main { padding: 18px 16px 40px; }
  .g2 { grid-template-columns: minmax(0, 1fr); }
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gauges.gauges--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 84px; }
  .hero .val { font-size: 44px; }
}
@media (max-width: 520px) { .g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- licences, offers, settings ---- */
.search { display: flex; gap: 8px; }
.search .input { min-width: 240px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, tr.clickable:focus-visible td { background: var(--bg-sunk); }
.acts--wrap { flex-wrap: wrap; gap: 8px; }
.acts--end { justify-content: flex-end; gap: 8px; margin-top: 12px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tile__sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 16px; }
.copyrow { display: flex; gap: 8px; }
.copyrow .input { flex: 1; min-width: 0; }
.saved { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 38px; }
.checks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; font-size: 13px; }
.checks li { display: flex; gap: 6px; align-items: center; }
.checks li.ok { color: var(--ok-ink); }
.checks li.bad { color: var(--err-ink); }
select.input { cursor: pointer; }
@media (max-width: 720px) { .search { width: 100%; } .search .input { min-width: 0; flex: 1; } }
.head > div { min-width: 0; }
.head h1 { overflow-wrap: anywhere; }
.card .tw { max-width: 100%; }
.main > .card + .card, .main > .grid + .card, .main > .banner + .card, .main > .banner + .grid { margin-top: 16px; }
.acts--end { margin-left: 0; width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters .input { width: auto; min-width: 140px; flex: 1 1 140px; }
.filters input[type=search] { flex: 2 1 220px; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Settings › Paddle: mode radios and the Sandbox / Live key tabs */
.radios { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.radio input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.seg button { cursor: pointer; }

/* Field label with an (i): the long "where to find it" text shows on hover, focus or tap */
.lab { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.info { position: relative; display: inline-flex; }
.info__b { display: inline-flex; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 50%; }
.info__b .i { width: 15px; height: 15px; }
.info__b:hover, .info__b:focus-visible { color: var(--accent); }
.info__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info__t { position: absolute; left: -8px; bottom: calc(100% + 8px); width: max-content; max-width: 280px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 6px 20px rgb(0 0 0 / .25); opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 30; pointer-events: none; }
.info:hover .info__t, .info__b:focus + .info__t { opacity: 1; visibility: visible; }

/* Settings › Paddle: the Sandbox | Live toggle */
.mtop { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: end; margin-bottom: 8px; }
@media (max-width: 720px) { .mtop { grid-template-columns: 1fr; } }
.mtop .field { margin-bottom: 0; }
.mtop .lab { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.mtog { display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px; background: var(--bg-sunk); border: 1px solid var(--line); height: 40px; box-sizing: border-box; }
.mtog__b { border: 0; background: none; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s; }
.mtog__b:hover { color: var(--ink); }
.mtog__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mtog__b--sandbox[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); }
.mtog__b--live[aria-checked="true"] { background: #1f9d55; color: #fff; }