/* Waxum Console — design tokens borrowed from Astryx (astryxdesign.com),
   Meta's open-source design system. Values copied by hand from
   `astryx docs tokens` — waxum's console is server-rendered Handlebars
   baked into the binary (see CLAUDE.md), so this is the CSS output of
   Astryx's neutral theme with no React/build-step dependency, not a
   package import. Layout follows the "Console / observability" app
   archetype: TopNav, Card grid for dashboard widgets, Table/rows for
   everything dense, LayoutPanel-style multi-pane tool frame for the
   session playground.

   Keep every color/spacing/radius/shadow value sourced from a token
   below — a raw hex or px literal elsewhere in this file is a mistake.
*/

:root {
  color-scheme: light dark;

  /* ---- color ---- */
  --color-accent: light-dark(#0064E0, #2694FE);
  --color-accent-muted: light-dark(#0082FB33, #0082FB3F);
  --color-on-accent: #FFFFFF;
  --color-background-surface: light-dark(#FFFFFF, #1F1F22);
  --color-background-body: light-dark(#F1F4F7, #111112);
  --color-overlay: light-dark(#01122866, #11111299);
  --color-overlay-hover: light-dark(#0536590C, #FFFFFF0C);
  --color-background-muted: light-dark(#0536590C, #1111127F);
  --color-text-primary: light-dark(#0A1317, #DFE2E5);
  --color-text-secondary: light-dark(#4E606F, #AAAFB5);
  --color-text-disabled: light-dark(#A4B0BC, #6F747C);
  --color-text-accent: light-dark(#0064E0, #3E9EFB);
  --color-icon-primary: light-dark(#0A1317, #DFE2E5);
  --color-icon-secondary: light-dark(#4E606F, #AAAFB5);
  --color-background-card: light-dark(#FFFFFF, #1F1F22);
  --color-background-popover: light-dark(#FFFFFF, #28292C);
  --color-background-inverted: light-dark(#0A1317, #FFFFFF);
  --color-success: #0D8626;
  --color-success-muted: light-dark(#0B991F33, #0B991F3F);
  --color-on-success: #FFFFFF;
  --color-error: light-dark(#E3193B, #F5394F);
  --color-error-muted: light-dark(#E3193B33, #F5394F3F);
  --color-on-error: #FFFFFF;
  --color-warning: light-dark(#E9AF08, #F2C00B);
  --color-warning-muted: light-dark(#E2A40033, #E2A4003F);
  --color-on-warning: #0A1317;
  --color-border: light-dark(#05365919, #F2F4F619);
  --color-border-emphasized: light-dark(#CCD3DB, #494D53);
  --color-skeleton: light-dark(#CCD3DB, #5A5E66);
  --color-shadow: light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3));
  --color-background-blue: #0171E333;
  --color-text-blue: light-dark(#042F97, #AFD7FF);
  --color-background-gray: light-dark(#0A131733, #666A724C);
  --color-text-gray: light-dark(#0A1317, #E7EAED);

  /* ---- spacing (--spacing-N) ---- */
  --spacing-0-5: 2px; --spacing-1: 4px; --spacing-1-5: 6px; --spacing-2: 8px;
  --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px;
  --spacing-7: 28px; --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px;
  --spacing-12: 48px;

  /* ---- size / radius / border ---- */
  --size-element-sm: 28px; --size-element-md: 32px; --size-element-lg: 36px;
  --border-width: 1px;
  --radius-inner: 4px; --radius-element: 8px; --radius-container: 12px;
  --radius-page: 28px; --radius-full: 9999px;

  /* ---- shadow ---- */
  --shadow-low: 0px 1px 1px var(--color-shadow), 0px 2px 8px var(--color-shadow);
  --shadow-med: 0px 1px 2px var(--color-shadow), 0px 2px 12px var(--color-shadow);
  --shadow-high: 0px 2px 2px var(--color-shadow), 0px 8px 24px var(--color-shadow);

  /* ---- motion ---- */
  --duration-fast: 175ms; --duration-medium: 410ms;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);

  /* ---- type ---- */
  --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-code: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
  --font-size-xs: 0.625rem; --font-size-sm: 0.75rem; --font-size-base: 0.875rem;
  --font-size-lg: 1.0625rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.8125rem;
  --font-weight-normal: 400; --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-background-body);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.4286;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.display, h1, h2, h3 {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
}

.mono, code, pre {
  font-family: var(--font-family-code);
  font-size: 0.9em;
}

/* ---------- TOP BAR ---------- */
.topbar {
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-background-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--spacing-4) var(--spacing-7);
  display: flex;
  align-items: center;
  gap: var(--spacing-7);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  text-decoration: none;
  color: var(--color-text-primary);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: block;
  border-radius: var(--radius-element);
  background: var(--color-background-muted);
  padding: 2px;
}
.brand-word {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}
.brand-chip {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--spacing-0-5) var(--spacing-2);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-code);
  text-transform: uppercase;
}
.topbar .spacer { flex: 1; }
.topbar .tag {
  font-family: var(--font-family-code);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
}
.topbar .logout-btn {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  padding: var(--spacing-1-5) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.topbar .logout-btn:hover { background: var(--color-error-muted); border-color: var(--color-error); color: var(--color-error); }

/* ---------- PAGE ---------- */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-7) var(--spacing-12);
}

/* ---------- HERO ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  align-items: stretch;
}
.bubble {
  position: relative;
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--spacing-7) var(--spacing-8);
  box-shadow: var(--shadow-low);
}
.hero-eyebrow {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--spacing-3);
}
.hero-num {
  font-weight: var(--font-weight-bold);
  font-size: 56px;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}
.hero-num .of {
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}
.hero-caption {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-2);
  color: var(--color-text-primary);
}
.hero-subline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1-5);
  font-family: var(--font-family-code);
}
.hero-subline .sep {
  margin: 0 var(--spacing-2);
  color: var(--color-border-emphasized);
}
.hero-subline .warn { color: var(--color-warning); font-weight: var(--font-weight-semibold); }

.kpi-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.kpi {
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--spacing-4) var(--spacing-5);
  box-shadow: var(--shadow-low);
}
.kpi-label {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.kpi-num {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1.2;
  margin-top: var(--spacing-1);
  color: var(--color-text-primary);
}
.kpi-num.jade { color: var(--color-success); }
.kpi-num.sakura { color: var(--color-error); }

/* ---------- PANELS (Card usage — dashboard widgets only) ---------- */
.panels {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--spacing-6);
}
.panel {
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-low);
  position: relative;
  min-height: 240px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: var(--border-width) solid var(--color-border);
}
.panel-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  letter-spacing: 0;
}
.panel-serial {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
}
.panel-body { padding: 0; }

/* ---------- SESSIONS TABLE (dense data = rows, edge-to-edge) ---------- */
.sessions-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.sessions-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}
.sessions-table th {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-5) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-code);
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  border-bottom: var(--border-width) solid var(--color-border);
}
.sessions-table td {
  padding: var(--spacing-3) var(--spacing-5);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: middle;
}
.sessions-table tr:last-child td { border-bottom: none; }
.sessions-table tr {
  cursor: pointer;
  transition: background var(--duration-fast) linear;
}
.sessions-table tr:hover td { background: var(--color-overlay-hover); }
.sessions-table .id {
  font-family: var(--font-family-code);
  font-weight: var(--font-weight-semibold);
}
.sessions-table .phone {
  font-family: var(--font-family-code);
  color: var(--color-text-secondary);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  padding: var(--spacing-0-5) var(--spacing-2-5, 10px);
  border-radius: var(--radius-full);
  background: var(--color-background-muted);
}
.status-pill.connected { color: var(--color-success); background: var(--color-success-muted); }
.status-pill.connecting { color: var(--color-text-secondary); }
.status-pill.disconnected { color: var(--color-error); background: var(--color-error-muted); }
.status-pill.logged-out { color: var(--color-error); background: var(--color-error-muted); }
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- EVENT LOG (List/Item rows) ---------- */
.events {
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
}
.event {
  display: grid;
  grid-template-columns: 82px 88px 1fr;
  gap: var(--spacing-3);
  padding: var(--spacing-2-5, 10px) var(--spacing-5);
  font-size: var(--font-size-sm);
  border-bottom: var(--border-width) solid var(--color-border);
  align-items: center;
}
.event:last-child { border-bottom: none; }
.event .t {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.event .kind {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-success);
}
.event .kind.err { color: var(--color-error); }
.event .kind.warn { color: var(--color-warning); }
.event .msg {
  color: var(--color-text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.event .sid {
  font-family: var(--font-family-code);
  color: var(--color-text-secondary);
}

/* ---------- EMPTY STATES ---------- */
.empty {
  padding: var(--spacing-9) var(--spacing-5);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  height: var(--size-element-md);
  padding: 0 var(--spacing-4);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--color-overlay-hover); border-color: var(--color-border-emphasized); }
.btn:active { background: var(--color-background-muted); }
.btn.primary { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn.primary:hover { background: var(--color-text-blue); border-color: var(--color-text-blue); }
.btn.danger { color: var(--color-error); }
.btn.danger:hover { background: var(--color-error-muted); border-color: var(--color-error); }
.btn.sm {
  height: var(--size-element-sm);
  padding: 0 var(--spacing-3);
  font-size: var(--font-size-xs);
  gap: var(--spacing-1);
}

/* ---------- DRAWER (overlay panel — mirrors LayoutPanel end-slot) ---------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 40;
  display: none;
}
.drawer-scrim.open { display: block; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 420px;
  max-width: 100%;
  background: var(--color-background-surface);
  border-left: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-high);
  z-index: 50;
  transform: translateX(100%);
  transition: transform var(--duration-medium) var(--ease-standard);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--spacing-5) var(--spacing-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
}
.drawer-close {
  border: none;
  background: transparent;
  border-radius: var(--radius-element);
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--spacing-1);
}
.drawer-close:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); }
.drawer-body { padding: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-5); }
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.field label {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.field .val {
  font-family: var(--font-family-code);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.qr-wrap {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--spacing-4);
  background: var(--color-background-surface);
  display: flex;
  justify-content: center;
  box-shadow: var(--shadow-low);
}
.qr-wrap img, .qr-wrap svg { max-width: 100%; height: auto; display: block; }
.drawer .actions {
  display: flex;
  gap: var(--spacing-2-5, 10px);
  flex-wrap: wrap;
  padding-top: var(--spacing-1);
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--spacing-1);
}

/* ---------- LOGIN ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-4);
  background: var(--color-background-body);
}
.login-card {
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-med);
  padding: var(--spacing-8) var(--spacing-7);
  width: 100%;
  max-width: 420px;
  position: relative;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-7);
}
.login-brand img {
  border-radius: var(--radius-element);
  background: var(--color-background-muted);
  padding: var(--spacing-0-5);
  flex-shrink: 0;
}
.login-card .subhead {
  font-family: var(--font-family-code);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.login-card input {
  width: 100%;
  height: var(--size-element-lg);
  padding: 0 var(--spacing-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-body);
  font-family: var(--font-family-code);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.login-card input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-muted); }
.login-card .btn { width: 100%; justify-content: center; margin-top: var(--spacing-5); }
.login-card .hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-5);
  line-height: 1.6667;
}
.err {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-3);
  font-weight: var(--font-weight-medium);
}

/* ---------- ICONS ---------- */
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon.sm { width: 12px; height: 12px; }
.icon.lg { width: 22px; height: 22px; }

/* ---------- SESSION HEAD ---------- */
.session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-7);
  gap: var(--spacing-5);
}
.session-id {
  font-family: var(--font-family-code);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin: var(--spacing-1) 0 var(--spacing-3);
  letter-spacing: -0.01em;
}
.session-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}
.session-meta .phone {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---------- PAIR PANEL ---------- */
.pair-panel {
  margin-bottom: var(--spacing-6);
}
.pair-body {
  display: grid;
  grid-template-columns: 240px 44px 1fr;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
  align-items: center;
}
.pair-left, .pair-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.pair-eyebrow {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.pair-qr {
  background: var(--color-background-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-low);
  padding: var(--spacing-3);
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pair-qr svg { max-width: 100%; height: auto; display: block; }
.pair-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6667;
}
.pair-caption b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.pair-divider {
  justify-self: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-transform: lowercase;
}
.pair-right input[type="text"] {
  width: 100%;
  height: var(--size-element-md);
  padding: 0 var(--spacing-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-body);
  font-family: var(--font-family-code);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.pair-right input[type="text"]:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-muted); }
.pair-code {
  margin-top: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-body);
  font-family: var(--font-family-code);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  letter-spacing: 0.18em;
  color: var(--color-text-accent);
  text-align: center;
}

@media (max-width: 780px) {
  .pair-body { grid-template-columns: 1fr; }
  .pair-qr { width: 100%; height: auto; aspect-ratio: 1/1; }
}

/* ---------- PLAYGROUND (tool frame: nav | content | inspector) ---------- */
.playground {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
.pg-body {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: var(--spacing-5);
  align-items: start;
}

/* Sidebar tree: one collapsible <details> per group, endpoints nested
   inside — a single-list nav+picker instead of a top tab row plus a
   separate flat endpoint list. */
.pg-sidebar { max-height: 720px; overflow-y: auto; }
.pg-sidebar-tree { padding: var(--spacing-2) 0; }
.pg-group + .pg-group { border-top: var(--border-width) solid var(--color-border); }
.pg-group-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2-5, 10px) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--duration-fast) linear, color var(--duration-fast) linear;
}
.pg-group-head::-webkit-details-marker { display: none; }
.pg-group-head:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); }
.pg-group[open] > .pg-group-head { color: var(--color-text-primary); }
.pg-group-head svg { color: currentColor; }
.pg-group-title { flex: 1; }
.pg-group-count {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-background-muted);
  border-radius: var(--radius-full);
  padding: 1px var(--spacing-2);
}
.pg-group-items { display: flex; flex-direction: column; }
.pg-endpoint {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  gap: 2px var(--spacing-2-5, 10px);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-7);
  border: none;
  background: var(--color-background-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family-body);
  transition: background var(--duration-fast) linear;
}
.pg-endpoint:hover { background: var(--color-overlay-hover); }
.pg-endpoint.active { background: var(--color-accent-muted); }
.pg-endpoint.danger .method { color: var(--color-error); border-color: var(--color-error); }
.pg-endpoint .method {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  border: var(--border-width) solid var(--color-border-emphasized);
  border-radius: var(--radius-inner);
  padding: var(--spacing-0-5) var(--spacing-1-5);
  text-align: center;
  color: var(--color-text-secondary);
}
.pg-endpoint .method.m-get { color: var(--color-success); border-color: var(--color-success); }
.pg-endpoint .method.m-post { color: var(--color-text-accent); border-color: var(--color-text-accent); }
.pg-endpoint .method.m-put { color: var(--color-warning); border-color: var(--color-warning); }
.pg-endpoint .method.m-delete { color: var(--color-error); border-color: var(--color-error); }
.pg-endpoint .label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.pg-endpoint .path {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-form { padding: var(--spacing-5); }
.pg-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3-5, 14px);
}
.pg-fields .field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.pg-fields input[type="text"],
.pg-fields input[type="number"],
.pg-fields textarea,
.pg-fields select {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.pg-fields input[type="file"] {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.pg-fields textarea {
  font-family: var(--font-family-code);
  font-size: var(--font-size-sm);
  resize: vertical;
}
.pg-fields input[type="text"]:focus,
.pg-fields input[type="number"]:focus,
.pg-fields textarea:focus,
.pg-fields select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-muted); }
.pg-fields input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: var(--border-width) solid var(--color-border-emphasized);
  border-radius: var(--radius-inner);
  accent-color: var(--color-accent);
}
.pg-actions {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  gap: var(--spacing-2-5, 10px);
}

.pg-result-body {
  margin: 0;
  padding: var(--spacing-5);
  font-family: var(--font-family-code);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-background-card);
  max-height: 560px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.pg-recording {
  margin-top: var(--spacing-3);
  padding: var(--spacing-4);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-background-card);
}
.pg-recording-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}
.pg-recording-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6667;
}
.pg-recording-hint code {
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  background: var(--color-background-body);
  padding: 1px var(--spacing-1-5);
  border-radius: var(--radius-inner);
  border: var(--border-width) solid var(--color-border);
}
.pg-recording audio { display: block; width: 100%; }

@media (max-width: 1080px) {
  .pg-body { grid-template-columns: 1fr; }
}

/* ---------- KEY RENEWAL MODAL ---------- */
.key-modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5);
}
.key-modal-scrim.open { display: flex; }
.key-modal {
  width: min(680px, 100%);
  background: var(--color-background-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-high);
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.key-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
}
.key-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
.key-modal-code {
  font-family: var(--font-family-code);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-background-body);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  padding: var(--spacing-3) var(--spacing-4);
  word-break: break-all;
  user-select: all;
}
.key-modal-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6667;
}
.key-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .hero-num { font-size: 44px; }
  .drawer { width: 100%; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- PROVIDER / CLOUD API ---------- */
.provider-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--spacing-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.provider-badge.cloud {
  color: var(--color-text-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.form-input {
  width: 100%;
  height: var(--size-element-md);
  padding: 0 var(--spacing-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-body);
  font-family: var(--font-family-code);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.form-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-muted); }
.form-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.form-hint b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.cloud-panel { margin-bottom: var(--spacing-6); }
.cloud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-5);
  padding: var(--spacing-6) var(--spacing-6) 0;
}
.cloud-urls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-6);
}
.copy-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-element);
  background: var(--color-background-body);
}
.copy-row code { flex: 1; min-width: 0; }

/* Life Whats orbital theme restored over Waxum 0.13.5 base styles.
   Theme layer sourced from the local visual reference; 0.13.5-specific
   Cloud API and pairing selectors above remain available. */
/* ---------- LIFE WHATS / ORBITAL COMMAND THEME ---------- */
:root {
  color-scheme: dark;
  --pointer-x: 50vw;
  --pointer-y: 32vh;
  --color-accent: #55f6c5;
  --color-accent-muted: rgba(85, 246, 197, 0.14);
  --color-on-accent: #03120e;
  --color-background-surface: rgba(8, 15, 24, 0.88);
  --color-background-body: #05080d;
  --color-overlay: rgba(1, 4, 8, 0.82);
  --color-overlay-hover: rgba(104, 225, 255, 0.065);
  --color-background-muted: rgba(132, 164, 191, 0.075);
  --color-text-primary: #f0f8f6;
  --color-text-secondary: #8396a6;
  --color-text-disabled: #52616e;
  --color-text-accent: #61e8ff;
  --color-icon-primary: #eafff9;
  --color-icon-secondary: #86a0b3;
  --color-background-card: rgba(9, 17, 27, 0.82);
  --color-background-popover: #0b1520;
  --color-background-inverted: #eefbf7;
  --color-success: #55f6c5;
  --color-success-muted: rgba(85, 246, 197, 0.12);
  --color-on-success: #03120e;
  --color-error: #ff5e7a;
  --color-error-muted: rgba(255, 94, 122, 0.13);
  --color-warning: #ffc65c;
  --color-warning-muted: rgba(255, 198, 92, 0.13);
  --color-on-warning: #171004;
  --color-border: rgba(145, 190, 211, 0.12);
  --color-border-emphasized: rgba(113, 222, 235, 0.3);
  --color-shadow: rgba(0, 0, 0, 0.42);
  --color-cyan: #61e8ff;
  --color-violet: #9d8cff;
  --color-void: #05080d;
  --color-panel-solid: #09111b;
  --glow-mint: 0 0 32px rgba(85, 246, 197, 0.16);
  --glow-cyan: 0 0 36px rgba(97, 232, 255, 0.12);
  --shadow-low: 0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-med: 0 22px 70px rgba(0, 0, 0, 0.28);
  --shadow-high: 0 28px 90px rgba(0, 0, 0, 0.46);
  --radius-inner: 6px;
  --radius-element: 11px;
  --radius-container: 18px;
  --radius-page: 32px;
  --size-element-sm: 32px;
  --size-element-md: 40px;
  --size-element-lg: 50px;
  --duration-fast: 180ms;
  --duration-medium: 520ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --font-family-body: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-family-code: 'JetBrains Mono', Consolas, monospace;
  --spacing-2-5: 10px;
  --spacing-3-5: 14px;
}

html {
  min-height: 100%;
  background: var(--color-void);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: transparent;
  letter-spacing: -0.005em;
}

body::selection,
body *::selection {
  color: #04120f;
  background: rgba(85, 246, 197, 0.9);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(4, 9, 15, 0.72); }
::-webkit-scrollbar-thumb { background: rgba(97, 232, 255, 0.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(85, 246, 197, 0.42); }

.ambient-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% -5%, rgba(42, 111, 120, 0.22), transparent 34%),
    radial-gradient(circle at 96% 4%, rgba(71, 53, 139, 0.17), transparent 30%),
    linear-gradient(145deg, #05080d 0%, #060b12 46%, #04070c 100%);
}

.ambient-world::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(430px circle at var(--pointer-x) var(--pointer-y), rgba(97, 232, 255, 0.075), transparent 68%);
  transition: background 100ms linear;
}

.ambient-grid {
  position: absolute;
  inset: -15%;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(108, 184, 200, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 184, 200, 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 86%);
  transform: perspective(780px) rotateX(61deg) translateY(15%);
  transform-origin: center bottom;
  animation: gridDrift 28s linear infinite;
}

.ambient-orb {
  position: absolute;
  display: block;
  width: 42vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.08;
  animation: ambientFloat 18s ease-in-out infinite alternate;
}
.ambient-orb.orb-a { left: -20vw; top: 20vh; background: #55f6c5; }
.ambient-orb.orb-b { right: -20vw; top: 35vh; background: #617bff; animation-delay: -9s; }
.ambient-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 1px;
  opacity: 0.18;
  background: linear-gradient(90deg, transparent, #61e8ff 35%, #55f6c5 65%, transparent);
  box-shadow: 0 0 18px rgba(97, 232, 255, 0.45);
  animation: pageScan 16s linear infinite;
}

.topbar, .page, .dash-wrap, .login-wrap, .drawer, .drawer-scrim, .key-modal-scrim {
  position: relative;
  z-index: 1;
}

/* Navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(5, 10, 17, 0.72);
  border-bottom: 1px solid rgba(97, 232, 255, 0.1);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 3%, rgba(85,246,197,.56) 21%, rgba(97,232,255,.18) 55%, transparent 92%);
}
.topbar-inner {
  max-width: 1500px;
  min-height: 76px;
  padding: 12px 28px;
  gap: 14px;
}
.brand { gap: 12px; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-word {
  color: #f4fbf9;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.025em;
}
.brand-caption {
  color: var(--color-text-secondary);
  font-family: var(--font-family-code);
  font-size: 0.54rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-orbit {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.brand-orbit::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(85, 246, 197, 0.3);
  border-right-color: transparent;
  border-radius: 50%;
  animation: orbitSpin 7s linear infinite;
}
.brand-orbit::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  top: -5px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 9px var(--color-cyan);
}
.brand-mark {
  padding: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 0 9px rgba(37, 211, 102, 0.26));
}
.brand-chip {
  color: var(--color-accent);
  border-color: rgba(85, 246, 197, 0.22);
  background: rgba(85, 246, 197, 0.07);
  letter-spacing: 0.12em;
}
.topbar-status,
.panel-live,
.chart-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9bb1be;
  font-family: var(--font-family-code);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-beacon,
.panel-live i,
.chart-live i,
.panel-serial i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(85,246,197,.1), 0 0 12px rgba(85,246,197,.7);
  animation: beaconPulse 2s ease-in-out infinite;
}
.topbar .tag,
.topbar-action {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #8ea1af;
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.topbar .tag:hover,
.topbar-action:hover {
  color: var(--color-text-primary);
  text-decoration: none;
  background: rgba(97, 232, 255, 0.055);
  border-color: rgba(97, 232, 255, 0.13);
}
.topbar-form { margin: 0; }
.topbar .logout-btn {
  min-height: 36px;
  border-color: rgba(255, 94, 122, 0.16);
  background: rgba(255, 94, 122, 0.045);
  color: #b8c5cc;
}
.topbar .logout-btn:hover {
  color: #ff8297;
  background: rgba(255, 94, 122, 0.1);
  box-shadow: 0 0 18px rgba(255, 94, 122, 0.09);
}

/* Buttons and fields */
.btn {
  position: relative;
  min-height: 40px;
  height: auto;
  overflow: hidden;
  border-color: rgba(122, 179, 199, 0.18);
  background: rgba(14, 26, 39, 0.72);
  color: #dbe8e9;
  letter-spacing: 0.015em;
  isolation: isolate;
  transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transition: transform 620ms var(--ease-standard);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(97, 232, 255, 0.32);
  background: rgba(20, 37, 52, 0.86);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 20px rgba(97,232,255,.06);
}
.btn:hover::after { transform: translateX(120%) skewX(-18deg); }
.btn:active { transform: translateY(0) scale(.985); }
.btn.primary {
  border-color: rgba(85, 246, 197, 0.75);
  background: linear-gradient(105deg, #50eebd, #6ee7e2);
  color: #04130f;
  box-shadow: 0 9px 28px rgba(45, 219, 168, 0.14);
}
.btn.primary:hover {
  border-color: #8effdc;
  background: linear-gradient(105deg, #68f8ca, #7cf0eb);
  box-shadow: 0 12px 34px rgba(45, 219, 168, 0.24);
}
.btn.primary.danger {
  border-color: rgba(255, 94, 122, 0.65);
  background: linear-gradient(105deg, #ff6680, #ff8a8f);
  color: #21050b;
  box-shadow: 0 9px 28px rgba(255, 94, 122, 0.15);
}
.btn.primary.danger:hover { background: linear-gradient(105deg, #ff7990, #ffa09f); }
.btn.danger { color: #ff8297; border-color: rgba(255, 94, 122, 0.2); }
.btn.danger:hover { color: #ff9aac; background: rgba(255, 94, 122, 0.1); }
.btn.sm { min-height: 32px; }
.btn:disabled { opacity: .48; cursor: wait; transform: none; }

.field label,
.panel-kicker,
.chart-kicker,
.modal-kicker,
.drawer-kicker {
  color: #668091;
  font-family: var(--font-family-code);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.panel-kicker { display: block; margin-bottom: 3px; color: #536b7c; }

/* Login */
.login-wrap {
  min-height: 100vh;
  padding: 28px;
  background: transparent;
}
.login-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(400px, .82fr);
  width: min(1240px, 100%);
  min-height: min(760px, calc(100vh - 56px));
  overflow: hidden;
  border: 1px solid rgba(117, 205, 220, 0.15);
  border-radius: 28px;
  background: rgba(7, 13, 21, 0.77);
  box-shadow: 0 44px 140px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(30px) saturate(130%);
  animation: shellReveal 800ms var(--ease-standard) both;
}
.login-shell::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: 4%;
  right: 4%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(85,246,197,.8), rgba(97,232,255,.35), transparent);
  box-shadow: 0 0 20px rgba(85,246,197,.28);
}
.login-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(38px, 5vw, 72px);
  overflow: hidden;
  border-right: 1px solid rgba(108, 183, 203, 0.11);
  background:
    radial-gradient(circle at 50% 55%, rgba(51, 205, 167, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(12, 28, 39, .52), rgba(6, 13, 21, .28));
}
.login-visual::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  left: -260px;
  bottom: -260px;
  border: 1px solid rgba(97, 232, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(97,232,255,.018), 0 0 0 140px rgba(97,232,255,.012);
}
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: #7f9eaa;
  font-family: var(--font-family-code);
  font-size: .64rem;
  letter-spacing: .16em;
}
.login-visual h1 {
  position: relative;
  z-index: 1;
  margin-top: clamp(34px, 6vh, 70px);
  font-size: clamp(2.5rem, 5vw, 4.65rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
  color: #edf8f5;
}
.login-visual h1 span {
  color: transparent;
  background: linear-gradient(92deg, #55f6c5 8%, #61e8ff 58%, #9d8cff);
  background-clip: text;
  -webkit-background-clip: text;
}
.login-visual > p {
  width: min(520px, 92%);
  margin: 22px 0 0;
  color: #8298a6;
  font-size: 1rem;
  line-height: 1.7;
}
.orbit-system {
  position: relative;
  align-self: center;
  width: min(350px, 75%);
  aspect-ratio: 1;
  margin: auto 0;
  display: grid;
  place-items: center;
}
.orbit-path {
  position: absolute;
  display: block;
  border: 1px solid rgba(102, 224, 225, .16);
  border-radius: 50%;
  animation: orbitSpin 18s linear infinite;
}
.orbit-path::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-top: 1px solid rgba(85,246,197,.22);
  border-radius: 50%;
}
.orbit-path i {
  position: absolute;
  width: 7px;
  height: 7px;
  top: -4px;
  left: 50%;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 15px var(--color-cyan);
}
.orbit-path-a { inset: 7%; }
.orbit-path-b { inset: 21%; animation-duration: 13s; animation-direction: reverse; transform: rotate(42deg); }
.orbit-path-c { inset: 34%; animation-duration: 9s; }
.orbit-path-b i { background: var(--color-violet); box-shadow: 0 0 14px var(--color-violet); }
.orbit-path-c i { background: var(--color-accent); box-shadow: 0 0 14px var(--color-accent); }
.orbit-pulse {
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(85,246,197,.22);
  animation: corePulse 3.4s ease-out infinite;
}
.orbit-logo {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(85,246,197,.2);
  border-radius: 26px;
  background: rgba(6, 16, 23, .86);
  box-shadow: inset 0 0 24px rgba(85,246,197,.08), 0 0 48px rgba(85,246,197,.12);
  transform: rotate(45deg);
}
.orbit-logo svg { transform: rotate(-45deg); filter: drop-shadow(0 0 12px rgba(37,211,102,.35)); }
.orbit-label {
  position: absolute;
  padding: 4px 8px;
  border: 1px solid rgba(97,232,255,.14);
  border-radius: 99px;
  background: rgba(5,11,18,.82);
  color: #7693a1;
  font-family: var(--font-family-code);
  font-size: .55rem;
  letter-spacing: .14em;
}
.orbit-label.label-a { right: 3%; top: 30%; }
.orbit-label.label-b { left: 10%; bottom: 24%; }
.orbit-label.label-c { right: 17%; bottom: 9%; color: var(--color-accent); }
.login-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(112, 169, 186, .11);
}
.login-metrics span {
  color: #647b89;
  font-size: .68rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.login-metrics b { display: block; color: #cce1df; font-family: var(--font-family-code); font-size: .88rem; }
.login-card {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  max-width: none;
  padding: clamp(36px, 5vw, 68px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: cardReveal 780ms 120ms var(--ease-standard) both;
}
.login-brand { margin-bottom: 52px; }
.login-brand .brand-word { font-size: 1.28rem; letter-spacing: .02em; }
.login-brand .subhead { margin-top: 5px; color: #617b89; font-size: .58rem; letter-spacing: .16em; }
.login-title { margin-bottom: 30px; }
.login-title .section-kicker { display: block; margin-bottom: 10px; }
.login-title h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.login-title p { margin: 9px 0 0; color: var(--color-text-secondary); font-size: .86rem; }
.login-field { margin-bottom: 18px; gap: 8px; }
.input-shell {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid rgba(126, 177, 196, .16);
  border-radius: 13px;
  background: rgba(3, 9, 15, .6);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.input-shell:focus-within {
  border-color: rgba(85,246,197,.55);
  background: rgba(5, 15, 21, .88);
  box-shadow: 0 0 0 3px rgba(85,246,197,.07), 0 0 28px rgba(85,246,197,.07);
}
.input-prefix { min-width: 42px; color: #496171; font-size: .6rem; letter-spacing: .1em; }
.login-card .input-shell input {
  flex: 1;
  width: 100%;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ecf7f4;
  font-family: var(--font-family-body);
  font-size: .92rem;
}
.login-card .input-shell input:focus { border: 0; box-shadow: none; }
.login-card input::placeholder { color: #435563; }
.password-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.password-toggle span,
.password-toggle span::after {
  position: absolute;
  display: block;
  content: '';
}
.password-toggle span {
  width: 17px;
  height: 11px;
  left: 7px;
  top: 10px;
  border: 1px solid #647b88;
  border-radius: 50% / 60%;
}
.password-toggle span::after {
  width: 4px;
  height: 4px;
  left: 5px;
  top: 2px;
  border-radius: 50%;
  background: #647b88;
}
.password-toggle.active span { border-color: var(--color-accent); }
.password-toggle.active span::after { background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.login-submit { width: 100%; min-height: 52px; justify-content: space-between; margin-top: 12px; padding: 0 20px; }
.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  color: #526b78;
  font-family: var(--font-family-code);
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.secure-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.login-card .err {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 2px 0 10px;
  padding: 11px 13px;
  border: 1px solid rgba(255,94,122,.2);
  border-radius: 10px;
  background: rgba(255,94,122,.07);
}
.login-card .err > span {
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-error);
  color: #170307;
  font-family: var(--font-family-code);
  font-size: .65rem;
}

/* Dashboard */
.dash-wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 58px 28px 0;
}
.dash-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
  animation: riseIn 650ms var(--ease-standard) both;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #6e8a98;
  font-family: var(--font-family-code);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.dash-h1 {
  margin: 10px 0 8px;
  color: #f0faf7;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.052em;
  font-weight: 600;
}
.dash-h1 span { color: #7a929f; }
.dash-sub { max-width: 680px; margin: 0; color: #718895; font-size: .91rem; line-height: 1.6; }
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(85,246,197,.5), 0 0 12px rgba(85,246,197,.7);
  animation: livePulse 2s infinite;
}
.dash-create { min-height: 46px; padding: 0 18px; flex: 0 0 auto; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 13px;
  margin-bottom: 18px;
}
.kpi-card {
  --signal: var(--bar-color, var(--color-accent));
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 20px 20px 17px;
  border: 1px solid rgba(122, 176, 194, .12);
  border-radius: var(--radius-container);
  background: linear-gradient(145deg, rgba(13,24,36,.88), rgba(7,14,23,.78));
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 18px 45px rgba(0,0,0,.15);
  backdrop-filter: blur(18px);
  transition: transform 300ms var(--ease-standard), border-color 300ms, box-shadow 300ms;
  animation: riseIn 620ms var(--ease-standard) both;
}
.kpi-card:nth-child(2) { animation-delay: 55ms; }
.kpi-card:nth-child(3) { animation-delay: 110ms; }
.kpi-card:nth-child(4) { animation-delay: 165ms; }
.kpi-card:nth-child(5) { animation-delay: 220ms; }
.kpi-card:nth-child(6) { animation-delay: 275ms; }
.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  height: auto;
  background: linear-gradient(transparent 8%, var(--signal) 48%, transparent 94%);
  opacity: .72;
}
.kpi-card::after {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  right: -65px;
  top: -74px;
  border-radius: 50%;
  background: var(--signal);
  filter: blur(42px);
  opacity: .07;
}
.kpi-card:hover {
  z-index: 2;
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--signal) 32%, transparent);
  box-shadow: 0 25px 60px rgba(0,0,0,.27), 0 0 32px color-mix(in srgb, var(--signal) 8%, transparent);
}
.kpi-card .kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--signal) 20%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--signal) 7%, transparent);
  color: var(--signal);
  transform: rotate(-3deg);
}
.kpi-card .kpi-icon svg { width: 19px; height: 19px; }
.kpi-card .kpi-val {
  color: #edf8f5;
  font-family: var(--font-family-code);
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
}
.kpi-card .kpi-val .kpi-frac { color: #586e7b; font-size: .8rem; font-weight: 500; letter-spacing: 0; }
.kpi-card .kpi-lbl { margin-top: 8px; color: #708591; font-size: .65rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.kpi-trace { height: 2px; margin-top: 17px; overflow: hidden; border-radius: 9px; background: rgba(122,170,188,.08); }
.kpi-trace span { display: block; width: 34%; height: 100%; background: var(--signal); box-shadow: 0 0 9px var(--signal); animation: traceSignal 4.5s ease-in-out infinite; }
.kpi-card.alert { border-color: rgba(255,94,122,.3); }

.charts-grid {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
  margin-bottom: 20px;
}
.chart-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid rgba(122,176,194,.12);
  border-radius: var(--radius-container);
  background: linear-gradient(155deg, rgba(11,22,33,.84), rgba(6,13,21,.76));
  box-shadow: var(--shadow-low);
  backdrop-filter: blur(18px);
  animation: riseIn 650ms 180ms var(--ease-standard) both;
}
.chart-card::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(97,232,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(97,232,255,.018), 0 0 0 52px rgba(97,232,255,.012);
}
.chart-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.chart-heading h3 { margin: 3px 0 0; color: #dceae8; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.chart-range { color: #587080; font-family: var(--font-family-code); font-size: .57rem; letter-spacing: .08em; text-transform: uppercase; }
#donut-wrap { position: relative; display: flex; align-items: center; gap: 24px; }
#status-donut { width: 136px; height: 136px; transform: rotate(-90deg); filter: drop-shadow(0 0 9px rgba(85,246,197,.12)); }
#donut-center { position: absolute; display: grid; align-content: center; height: 60px; text-align: center; pointer-events: none; }
#donut-center .dc-num { color: #eaf6f3; font-family: var(--font-family-code); font-size: 1.2rem; font-weight: 600; }
#donut-center .dc-lbl { color: #607785; font-family: var(--font-family-code); font-size: .56rem; letter-spacing: .1em; }
#donut-legend { display: flex; flex: 1; flex-direction: column; gap: 10px; color: #8aa0ac; font-size: .76rem; }
.legend-item { display: flex; align-items: center; gap: 9px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.legend-item .leg-val { margin-left: auto; color: #d8e7e5; font-family: var(--font-family-code); }
#sparkline-wrap { position: relative; height: 145px; }
#event-sparkline { width: 100%; height: 100%; overflow: visible; }
#spark-line { filter: drop-shadow(0 0 7px rgba(85,246,197,.42)); }
#spark-current { position: absolute; z-index: 2; top: 0; right: 0; text-align: right; }
#spark-current .sc-val { color: var(--color-accent); font-family: var(--font-family-code); font-size: 2rem; font-weight: 600; text-shadow: 0 0 20px rgba(85,246,197,.24); }
#spark-current .sc-lbl { color: #5d7481; font-family: var(--font-family-code); font-size: .56rem; letter-spacing: .08em; }

/* Panels and data */
.page { max-width: 1500px; padding: 0 28px 64px; }
.panels { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 18px; }
.panel {
  min-height: 240px;
  border: 1px solid rgba(122,176,194,.12);
  border-radius: var(--radius-container);
  background: linear-gradient(150deg, rgba(10,20,31,.88), rgba(6,13,21,.8));
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 22px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
.panel::before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 1px;
  right: 18px;
  top: 0;
  background: rgba(97,232,255,.55);
  box-shadow: 0 0 12px rgba(97,232,255,.28);
}
.panel-head {
  min-height: 65px;
  padding: 14px 20px;
  align-items: center;
  border-bottom-color: rgba(122,176,194,.09);
  background: rgba(10,20,30,.36);
}
.panel-title { display: block; color: #dce9e7; font-size: .85rem; font-weight: 600; }
.panel-serial { display: inline-flex; align-items: center; gap: 7px; color: #5d7583; font-size: .56rem; letter-spacing: .11em; }
.sessions-table-wrap { padding: 8px 10px 10px; }
.sessions-table { border-collapse: separate; border-spacing: 0 5px; }
.sessions-table th { padding: 8px 12px 5px; border: 0; color: #516b7a; font-size: .57rem; letter-spacing: .12em; }
.sessions-table td {
  padding: 13px 12px;
  border-top: 1px solid rgba(120,174,192,.075);
  border-bottom: 1px solid rgba(120,174,192,.075);
  background: rgba(6,14,22,.52);
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.sessions-table td:first-child { border-left: 1px solid rgba(120,174,192,.075); border-radius: 10px 0 0 10px; }
.sessions-table td:last-child { border-right: 1px solid rgba(120,174,192,.075); border-radius: 0 10px 10px 0; }
.sessions-table tr:hover td { border-color: rgba(85,246,197,.17); background: rgba(85,246,197,.035); }
.sessions-table tr:hover td:first-child { transform: translateX(2px); }
.sessions-table .id { color: #d6e5e3; font-size: .76rem; }
.session-node-dot { display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: #627987; box-shadow: 0 0 7px rgba(97,232,255,.3); vertical-align: 1px; }
.sessions-table .phone { color: #69808d; font-size: .72rem; }
.session-actions { text-align: right; padding-right: 12px !important; white-space: nowrap; }
.status-pill {
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(133,170,187,.1);
  background: rgba(118,151,170,.07);
  color: #8197a4;
  font-size: .56rem;
  letter-spacing: .08em;
}
.status-pill.connected { border-color: rgba(85,246,197,.17); background: rgba(85,246,197,.08); color: #65f1c7; }
.status-pill.connecting { border-color: rgba(255,198,92,.17); background: rgba(255,198,92,.07); color: #ffc65c; }
.status-pill.disconnected, .status-pill.logged-out { border-color: rgba(255,94,122,.15); background: rgba(255,94,122,.07); color: #ff7890; }
.status-pill.connected .status-dot { box-shadow: 0 0 9px var(--color-success); animation: beaconPulse 2s infinite; }
.panel-footer-actions { display: flex; align-items: center; justify-content: flex-end; padding: 13px 20px; border-top: 1px solid rgba(122,176,194,.09); }
.events { max-height: 456px; padding: 7px 0; }
.event {
  position: relative;
  grid-template-columns: 68px 90px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 18px 11px 22px;
  border-bottom-color: rgba(122,176,194,.065);
  font-size: .7rem;
}
.event::before { content: ''; position: absolute; left: 10px; top: 17px; width: 3px; height: 3px; border-radius: 50%; background: #4f6878; }
.event:hover { background: rgba(97,232,255,.025); }
.event .t { color: #506a79; font-size: .56rem; }
.event .kind { color: var(--color-accent); font-size: .55rem; }
.event .msg { color: #91a4ae; }
.event .sid { color: #506a79; }
.empty { color: #66808f; line-height: 1.7; }

/* Session command screen */
.session-head {
  position: relative;
  min-height: 190px;
  margin: 36px 0 20px;
  padding: 34px 38px;
  overflow: hidden;
  align-items: center;
  border: 1px solid rgba(120,183,201,.12);
  border-radius: 22px;
  background: linear-gradient(125deg, rgba(12,26,38,.86), rgba(7,14,23,.72));
  box-shadow: var(--shadow-med);
  animation: riseIn 620ms var(--ease-standard) both;
}
.session-head::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: linear-gradient(rgba(97,232,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(97,232,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}
.session-head > div:first-child { position: relative; z-index: 1; }
.hero-eyebrow { display: flex; align-items: center; gap: 9px; color: #65808f; }
.hero-eyebrow > span { width: 20px; height: 1px; background: var(--color-accent); box-shadow: 0 0 7px var(--color-accent); }
.session-id { margin: 12px 0 15px; color: #ecf8f5; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.045em; }
.session-meta .phone { color: #77909c; }
.session-node { position: relative; z-index: 1; width: 130px; height: 130px; flex: 0 0 130px; display: grid; place-items: center; }
.node-ring { position: absolute; border: 1px solid rgba(97,232,255,.16); border-radius: 50%; animation: orbitSpin 12s linear infinite; }
.node-ring::before { content: ''; position: absolute; width: 5px; height: 5px; top: -3px; left: 50%; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 10px var(--color-cyan); }
.node-ring.ring-a { inset: 7px; }
.node-ring.ring-b { inset: 26px; border-style: dashed; animation-duration: 8s; animation-direction: reverse; }
.node-core { width: 34px; height: 34px; border: 1px solid rgba(85,246,197,.35); border-radius: 10px; background: rgba(85,246,197,.08); box-shadow: 0 0 30px rgba(85,246,197,.14); transform: rotate(45deg); }
.node-label { position: absolute; bottom: -3px; width: 180px; overflow: hidden; color: #536c7b; font-family: var(--font-family-code); font-size: .5rem; letter-spacing: .08em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.pair-panel { margin-bottom: 20px; }
.pair-body { grid-template-columns: 270px 44px minmax(0, 1fr); padding: 26px; gap: 26px; }
.pair-qr { width: 270px; height: 270px; border-color: rgba(97,232,255,.14); background: #f7fffc; box-shadow: 0 0 42px rgba(97,232,255,.08); }
.pair-caption { color: #728995; }
.pair-caption b { color: #c8d8d5; }
.pair-divider { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(122,176,194,.13); border-radius: 50%; background: rgba(8,18,27,.85); color: #607987; font-family: var(--font-family-code); font-size: .58rem; }
.pair-right input[type="text"] { height: 48px; border-color: rgba(126,177,196,.16); background: rgba(3,9,15,.58); }
.pair-right input[type="text"]:focus { border-color: rgba(85,246,197,.55); box-shadow: 0 0 0 3px rgba(85,246,197,.07); }
.pair-code { border-color: rgba(85,246,197,.24); background: rgba(85,246,197,.045); color: var(--color-accent); text-shadow: 0 0 20px rgba(85,246,197,.4); }

.playground { gap: 18px; }
.pg-body { grid-template-columns: 280px minmax(360px, 1.05fr) minmax(330px, .95fr); gap: 16px; }
.pg-sidebar { max-height: 760px; }
.pg-sidebar-tree { padding: 7px; }
.pg-search-shell {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 10px 5px;
  padding: 0 10px;
  min-height: 39px;
  border: 1px solid rgba(122,176,194,.12);
  border-radius: 10px;
  background: rgba(3,9,15,.5);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pg-search-shell:focus-within { border-color: rgba(85,246,197,.36); box-shadow: 0 0 0 3px rgba(85,246,197,.045); }
.pg-search-shell input { flex: 1; min-width: 0; height: 37px; padding: 0; border: 0; outline: 0; background: transparent; color: #cfdfdc; font: .7rem var(--font-family-body); }
.pg-search-shell input::placeholder { color: #49616f; }
.pg-search-shell input::-webkit-search-cancel-button { filter: invert(.7); }
.pg-search-shell kbd { padding: 2px 6px; border: 1px solid rgba(122,176,194,.13); border-radius: 5px; color: #4d6675; background: rgba(122,176,194,.05); font: .56rem var(--font-family-code); }
.pg-search-icon { position: relative; width: 12px; height: 12px; border: 1px solid #526c7a; border-radius: 50%; }
.pg-search-icon::after { content: ''; position: absolute; width: 5px; height: 1px; right: -4px; bottom: -2px; background: #526c7a; transform: rotate(45deg); transform-origin: left center; }
.pg-search-empty { padding: 28px 14px; color: #536d7b; font-family: var(--font-family-code); font-size: .62rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.pg-group + .pg-group { border-top-color: rgba(122,176,194,.07); }
.pg-group-head { margin: 2px 0; padding: 10px 11px; border-radius: 8px; color: #738c99; }
.pg-group-head:hover { background: rgba(97,232,255,.045); color: #cce0df; }
.pg-group[open] > .pg-group-head { color: var(--color-accent); background: rgba(85,246,197,.035); }
.pg-group-count { background: rgba(99,139,158,.09); color: #597482; }
.pg-group-items { gap: 2px; padding: 3px 0 8px; }
.pg-endpoint {
  grid-template-columns: 50px minmax(0, 1fr);
  margin: 0;
  padding: 9px 10px 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}
.pg-endpoint:hover { background: rgba(97,232,255,.035); border-color: rgba(97,232,255,.07); }
.pg-endpoint.active { background: linear-gradient(90deg, rgba(85,246,197,.11), rgba(85,246,197,.025)); border-color: rgba(85,246,197,.16); box-shadow: inset 2px 0 var(--color-accent); }
.pg-endpoint .method { border-radius: 5px; font-size: .52rem; }
.pg-endpoint .label { color: #a8b9be; font-size: .7rem; }
.pg-endpoint.active .label { color: #e4f1ee; }
.pg-endpoint .path { color: #4f6977; font-size: .55rem; }
.pg-form { padding: 22px; }
.pg-fields { gap: 15px; }
.pg-fields input[type="text"],
.pg-fields input[type="number"],
.pg-fields textarea,
.pg-fields select {
  min-height: 44px;
  border-color: rgba(126,177,196,.14);
  background: rgba(3,9,15,.56);
  color: #d9e8e5;
}
.pg-fields textarea { min-height: 98px; }
.pg-fields input:focus,
.pg-fields textarea:focus,
.pg-fields select:focus { border-color: rgba(85,246,197,.48); box-shadow: 0 0 0 3px rgba(85,246,197,.06); }
.pg-actions { border-top-color: rgba(122,176,194,.08); }
.pg-result-body { min-height: 310px; background: rgba(2,8,13,.58); color: #a9c8c2; font-size: .69rem; }
.pg-result-body::selection { background: rgba(85,246,197,.25); color: white; }
.pg-recording { background: rgba(5,13,20,.6); border-top-color: rgba(122,176,194,.1); }

/* Drawer and modal */
.drawer-scrim { position: fixed; z-index: 40; background: rgba(1,4,8,.68); backdrop-filter: blur(7px); }
.drawer { position: fixed; z-index: 50; width: 460px; border-left-color: rgba(97,232,255,.15); background: rgba(6,13,21,.94); backdrop-filter: blur(26px); }
.drawer::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 1px; background: linear-gradient(transparent, var(--color-cyan), transparent); opacity: .45; }
.drawer-head { min-height: 92px; padding: 20px 24px; border-bottom-color: rgba(122,176,194,.1); }
.drawer-title { color: #edf8f5; font-family: var(--font-family-code); }
.drawer-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.drawer-kicker span { width: 14px; height: 1px; background: var(--color-accent); box-shadow: 0 0 7px var(--color-accent); }
.drawer-close { display: grid; place-items: center; width: 38px; height: 38px; color: #718995; }
.drawer-close:hover { background: rgba(97,232,255,.06); color: #e7f4f1; }
.drawer-body { padding: 26px; }
.qr-wrap { border-color: rgba(97,232,255,.14); background: #f7fffc; }
.key-modal-scrim { position: fixed; z-index: 60; background: rgba(1,4,8,.78); backdrop-filter: blur(10px); }
.key-modal { border-color: rgba(97,232,255,.16); border-radius: 22px; background: linear-gradient(145deg, rgba(12,25,37,.97), rgba(6,13,21,.97)); box-shadow: 0 35px 100px rgba(0,0,0,.55), var(--glow-cyan); animation: modalReveal 380ms var(--ease-standard) both; }
.key-modal-code { border-color: rgba(85,246,197,.16); background: rgba(3,9,15,.7); color: #8fffdc; }
.command-modal { width: min(520px, 100%); }
.command-input-shell {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(126,177,196,.16);
  border-radius: 12px;
  background: rgba(3,9,15,.68);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.command-input-shell:focus-within { border-color: rgba(85,246,197,.5); box-shadow: 0 0 0 3px rgba(85,246,197,.06); }
.command-input-shell > span { color: #4e6978; font-size: .65rem; }
.command-input-shell input { flex: 1; min-width: 0; height: 50px; padding: 0 4px; border: 0; outline: 0; background: transparent; color: #e5f3f0; font: .85rem var(--font-family-code); }
.command-input-shell input::placeholder { color: #405563; }
.command-toast {
  position: fixed;
  z-index: 80;
  right: 24px;
  bottom: 24px;
  max-width: min(430px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid rgba(85,246,197,.24);
  border-radius: 12px;
  background: rgba(8,20,27,.96);
  color: #bcddd5;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 26px rgba(85,246,197,.08);
  font-size: .78rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 260ms, transform 260ms var(--ease-standard);
}
.command-toast.show { opacity: 1; transform: none; }
.command-toast.error { border-color: rgba(255,94,122,.28); color: #ffadba; box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 26px rgba(255,94,122,.08); }

/* Motion */
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 54px, 54px 0; }
}
@keyframes ambientFloat {
  from { transform: translate3d(0, -3%, 0) scale(.92); }
  to { transform: translate3d(8%, 7%, 0) scale(1.1); }
}
@keyframes pageScan {
  0%, 12% { transform: translateY(-4px); opacity: 0; }
  18% { opacity: .2; }
  65% { opacity: .08; }
  78%, 100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes beaconPulse {
  0%, 100% { opacity: .65; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(85,246,197,.45), 0 0 10px rgba(85,246,197,.65); }
  70% { box-shadow: 0 0 0 8px rgba(85,246,197,0), 0 0 14px rgba(85,246,197,.45); }
  100% { box-shadow: 0 0 0 0 rgba(85,246,197,0), 0 0 10px rgba(85,246,197,.65); }
}
@keyframes corePulse {
  0% { transform: scale(.7); opacity: .5; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}
@keyframes traceSignal {
  0%, 100% { transform: translateX(-120%); opacity: .15; }
  45%, 60% { transform: translateX(295%); opacity: .85; }
}
@keyframes shellReveal {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes modalReveal {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: none; }
}

/* Responsive command layouts */
@media (max-width: 1240px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .panels { grid-template-columns: 1fr; }
  .pg-body { grid-template-columns: 260px minmax(0, 1fr); }
  .pg-result { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .topbar-status { display: none; }
  .login-shell { grid-template-columns: 1fr; max-width: 610px; }
  .login-visual { min-height: 330px; padding: 38px; border-right: 0; border-bottom: 1px solid rgba(108,183,203,.11); }
  .login-visual h1 { margin-top: 26px; font-size: 2.8rem; }
  .login-visual > p { margin-top: 15px; }
  .orbit-system { position: absolute; width: 270px; right: -52px; top: 35px; opacity: .5; }
  .login-metrics { margin-top: 35px; padding-right: 160px; }
  .login-card { padding: 44px; }
  .login-brand { margin-bottom: 36px; }
  .charts-grid { grid-template-columns: 1fr; }
  .session-node { width: 105px; height: 105px; flex-basis: 105px; }
  .pair-body { grid-template-columns: 230px 36px minmax(0,1fr); gap: 18px; }
  .pair-qr { width: 230px; height: 230px; }
}

@media (max-width: 760px) {
  .topbar-inner { min-height: 66px; padding: 10px 16px; gap: 5px; }
  .brand { gap: 9px; }
  .brand-caption, .brand-chip, .version-tag { display: none; }
  .topbar .tag { padding: 0 8px; font-size: 0; }
  .topbar .tag .icon { width: 17px; height: 17px; }
  .topbar .logout-btn { width: 36px; padding: 0; font-size: 0; justify-content: center; }
  .topbar .logout-btn .icon { width: 16px; height: 16px; margin: 0 !important; }
  .dash-wrap { padding: 38px 16px 0; }
  .dash-intro { align-items: flex-start; flex-direction: column; margin-bottom: 26px; }
  .dash-create { width: 100%; justify-content: center; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .kpi-card { padding: 16px 15px 14px; }
  .kpi-card .kpi-icon { width: 32px; height: 32px; margin-bottom: 15px; }
  .chart-card { padding: 18px; }
  #donut-wrap { gap: 12px; }
  #status-donut { width: 116px; height: 116px; }
  #donut-center { left: 8px !important; top: 35px !important; width: 100px !important; }
  .page { padding: 0 16px 44px; }
  .panel-head { min-height: 60px; padding: 12px 15px; }
  .sessions-table { min-width: 0; border-spacing: 0; }
  .sessions-table thead { display: none; }
  .sessions-table tbody { display: grid; gap: 10px; }
  .sessions-table tr { display: grid; grid-template-columns: 1fr; padding: 14px; border: 1px solid rgba(122,176,194,.1); border-radius: 13px; background: rgba(6,14,22,.52); }
  .sessions-table td { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; padding: 5px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: right; }
  .sessions-table td::before { content: attr(data-label); margin-right: auto; color: #526c7a; font-family: var(--font-family-code); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; }
  .sessions-table td.id { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: 10px !important; border-bottom: 1px solid rgba(122,176,194,.08) !important; text-align: left; }
  .sessions-table td.id::before { display: none; }
  .session-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start !important; padding-top: 12px !important; }
  .session-actions::before { display: none; }
  .session-actions .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .event { grid-template-columns: 58px minmax(74px, auto) minmax(0,1fr); padding-right: 12px; }
  .session-head { min-height: 160px; margin-top: 22px; padding: 25px 22px; }
  .session-node { display: none; }
  .pair-body { grid-template-columns: 1fr; padding: 18px; }
  .pair-qr { width: min(100%, 290px); height: auto; aspect-ratio: 1; align-self: center; }
  .pair-divider { justify-self: center; }
  .pg-body { grid-template-columns: 1fr; }
  .pg-result { grid-column: auto; }
  .pg-sidebar { max-height: 440px; }
  .drawer { width: 100%; }
  .key-modal { padding: 20px; }
}

@media (max-width: 520px) {
  .login-wrap { padding: 0; align-items: stretch; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; }
  .login-visual { min-height: 270px; padding: 28px 24px; }
  .login-visual h1 { font-size: 2.25rem; }
  .login-visual > p { width: 75%; font-size: .8rem; }
  .orbit-system { width: 220px; right: -75px; top: 40px; }
  .login-metrics { display: none; }
  .login-card { padding: 34px 24px 38px; }
  .login-brand { margin-bottom: 30px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi-card .kpi-val { font-size: 1.6rem; }
  #donut-wrap { align-items: flex-start; flex-direction: column; }
  #donut-center { top: 34px !important; }
  #donut-legend { width: 100%; }
  .chart-heading { flex-direction: column; }
  .events { max-height: 390px; }
  .event { grid-template-columns: 52px 1fr; }
  .event .msg { grid-column: 1 / -1; padding-left: 9px; }
  .session-id { overflow-wrap: anywhere; }
  .pg-form { padding: 16px; }
  .pg-result-body { min-height: 230px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-world::after { display: none; }
  .ambient-grid { transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}