/* ============================================================
   FoxDen design system v3 — "den console"
   Dark-only · Inter + JetBrains Mono · 8px rhythm · sidebar app shell
   ============================================================ */

/* ---- fonts (self-hosted) ---- */
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jbm-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jbm-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---- tokens ---- */
:root {
  /* surfaces */
  --bg: #0e1013;
  --bg-side: #090a0d;
  --bg-elev: #13161b;
  --panel: #161920;
  --panel-hover: #1b1f27;
  --inset: #0b0d10;
  --border: #252932;
  --border-soft: #1c2027;
  --border-strong: #343a48;

  /* fox shell (SYN-422): the dark palette and the orange accent set as named
     tokens - near-black rail/canvas under the fox-orange accent system.
     Existing token names are kept for compatibility; these are the canonical
     aliases every shell component reads. */
  --rail: #090a0d;                 /* sidebar rail - near-black */
  --canvas: var(--bg);             /* page canvas - near-black */
  --on-accent: #1a0d04;            /* text/icons sitting on orange fills */
  --accent-grad: linear-gradient(180deg, #f08a40, var(--accent)); /* primary CTA fill */
  --accent-nav: rgba(239, 128, 51, .16); /* active nav highlight wash */

  /* text */
  --text: #e8eaee;
  --text-dim: #b6bcc7;
  --muted: #8d95a2;
  --faint: #6b7380;

  /* brand + status */
  --accent: #ef8033;
  --accent-hover: #ff9a54;
  --accent-soft: rgba(239, 128, 51, .12);
  --accent-line: rgba(239, 128, 51, .45);
  --ok: #3fb950;
  --ok-soft: rgba(63, 185, 80, .12);
  --warn: #d29922;
  --warn-soft: rgba(210, 153, 34, .12);
  --err: #f85149;
  --err-soft: rgba(248, 81, 73, .12);
  --info: #58a6ff;

  /* type */
  --font-ui: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: 30px;
  --fs-h2: 19px;
  --fs-h3: 15px;
  --fs-body: 14.5px;
  --fs-small: 13px;
  --fs-micro: 11.5px;

  /* 8px rhythm */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.18);
  --shadow-2: 0 6px 16px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.2);
  --shadow-3: 0 20px 48px rgba(0,0,0,.55);

  --sidebar-w: 248px;
  --rail-w: 68px;
  --content-max: 1760px;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.55 var(--font-ui);
  min-height: 100vh;
}
::selection { background: var(--accent-soft); color: var(--accent-hover); }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, .mono { font-family: var(--font-mono); font-size: 13px; font-feature-settings: "zero" 1; }
:not(pre) > code {
  background: var(--inset); border: 1px solid var(--border-soft);
  padding: 0 5px; border-radius: var(--r-sm); color: var(--text-dim); font-size: 12.5px;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; margin-top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
strong { font-weight: 600; color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: fixed; left: 12px; top: -48px; z-index: 300;
  background: var(--accent); color: #180b02; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-md); transition: top .15s;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ============================================================
   APP SHELL
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--sidebar-w); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--rail);
  border-right: 1px solid var(--border-soft);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 var(--sp-5); flex: none; border-bottom: 1px solid var(--border-soft);
  font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand .mark { display: inline-flex; flex: none; filter: drop-shadow(0 2px 8px rgba(239,128,51,.35)); }
.brand .mark svg { display: block; }

.nav { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.nav-group + .nav-group { margin-top: var(--sp-4); }
.nav-label {
  padding: 0 var(--sp-3); margin: var(--sp-3) 0 6px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--faint);
}
.nav-link {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); margin-bottom: 2px;
  border-radius: var(--r-md); color: var(--muted);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: rgba(255,255,255,.045); color: var(--text); text-decoration: none; }
.nav-link .ni { display: inline-flex; flex: none; width: 18px; height: 18px; }
.nav-link .ni svg { width: 18px; height: 18px; display: block; }
.nav-link.active { background: var(--accent-nav); color: var(--accent-hover); }
.nav-link.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
/* signed-out visitors: console links stay visible but read as gated */
body[data-auth="out"] .nav-link.needs-auth { opacity: .62; }
/* SYN-495: admin subsection — cosmetic visibility only (the server-side
   /v1/admin/* gate is the security boundary). Hidden unless the session
   payload carries admin:true; the #nav-admin markup also ships hidden. */
body:not([data-admin="in"]) #nav-admin { display: none; }
body[data-auth="out"] .nav-link.needs-auth::after {
  content: ""; margin-left: auto; width: 13px; height: 13px; opacity: .8;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* sidebar bottom block */
.side-foot {
  flex: none; padding: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* v0.2.28: header launch button (replaces the balance chip - balance lives on the dashboard) */
.top-launch { display: flex; align-items: center; gap: var(--sp-2); }
.top-launch svg { width: 15px; height: 15px; display: block; }
.side-foot .top-launch { width: 100%; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 6px 4px; min-width: 0; }
.avatar-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #b9531a);
  color: #170a03; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-side), 0 0 0 3px var(--border);
}
.who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.who-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .btn-logout { width: 100%; justify-content: flex-start; color: var(--muted); }
.side-foot .btn-logout:hover { color: var(--text); }
.side-foot .signin-note { font-size: 12px; color: var(--faint); text-align: center; margin: 0; }

/* main column */
.main-col { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-7) var(--sp-7) var(--sp-8); flex: 1; outline: none; }
.footer {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-7);
  border-top: 1px solid var(--border-soft);
  color: var(--faint); font-size: var(--fs-small);
}
.footer a { color: var(--muted); white-space: nowrap; }
.health { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; }
.health .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.health.ok .dot { background: var(--ok); box-shadow: 0 0 8px rgba(63,185,80,.65); }
.health.down .dot { background: var(--err); box-shadow: 0 0 8px rgba(248,81,73,.65); }

/* mobile topbar + drawer scrim (hidden on desktop) */
.mobile-top { display: none; }
.scrim { display: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: transparent; color: var(--text-dim); border: 1px solid var(--border); cursor: pointer;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--panel-hover); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }

/* SYN-443: pending-change pip on the mobile menu (hamburger) button — red dot
   top-right, absolute so it never shifts the icon layout. */
#nav-toggle { position: relative; }
.nav-pip {
  position: absolute; top: 7px; right: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--err);
  box-shadow: 0 0 0 2px var(--panel);
  pointer-events: none;
}

/* SYN-522: desktop variant — the same red dot anchored to the Machines nav
   link, sitting under the icon's bottom edge (owner: "under the machines
   icon"). Look comes from .nav-pip; position only. Left centers on the 18px
   icon column (link padding-left var(--sp-3) + 9px); the rail media query
   centers on the link instead (the icon is centered there). Kept inside the
   link bounds so .nav's overflow-y:auto never clips it. */
.nav-link .nav-pip-rail {
  top: auto; right: auto; bottom: 1px;
  left: calc(var(--sp-3) + 9px);
  transform: translateX(-50%);
}

/* view transition */
.view-enter { animation: viewIn .24s cubic-bezier(.2,.7,.2,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- page header ---- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.page-title { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.028em; margin: 0; line-height: 1.12; }
.page-sub { color: var(--muted); margin: 6px 0 0; font-size: var(--fs-body); max-width: 72ch; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ============================================================
   COMPONENTS
   ============================================================ */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  margin-bottom: var(--sp-5); box-shadow: var(--shadow-1);
}
.panel > :last-child { margin-bottom: 0; }
.panel h2 {
  margin: 0 0 var(--sp-4); font-size: var(--fs-h2); font-weight: 600;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px var(--sp-4); flex-wrap: wrap;
}
.panel h2 .count { color: var(--faint); font-weight: 400; font-size: var(--fs-small); font-family: var(--font-ui); letter-spacing: 0; }
.panel h3 { font-size: var(--fs-h3); }
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: var(--sp-4); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.panel p { margin: 0 0 var(--sp-3); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 var(--sp-4);
  background: var(--panel-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; font-family: inherit; line-height: 1; cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s, box-shadow .12s, color .12s;
  text-decoration: none !important; white-space: nowrap;
}
.btn:hover { background: #232832; border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #f08a40, var(--accent)); border-color: rgba(0,0,0,.2);
  color: #170a03; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover { background: linear-gradient(180deg, #ffa05f, var(--accent-hover)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { background: var(--panel-hover); color: var(--text); }
.btn.danger { color: var(--err); border-color: rgba(248,81,73,.28); background: transparent; }
.btn.danger:hover { background: var(--err-soft); border-color: rgba(248,81,73,.55); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn.small { height: 30px; padding: 0 var(--sp-3); font-size: 13px; border-radius: var(--r-sm); }
.btn.large { height: 46px; padding: 0 var(--sp-5); font-size: 15px; border-radius: 10px; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn .ico svg { width: 16px; height: 16px; }

/* ---- forms ---- */
input, select, textarea {
  background: var(--inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  height: 38px; padding: 0 var(--sp-3); font-size: 14px; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { font-family: var(--font-mono); font-size: 13px; width: 100%; height: auto; min-height: 80px; padding: 10px var(--sp-3); resize: vertical; flex: 1; min-width: 240px; }
label { font-size: var(--fs-small); color: var(--muted); display: block; margin-bottom: 6px; font-weight: 500; }
/* [hidden] guard: any display rule (e.g. .form-row flex) otherwise defeats the attribute -
   v0.2.29: spec sliders showed on open because of exactly that */
[hidden] { display: none !important; }
.form-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }

/* ---- data rows ---- */
.vm-list { margin: 0 calc(var(--sp-2) * -1); }
.vm-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 12px var(--sp-2); margin: 0 calc(var(--sp-2) * -1);
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--r-md); flex-wrap: wrap; font-size: 14px;
  transition: background .12s;
}
.vm-row:hover { background: rgba(255,255,255,.025); }
.vm-row:last-child { border-bottom: none; }
.vm-id { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .01em; min-width: 116px; overflow-wrap: anywhere; }
.vm-meta { color: var(--muted); font-size: 13px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; flex: 1 1 140px; }
.vm-meta ~ .vm-meta { flex: 0 1 auto; }
.vm-meta .sep::after { content: "\200B"; }
.vm-meta .sep { color: var(--border-strong); margin: 0 7px; }
.vm-actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.vm-actions.muted { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); }
.vm-row .badge { min-width: 86px; justify-content: center; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { color: var(--faint); font-weight: 500; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
table.data td { padding: 10px; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-micro); font-weight: 600; font-family: var(--font-mono);
  letter-spacing: .02em; text-transform: lowercase; line-height: 1.5;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.running, .badge.credited { background: var(--ok-soft); color: var(--ok); border-color: rgba(63,185,80,.3); }
.badge.running::before { box-shadow: 0 0 6px currentColor; }
.badge.creating, .badge.stopped, .badge.pending { background: var(--warn-soft); color: var(--warn); border-color: rgba(210,153,34,.3); }
/* SYN-421: frozen = snapshot held, restorable on demand (files, not processes) */
.badge.frozen { background: rgba(88,166,255,.12); color: #58a6ff; border-color: rgba(88,166,255,.3); }
.badge.destroyed, .badge.failed { background: var(--err-soft); color: var(--err); border-color: rgba(248,81,73,.26); }
.badge.neutral { background: var(--panel-hover); color: var(--muted); border-color: var(--border); }
/* SYN-411: live desktop preparation progress (row badge + console overlay) */
.badge.preparing { background: var(--warn-soft); color: var(--warn); border-color: rgba(210,153,34,.3); }
.vm-row.mcard .badge + .badge { margin-left: 6px; }
/* SYN-425: preparing overlay — SYN-411 contract; sits above the floating chrome */
.desk-preparing { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--muted); z-index: 7; pointer-events: none; }
.desk-preparing[hidden] { display: none; }
.desk-preparing .spin { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--warn); border-radius: 50%; animation: desk-spin .9s linear infinite; }
@keyframes desk-spin { to { transform: rotate(360deg); } }

/* ---- notices ---- */
.notice {
  padding: 12px var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4);
  font-size: 14px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid;
}
.notice .ico { flex: none; margin-top: 1px; }
.notice .ico svg { width: 16px; height: 16px; }
.notice.warn { background: var(--warn-soft); border-color: rgba(210,153,34,.3); color: var(--warn); }
.notice.err { background: var(--err-soft); border-color: rgba(248,81,73,.3); color: var(--err); }
.notice.ok { background: var(--ok-soft); border-color: rgba(63,185,80,.3); color: var(--ok); }
.notice.info { background: rgba(88,166,255,.1); border-color: rgba(88,166,255,.3); color: var(--info); }

/* ---- empty states ---- */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: var(--sp-6) var(--sp-5); color: var(--muted); font-size: 14px;
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.012) 10px 20px);
}
.empty .empty-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px;
  background: var(--panel-hover); border: 1px solid var(--border); color: var(--faint);
}
.empty .empty-ico svg { width: 20px; height: 20px; }
.empty strong { font-size: 14.5px; }
.empty span.hint-line { color: var(--faint); font-size: 13px; max-width: 52ch; }

/* ---- KPI strip ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.kpi {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) 18px;
  box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s;
}
.kpi:hover { border-color: var(--border-strong); }
.kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent-line), transparent 70%); opacity: .55; }
.kpi .label { color: var(--faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; white-space: nowrap; }
.kpi .value { font-family: var(--font-mono); font-weight: 600; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.2; }
.kpi .value .per { font-size: 13px; color: var(--faint); font-weight: 400; letter-spacing: 0; }
.kpi .value.ok { color: var(--ok); }
.kpi .value.warn { color: var(--warn); }
.kpi .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* ---- code blocks ---- */
.codeblock { position: relative; margin: var(--sp-3) 0; }
pre.code {
  margin: 0; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) 84px var(--sp-4) var(--sp-4); overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 12.5px; line-height: 1.65; color: var(--text-dim);
}
.copy-btn {
  position: absolute; top: 10px; right: 10px;
  background: var(--panel-hover); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--muted);
  padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--font-ui); font-weight: 500;
  transition: color .12s, border-color .12s, background .12s;
}
.copy-btn:hover { color: var(--text); border-color: var(--border-strong); background: #232832; }
.key-reveal {
  background: var(--inset); border: 1px solid var(--accent-line);
  border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-3);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.key-reveal code { background: none; border: none; padding: 0; font-size: 13.5px; word-break: break-all; color: var(--accent-hover); }
.key-reveal .hint { color: var(--warn); font-size: 12.5px; margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.key-reveal .hint svg { width: 15px; height: 15px; flex: none; }

/* ---- modals ---- */
/* v0.2.36: modals are native <dialog class="modal"> elements - a single
   root-level fixed element that Gecko's compositor translates frame-synced
   with the Fenix dynamic toolbar (ComputeFixedMarginsOffset); the dim layer
   is dialog::backdrop; the scroll lock is body:has(dialog[open]) - no JS. */
.modal {
  position: fixed; inset: 0; margin: auto;
  background: var(--panel); border: 1px solid var(--border-strong);
  color: inherit;
  border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  width: min(460px, calc(100vw - 32px)); max-width: min(460px, calc(100vw - 32px));
  padding: var(--sp-5); animation: modalIn .16s ease-out;
  /* scrollable on short viewports - the launch modal grew size chips,
     kernel + volume + run-once rows, taller than a phone (mobile report) */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* scrollbar hidden (owner ask 2026-10-08): scrolling kept, the bar just isn't drawn */
  scrollbar-width: none;
}
.modal::-webkit-scrollbar { display: none; }
/* v0.2.53: launch modal wider on DESKTOP ONLY (owner ask) - scoped via class so
   the small confirm dialogs keep their 460px width. The min-width guard is
   LOAD-BEARING: a two-class selector (0,2,0) outranks the mobile sheet rule
   (.modal inside @media max-width:768px, 0,1,0) at ANY viewport - media queries
   add no specificity. Without the guard the phone sheet collapsed to a narrow
   full-height left-pinned strip (owner regression report 2026-10-08 20:55). */
@media (min-width: 769px) {
  .modal.modal-wide {
    width: min(680px, calc(100vw - 32px));
    max-width: min(680px, calc(100vw - 32px));
  }
}
.modal::backdrop {
  background: rgba(5, 6, 8, .68); backdrop-filter: blur(4px);
  animation: fadeIn .14s ease-out;
}
/* scroll lock while a modal is open - CSS only; removes the Fenix toolbar's
   scroll trigger at the source (r7 lesson: JS locks were blunt) */
body:has(dialog.modal[open]) { overflow: hidden; }
.modal h3 { margin: 0 0 8px; font-size: 17px; }
.modal p { color: var(--muted); font-size: 14px; margin: 0 0 var(--sp-5); }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: 16px; }
.modal .action-price { margin-right: auto; align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* SYN-457: launch modals pin the Launch action in an always-visible footer.
   The clone dialog (fresh machine launch + template launch — one builder)
   opts in via .modal-launch: on DESKTOP the dialog becomes a flex column —
   .modal-body is the only scroller (min-height: 0) and .modal-actions is a
   real footer row full-bleed to the dialog edges, so the button never sits
   out of view on short viewports. Nothing can slide behind the footer (it
   sits OUTSIDE the scroller), so the content needs no bottom-padding offset.
   On MOBILE the fullscreen grid sheet already rows head/body/actions (media
   block below); only safe-area padding is added there. */
.modal-launch {
  display: flex; flex-direction: column;
  overflow: hidden;   /* the dialog itself no longer scrolls — the body does */
}
.modal-launch .modal-head { flex: none; }
.modal-launch .modal-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;   /* keep the owner's hidden-scrollbar decision */
}
.modal-launch .modal-body::-webkit-scrollbar { display: none; }
.modal-launch .modal-actions {
  flex: none;
  margin: 16px calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
  padding: 12px var(--sp-5) var(--sp-5);
  background: var(--panel);
  border-top: 1px solid var(--border);
}
/* v0.2.54.1: machines details modal rows were unstyled (squished label+value,
   "1m ago ago" dup fixed in app.js) - give .kv a modal-scoped row layout. */
.modal .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.modal .kv:last-child { border-bottom: none; }
.modal .kv > span { color: var(--muted); flex-shrink: 0; }
.modal .kv > b { color: var(--text); font-weight: 500; font-family: var(--font-mono); font-size: 12.5px; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.modal-details { width: min(430px, 94vw); }
.field-title { display: block; font-size: 13px; font-weight: 600; letter-spacing: .01em; margin-bottom: 2px; }
.field-title .field-hint { font-weight: 400; font-size: 11.5px; color: var(--muted); }
/* v0.2.27 custom shape sliders */
.custom-spec { flex-direction: column; align-items: stretch; }
.slider-row { display: flex; align-items: center; gap: var(--sp-3); }
.slider-row .sl-label { flex: none; min-width: 128px; font-size: 12.5px; color: var(--muted); }
.slider-row .sl-label b { color: var(--text, #eee); font-weight: 600; }
.slider-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
@media (max-width: 480px) { .action-price .p-rate { display: none; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(8px); } }

/* ---- toasts ---- */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.toast {
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 12px var(--sp-4); box-shadow: var(--shadow-2); font-size: 14px;
  display: flex; gap: 10px; align-items: flex-start; animation: toastIn .2s ease-out;
}
.toast .ico { flex: none; margin-top: 1px; }
.toast .ico svg { width: 16px; height: 16px; }
.toast.ok .ico { color: var(--ok); }
.toast.err .ico { color: var(--err); }
.toast.info .ico { color: var(--info); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: all .25s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* SYN-498: version-nudge toast — one row, inline actions, stays until acted on */
.toast.ver { align-items: center; }
.toast.ver .ver-msg { min-width: 0; }
.toast.ver .ver-reload { flex: none; }
.toast.ver .ver-x { flex: none; background: none; border: 0; padding: 4px; color: var(--text-dim); cursor: pointer; line-height: 0; }
.toast.ver .ver-x svg { width: 14px; height: 14px; }
.toast.ver .ver-x:hover { color: var(--text); }

/* ---- skeletons ---- */
.skel {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-hover) 45%, var(--panel) 65%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite linear;
}
.skel.row { height: 44px; margin-bottom: 10px; }
.skel.line { height: 16px; width: 60%; margin: 10px 0 20px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================
   VIEWS
   ============================================================ */

/* ---- landing ---- */
.hero { position: relative; text-align: center; padding: var(--sp-8) 0 var(--sp-6); }
.hero::before {
  content: ""; position: absolute; inset: -40px 10% auto; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(239,128,51,.16), transparent 62%);
}
.hero h1 { font-size: 46px; margin: 0 0 var(--sp-4); letter-spacing: -0.035em; font-weight: 700; line-height: 1.1; }
.hero h1 .accent { color: var(--accent); }
.hero p.sub { color: var(--muted); font-size: 17px; max-width: 600px; margin: 0 auto var(--sp-5); line-height: 1.6; }
.sso-buttons { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.sso-note { color: var(--faint); font-size: var(--fs-small); }
.trust-row { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.trust-row span {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.02);
}

.term-wrap { max-width: 1024px; margin: var(--sp-6) auto 0; text-align: left; }
.term { background: var(--inset); border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--border-soft); }
.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.term-bar .dot.r { background: #e5534b; } .term-bar .dot.y { background: #d29922; } .term-bar .dot.g { background: #3fb950; }
.term-bar .title { margin-left: 8px; color: var(--faint); font-size: 12px; font-family: var(--font-mono); }
.term-body { padding: var(--sp-4) 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; min-height: 160px; }
.term-body .t-line { white-space: pre-wrap; }
.term-body .t-prompt { color: var(--faint); }
.term-body .t-cmd { color: var(--text); }
.term-body .t-ok { color: var(--ok); }
.term-body .t-dim { color: var(--muted); }
.term-body .t-acc { color: var(--accent-hover); }
.term-body .caret { display: inline-block; width: 7px; height: 14px; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-body .t-you { color: var(--accent-hover); margin-right: 8px; }
.term-body .t-say { color: var(--text); }
.term-body .t-mcp { color: var(--ok); margin-right: 8px; }
.term-body .t-hint { color: var(--faint); }
.term-quick { max-width: 1024px; margin: var(--sp-3) auto 0; text-align: left; }
.term-quick pre.code { font-size: 11.5px; }
.quick-note { color: var(--muted); font-size: 12.5px; margin: var(--sp-2) 0 0; }
@media (prefers-reduced-motion: reduce) { .term-body .caret { animation: none; } }

.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-8) 0 0; }
.feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s; }
.feature:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.feature .fico { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-hover); border: 1px solid rgba(239,128,51,.22); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); }
.feature .fico svg { width: 19px; height: 19px; }
.feature h3 { margin: 0 0 6px; font-size: var(--fs-h3); font-weight: 600; }
.feature p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* ---- pricing ---- */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.price-card {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); text-align: center; box-shadow: var(--shadow-1);
  transition: border-color .15s, transform .15s;
}
.price-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.price-card.featured { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-2); background: linear-gradient(180deg, rgba(239,128,51,.06), var(--panel) 40%); }
.price-card .flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #180b02; font-size: 10.5px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .07em;
}
.price-card .size { font-size: var(--fs-small); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.price-card .price { font-size: 34px; font-weight: 600; margin: var(--sp-3) 0 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.price-card .price .per { font-size: 13px; color: var(--faint); font-weight: 400; letter-spacing: 0; }
.price-card .per2 { color: var(--muted); font-size: 12.5px; font-family: var(--font-mono); }
.price-card .spec { color: var(--muted); font-size: 12.5px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); font-family: var(--font-mono); line-height: 1.7; }
.billing-note { text-align: center; color: var(--muted); font-size: 13.5px; margin: var(--sp-4) 0 0; }
.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.de-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.de-row::-webkit-scrollbar { display: none; }

.legal-body { max-width: 760px; }
.legal-body h2 { margin: 26px 0 10px; font-size: 18px; }
.legal-body p { margin: 0 0 10px; color: var(--text-dim); font-size: 13.5px; line-height: 1.65; }
.legal-body ul { margin: 0 0 10px; padding-left: 18px; color: var(--text-dim); font-size: 13.5px; line-height: 1.65; }
.legal-body li { margin-bottom: 8px; }
.legal-toc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.legal-toc button { background: var(--panel-hover); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); padding: 5px 14px; font-size: 12.5px; cursor: pointer; font-family: var(--font-ui); }
.legal-toc button:hover { color: var(--text); border-color: var(--border-strong); }
/* ---- SYN-425: session canvas — full-bleed dark stage + floating chrome ----
   The console is the page: edge-to-edge canvas beside the sidebar, no header
   bar, no footer. Controls float OVER the stage (overlay layer outside the
   RFB target so reconnects never touch them). */
.desk-canvas { position: relative; flex: 1; min-height: 0; background: #0b0d10; overflow: hidden; }
.desk-stage { position: absolute; inset: 0; background: #0b0d10; }
.desk-stage .empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
/* SYN-426: full-bleed CLI console inside the session canvas (xterm over /term) */
.desk-stage .desk-term { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 1; }
.desk-stage .desk-rfb-host { width: 100%; height: 100%; }   /* SYN-428: stable reparent handle for the warm RFB */
.desk-stage .desk-term .term-host { flex: 1; min-height: 0; height: auto; background: #0b0d10; overflow: hidden; }
.desk-stage .desk-term .term-host .xterm { height: 100%; padding: 56px 10px 8px; }   /* SYN-426: top pad clears the floating chrome */
.desk-stage .desk-term .term-host .xterm-viewport { background-color: transparent !important; }
.desk-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.desk-bar, .desk-hotzone, .desk-panel { pointer-events: auto; }
/* SYN-430: unified auto-hide control bar — one bottom-center dock. Hidden by
   default (faded); .revealed fades it in. SYN-467: enter AND exit are
   opacity-only — no transform on any axis (the old 16px Y-offset and the
   per-machine --db-tx X-shift both read as a slide on desk switches between
   machines with different saved positions). Centering moved from
   translate(-50%) to margin-inline:auto so the computed transform stays
   identity/none shown, hidden, and mid-fade alike. visibility keeps hidden
   buttons out of the tab order. */
.desk-bar { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; margin-inline: auto; width: max-content; touch-action: none; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px; background: rgba(13,15,19,.86); border: 1px solid var(--border); border-radius: 12px; backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; z-index: 5; }
.desk-bar.revealed { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.desk-bar.dragging { transition: none; cursor: grabbing; }
.desk-bar .ctl-btn { height: 34px; min-width: 34px; }
.desk-bar .ctl-btn .desk-bar-label { font-size: 12.5px; }
.desk-bar .ctl-chip.link { height: 34px; justify-content: center; }
.ctl-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
.ctl-chip.link { cursor: pointer; }
.ctl-chip.link:hover { color: var(--text); background: var(--panel-hover); }
.ctl-chip.link svg { width: 14px; height: 14px; }
.ctl-chip.status { color: var(--muted); }
.ctl-sep { width: 1px; height: 18px; background: var(--border); }
.ctl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 12.5px; font-family: var(--font-ui); cursor: pointer; }
.ctl-btn svg { width: 15px; height: 15px; }
.ctl-btn:hover { color: var(--text); background: var(--panel-hover); }
.ctl-btn.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
/* SYN-430: overflow popover (rare actions), opening UPWARD from the bar */
.desk-more-pop { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 214px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 6; }
.desk-more-pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text-dim); font-size: 13px; font-family: var(--font-ui); text-align: left; border-radius: var(--r-sm); cursor: pointer; }
.desk-more-pop button svg { width: 15px; height: 15px; flex: none; }
.desk-more-pop button:hover { background: var(--panel-hover); color: var(--text); }
.desk-more-pop button.danger { color: var(--err); }
.desk-more-pop button.danger:hover { background: var(--err-soft); color: var(--err); }
/* SYN-430: bottom-edge reveal hotzone — invisible capture strip (~28px) */
.desk-hotzone { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 4; }
.desk-panel { position: absolute; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 12px; width: min(320px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); z-index: 6; max-height: min(70vh, 480px); display: flex; flex-direction: column; }
.desk-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.desk-panel-body { padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.desk-kv { display: flex; justify-content: space-between; gap: 12px; }
.desk-kv span { color: var(--muted); }
.desk-kv b { font-weight: 500; color: var(--text); font-family: var(--font-mono); font-size: 12px; text-align: right; word-break: break-all; }
.desk-res-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.desk-panel textarea { background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: var(--font-mono); font-size: 12.5px; padding: 8px; resize: vertical; }
.desk-panel[hidden], .desk-more-pop[hidden] { display: none; }
/* SYN-430 mobile: >=40px touch targets + coarse hotzone + safe-area (env() is
   already in .desk-bar/.desk-panel offsets); the bar idle-hides, so it does
   not sit over the xterm keyboard helper while typing. */
@media (pointer: coarse) {
  .desk-bar .ctl-btn, .desk-bar .ctl-chip.link { height: 40px; min-width: 40px; }
  .desk-bar .ctl-btn svg { width: 17px; height: 17px; }
  .desk-hotzone { height: 36px; }
}
@media (max-width: 520px) { .desk-bar .ctl-chip.id { display: none; } }
/* v0.2.54: desk route fills the viewport in non-fullscreen (owner ask 2026-10-09)
   — the canvas is the page: drop the content column cap/padding for this route,
   hide the footer, and flex the stage under the head so resizeSession (v0.2.52.1)
   grows the guest into every available pixel. dvh keeps mobile dynamic toolbars
   honest; the :fullscreen/.pseudo-fs rules below still win where they overlap. */
body[data-view="desktop"] .content { max-width: none; padding: 0; display: flex; flex-direction: column; }
body[data-view="desktop"] .main-col { min-height: 100vh; min-height: 100dvh; }
body[data-view="desktop"] .footer { display: none; }
body[data-view="desktop"] .desk-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body[data-view="login"] .content { display: flex; align-items: center; justify-content: center; padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.login-panel { width: 100%; max-width: 420px; margin: 0 auto; text-align: center; padding: var(--sp-7) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
.login-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; background: radial-gradient(ellipse at 50% 0%, rgba(239,128,51,.16), transparent 70%); pointer-events: none; }
.login-panel > * { position: relative; }
.login-mark { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 16px; background: var(--inset); border: 1px solid var(--border-strong); margin-bottom: var(--sp-4); box-shadow: 0 6px 20px rgba(239,128,51,.18); }
.login-mark svg { width: 30px; height: 30px; }
.login-panel h2 { justify-content: center; font-size: 22px; margin: 0 0 var(--sp-2); }
.login-panel .sso-buttons { flex-direction: column; align-items: stretch; margin-top: var(--sp-5); gap: 10px; }
.login-panel .btn { height: 44px; font-size: 14.5px; }
.login-panel .btn.soon { opacity: .6; }
.login-panel .notice { text-align: left; margin: var(--sp-4) 0 0; }

/* ---- docs ---- */
.doc-method { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-sm); min-width: 58px; text-align: center; flex: none; letter-spacing: .03em; }
.doc-method.GET { color: var(--ok); background: var(--ok-soft); }
.doc-method.POST { color: var(--warn); background: var(--warn-soft); }
.doc-method.DELETE { color: var(--err); background: var(--err-soft); }
.doc-endpoint { display: flex; gap: var(--sp-3); align-items: center; padding: 10px var(--sp-2); margin: 0 calc(var(--sp-2) * -1); border-bottom: 1px solid var(--border-soft); border-radius: var(--r-sm); font-size: 13.5px; transition: background .12s; }
.doc-endpoint:last-child { border-bottom: none; }
.doc-endpoint:hover { background: rgba(255,255,255,.025); }
.doc-endpoint code { background: none; border: none; padding: 0; color: var(--text); font-size: 12.5px; }
.doc-endpoint .doc-desc { color: var(--muted); font-size: 13px; margin-left: auto; text-align: right; }

/* ---- console ---- */
.console { margin-top: var(--sp-2); width: 100%; padding: var(--sp-3); background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md); }
.console pre.out { margin: var(--sp-2) 0 0; background: transparent; border: none; padding: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: 12.5px; color: var(--text-dim); }
.console .cline { display: flex; gap: var(--sp-2); }
.console input { flex: 1; font-family: var(--font-mono); font-size: 13px; }

/* ---- billing ---- */
.balance-hero { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.balance-hero .amount { font-size: 46px; font-weight: 600; font-family: var(--font-mono); color: var(--ok); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1; }
.topup-grid { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.topup-grid .btn { min-width: 92px; }

/* ---- misc ---- */
.boot-splash { text-align: center; padding: 120px 0; color: var(--muted); }
.spinner { width: 28px; height: 28px; margin: 0 auto var(--sp-4); border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ico { display: inline-flex; }
.ico svg { display: block; }
.section-gap { margin-top: var(--sp-6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1360px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi:last-child:nth-child(3n+2) { grid-column: span 2; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* tablet: icon rail */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: var(--rail-w); }
  .brand { justify-content: center; padding: 0; }
  .brand-name, .nl, .nav-label, .who, .bc-label, .logout-label, .signin-note, body[data-auth="out"] .nav-link.needs-auth::after { display: none; }
  .nav { overflow: visible; padding: var(--sp-2) var(--sp-2) var(--sp-4); }
  .nav-group + .nav-group { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border-soft); }
  .nav-link { justify-content: center; padding: 11px 0; }
  .nav-link .nav-pip-rail { left: 50%; }   /* SYN-522: icon is centered in rail mode */
  .nav-link.active::before { left: -8px; }
  .nav-link[data-tip]:hover::after, .nav-link[data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text);
    padding: 5px 10px; border-radius: var(--r-sm); font-size: 12.5px; white-space: nowrap;
    box-shadow: var(--shadow-2); z-index: 60; pointer-events: none; margin: 0; width: auto; height: auto; background-image: none; opacity: 1;
  }
  .side-foot { align-items: center; padding: var(--sp-3) var(--sp-2); }
  .top-launch { justify-content: center; }
  .user-card { padding: 4px 0; justify-content: center; }
  .side-foot .btn-logout { justify-content: center; padding: 0; width: 38px; }
  .content { padding: var(--sp-6) var(--sp-6) var(--sp-7); }
  .footer { padding: var(--sp-4) var(--sp-6); }
  .hero h1 { font-size: 40px; }
}

/* mobile: off-canvas drawer + topbar */
@media (max-width: 768px) {
  .main-col { margin-left: 0; }
  .sidebar { width: min(284px, 86vw); transform: translateX(-102%); transition: transform .22s cubic-bezier(.2,.7,.2,1); box-shadow: none; }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(5,6,8,.6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .mobile-top {
    display: flex; align-items: center; gap: var(--sp-3);
    position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 var(--sp-4);
    background: rgba(11,13,16,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft);
  }
  .mobile-top .brand { height: auto; padding: 0; font-size: 16px; border-bottom: 0; }
  .mobile-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
  .mobile-actions .top-launch { padding: 4px 10px; }
  .mobile-actions .avatar-dot { width: 28px; height: 28px; font-size: 11px; }
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .footer { padding: var(--sp-4); }
  .page-title { font-size: 26px; }
  .hero { padding: var(--sp-6) 0 var(--sp-5); }
  .hero h1 { font-size: 32px; }
  .hero p.sub { font-size: 15.5px; }
  .price-cards { grid-template-columns: 1fr; gap: var(--sp-5); }
  .panel { padding: var(--sp-4); }
  .kpi .value { font-size: 21px; }
  .balance-hero .amount { font-size: 38px; }
  .doc-endpoint { flex-wrap: wrap; }
  .doc-endpoint .doc-desc { margin-left: 0; text-align: left; flex-basis: 100%; }
  .vm-row { gap: var(--sp-2) var(--sp-3); }
  .vm-actions { margin-left: 0; }
  #toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  pre.code { padding-right: var(--sp-4); padding-top: 40px; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .kpi { padding: var(--sp-3) var(--sp-4); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-actions, .page-actions .btn { width: 100%; }
}

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


/* ---- machines catalog (v2.9) ---- */
.machine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.machine-card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease, transform .15s ease; }
.machine-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.machine-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.machine-os { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* SYN-475: android family glyph on template cards — same stroke style as the DE chip icons */
.machine-os .os-ico { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.machine-os .os-ico .dot { fill: currentColor; stroke: none; }
.machine-card h3 { margin: 0; font-size: 16px; }
.machine-desc { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.45; flex: 1; }
.machine-meta { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.machine-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 2px; }
.machine-price { font-family: var(--font-mono); font-size: 15px; color: var(--text); }
.machine-price .per { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .machine-grid { grid-template-columns: 1fr; } }

.btn.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }


/* ---- v0.2.12: desktop thumbnails + ttl presets ---- */
.card-thumb { width: 100%; height: 150px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: #0b0d10; }
.vm-row .vm-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: #0b0d10; flex: none; }
.ttl-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ttl-chips .btn { min-width: 0; }


/* ---- v0.2.12 mobile: launch modal stacks, action rows wrap ---- */
.ttl-wrap { display: flex; gap: 8px; align-items: center; }
.ttl-wrap #clone-ttl { width: 100px; }
@media (max-width: 768px) {
  .vm-actions { flex-wrap: wrap; row-gap: 8px; }
  .modal .form-row > * { flex: 1 1 100%; }
  .modal .form-row select { width: 100%; }
  .modal .ttl-wrap { flex: 1 1 100%; }
  .modal .ttl-wrap #clone-ttl { flex: 1 1 auto; width: auto; }
  /* fullscreen modal sheets on mobile (aidan: "make modal fullscreen in mobile")
     v0.2.36: the sheet is a native <dialog> at inset:0 / 100dvh - ONE
     root-level fixed element that Gecko's compositor translates frame-synced
     with the Fenix dynamic-toolbar animation, so it cannot jump or leave a
     gap under the action bar. Grid rows: head (auto) / body (1fr, the only
     scroller) / actions (auto, a static row - not sticky, cannot detach).
     env() insets dropped (r6: Fenix reports the toolbar height as an inset
     when shown - the bar "breathed"). Blur dropped (Fenix render quirks). */
  /* .modal-wide restated here on purpose (SYN-381 regression lesson,
     2026-10-08): equal specificity (0,2,0) + later in file beats any future
     base-level two-class width rule, so the phone sheet always wins */
  .modal, .modal.modal-wide {
    inset: 0;
    margin: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: var(--sp-4) var(--sp-4) 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }
  .modal .modal-actions {
    flex: none;
    flex-wrap: wrap;
    row-gap: 8px;
    margin-top: 0;
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    background: var(--panel);
    padding: 12px var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border);
  }
  /* SYN-457: the launch footer stays clear of the gesture bar / home
     indicator — owner ask 2026-10-11 (env() aware on the modal sheet).
     margin-bottom: 0 — the sheet has NO bottom padding to cancel (unlike
     the desktop dialog), and a negative bottom margin poisons the grid's
     auto-track sizing: the track reads the item's margin-box (67-24=43px),
     the row renders 24px taller than its track and the Launch button ends
     up under the sheet edge (proof-verified 2026-10-11). */
  .modal-launch .modal-actions {
    margin-bottom: 0;
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .modal::backdrop { backdrop-filter: none; }
}


/* ---- v0.2.13: browser terminal (xterm.js) ---- */
.console .term-host { height: 320px; background: #0b0d10; border-radius: var(--r-sm); overflow: hidden; }
.console.serial .term-host { height: 380px; }
.serial-bar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-2); }
.serial-bar .serial-live { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(63, 185, 80, .4); }
.serial-bar .serial-live.off { background: var(--warn-soft); color: var(--warn); border-color: rgba(210, 153, 34, .4); }
.serial-bar .serial-name { font-size: 12px; }
.serial-bar .btn { margin-left: auto; }
.console .term-host .xterm { height: 100%; padding: 6px 8px; }
.term-loading { padding: var(--sp-3); font-size: 13px; }


/* ---- v0.2.14: version dropdowns on family cards ---- */
.ver-select { background: var(--inset); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 2px 6px; font-size: 12px; font-family: var(--font-mono); max-width: 120px; }
.ver-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- v0.2.16: split launch button + size chips ---- */
.launch-split { display: inline-flex; align-items: stretch; }
.launch-split .btn.primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.launch-split .split-chev { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid var(--accent-line); min-width: 44px; padding-left: 10px; padding-right: 10px; font-size: 15px; line-height: 1; }
.launch-split .split-chev:hover { background: var(--accent-soft); }
.size-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none; white-space: nowrap; padding: 7px 12px; border: 1px solid var(--accent-line); border-radius: 8px; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.size-chip .sc-size { font-weight: 700; font-size: 13px; }
.size-chip .sc-spec, .size-chip .sc-rate { font-size: 11px; color: var(--muted); }
.size-chip.active { background: var(--accent-soft); border-color: var(--accent); }
.size-chip:hover { border-color: var(--accent); }
/* v0.2.30: versions integrated into the chips - one row, no separate select row */
.distro-row, .size-row { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.distro-row::-webkit-scrollbar, .size-row::-webkit-scrollbar { display: none; }
.distro-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 8px 5px 10px; border: 1px solid var(--accent-line); border-radius: 8px; background: transparent; }
.distro-chip.active { background: var(--accent-soft); border-color: var(--accent); }
.distro-chip:hover { border-color: var(--accent); }
.dist-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.dist-ver { flex: 0 0 auto; width: auto; min-width: 56px; padding: 2px 2px; font-size: 12px; background: transparent; border: 0; color: inherit; }
.distro-chip .dc-ico { width: 14px; height: 14px; flex: none; fill: currentColor; }
/* DE selector (multi-DE golden mock, 2026-10-07) */
.de-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none; white-space: nowrap; padding: 6px 11px; border: 1px solid var(--accent-line); border-radius: 8px; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.de-chip .de-top { display: inline-flex; align-items: center; gap: 5px; }
.de-chip .de-top svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.de-chip .de-top svg .dot { fill: currentColor; stroke: none; }
.de-chip .de-name { font-weight: 700; font-size: 12.5px; }
.de-chip .de-min { font-size: 11px; color: var(--muted); }
.de-chip.active { background: var(--accent-soft); border-color: var(--accent); }
.de-chip:hover { border-color: var(--accent); }
.de-chip.disabled { opacity: 0.45; cursor: not-allowed; }
.de-chip.disabled:hover { border-color: var(--accent-line); }
.beta-tag { display: inline-block; padding: 0 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--muted); }

/* v0.2.41: live per-VM telemetry row (host-process proxy: cpu sparkline + mem bar + cost/ttl) */
.vm-live { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.vm-live-na { color: var(--faint); font-size: 12px; font-family: var(--font-mono); }
.live-graph { flex: none; display: inline-flex; }
.live-graph canvas { width: 168px; height: 44px; display: block; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 6px; }
.live-meter { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.live-meter .lbl { color: var(--faint); }
.live-meter .bar { position: relative; width: 52px; height: 6px; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; }
.live-meter .bar i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: var(--accent); border-radius: 3px; transition: transform .4s ease; }
.live-meter.mem .bar i { background: var(--info); }
.live-meter .pct { min-width: 44px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.live-cost, .live-ttl { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* SYN-505: dead admin rows - inert (no action buttons), subtle destroyed-state chip */
.dead-chip { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--border-soft); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); background: var(--inset); vertical-align: 1px; }
.dead-row .admin-acts { color: var(--text-dim); }
@media (max-width: 768px) {
  .vm-row { align-items: flex-start; }
  .vm-live { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .live-graph canvas { width: 140px; height: 38px; }
}

/* ---- Machines v2: card grid + fleet strip (v0.2.44) ---- */
.fleet-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 16px; padding: 11px 18px; border: 1px solid var(--border-soft); background: var(--bg-elev); border-radius: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); align-items: center; }
.fleet-strip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; box-shadow: 0 0 8px rgba(63,185,80,.65); }
.fleet-strip b { color: var(--text); font-weight: 600; }
.fleet-strip .warn { color: var(--warn); }
.fleet-strip .acc { color: var(--accent-hover); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.vm-row.mcard { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; min-width: 0; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 15px 16px 14px; margin: 0; }
.vm-row.mcard:hover { background: var(--panel); }
.vm-row.mcard .head { display: flex; align-items: center; gap: 11px; }
.vm-row.mcard .mtitles { min-width: 0; }
.mname { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.msub { font-family: var(--font-mono); color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.msub .sep { color: var(--border-strong); margin: 0 5px; }
.vm-row.mcard .badge { margin-left: auto; flex: none; }
.distro { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex: none; }
/* SYN-433: distro icon tiles — brand-colored inline SVG on a neutral slot */
.distro.has-ico { background: rgba(255, 255, 255, 0.07); }
.distro svg.distro-ico { display: block; width: 20px; height: 20px; fill: currentColor; flex: none; }
.side-vm-ico svg.distro-ico { width: 13px; height: 13px; }
.mcard .vm-thumb { width: 100%; border-radius: 10px; margin: 12px 0 0; }
.mcard .meters { display: flex; gap: 16px; margin: 15px 0 2px; }
.mcard .meter { flex: 1; }
.mcard .meter .lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-bottom: 5px; }
.mcard .vm-live { display: block; flex-basis: auto; }
.mcard .live-graph { display: block; margin: 11px 0 3px; }
.mcard .live-graph canvas { width: 100%; height: 34px; display: block; }
.mcard .live-meter .lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-bottom: 5px; gap: 8px; }
.mcard .live-meter .pct { color: var(--text-dim); font-weight: 600; }
.mcard .live-meter .bar { height: 6px; }
.mcard .ttl-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin: 8px 0 10px; gap: 8px; }
.mcard .ttl-bar { display: block; height: 4px; border-radius: 2px; background: var(--inset); border: 1px solid var(--border-soft); overflow: hidden; margin-bottom: 12px; }
.mcard .ttl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), #56d364); transition: width .5s; }
.mcard .ttl-bar.low i { background: linear-gradient(90deg, var(--warn), #e3b341); }
.mcard .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mcard .drawer { margin-top: 13px; border-top: 1px dashed var(--border); padding-top: 12px; display: none; }
.mcard.open .drawer { display: block; }
.drawer .dtitle { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.drawer .code { display: flex; align-items: center; gap: 8px; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.drawer .code .cmd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.drawer .code .cmd b { color: var(--accent-hover); font-weight: 600; }
.drawer .copy { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-dim); border-radius: 6px; padding: 4px 9px; font-size: 11px; cursor: pointer; flex: none; }
.drawer .kv { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 9px; gap: 8px; }
.drawer .kv b { color: var(--text-dim); font-weight: 500; overflow-wrap: anywhere; }
.drawer .row2 { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .grid { grid-template-columns: minmax(0, 1fr); } }

/* --- v0.2.50: fullscreen pair (element FS + iOS pseudo fallback) --- */
.console-bar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-2); }
.console-bar .console-name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.console-bar .btn { margin-left: auto; }
/* SYN-425: desk fullscreen = edge-to-edge canvas (chrome floats over it);
   console term keeps the padded column layout */
.desk-wrap:fullscreen { display: flex; background: #0b0d10; width: 100%; height: 100%; padding: 0; }
.desk-wrap:fullscreen .desk-canvas { flex: 1; min-height: 0; }
.console:fullscreen { display: flex; flex-direction: column; background: #0b0d10; width: 100%; height: 100%; padding: 10px 12px; }
.console:fullscreen .term-host { flex: 1; min-height: 0; height: auto; }
.pseudo-fs { position: fixed !important; inset: 0 !important; z-index: 400; background: #0b0d10; display: flex; flex-direction: column; padding: 10px 12px; }
.pseudo-fs .desk-canvas, .pseudo-fs .term-host { flex: 1; min-height: 0; height: auto; }
body.fs-lock { overflow: hidden; }


/* ============================================================
   SYN-422 shell restyle — fox-branded dark shell
   Kept at end-of-file so the prominent-CTA / topbar overrides win the
   cascade over .btn.small (equal specificity, later rule wins).
   Presentation only: no selectors removed, no behavior change.
   ============================================================ */

/* sidebar footer: prominent "+ Launch machine" CTA pinned at the bottom,
   user/workspace footer under it (renderTop fills #top-auth) */
.side-foot { border-top: 1px solid var(--border-soft); }
.side-foot .top-launch {
  width: 100%; height: 42px; padding: 0 var(--sp-4);
  justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  background: var(--accent-grad); border-color: rgba(0,0,0,.2); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px rgba(239,128,51,.2);
}
.side-foot .top-launch:hover {
  background: linear-gradient(180deg, #ffa05f, var(--accent-hover));
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(239,128,51,.32);
}
.side-foot .top-launch svg { width: 16px; height: 16px; }
.user-card { padding: 6px 4px 2px; }

/* topbar: the shell's only topbar is the mobile top strip (the desktop shell
   keeps per-view page-heads — console/machines IA is owned by later tickets).
   Glass restyled onto the near-black rail tokens; no functional change. */
.mobile-top {
  background: rgba(9, 10, 13, .92);
  border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   SIDEBAR MACHINE LIST (SYN-423) — nested under the Machines nav
   Rows: template icon + name + live status dot. Slim on purpose
   (no meters); the Machines page stays the dense view.
   ============================================================ */
.nav-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px var(--sp-3); }
body[data-auth="out"] .nav-sub { display: none; }
.side-vm { display: flex; align-items: center; border-radius: var(--r-md); }
.side-vm:hover { background: rgba(255, 255, 255, .035); }
/* SYN-452: the machine whose console/desktop is open — subtle accent row */
/* SYN-460: the left-edge inset accent bar is gone — highlight only (owner ask) */
.side-vm.active { background: var(--accent-soft); }
.side-vm-go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 5px 4px 5px 0; border: 0; background: none; color: var(--muted);
  font-family: inherit; font-size: 13px; line-height: 1.2; text-align: left;
  cursor: pointer; border-radius: var(--r-md);
}
.side-vm-go:hover { color: var(--text); text-decoration: none; background: none; }
.side-vm-flat { cursor: default; }
.side-vm-ico { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; flex: none; }
.side-vm-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; background: var(--faint); }
.side-dot.st-ready { background: var(--ok); }                                   /* green = ready */
.side-dot.st-preparing { background: var(--warn); animation: side-dot-pulse 1.5s ease-in-out infinite; } /* amber pulse = preparing/creating */
.side-dot.st-frozen { background: var(--info); }                                /* blue = frozen (SYN-421, feature-detect) */
.side-dot.st-failed { background: var(--err); }                                 /* red = failed */
.side-dot.st-stopped { background: var(--faint); }
@keyframes side-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.side-vm-menu {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 26px; margin-left: 2px; padding: 0;
  border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: var(--r-sm);
  opacity: 0; transition: opacity .12s;
}
.side-vm:hover .side-vm-menu, .side-vm-menu:focus-visible, .side-vm-menu[aria-expanded="true"] { opacity: 1; }
.side-vm-menu:hover { color: var(--text); }
.side-vm-menu svg { width: 13px; height: 13px; display: block; }
.side-vm-open {
  display: flex; align-items: center; gap: 7px; margin-top: 3px;
  padding: 6px 4px 6px 0; border: 0; background: none;
  color: var(--accent-hover); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; border-radius: var(--r-md);
}
.side-vm-open:hover { color: var(--text); }
.side-vm-open svg { width: 13px; height: 13px; display: block; flex: none; }
.side-vm-empty { padding: 6px 0; font-size: 12.5px; color: var(--faint); }
.side-vm-menu-pop {
  position: fixed; z-index: 70; min-width: 180px; padding: 4px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
}
.side-vm-menu-pop button {
  border: 0; background: none; color: var(--text); font-family: inherit; font-size: 13px;
  text-align: left; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.side-vm-menu-pop button:hover { background: rgba(255, 255, 255, .06); }
.side-vm-menu-pop button.danger { color: var(--err); }
.side-vm-menu-pop button:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
/* SYN-490: sidebar rows carry the SYN-468 context menu — the pop embeds in the
   row and opens viewport-fixed (openRowMenu); z-index 70 matches the old dots
   pop (over topbar/scrim), and selection/touch-callout stay off so a long-press
   opens the menu instead of the platform's text-selection UI. */
.side-vm .menu-pop { z-index: 70; }
.side-vm { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* tablet icon rail: the nested list hides with the labels */
@media (min-width: 769px) and (max-width: 1024px) { .nav-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .side-dot.st-preparing { animation: none; } }
/* ============================================================
   SYN-424: machines management table (strip, pills, cost, tabs)
   ============================================================ */
.next-exp-chip { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--text-dim); border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.next-exp-chip:hover { background: rgba(239,128,51,.2); border-color: var(--accent); }
.next-exp-chip .warn { color: var(--warn); font-weight: 600; }
.next-exp-chip[hidden] { display: none; }

.mtabs { display: flex; gap: 6px; margin: 0 0 12px; }
.mtab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-dim); border-radius: 999px; font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.mtab:hover { border-color: var(--border-strong); color: var(--text); }
.mtab.active { background: var(--accent-nav); border-color: var(--accent-line); color: var(--accent-hover); font-weight: 600; }
.mtab .cnt { font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--inset); border: 1px solid var(--border-soft); color: var(--muted); }
.mtab.active .cnt { color: var(--accent-hover); border-color: var(--accent-line); }

.table-wrap { overflow-x: auto; }
.machines-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.machines-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.machines-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.machines-table tbody tr:last-child td { border-bottom: none; }
.machines-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.machines-table .c-usage { min-width: 150px; }
.machines-table .c-cost { min-width: 150px; }
.machines-table .c-ttl, .machines-table .c-act { white-space: nowrap; }
.machines-table .th-act { text-align: right; }
.machines-table .act-wrap { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }

.mach-cell { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.mach-cell .distro { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-weight: 700; font-size: 14px; }
.mach-cell .distro svg.distro-ico { width: 17px; height: 17px; }
.mach-cell .mtitles { min-width: 0; }
.mach-cell .mname { font-weight: 600; color: var(--text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mach-cell .msub { font-family: var(--font-mono); font-size: 11px; color: var(--faint); display: flex; gap: 6px; align-items: center; }
.mach-cell .sep { color: var(--faint); }
.tpl-chip { color: var(--text-dim); background: var(--panel-hover); border: 1px solid var(--border-soft); padding: 0 6px; border-radius: 5px; }
/* SYN-458: subtle freeze-at-expiry policy marker (machines row, machine cell — no new column) */
.freeze-flag { color: var(--info); background: var(--panel-hover); border: 1px solid var(--border-soft); padding: 0 6px; border-radius: 5px; font-size: 10.5px; white-space: nowrap; }
.freeze-flag[hidden] { display: none; }

/* status pills: running green / preparing amber-pulse / frozen blue / failed red */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-running { background: var(--ok-soft); color: var(--ok); border-color: rgba(63,185,80,.3); }
.pill-running::before { box-shadow: 0 0 6px currentColor; }
.pill-preparing { background: var(--warn-soft); color: var(--warn); border-color: rgba(210,153,34,.3); }
.pill-preparing::before { animation: pill-pulse 1.2s ease-in-out infinite; }
@keyframes pill-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(210,153,34,.5); } 50% { opacity: .55; box-shadow: 0 0 0 4px rgba(210,153,34,0); } }
.pill-frozen { background: rgba(88,166,255,.12); color: var(--info); border-color: rgba(88,166,255,.3); }
.pill-viewers { background: rgba(88,166,255,.12); color: var(--info); border-color: rgba(88,166,255,.3); }   /* SYN-517: action-bar "N viewing" pill */
.pill-failed { background: var(--err-soft); color: var(--err); border-color: rgba(248,81,73,.26); }
.pill-stopped { background: var(--panel-hover); color: var(--muted); border-color: var(--border); }

.c-usage .live-meter { display: flex; }
.c-usage .live-meter + .live-meter { margin-top: 5px; }

.live-cost { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rate-sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 2px; }

.capbar { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.capbar-track { position: relative; width: 92px; height: 6px; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; flex: none; }
.capbar-track i { position: absolute; inset: 0; width: 0%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
.capbar.cap-warn .capbar-track i { background: var(--warn); }
.capbar-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.capbar.cap-warn .capbar-lbl { color: var(--warn); }

/* orange ring on the row when a cap-warn (>=80%) is active */
tr.cap-warn td { background: rgba(239,128,51,.05); border-top: 1px solid rgba(239,128,51,.45); border-bottom: 1px solid rgba(239,128,51,.45); }
tr.cap-warn td:first-child { border-left: 2px solid rgba(239,128,51,.55); }
tr.cap-warn td:last-child { border-right: 2px solid rgba(239,128,51,.55); }

.live-ttl { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.live-ttl.ttl-ok { color: var(--ok); }
.live-ttl.ttl-warn { color: var(--warn); }
.live-ttl.ttl-crit { color: var(--err); }
.btn.tiny { padding: 2px 9px; font-size: 11px; }
.extend-inline { margin-left: 8px; }
.extend-inline[hidden] { display: none !important; }
.menu-pop button[hidden] { display: none !important; }

.rowmenu { position: relative; display: inline-flex; }
.rowmenu .menu-btn { width: 28px; height: 28px; padding: 0; border-radius: 7px; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 168px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-2); padding: 5px; display: flex; flex-direction: column; }
.menu-pop button { text-align: left; padding: 8px 11px; background: none; border: none; color: var(--text-dim); font-size: 13px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.menu-pop button:hover { background: var(--panel-hover); color: var(--text); }
.menu-pop button.danger { color: var(--err); }
/* SYN-468: dots button replaced by an inline trash (destroys with the existing
   confirm); the menu itself moved to row right-click/long-press. */
.rowmenu .trash-btn { width: 28px; height: 28px; padding: 0; border-radius: 7px; color: var(--text-dim); }
.rowmenu .trash-btn:hover { color: var(--err); background: var(--panel-hover); }
.menu-pop button[disabled] { opacity: .35; cursor: not-allowed; }
.menu-pop button[disabled]:hover { background: none; color: var(--text-dim); }
.menu-pop button.danger:hover { background: var(--err-soft); }

/* next-expiry chip jump highlight */
tr.row-flash td { animation: row-flash 2.4s ease; }
@keyframes row-flash { 0%, 55% { background: rgba(239,128,51,.16); } 100% { background: transparent; } }

/* console/serial drawers ride a colspan row beneath the machine row */
tr.drawer-row > td { padding: 0 14px 14px; background: var(--inset); border-bottom: 1px solid var(--border-soft); }
tr.drawer-row .console { margin: 0; }

.mach-strip .dot-run { background: var(--ok); }
.micro { font-size: 11.5px; }

/* SYN-424 fixup: the legacy .vm-row flex rules (dashboard list rows) must not
   re-shape table rows — the management table is a real table. */
.machines-table tr.vm-row { display: table-row; gap: 0; padding: 0; margin: 0; border-radius: 0; flex-wrap: nowrap; border-bottom: none; background: none; }
.machines-table tr.vm-row[hidden] { display: none; }

/* ---- SYN-463: Access page — VPN profiles ---- */
.badge.kind-ovpn { background: rgba(239,128,51,.12); color: #ef8033; border-color: rgba(239,128,51,.3); }
.badge.kind-wg { background: rgba(88,166,255,.12); color: #58a6ff; border-color: rgba(88,166,255,.3); }
.vpn-fp { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.vpn-fp code { cursor: pointer; font-size: 12px; color: var(--text-dim, #8b949e); }
.vpn-fp code.full { white-space: normal; word-break: break-all; }
.vpn-kv { font-weight: 600; }
.vpn-kv.up { color: var(--ok); }
.vpn-kv.attaching { color: var(--warn); }
.vpn-kv.failed { color: var(--err); }

/* ---- SYN-476: android console — adb screen+input viewer ---- */
.desk-android { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 10px; padding: 12px; box-sizing: border-box; }
.android-screen { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; flex: 1 1 auto; }
.android-frame { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 18px; box-shadow: 0 0 0 2px #1f2733, 0 12px 40px rgba(0,0,0,.55); background: #000; touch-action: none; cursor: pointer; }
/* SYN-489 W3: native WebRTC video lane — the stream covers the screencap canvas (identical
   contain-fit geometry: abspos + margin auto + the same max constraints, so the video box IS
   the visible frame and tap mapping stays exact). The canvas stays under until the first
   decoded frame; pointer events stay on the canvas below so the adb input path is untouched.
   SYN-497 part 3: the pre-reveal state is visibility:hidden, NOT display:none — the element
   stays in the render tree (older Chromium builds and sink-stall conditions can leave the
   rVFC first-frame gate silent for display:none elements — the coordinator's re-test showed
   3x8s healthy-media sessions dying at the wd3 watchdog), while visibility:hidden paints
   NOTHING (background, box-shadow and frames are all skipped) so the black 300x150 box stays
   structurally impossible in every non-streaming state. */
.android-video { visibility: hidden; pointer-events: none; background: #000; position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 18px; box-shadow: 0 0 0 2px #1f2733, 0 12px 40px rgba(0,0,0,.55); }
.android-video.on { visibility: visible; }
.ak-sound { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid #f0883e; background: rgba(13,17,23,.88); color: #e6edf3; font-size: 12.5px; cursor: pointer; }
.ak-sound:hover { background: rgba(240,136,62,.25); }
.android-keys { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; max-width: 100%; flex-wrap: wrap; }
.ak-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #232b36; background: #11161d; color: #e6edf3; font-size: 14px; cursor: pointer; }
.ak-btn:hover { border-color: #f0883e; }
.ak-send { min-width: 60px; font-size: 12.5px; }
.ak-text { flex: 1 1 120px; min-width: 90px; max-width: 320px; height: 34px; box-sizing: border-box; background: #0b0d10; color: #e6edf3; border: 1px solid #232b36; border-radius: 8px; padding: 0 10px; font: 13px/1.2 inherit; }
.ak-text:focus { outline: none; border-color: #f0883e; }
/* --- SYN-479: display & DPI popover --- */
.desk-dpi-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.desk-dpi-label { font-weight: 600; font-size: 12.5px; min-width: 96px; }
.desk-panel .btn.active, .desk-panel .btn[aria-pressed="true"] { border-color: var(--accent, #58a6ff); box-shadow: inset 0 0 0 1px var(--accent, #58a6ff); }
/* --- SYN-480: shareable console links --- */
body[data-share="1"] #sidebar, body[data-share="1"] #nav, body[data-share="1"] #top-auth,
body[data-share="1"] #top-mini, body[data-share="1"] #nav-pip, body[data-share="1"] #health-badge,
body[data-share="1"] #scrim, body[data-share="1"] #nav-toggle { display: none !important; }
.share-viewer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #0b0d10; color: #e6edf3; }
.share-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #12151b; border-bottom: 1px solid #232b36; }
.share-name { font-weight: 600; font-size: 14px; }
.share-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #1d2b45; color: #7fb2ff; white-space: nowrap; }
.share-count { margin-left: auto; font-size: 12px; color: #8b96a5; font-variant-numeric: tabular-nums; }
.share-stage { flex: 1; position: relative; overflow: hidden; }
.share-rfb-host { position: absolute; inset: 0; }
.share-rfb-host > div { width: 100%; height: 100%; }
.share-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b96a5; font-size: 14px; pointer-events: none; }
.share-card { max-width: 440px; margin: 18vh auto 0; background: #12151b; border: 1px solid #232b36; border-radius: 12px; padding: 24px; text-align: center; }
.share-mark svg { width: 42px; height: 42px; }
.share-card h3 { margin: 10px 0 6px; font-size: 18px; }
.share-card p { color: #8b96a5; font-size: 14px; margin: 6px 0; }
.share-link-box { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.share-link { flex: 1; font-size: 12px; padding: 8px 10px; border: 1px solid #232b36; border-radius: 8px; background: #0b0d10; color: #e6edf3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.shares-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.shares-tbl th, .shares-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #1c222b; }
.shares-tbl th { color: #8b96a5; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
/* SYN-523: share modal tidy-up - grouped sections, minted-link callout, unified controls,
   merged table cells (expires = TTL left + valid-until; activity = uses + last used),
   Copy/Revoke always reachable at desktop and mobile widths. */
.share-sec .sec-h { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8b96a5; }
.share-sec + .share-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.share-mint { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.share-mint [data-mint] { margin-left: auto; }
.share-field { display: flex; flex-direction: column; gap: 5px; }
.share-field .field-title { margin-bottom: 0; }
.share-field select { min-width: 150px; }
.share-check { display: flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; padding: 9px 0; }
.share-check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.share-note { font-size: 12.5px; margin: 10px 0 0; }
.share-created { margin-top: 12px; padding: 12px; border: 1px solid #2b4357; background: #131c26; border-radius: 10px; }
.share-created .share-created-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #7fb2ff; }
.share-created .share-link-box { margin: 8px 0; }
.share-created .share-note { margin: 4px 0 0; }
.shares-tbl .cell-sub { color: #8b96a5; font-size: 11px; font-weight: 400; margin-top: 1px; }
.shares-tbl th, .shares-tbl td { white-space: nowrap; }
.shares-tbl .btn.small { padding: 4px 9px; }
@media (max-width: 640px) {
  .shares-tbl { font-size: 12px; }
  .shares-tbl .col-act { display: none; }
  .shares-tbl th, .shares-tbl td { padding: 5px 4px; }
  .share-badge { padding: 2px 6px; }
}