/* PhantomForce Phantom — black glass, neon command console.
   One visual system for admin and client; full-width on desktop, clean on phone. */

:root {
  --neon: #5b4cff;
  --neon-2: #b44bf0;
  --risk: #e0345e;
  --warn: #c77e00;
  --ink: #241f3f;
  --dim: #5d5880;
  --dim-2: #8b87a8;
  --bg: #f3f2fa;
  --glass: rgba(255, 255, 255, 0.86);
  --glass-2: rgba(250, 249, 255, 0.72);
  --line: rgba(91, 76, 255, 0.16);
  --line-strong: rgba(91, 76, 255, 0.34);
  --phantom-keyboard-offset: 0px;
}

html[data-org-color-mode="dark"], html:not([data-org-color-mode]) {
  color-scheme: dark;
  --bg: #070611;
  --ink: #f4f0ff;
  --dim: #aaa2c8;
  --dim-2: #7f789d;
  --glass: rgba(18, 14, 31, 0.9);
  --glass-2: rgba(12, 9, 23, 0.94);
  --line: color-mix(in srgb, var(--neon) 30%, transparent);
  --line-strong: color-mix(in srgb, var(--neon) 58%, transparent);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font-family: var(--org-font, "Instrument Sans", system-ui, sans-serif);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Organization themes are validated design tokens. They may shape the
   workspace, but they cannot inject CSS or overwrite protected semantics. */
html[data-org-color-mode="light"] {
  color-scheme: light;
  --bg: #f3f2fa;
  --ink: #211d3a;
  --dim: #5d5880;
  --dim-2: #8b87a8;
  --glass: rgba(255, 255, 255, 0.84);
  --glass-2: rgba(255, 255, 255, 0.92);
  --line: color-mix(in srgb, var(--neon) 24%, transparent);
  --line-strong: color-mix(in srgb, var(--neon) 42%, transparent);
}
html[data-org-density="compact"] { --workspace-density: 0.82; }
html[data-org-surface="solid"] { --glass: color-mix(in srgb, var(--bg) 92%, var(--neon) 8%); }
html[data-org-surface="soft"] { --glass: color-mix(in srgb, var(--bg) 80%, white 5%); }

/* Workspace Studio: organization-level settings stay dense, reviewable,
   and visually separate from protected platform controls. */
.customization-studio {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 2px 0 32px;
  display: grid;
  gap: 16px;
}
.cust-hero, .cust-ai, .cust-publish {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.cust-hero h2, .cust-ai h3, .cust-publish h3, .cust-panel h3 {
  margin: 0;
  letter-spacing: 0;
}
.cust-hero h2 { font-size: clamp(24px, 3vw, 38px); }
.cust-hero p:not(.cust-kicker), .cust-ai p:not(.cust-kicker) {
  max-width: 72ch;
  margin: 7px 0 0;
  color: var(--dim);
  line-height: 1.55;
}
.cust-kicker {
  margin: 0 0 6px;
  color: var(--neon);
  font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}
.cust-scope {
  min-width: 230px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
  display: grid;
  gap: 3px;
}
.cust-scope span, .cust-scope i, .cust-muted {
  color: var(--dim);
  font-size: 12px;
  font-style: normal;
}
.cust-message {
  padding: 11px 13px;
  border-left: 3px solid var(--neon);
  background: color-mix(in srgb, var(--neon) 7%, transparent);
  color: var(--ink);
}
.cust-ai {
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
}
.cust-ai form {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
}
.cust-ai textarea, .cust-form-grid input, .cust-form-grid select, .cust-module input, .cust-object-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  padding: 10px 11px;
  outline: none;
}
.cust-ai textarea:focus, .cust-form-grid input:focus, .cust-form-grid select:focus, .cust-module input:focus, .cust-object-form input:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon) 16%, transparent);
}
.cust-primary, .cust-secondary, .cust-icon-btn {
  min-height: 38px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  font-weight: 700;
}
.cust-primary {
  padding: 0 16px;
  background: var(--neon);
  color: #ffffff;
}
.cust-secondary {
  padding: 0 13px;
  background: transparent;
  color: var(--ink);
}
.cust-primary:disabled, .cust-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cust-icon-btn {
  width: 38px;
  padding: 0;
  background: transparent;
  color: var(--dim);
  font-size: 20px;
}
.cust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cust-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass);
}
.cust-panel-head, .cust-object, .cust-version, .cust-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cust-panel-head { margin-bottom: 14px; }
.cust-protected {
  color: var(--dim);
  font: 600 10px "Spline Sans Mono", monospace;
  text-transform: uppercase;
}
.cust-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.cust-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--dim);
  font-size: 12px;
}
.cust-form-grid input[type="color"] { min-height: 42px; padding: 5px; }
.cust-module {
  min-height: 54px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.cust-module-grip { color: var(--dim-2); }
.cust-module > div, .cust-object > div:first-child, .cust-version > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cust-module b, .cust-object b, .cust-version b { overflow-wrap: anywhere; }
.cust-module i, .cust-object i, .cust-version i {
  color: var(--dim);
  font-size: 11px;
  font-style: normal;
}
.cust-module input { max-width: 190px; }
.cust-module input:disabled { opacity: 0.62; }
.cust-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cust-switch span {
  width: 40px;
  height: 22px;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  position: relative;
}
.cust-switch span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: 3px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform 160ms ease, background 160ms ease;
}
.cust-switch input:checked + span::after { transform: translateX(17px); background: var(--neon); }
.cust-switch input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 2px; }
.cust-empty, .cust-loading {
  min-height: 120px;
  padding: 22px;
  border: 1px dashed var(--line);
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  color: var(--dim);
}
.cust-empty b { color: var(--ink); }
.cust-object, .cust-version { padding: 10px 0; border-top: 1px solid var(--line); }
.cust-field-list { display: flex; flex-wrap: wrap; gap: 5px; }
.cust-field-list span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font-size: 10px;
}
.cust-object-form {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr auto;
  gap: 7px;
}
.cust-publish {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--glass);
}
.cust-publish-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cust-issues { margin-top: 8px; display: grid; gap: 5px; }
.cust-issues p, .cust-ok { margin: 0; font-size: 12px; }
.cust-issues p { display: flex; gap: 8px; color: var(--dim); }
.cust-issues p.is-error b { color: var(--bad); }
.cust-issues p.is-warning b { color: var(--warn); }
.cust-ok { color: var(--neon); }

@media (max-width: 980px) {
  .cust-grid { grid-template-columns: 1fr; }
  .cust-hero, .cust-ai, .cust-publish { flex-direction: column; }
  .cust-scope, .cust-ai form { width: 100%; }
}
@media (max-width: 640px) {
  .customization-studio { gap: 12px; }
  .cust-ai form, .cust-form-grid, .cust-object-form { grid-template-columns: 1fr; }
  .cust-panel { padding: 13px; }
  .cust-module { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .cust-module input { grid-column: 2 / -1; max-width: none; }
  .cust-publish-actions { width: 100%; }
  .cust-publish-actions button { flex: 1 1 0; }
}
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font: 500 0.92em "Spline Sans Mono", monospace; color: var(--neon); }
[hidden] { display: none !important; }

/* ---------------- backdrop ---------------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(91, 76, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 76, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 100%);
}
.bg-glow {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(50% 38% at 50% 8%, rgba(91, 76, 255, 0.11), transparent 65%),
    radial-gradient(45% 45% at 88% 90%, rgba(180, 75, 240, 0.05), transparent 60%),
    radial-gradient(45% 45% at 8% 92%, rgba(91, 76, 255, 0.04), transparent 60%);
}

/* ---------------- access gate ---------------- */
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.gate-card {
  width: min(760px, 100%); padding: clamp(26px, 4vw, 44px); border-radius: 30px;
  border: 1px solid var(--line-strong); background: var(--glass);
  box-shadow: 0 30px 110px rgba(36, 31, 63, 0.16), 0 0 90px rgba(91, 76, 255, 0.14);
  text-align: center;
}
.gate-kicker { margin: 0 0 8px; font: 500 11px "Spline Sans Mono", monospace; letter-spacing: 0.28em; color: var(--neon); }
.gate-card h1 { margin: 0 0 26px; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.05; letter-spacing: -0.02em; }
.gate-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gate-opt {
  display: grid; gap: 7px; padding: 22px 20px; border-radius: 20px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: rgba(91, 76, 255, 0.04);
  transition: border-color 0.25s, background 0.25s, transform 0.18s, box-shadow 0.25s;
}
.gate-opt:hover { border-color: var(--neon); background: rgba(91, 76, 255, 0.1); transform: translateY(-3px); box-shadow: 0 0 40px rgba(91, 76, 255, 0.22); }
.gate-opt-icon { font-size: 24px; color: var(--neon); text-shadow: 0 0 16px rgba(91, 76, 255, 0.6); }
.gate-opt b { font-size: 18px; }
.gate-opt i { font-style: normal; color: var(--dim); font-size: 13.5px; line-height: 1.45; }
.gate-opt em { font: 500 10.5px "Spline Sans Mono", monospace; font-style: normal; letter-spacing: 0.08em; color: var(--dim-2); }
.gate-note { margin: 22px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.owner-login { display: grid; gap: 16px; text-align: left; }
.owner-login label { display: grid; gap: 8px; color: var(--dim); font: 700 0.72rem/1 "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.owner-login input {
  width: 100%; border: 1px solid rgba(91, 76, 255, 0.32); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), rgba(36, 31, 63, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 32px rgba(51, 10, 245, 0.08);
  color: var(--text); font: 600 1.05rem/1.2 var(--font); outline: none; padding: 18px 20px;
}
.owner-login input:focus { border-color: rgba(91, 76, 255, 0.8); box-shadow: 0 0 0 4px rgba(91, 76, 255, 0.08), 0 0 42px rgba(51, 10, 245, 0.15); }
.gate-submit { width: 100%; text-align: left; }
.owner-login.is-loading { opacity: 0.72; pointer-events: none; }
.auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -10px 0 14px;
}
.auth-tabs-primary { justify-content: center; }
.auth-tab {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(36, 31, 63, 0.036);
  color: var(--dim);
  font: 700 10px "Spline Sans Mono", monospace;
  cursor: pointer;
}
.auth-tab:hover, .auth-tab.is-active {
  color: #ffffff;
  background: var(--neon);
  border-color: var(--neon);
}
.auth-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
}
.auth-links button {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--dim-2);
  font: 700 11px "Spline Sans Mono", monospace;
  cursor: pointer;
}
.auth-links button:hover, .auth-links button:focus-visible { color: var(--neon); text-decoration: underline; }
.gate-error { margin: 0; border: 1px solid rgba(255, 80, 80, 0.28); border-radius: 16px; background: rgba(255, 60, 60, 0.08); color: #ffb7b7; padding: 12px 14px; }
.workspace-choice-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.workspace-choice-field legend {
  margin-bottom: 10px;
  color: var(--ink);
  font: 800 13px/1.25 var(--font);
  text-transform: none;
}
.workspace-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.workspace-choice {
  position: relative;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  grid-template-rows: auto auto;
  gap: 3px 8px !important;
  min-width: 0;
  min-height: 76px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.workspace-choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.workspace-choice.is-selected {
  border-color: color-mix(in srgb, var(--neon) 70%, white);
  background: color-mix(in srgb, var(--neon) 9%, transparent);
}
.workspace-choice input { position: absolute; opacity: 0; pointer-events: none; }
.workspace-choice-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--neon);
}
.workspace-choice-icon svg { width: 15px; height: 15px; }
.workspace-choice b {
  align-self: end;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 800 12px/1.15 var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-choice small {
  min-width: 0;
  overflow: hidden;
  color: var(--dim);
  font: 600 9px/1.2 var(--font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-choice > i {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.workspace-choice.is-selected > i {
  border: 3px solid color-mix(in srgb, var(--neon) 70%, white);
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon) 45%, transparent);
}
.workspace-profile-prompt {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 8, 12, .78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.workspace-profile-dialog {
  width: min(680px, 100%);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, black);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.workspace-profile-dialog > p {
  margin: 0 0 5px;
  color: var(--neon);
  font: 800 9px "Spline Sans Mono", monospace;
  letter-spacing: .16em;
}
.workspace-profile-dialog h2 { margin: 0 0 18px; font-size: 22px; letter-spacing: 0; }
.workspace-profile-continue {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  border: 1px solid var(--neon);
  border-radius: 7px;
  background: var(--neon);
  color: #04110c;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 620px) {
  .workspace-choice-grid { grid-template-columns: 1fr; }
  .workspace-profile-dialog { padding: 18px; }
}

/* ---------------- phantom shell ---------------- */
.phantom { min-height: 100vh; display: flex; flex-direction: column; transition: filter 0.4s ease, transform 0.4s ease; }
.phantom, .topbar, .ticker, .deck, .command-hero, .deck-body, .mission, .rail, .hero-say, .say-line, .speakline, .suggests, .response-cards {
  max-width: 100%;
  min-width: 0;
}
body.overlay-open .phantom { filter: blur(14px) brightness(0.55) saturate(1.15); transform: scale(0.992); pointer-events: none; }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px clamp(16px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-ghost {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-block;
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(91, 76, 255, 0.55))
    drop-shadow(0 0 16px rgba(105, 34, 246, 0.28));
}
.brand-word { font: 500 13px "Spline Sans Mono", monospace; letter-spacing: 0.34em; }
.brand-sub {
  font: 500 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.22em; color: var(--neon);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: rgba(91, 76, 255, 0.06);
}
.topbar-mid { flex: 1; display: flex; justify-content: center; }
.org-switch { display: flex; align-items: center; gap: 9px; }
.org-switch span { font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.org-switch select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 8px 34px 8px 14px; border-radius: 999px; font-size: 13.5px;
  border: 1px solid var(--line-strong); background: var(--glass); color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--neon) 50%), linear-gradient(135deg, var(--neon) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.org-switch select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255, 0.14); }
.org-switch option { background: var(--glass-2); color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.identity { font-size: 13px; color: var(--dim); white-space: nowrap; }

/* ---------------- ticker ---------------- */
.ticker {
  display: flex; align-items: center; gap: 12px; overflow: hidden;
  padding: 8px clamp(16px, 2.6vw, 34px);
  border-bottom: 1px solid rgba(91, 76, 255, 0.09);
  background: var(--glass);
  font: 400 12.5px "Spline Sans Mono", monospace;
}
.ticker-tag {
  flex: 0 0 auto; font-weight: 500; font-size: 9.5px; letter-spacing: 0.2em; color: #ffffff;
  background: var(--neon); border-radius: 4px; padding: 2px 7px;
  box-shadow: 0 0 14px rgba(91, 76, 255, 0.55);
  animation: livePulse 2.4s ease-in-out infinite;
}
@keyframes livePulse { 50% { box-shadow: 0 0 26px rgba(91, 76, 255, 0.9); } }
.ticker-line { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-line.ticker-in { animation: tickerIn 0.5s ease both; }
@keyframes tickerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------- command hero ---------------- */
.deck { flex: 1; display: flex; flex-direction: column; padding: 0 clamp(16px, 2.6vw, 34px) 40px; }
.command-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(18px, 3.2vh, 40px) 0 10px; gap: clamp(10px, 1.6vh, 18px);
}
.ghost-canvas {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: min(430px, 80vw); height: clamp(165px, 24vh, 235px);
  pointer-events: none; opacity: 0.86; z-index: 0;
  filter: drop-shadow(0 0 24px rgba(91, 76, 255, 0.26));
}
.hero-say { position: relative; z-index: 1; max-width: 860px; min-height: 2.4em; display: grid; place-items: center; margin-top: clamp(132px, 19vh, 184px); }
.say-line {
  margin: 0; font-size: clamp(19px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.015em;
  background: linear-gradient(180deg, #ffffff, #2b2649 60%, #5b4cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: emerge 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow-wrap: anywhere;
}
.say-line.user { font-size: clamp(15px, 2vw, 20px); background: none; -webkit-text-fill-color: var(--dim); color: var(--dim); }
.say-line.thinking { background: none; -webkit-text-fill-color: var(--neon); color: var(--neon); letter-spacing: 0.4em; }
@keyframes emerge { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }

.speakline {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  width: min(680px, 100%); padding: 15px 22px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 40px rgba(91, 76, 255, 0.1), inset 0 0 22px rgba(91, 76, 255, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}
@property --gleam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.speakline-hero::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 999px; padding: 1.6px; --gleam: 0deg;
  background: conic-gradient(from var(--gleam), rgba(91, 76, 255, 0) 0deg, #5b4cff 50deg, #b44bf0 100deg, #2b2649 140deg, rgba(91, 76, 255, 0) 220deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gleam 5s linear infinite; opacity: 0.85; pointer-events: none;
}
.speakline:focus-within::before { animation-duration: 2.2s; }
@keyframes gleam { to { --gleam: 360deg; } }
.speakline:focus-within { border-color: var(--neon); box-shadow: 0 0 60px rgba(91, 76, 255, 0.28); }
.speak-caret {
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 26px;
  line-height: 26px;
  color: var(--neon);
  font-size: 20px;
  text-shadow: 0 0 12px var(--neon);
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }
.speakline input {
  flex: 1;
  min-width: 0;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  caret-color: var(--neon);
  -webkit-text-fill-color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
  line-height: 26px;
}
.speakline input::placeholder { color: var(--dim); }

.suggests { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; max-width: 860px; }
.suggest {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(91, 76, 255, 0.24); background: rgba(91, 76, 255, 0.04);
  font: 500 12px "Spline Sans Mono", monospace; color: var(--ink);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.suggest:hover { border-color: var(--neon); background: rgba(91, 76, 255, 0.12); transform: translateY(-1px); }

.response-cards { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; max-width: 1080px; }
.rcard {
  position: relative; flex: 1 1 280px; max-width: 360px; text-align: left; padding: 16px 50px 16px 18px; border-radius: 18px;
  border: 1px solid var(--line-strong); background: var(--glass);
  box-shadow: 0 14px 40px rgba(36, 31, 63, 0.14), 0 0 30px rgba(91, 76, 255, 0.08);
  animation: emerge 0.5s ease both;
}
.rcard-x {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(33, 29, 58, 0.14);
  background: var(--glass); color: var(--ink); cursor: pointer;
  font-size: 17px; line-height: 1; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.16s;
}
.rcard-x:hover { border-color: rgba(224, 52, 94, 0.62); color: #c22b52; background: rgba(224, 52, 94, 0.1); transform: scale(1.06); }
.rcard-kicker { margin: 0 0 5px; font: 500 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--neon); }
.rcard h4 { margin: 0 0 6px; font-size: 15.5px; }
.rcard-body { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--dim-2); }
.rcard-meta { margin: 0 0 4px; font: 400 11px "Spline Sans Mono", monospace; color: var(--dim); }
.rcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------------- systems flow map ---------------- */
.flowmap { margin-top: clamp(20px, 3.4vh, 38px); max-width: 100%; min-width: 0; }
.flowmap-modal { margin: 0; }
.overlay.flowmap-overlay .overlay-panel { width: min(1180px, 100%); }
.flowmap-overlay .overlay-panel { width: min(980px, 100%); }
.flowmap-overlay .overlay-body { padding: clamp(12px, 2vw, 22px); }
.flowmap-modal .flow-stage { min-height: 260px; }
.flowmap-modal .flow-stage svg { min-height: 260px; }
.mission-map-body { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr); gap: clamp(14px, 2vw, 22px); align-items: stretch; }
.mission-map-keeper {
  display: grid; grid-template-rows: auto auto 1fr; gap: 14px; min-width: 0;
  padding: clamp(16px, 2.2vw, 24px); border: 1px solid rgba(91, 76, 255, 0.22); border-radius: 18px;
  background: linear-gradient(180deg, rgba(91, 76, 255, 0.08), rgba(255, 255, 255, 0.78));
  box-shadow: inset 0 0 0 1px rgba(33, 29, 58, 0.04);
}
.mission-map-copy { min-width: 0; }
.mission-map-kicker { margin: 0 0 7px; font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon); }
.mission-map-copy h3 { margin: 0 0 9px; font-size: clamp(21px, 2.2vw, 31px); letter-spacing: 0; line-height: 1.05; }
.mission-map-copy p:last-child { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.55; }
.mission-map-road { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mission-map-road span {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgba(33, 29, 58, 0.1); border-radius: 12px;
  background: rgba(36, 31, 63, 0.04); color: var(--ink); font: 700 11px/1.25 "Spline Sans Mono", monospace;
}
.mission-map-road b {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(91, 76, 255, 0.16); color: var(--neon); font-size: 10px;
}
.mission-map-prompts { display: grid; gap: 9px; align-content: end; }
.mission-map-prompt {
  width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid rgba(91, 76, 255, 0.22); border-radius: 14px; cursor: pointer;
  background: var(--glass); color: var(--ink); text-align: left;
  transition: border-color 0.18s, background 0.18s, transform 0.16s;
}
.mission-map-prompt:hover, .mission-map-prompt:focus-visible { border-color: rgba(91, 76, 255, 0.7); background: rgba(91, 76, 255, 0.11); transform: translateY(-1px); }
.mission-map-prompt span { min-width: 0; font-weight: 800; font-size: 12.5px; line-height: 1.35; }
.mission-map-prompt small { color: var(--neon); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.flow-kicker { margin: 0 0 4px; font: 500 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
.flow-head h2 { margin: 0; font-size: clamp(19px, 2.5vw, 26px); letter-spacing: -0.02em; }
.flow-map-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.flow-map-open, .flow-map-close {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 38px;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: rgba(91, 76, 255, 0.06); color: var(--ink);
  font: 700 11px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.18s, background 0.18s, transform 0.16s, box-shadow 0.18s;
}
.flow-map-open:hover, .flow-map-open:focus-visible, .flow-map-close:hover, .flow-map-close:focus-visible {
  border-color: rgba(91, 76, 255, 0.58); background: rgba(91, 76, 255, 0.12);
  box-shadow: 0 0 26px rgba(91, 76, 255, 0.16); transform: translateY(-1px); outline: none;
}
.flow-map-close {
  display: none; color: #ffced5; border-color: rgba(224, 52, 94, 0.24); background: rgba(224, 52, 94, 0.07);
}
.flow-map-close span:first-child {
  width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 151, 164, 0.34); font-size: 17px; line-height: 1;
}
.flowmap.is-map-open .flow-map-close { display: inline-flex; }
.flowmap.is-map-open .flow-map-open { border-color: rgba(91, 76, 255, 0.52); background: rgba(91, 76, 255, 0.12); }
.open-map-symbol {
  width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(91, 76, 255, 0.28); background: rgba(91, 76, 255, 0.08);
  color: var(--neon); font-size: 14px; line-height: 1; box-shadow: inset 0 0 12px rgba(91, 76, 255, 0.08);
}
.cmd-tool[data-map-open][data-urgent="true"] .open-map-symbol {
  border-color: rgba(199, 126, 0, 0.5);
  color: var(--warn);
  box-shadow: inset 0 0 12px rgba(199, 126, 0, 0.08), 0 0 12px rgba(199, 126, 0, 0.2);
}
.flow-live {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--neon); background: rgba(91, 76, 255, 0.05);
}
.flow-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: livePulse 2.4s ease-in-out infinite; }
.flow-stage {
  position: relative; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(91, 76, 255, 0.08), transparent 62%),
    var(--glass);
  box-shadow: inset 0 0 60px rgba(36, 31, 63, 0.122), 0 18px 50px rgba(36, 31, 63, 0.122);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
/* Collapsed by default: the detailed map takes real vertical space only
   when explicitly opened — this is what actually recovers the space, not
   just the Open/Close button state. */
.flowmap.is-map-closed .flow-stage { display: none; }
.flow-compact-text {
  display: none; align-items: center; gap: 8px; margin: 6px 0 0; font: 500 12px "Spline Sans Mono", monospace;
  color: var(--dim); letter-spacing: 0.01em;
}
.flowmap.is-map-closed .flow-compact-text { display: inline-flex; }
.flow-compact-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon);
  flex: 0 0 auto;
}
.flowmap.is-map-closed .flow-compact-dot.is-urgent { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: livePulse 1.6s ease-in-out infinite; }
.flow-stage:focus-visible, .flowmap.is-map-open .flow-stage {
  outline: none; border-color: rgba(91, 76, 255, 0.48);
  box-shadow: inset 0 0 64px rgba(36, 31, 63, 0.122), 0 18px 54px rgba(36, 31, 63, 0.133), 0 0 0 1px rgba(91, 76, 255, 0.18), 0 0 42px rgba(91, 76, 255, 0.12);
}
.flow-stage::before {
  content: ""; position: absolute; inset: -44px; pointer-events: none;
  background:
    linear-gradient(rgba(91, 76, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 76, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: flowGridPan 16s linear infinite;
}
@keyframes flowGridPan { to { transform: translate3d(36px, 36px, 0); } }
.flow-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(91, 76, 255, 0.07) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: flowSweep 8s ease-in-out infinite;
}
@keyframes flowSweep { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.flow-stage svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.flow-edge { fill: none; stroke: rgba(91, 76, 255, 0.2); stroke-width: 1.5; }
.flow-edge-watch {
  fill: none; stroke: rgba(180, 75, 240, 0.24); stroke-width: 1.3;
  stroke-dasharray: 2 7; stroke-linecap: round;
  animation: flowCrawl 14s linear infinite;
}
@keyframes flowCrawl { to { stroke-dashoffset: -90; } }
.flow-edge-pulse {
  fill: none; stroke: var(--neon); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 10 130;
  filter: drop-shadow(0 0 6px rgba(91, 76, 255, 0.8));
  animation: flowDash 3.4s linear infinite;
}
@keyframes flowDash { to { stroke-dashoffset: -140; } }
.flow-packet { fill: #2b2649; filter: drop-shadow(0 0 7px rgba(91, 76, 255, 0.95)); }
.flow-packet-trail { fill: rgba(91, 76, 255, 0.7); filter: drop-shadow(0 0 5px rgba(91, 76, 255, 0.7)); }
.flow-spark { fill: rgba(91, 76, 255, 0.45); transform-box: fill-box; animation: flowSpark 5s ease-in-out infinite; }
@keyframes flowSpark {
  0%, 100% { transform: translateY(6px); opacity: 0; }
  30% { opacity: 0.75; }
  50% { transform: translateY(-6px); }
  80% { opacity: 0.2; }
}
.flow-node { cursor: pointer; animation: flowIn 0.7s ease both; }
@keyframes flowIn { from { opacity: 0; } to { opacity: 1; } }
.flow-node:focus { outline: none; }
.flow-orb {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.flow-node:hover .flow-orb, .flow-node:focus-visible .flow-orb { transform: scale(1.08); }
.flow-halo { fill: rgba(91, 76, 255, 0.14); animation: flowHalo 3.6s ease-in-out infinite; }
@keyframes flowHalo { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.8; } }
.flow-ping { fill: none; stroke: rgba(91, 76, 255, 0.55); stroke-width: 1.2; }
.flow-core {
  fill: url(#flowNodeFill); stroke: rgba(91, 76, 255, 0.55); stroke-width: 1.4;
  filter: drop-shadow(0 0 10px rgba(91, 76, 255, 0.35));
  transition: stroke 0.2s, filter 0.2s;
}
.flow-node:hover .flow-core, .flow-node:focus-visible .flow-core { stroke: var(--neon); filter: drop-shadow(0 0 16px rgba(91, 76, 255, 0.65)); }
.flow-ticks circle { fill: none; stroke: rgba(91, 76, 255, 0.32); stroke-width: 1; stroke-dasharray: 3 9; stroke-linecap: round; }
.flow-radar path { fill: rgba(180, 75, 240, 0.09); }
.flow-icon { fill: #241f3f; font: 600 14px "Instrument Sans", sans-serif; text-anchor: middle; }
.flow-tag-bg { fill: rgba(255, 255, 255, 0.8); stroke: rgba(91, 76, 255, 0.18); transition: stroke 0.2s; }
.flow-node:hover .flow-tag-bg { stroke: rgba(91, 76, 255, 0.45); }
.flow-label { fill: #241f3f; font: 600 13px "Instrument Sans", sans-serif; text-anchor: middle; }
.flow-stat { fill: var(--neon); font: 500 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.04em; text-anchor: middle; }
.flow-node-alert .flow-core { stroke: rgba(199, 126, 0, 0.7); }
.flow-node-alert .flow-stat { fill: var(--warn); }
.flow-node-alert .flow-halo { fill: rgba(199, 126, 0, 0.12); }

/* ---------------- deck body: mission grid + rail ---------------- */
.deck-body { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: clamp(16px, 2vw, 28px); margin-top: clamp(18px, 3vh, 34px); align-items: start; }
.deck-label { margin: 0 0 12px; font: 500 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }

.mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 13px; }
.widget {
  position: relative; display: grid; gap: 3px; padding: 17px 17px 15px; border-radius: 18px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--glass);
  transition: border-color 0.22s, transform 0.16s, box-shadow 0.25s, background 0.25s;
  overflow: hidden;
}
.widget::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 60% at 50% 0%, rgba(91, 76, 255, 0.14), transparent 70%);
  transition: opacity 0.25s;
}
.widget:hover { border-color: var(--neon); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(36, 31, 63, 0.158), 0 0 34px rgba(91, 76, 255, 0.2); }
.widget:hover::after { opacity: 1; }
.widget-icon { font-size: 19px; color: var(--neon); text-shadow: 0 0 14px rgba(91, 76, 255, 0.7); }
.widget-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.widget-stat { font: 500 13px "Spline Sans Mono", monospace; color: var(--neon); }
.widget-sub { font-size: 11.5px; color: var(--dim); }
.widget-alert { border-color: rgba(199, 126, 0, 0.5); }
.widget-alert .widget-stat { color: var(--warn); }
.widget-alert::before {
  content: ""; position: absolute; top: 13px; right: 13px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: livePulse 2s ease-in-out infinite;
}

/* rail */
.rail { display: grid; gap: 13px; }
.rail-block {
  padding: 15px 15px 13px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--glass);
}
.rail-block h3 { margin: 0 0 10px; font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.rail-body { display: grid; gap: 7px; }
.rail-item {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 12px; border: 1px solid transparent; background: rgba(91, 76, 255, 0.035);
  font-size: 12.5px; line-height: 1.4; color: var(--dim); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.rail-item:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.09); }
.rail-item i { font-style: normal; color: var(--neon); flex: 0 0 auto; }
.rail-item.rail-static { cursor: default; }
.rail-item.rail-static:hover { border-color: transparent; background: rgba(91, 76, 255, 0.035); }
.rail-item.rail-static i { color: var(--dim-2); font: 400 10.5px "Spline Sans Mono", monospace; margin-left: auto; white-space: nowrap; }
.rail-approval i { color: var(--warn); }
.rail-money { flex-direction: column; gap: 2px; }
.rail-money-big { font: 500 22px "Spline Sans Mono", monospace; color: var(--neon); text-shadow: 0 0 20px rgba(91, 76, 255, 0.4); }
.rail-empty { margin: 0; font-size: 12.5px; color: var(--dim); }

/* ---------------- buttons & chips ---------------- */
.btn {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line-strong); background: rgba(91, 76, 255, 0.06); color: var(--ink);
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover { border-color: var(--neon); background: rgba(91, 76, 255, 0.14); transform: translateY(-1px); box-shadow: 0 0 18px rgba(91, 76, 255, 0.18); }
.btn:disabled { cursor: not-allowed; opacity: 0.42; filter: grayscale(0.3); }
.btn:disabled:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.06); transform: none; box-shadow: none; }
.btn-primary { background: linear-gradient(120deg, var(--neon), #5b4cff); border: 0; color: #ffffff; font-weight: 700; box-shadow: 0 0 24px rgba(91, 76, 255, 0.3); }
.btn-primary:hover { background: linear-gradient(120deg, #8d82ff, #7a6eff); color: #ffffff; }
.btn-good { border-color: rgba(91, 76, 255, 0.55); background: rgba(91, 76, 255, 0.12); }
.btn-quiet { border-color: rgba(33, 29, 58, 0.14); background: rgba(255, 255, 255, 0.03); color: var(--dim-2); }
.btn-exit { font-size: 11.5px; padding: 6px 12px; }

.chip {
  display: inline-block; vertical-align: middle; padding: 2.5px 9px; border-radius: 999px;
  font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid rgba(33, 29, 58, 0.18); color: var(--dim-2); background: rgba(255, 255, 255, 0.03);
}
.chip-won, .chip-approved, .chip-active, .chip-delivered, .chip-published-ready, .chip-confirmed, .chip-received, .chip-invoice-ready, .chip-generation-approved, .chip-approved-to-publish, .chip-online, .chip-indexed, .chip-ready, .chip-enforcing, .chip-routed, .chip-watching, .chip-available, .chip-planning, .chip-owner-controlled {
  border-color: rgba(91, 76, 255, 0.5); color: var(--neon); background: rgba(91, 76, 255, 0.08);
}
.chip-sent-ready, .chip-publish-ready, .chip-brief-ready, .chip-pending, .chip-waiting, .chip-needs-approval, .chip-standby, .chip-sent, .chip-scaffolded, .chip-setup-ready, .chip-changes-requested {
  border-color: rgba(199, 126, 0, 0.5); color: var(--warn); background: rgba(199, 126, 0, 0.07);
}
.chip-lost, .chip-declined, .chip-blocked, .chip-not-wired, .chip-contained, .chip-sandbox, .chip-gated {
  border-color: rgba(224, 52, 94, 0.5); color: #c22b52; background: rgba(224, 52, 94, 0.07);
}

/* ---------------- overlay ---------------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(10px, 2.4vw, 34px); }
.overlay-backdrop {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: radial-gradient(80% 70% at 50% 36%, rgba(91, 76, 255, 0.07), rgba(255, 255, 255, 0.55) 75%);
}
.overlay-panel {
  position: relative; width: min(1240px, 100%); max-height: calc(100vh - clamp(20px, 5vh, 64px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 26px;
  background: var(--glass);
  box-shadow: 0 34px 120px rgba(36, 31, 63, 0.16), 0 0 90px rgba(91, 76, 255, 0.14);
  animation: panelIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(26px) scale(0.985); } to { opacity: 1; transform: none; } }
.overlay-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px clamp(16px, 2vw, 24px) 12px; border-bottom: 1px solid var(--line);
}
.overlay-kicker { margin: 0 0 3px; font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--neon); }
.overlay-head h2 { margin: 0; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.01em; }
.overlay-sub { margin: 5px 0 0; color: var(--dim); font: 500 11.5px/1.35 "Spline Sans Mono", monospace; letter-spacing: 0.02em; }
.overlay-x {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: var(--glass); color: #3a3560; font-size: 15px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.overlay-x:hover { border-color: var(--neon); background: rgba(91, 76, 255, 0.12); transform: rotate(90deg); }
.overlay-body { overflow-y: auto; overflow-x: hidden; padding: 20px clamp(18px, 2.6vw, 30px) 28px; -webkit-overflow-scrolling: touch; }

/* ---------------- workspace internals ---------------- */
.ws-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ws-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); max-width: 760px; }
.ws-subhead { margin: 26px 0 12px; font: 500 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.ws-empty { padding: 34px 20px; text-align: center; color: var(--dim); border: 1px dashed var(--line); border-radius: 16px; font-size: 13.5px; }
.hint-inline { font-size: 11.5px; color: var(--dim); align-self: center; }

.lead-intel {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(320px, 1.6fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(91, 76, 255, 0.25);
  border-radius: 18px;
  background:
    radial-gradient(circle at 75% 50%, rgba(91, 76, 255, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(37, 18, 116, 0.28), rgba(255, 255, 255, 0.72));
  box-shadow: var(--edge-hi);
}
.lead-intel p {
  margin: 0 0 5px;
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon);
}
.lead-intel h3 { margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.02em; }
.lead-intel span { display: block; max-width: 520px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.crm-command {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(320px, 1.6fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(91, 76, 255, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 74% 45%, rgba(180, 75, 240, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(37, 18, 116, 0.22), rgba(255, 255, 255, 0.76));
  box-shadow: var(--edge-hi);
}
.crm-command p {
  margin: 0 0 5px;
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neon);
}
.crm-command h3 { margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.02em; }
.crm-command span { display: block; max-width: 620px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.crm-automation-control {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(91, 76, 255, .18);
  border-radius: 8px;
  background: rgba(91, 76, 255, .035);
}
.crm-automation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crm-automation-heading > span { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.crm-automation-heading b { color: var(--ink); font-size: 12px; }
.crm-automation-heading i { color: var(--dim); font: 500 9px "Spline Sans Mono", monospace; }
.crm-automation-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.crm-automation-switch {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid rgba(91, 76, 255, .12);
  border-radius: 7px;
  background: var(--panel, rgba(255,255,255,.02));
  cursor: pointer;
}
.crm-automation-switch.is-master { border-color: rgba(91, 76, 255, .28); }
.crm-automation-switch > span:first-child { display: grid; min-width: 0; gap: 2px; }
.crm-automation-switch b { overflow-wrap: anywhere; color: var(--ink); font-size: 11px; }
.crm-automation-switch i { overflow-wrap: anywhere; color: var(--dim); font-size: 9px; font-style: normal; line-height: 1.3; }
.au-client-managed-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-client-managed-panel > div:first-child { min-width: 0; }
.au-client-managed-panel > div:first-child p { margin: 5px 0 0; color: var(--dim); font-size: 11px; line-height: 1.45; }
.lead-intel-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(91, 76, 255, 0.22);
  border-radius: 16px;
  background: rgba(36, 31, 63, 0.052);
}
.lead-intel-form input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 700 14px "Instrument Sans", sans-serif;
}
.lead-intel-form input::placeholder { color: var(--dim); }
.lead-intel-form .btn { min-width: 76px; justify-content: center; border-radius: 999px; }
.lead-intel-result {
  margin: -4px 0 16px;
  padding: 10px 13px;
  border: 1px solid rgba(91, 76, 255, 0.20);
  border-radius: 13px;
  background: rgba(91, 76, 255, 0.07);
  color: #3a3560;
  font: 700 12px/1.35 "Spline Sans Mono", monospace;
}
.lead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}
.lead-meta span {
  padding: 3px 7px;
  border: 1px solid rgba(91, 76, 255, 0.20);
  border-radius: 999px;
  background: rgba(91, 76, 255, 0.06);
  color: var(--ink);
  font: 800 9px "Spline Sans Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lead-checks {
  margin: 0 0 9px;
  padding: 9px 10px 9px 28px;
  border: 1px solid rgba(91, 76, 255, 0.10);
  border-radius: 12px;
  background: rgba(36, 31, 63, 0.036);
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.45;
}

.stack { display: grid; gap: 12px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 13px; }

.lane-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; overflow-x: visible; padding-bottom: 8px; }
.lane { min-width: 0; }
.lane-head { font: 500 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.lane-head b { color: var(--neon); }
.lane-empty { color: var(--dim-2); padding: 8px 2px; }
.lane .record { margin-bottom: 11px; }

.record {
  position: relative; padding: 15px 16px 13px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--glass);
  transition: border-color 0.22s, box-shadow 0.25s;
}
.record:hover { border-color: rgba(91, 76, 255, 0.4); box-shadow: 0 10px 30px rgba(36, 31, 63, 0.122); }
.record-x {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(33, 29, 58, 0.14);
  background: var(--glass); color: var(--ink); cursor: pointer;
  font-size: 17px; line-height: 1; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.16s;
}
.record-x:hover {
  border-color: rgba(224, 52, 94, 0.62); color: #c22b52; background: rgba(224, 52, 94, 0.1); transform: scale(1.06);
}
.record-due { border-color: rgba(199, 126, 0, 0.45); }
.record h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.record-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.record:has(.record-x) .record-top { padding-right: 34px; }
.record-price { font: 500 15px "Spline Sans Mono", monospace; color: var(--neon); white-space: nowrap; }
.record-price i { font-style: normal; font-size: 11px; color: var(--dim); }
.record-sub { margin: 0 0 7px; font-size: 12px; color: var(--dim); }
.record-next { margin: 0 0 7px; font-size: 12.5px; color: var(--ink); }
.record-next i { color: var(--warn); font-style: normal; }
.record-notes { margin: 0 0 7px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.record-notes b { color: var(--ink); }
.record-proof { margin: 0 0 7px; font-size: 11.5px; color: var(--dim); }
.record-time { font: 400 11px "Spline Sans Mono", monospace; color: var(--dim-2); font-style: normal; }
.record-list { margin: 0 0 9px; padding-left: 18px; font-size: 12.5px; line-height: 1.65; color: var(--dim-2); }
.record-list-lg { font-size: 13.5px; }
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.record-wide { padding: 18px 20px 15px; }
.record-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 16px; }
.record-row h4 { margin: 0; }
.record-row .record-sub { margin: 0; flex: 1; min-width: 140px; }
.record-row .record-price { margin-left: auto; }
.ws-tag {
  position: static; display: inline-block; margin-bottom: 5px; margin-right: 8px;
  font: 500 9px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neon-2); border: 1px solid rgba(180, 75, 240, 0.3); border-radius: 999px; padding: 2px 8px;
  background: rgba(180, 75, 240, 0.05);
}
.quote-preview {
  margin: 4px 0 10px; padding: 13px 16px; border-left: 2px solid var(--neon); border-radius: 0 12px 12px 0;
  background: rgba(91, 76, 255, 0.05); font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.quote-preview footer { margin-top: 6px; font-size: 11.5px; color: var(--dim); }
.kv { display: flex; gap: 12px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed rgba(91, 76, 255, 0.08); }
.kv span { flex: 0 0 132px; color: var(--dim); }
.kv b { font-weight: 500; color: var(--ink); }
.finding-warn { color: var(--warn); }
.finding-ok { color: var(--ink); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; margin-bottom: 10px; }
.stat {
  display: grid; gap: 3px; padding: 16px 17px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--glass);
}
.stat span { font: 500 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.stat b { font: 500 24px "Spline Sans Mono", monospace; color: var(--neon); text-shadow: 0 0 20px rgba(91, 76, 255, 0.35); }
.stat i { font-style: normal; font-size: 11.5px; color: var(--dim); }

.finance-shell { display: grid; gap: 14px; }
.finance-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
}
.finance-toolbar .btn { min-height: 40px; }
.finance-goal-note {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid rgba(91, 76, 255, 0.2); border-radius: 20px; padding: 17px 18px;
  background:
    radial-gradient(circle at 88% 22%, rgba(91, 76, 255, 0.12), transparent 34%),
    var(--glass);
}
.finance-goal-note h3, .finance-panel h3 { margin: 0; font-size: 18px; }
.finance-goal-note p { margin: 5px 0 0; max-width: 720px; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.finance-stats .stat b { font-size: clamp(20px, 2.3vw, 25px); }
.finance-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 14px; align-items: start; }
.finance-panel {
  min-width: 0; display: grid; gap: 13px; padding: 15px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass);
}
.finance-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.finance-panel-head span {
  font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.finance-connectors { display: grid; gap: 9px; }
.finance-connector {
  display: grid; gap: 5px; padding: 12px; border-radius: 14px;
  border: 1px solid rgba(33, 29, 58, 0.09); background: rgba(36, 31, 63, 0.032);
}
.finance-connector b { color: var(--ink); }
.finance-connector p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.finance-ready { border-color: rgba(91, 76, 255, 0.28); }
.finance-requested { border-color: rgba(199, 126, 0, 0.34); }
.finance-connector-kind {
  font: 500 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon);
}
.finance-connector-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.finance-connector-foot i { color: var(--dim); font-style: normal; font-size: 11.5px; }
.finance-import { position: relative; cursor: pointer; }
.finance-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.finance-entry label { display: grid; gap: 5px; min-width: 0; }
.finance-entry label span {
  font: 500 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.finance-entry input, .finance-entry select {
  width: 100%; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 11px;
  background: rgba(36, 31, 63, 0.044); color: var(--ink); padding: 0 11px; font: 500 13px "Instrument Sans", sans-serif;
}
.finance-entry label:nth-child(2), .finance-entry .btn { grid-column: 1 / -1; }
.finance-table { display: grid; gap: 8px; }
.finance-row {
  position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto 28px;
  align-items: center; gap: 12px; padding: 11px 11px 11px 13px; border-radius: 14px;
  border: 1px solid rgba(33, 29, 58, 0.08); background: rgba(36, 31, 63, 0.028);
}
.finance-row time { color: var(--dim); font: 500 11px "Spline Sans Mono", monospace; white-space: nowrap; }
.finance-row b { display: block; color: var(--ink); font-size: 13.5px; overflow-wrap: anywhere; }
.finance-row i { display: block; color: var(--dim); font-style: normal; font-size: 11.5px; margin-top: 2px; overflow-wrap: anywhere; }
.finance-row strong { color: var(--neon); font: 600 14px "Spline Sans Mono", monospace; white-space: nowrap; }
.finance-row.is-out strong { color: #c22b52; }
.finance-row .record-x { position: static; width: 28px; height: 28px; }
.finance-goal-stats { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 9px; min-width: min(100%, 420px); }
.finance-goal-stats span {
  display: grid; gap: 2px; padding: 10px 11px; border: 1px solid rgba(91, 76, 255, 0.14);
  border-radius: 12px; background: rgba(36, 31, 63, 0.028);
}
.finance-goal-stats b { color: var(--neon); font: 500 15px "Spline Sans Mono", monospace; }
.finance-goal-stats i { color: var(--dim); font-style: normal; font-size: 11px; line-height: 1.25; }

@media (max-width: 720px) {
  .finance-grid, .finance-goal-stats { grid-template-columns: 1fr; }
  .finance-entry { grid-template-columns: 1fr; }
  .finance-row { grid-template-columns: minmax(0, 1fr) auto 28px; gap: 8px; }
  .finance-row time { grid-column: 1 / -1; }
  .finance-goal-note { align-items: stretch; }
}

.shotlist { margin: 0 0 8px; font-size: 12.5px; color: var(--dim-2); }
.shotlist summary { cursor: pointer; color: var(--neon); font: 500 11px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.shotlist ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }

.page-preview { display: grid; gap: 4px; margin: 4px 0 9px; }
.page-preview-row {
  padding: 8px 11px; border-radius: 8px; font-size: 12px; color: var(--dim);
  border: 1px dashed rgba(91, 76, 255, 0.22); background: rgba(91, 76, 255, 0.03);
}
.product-thumb {
  display: grid; place-items: center; height: 74px; margin: 2px 0 9px; border-radius: 10px;
  border: 1px dashed rgba(180, 75, 240, 0.25); background: rgba(180, 75, 240, 0.04);
  font: 500 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.record-ghostcard { border-style: dashed; }
.memory-shell { display: grid; gap: 16px; }
.memory-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 22px; padding: 19px;
  background:
    radial-gradient(circle at 88% 18%, rgba(91, 76, 255,0.18), transparent 34%),
    var(--glass);
}
.memory-hero h3 { margin: 0 0 5px; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.015em; }
.memory-hero p:not(.overlay-kicker) { margin: 0; max-width: 760px; color: var(--dim); line-height: 1.5; }
.memory-score {
  width: 78px; min-height: 78px; border-radius: 22px; display: grid; place-items: center;
  border: 1px solid rgba(91, 76, 255,0.28); background: rgba(91, 76, 255,0.08);
  box-shadow: inset 0 0 34px rgba(91, 76, 255,0.08), 0 0 34px rgba(91, 76, 255,0.08);
}
.memory-score b { font: 700 26px "Spline Sans Mono", monospace; color: var(--neon); line-height: 1; }
.memory-score span { margin-top: -6px; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.memory-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.memory-search { display: grid; gap: 7px; }
.memory-search span {
  font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon);
}
.memory-search input, .memory-add textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(36, 31, 63, 0.052);
  color: var(--ink); padding: 13px 14px; outline: none; font-size: 14px; line-height: 1.45;
}
.memory-add {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch;
  border: 1px solid rgba(91, 76, 255,0.16); border-radius: 18px; padding: 10px; background: rgba(91, 76, 255,0.04);
}
.memory-add textarea { resize: vertical; min-height: 72px; }
.memory-add .btn { align-self: stretch; }
.memory-search input:focus, .memory-add textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.1); }
.memory-cats, .memory-tags, .memory-package-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.memory-cat, .memory-package {
  cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: var(--glass);
  color: var(--ink); padding: 9px 12px; font-weight: 800;
}
.memory-cat b, .memory-package b { color: var(--neon); font: 700 11px "Spline Sans Mono", monospace; }
.memory-cat.is-active { border-color: var(--neon); background: rgba(91, 76, 255,0.16); color: var(--ink); }
.memory-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 14px; align-items: start; }
.memory-side { display: grid; gap: 12px; }
.memory-record.is-remembered { border-color: rgba(91, 76, 255,0.34); background: linear-gradient(180deg, rgba(91, 76, 255,0.08), rgba(255, 255, 255,0.58)); }
.memory-record-history {
  border-style: dashed;
  border-color: rgba(33, 29, 58,0.16);
  background: linear-gradient(180deg, rgba(33, 29, 58,0.035), rgba(255, 255, 255,0.5));
}
.memory-retention {
  font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon);
  border: 1px solid rgba(91, 76, 255,0.22); border-radius: 999px; padding: 5px 8px; white-space: nowrap;
}
.memory-tags span {
  border: 1px solid rgba(33, 29, 58,0.1); border-radius: 999px; padding: 5px 8px;
  color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.memory-package {
  display: inline-flex; gap: 7px; align-items: center; border-radius: 12px; padding: 8px 10px;
}

/* ---------------- Memory / routing diagnostics ---------------- */
.brain-shell { display: grid; gap: 16px; }
.brain-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px; border: 1px solid rgba(91, 76, 255,0.18); border-radius: 18px;
  background: radial-gradient(circle at 18% 0%, rgba(91, 76, 255,0.13), transparent 36%), rgba(255, 255, 255,0.72);
}
.brain-hero h3, .brain-card h4 { margin: 0; letter-spacing: 0; }
.brain-hero h3 { font-size: clamp(26px, 3vw, 44px); }
.brain-hero p:not(.overlay-kicker) { max-width: 780px; margin: 8px 0 0; color: var(--dim); line-height: 1.5; }
.brain-alert, .brain-notice {
  padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(199, 126, 0,0.35);
  background: rgba(199, 126, 0,0.09); color: #ffd76e;
}
.brain-notice { border-color: rgba(91, 76, 255,0.26); background: rgba(91, 76, 255,0.08); color: var(--neon); }
.brain-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.brain-stat {
  min-height: 88px; padding: 14px; border: 1px solid rgba(91, 76, 255,0.14); border-radius: 16px;
  background: var(--glass);
}
.brain-stat span, .brain-kv span {
  display: block; color: var(--dim); font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
}
.brain-stat b { display: block; margin-top: 8px; color: var(--ink); font-size: 22px; line-height: 1; overflow-wrap: anywhere; }
.brain-stat i { display: block; margin-top: 7px; color: var(--muted); font-style: normal; font-size: 12px; }
.brain-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: 14px; align-items: start; }
.brain-card {
  min-width: 0; padding: 16px; border: 1px solid rgba(91, 76, 255,0.14); border-radius: 18px;
  background: var(--glass);
}
.brain-card-large { grid-column: span 1; }
.brain-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.brain-card select, .brain-add input, .brain-preview-form textarea {
  width: 100%; color: var(--ink); border: 1px solid rgba(91, 76, 255,0.16); border-radius: 12px;
  background: rgba(36, 31, 63, 0.056); padding: 11px 12px; outline: none;
}
.brain-card select:focus, .brain-add input:focus, .brain-preview-form textarea:focus { border-color: rgba(91, 76, 255,0.55); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.1); }
.brain-add { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 10px; margin-bottom: 12px; }
.brain-memory-list, .brain-events, .brain-list, .brain-safety { display: grid; gap: 9px; }
.brain-memory {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 13px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.025);
}
.brain-memory p { margin: 8px 0 7px; color: var(--ink); line-height: 1.45; }
.brain-memory small, .brain-event small { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.brain-memory-actions { display: flex; gap: 7px; }
.brain-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(91, 76, 255,0.18); color: var(--ink); background: rgba(91, 76, 255,0.06);
  font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.brain-badge.is-warn { border-color: rgba(199, 126, 0,0.38); background: rgba(199, 126, 0,0.09); color: #ffd76e; }
.brain-badge.is-ok { border-color: rgba(91, 76, 255,0.3); background: rgba(91, 76, 255,0.12); color: var(--neon); }
.brain-kv {
  display: grid; grid-template-columns: minmax(100px, 0.36fr) minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brain-kv b { color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.brain-chipline { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.brain-preview-form { display: grid; gap: 10px; margin-top: 10px; }
.brain-preview-pack { margin-top: 12px; display: grid; gap: 10px; }
.brain-preview-head { display: flex; flex-wrap: wrap; gap: 7px; }
.brain-preview-pack pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto;
  border: 1px solid rgba(91, 76, 255,0.12); border-radius: 14px; padding: 12px;
  color: var(--ink); background: rgba(36, 31, 63, 0.056); font: 600 12px/1.55 "Spline Sans Mono", monospace;
}
.brain-debug { display: flex; flex-wrap: wrap; gap: 7px; }
.brain-debug span, .brain-safety span {
  padding: 7px 9px; border-radius: 10px; color: var(--dim); background: rgba(255,255,255,0.035); font-size: 12px;
}
.brain-safety b { margin-top: 5px; color: var(--neon); font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.brain-event {
  display: grid; gap: 7px; align-items: start; padding: 11px 12px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025);
}
.brain-event b { color: var(--ink); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }

.site-builder { display: grid; gap: 14px; }
.site-builder-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 20px;
  background: radial-gradient(circle at 82% 12%, rgba(91, 76, 255,0.16), transparent 34%), rgba(255, 255, 255, 0.68);
}
.site-builder-head h3 { margin: 0 0 5px; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.015em; }
.site-builder-head p:not(.overlay-kicker) { margin: 0; color: var(--dim); line-height: 1.45; }
.site-builder-actions, .site-mini-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.looper-packet { border-color: rgba(91, 76, 255, 0.2); }
.looper-step-list {
  display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none;
  color: var(--ink); font-size: 12.5px; line-height: 1.45;
}
.looper-step-list li { position: relative; padding-left: 16px; }
.looper-step-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px rgba(91, 76, 255, 0.55);
}
.site-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.site-start-card {
  min-height: 138px; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(150deg, rgba(91, 76, 255,0.1), rgba(255, 255, 255, 0.78));
  color: var(--ink); padding: 18px; transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.site-start-card:hover { transform: translateY(-2px); border-color: var(--neon); background: rgba(91, 76, 255,0.14); }
.site-start-card b { display: block; margin-bottom: 8px; font-size: 18px; }
.site-start-card span { color: var(--dim); line-height: 1.4; }
.site-builder-grid { display: grid; grid-template-columns: minmax(280px, 0.84fr) minmax(360px, 1.26fr); gap: 14px; align-items: stretch; }
.site-command-panel, .site-preview-panel {
  border: 1px solid var(--line); border-radius: 22px; padding: 16px;
  background: var(--glass);
}
.site-command-panel { display: grid; gap: 13px; align-content: start; }
.site-active-card {
  display: grid; gap: 5px; padding: 14px; border: 1px solid rgba(91, 76, 255,0.2);
  border-radius: 16px; background: rgba(91, 76, 255,0.05);
}
.site-active-card h4 { margin: 0; font-size: 18px; }
.site-active-card p { margin: 0; color: var(--dim); font-size: 12.5px; }
.site-ai-box { display: grid; gap: 9px; }
.site-ai-box label, .site-link-card label {
  font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon);
}
.site-ai-box textarea, .site-link-card input {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(36, 31, 63, 0.056);
  color: var(--ink); padding: 13px 14px; outline: none; resize: vertical; font-size: 14px; line-height: 1.45;
}
.site-ai-box textarea:focus, .site-link-card input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.1); }
.site-help { border: 1px solid rgba(91, 76, 255,0.18); border-radius: 16px; padding: 12px; background: rgba(91, 76, 255,0.04); }
.site-help summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.site-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.site-help-grid button {
  cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.044);
  color: var(--ink); padding: 10px; font-weight: 700;
}
.site-help-grid button:hover { border-color: var(--neon); background: rgba(91, 76, 255,0.1); }
.site-link-card { display: grid; gap: 8px; }
.site-link-card div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.site-preview-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--dim); font-size: 12px; }
.site-preview-top span { color: var(--neon); font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.site-live-preview {
  overflow: hidden; min-height: 520px; border: 1px solid rgba(33, 29, 58,0.14); border-radius: 24px;
  background: var(--glass-2); box-shadow: inset 0 0 80px rgba(36, 31, 63, 0.158), 0 18px 55px rgba(36, 31, 63, 0.122);
}
.site-live-preview.theme-neon { --site-accent: #5b4cff; --site-accent-2: #b44bf0; }
.site-live-preview.theme-blue { --site-accent: #632bb0; --site-accent-2: #b44bf0; }
.site-live-preview.theme-gold { --site-accent: #ffd66b; --site-accent-2: #5b4cff; }
.site-live-preview.theme-red { --site-accent: #ff5b72; --site-accent-2: #ffd66b; }
.site-live-preview.theme-purple { --site-accent: #b78cff; --site-accent-2: #5b4cff; }
.site-browser-bar {
  display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035); color: var(--ink); font: 500 10px "Spline Sans Mono", monospace;
}
.site-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--glass); }
.site-browser-bar span:first-child { background: var(--site-accent); }
.site-browser-bar b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58%; }
.site-browser-bar small {
  margin-left: auto;
  color: rgba(145, 139, 174, 0.72);
  font-family: "Spline Sans Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-preview-hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.8fr); gap: 18px; align-items: center;
  min-height: 190px; padding: clamp(18px, 2.6vw, 30px);
  background:
    radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--site-accent) 28%, transparent), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(36, 31, 63, 0.016));
}
.site-preview-hero p { margin: 0 0 6px; color: var(--site-accent); font: 700 11px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.site-preview-hero h3 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.02; letter-spacing: -0.03em; }
.site-preview-hero span { display: block; max-width: 560px; color: var(--ink); line-height: 1.45; }
.site-preview-hero button {
  margin-top: 20px; border: 0; border-radius: 999px; background: var(--site-accent); color: #ffffff;
  padding: 12px 18px; font-weight: 800; box-shadow: 0 0 34px color-mix(in srgb, var(--site-accent) 35%, transparent);
}
.site-preview-orb {
  aspect-ratio: 1; border-radius: 35%; border: 1px solid color-mix(in srgb, var(--site-accent) 45%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--site-accent) 34%, transparent), transparent 58%);
  display: grid; place-items: center; box-shadow: 0 0 60px color-mix(in srgb, var(--site-accent) 22%, transparent);
}
.site-preview-orb i { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--site-accent-2); box-shadow: 0 0 34px var(--site-accent-2); }
.site-preview-media {
  aspect-ratio: 1; border-radius: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--site-accent) 35%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--site-accent) 18%, transparent);
}
.site-preview-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-preview-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; padding: 0 16px 16px;
}
.site-preview-gallery img, .site-preview-gallery video {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); display: block;
}
.site-preview-product-media { margin: -14px -14px 4px; aspect-ratio: 16/10; overflow: hidden; border-radius: 16px 16px 0 0; }
.site-preview-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-preview-sections {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.site-preview-sections span, .site-preview-offer, .site-preview-products article {
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; background: rgba(255,255,255,0.035);
}
.site-preview-sections span { padding: 12px; color: var(--ink); font-weight: 700; }
.site-preview-offer { margin: 0 16px 16px; padding: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.site-preview-offer span { color: var(--site-accent); font-weight: 800; }
.site-preview-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 16px 16px; }
.site-preview-products article { display: grid; gap: 7px; padding: 14px; min-height: 112px; }
.site-preview-products b { color: var(--ink); }
.site-preview-products em { color: var(--site-accent); font: 700 18px "Spline Sans Mono", monospace; font-style: normal; }
.site-preview-products small { color: var(--dim); line-height: 1.35; }

/* ============================ Site Studio ============================ */
/* Cockpit shell: fixed to the viewport on desktop so the preview never sits
   below the fold — only .ss-panel's columns scroll internally when their
   own content runs long. Reverts to normal page flow under 900px. */
.app-main:has(.workspace-page[data-workspace-page="sites"]) { height: 100dvh; overflow: hidden; }
.app-main:has(.workspace-page[data-workspace-page="sites"]) .console-workspace {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: clamp(8px, 1vw, 14px);
}
.workspace-page[data-workspace-page="sites"] {
  height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.workspace-page[data-workspace-page="sites"] .workspace-page-head { flex: 0 0 auto; padding: 8px clamp(18px, 2vw, 28px) 6px; }
.workspace-page[data-workspace-page="sites"] .workspace-page-kicker { margin-bottom: 1px; }
/* The builder grows to fit the preview + the editor panel; the page body
   scrolls vertically instead of clipping the website preview into a letterbox. */
.workspace-page[data-workspace-page="sites"] .workspace-page-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: clip;
  display: flex; flex-direction: column;
  padding: 8px clamp(14px, 1.6vw, 20px) 10px;
}

.ss-simple {
  flex: 1 1 auto; min-height: 100%; height: auto;
  /* Optional notices and readiness controls can appear before the canvas, so
     the preview owns its minimum height instead of relying on row position. */
  display: grid; grid-template-rows: auto;
  gap: 10px;
}
.ss-project-settings {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}
.ss-project-settings > summary {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 7px 11px;
  list-style: none;
  cursor: pointer;
}
.ss-project-settings > summary::-webkit-details-marker { display: none; }
.ss-project-settings > summary > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--neon);
  font-size: 12px;
}
.ss-project-settings > summary > div { min-width: 0; }
.ss-project-settings > summary b,
.ss-project-settings > summary i {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-project-settings > summary b { color: var(--ink); font-size: 12px; }
.ss-project-settings > summary i { color: var(--dim); font-size: 10px; font-style: normal; }
.ss-project-settings > summary em {
  color: var(--dim);
  font: 700 9px "Spline Sans Mono",monospace;
  font-style: normal;
  text-transform: uppercase;
}
.ss-project-settings > summary:hover { background: rgba(255,255,255,.03); }
.ss-project-settings-body { display: grid; gap: 8px; padding: 0 8px 8px; }
.ss-simple-top, .ss-simple-domain form, .ss-simple-prompt {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--glass);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.ss-simple-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
}
.ss-simple-switcher, .ss-simple-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-simple-switcher select {
  max-width: min(420px, 48vw); border: 1px solid var(--line); border-radius: 10px;
  background: rgba(36, 31, 63, 0.056); color: var(--ink); padding: 8px 10px;
  font: 700 13px "Instrument Sans", sans-serif;
}
.ss-simple-switcher span, .ss-simple-status {
  color: var(--dim); font: 600 10px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.ss-simple-sites {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
}
.ss-simple-site {
  flex: 0 0 auto; min-width: 178px; max-width: 260px; cursor: pointer;
  display: grid; gap: 2px; text-align: left; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(36, 31, 63, 0.04); color: var(--ink);
}
.ss-simple-site.is-active { border-color: rgba(91, 76, 255,0.72); background: rgba(91, 76, 255,0.09); }
.ss-simple-site b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.ss-simple-site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 11px; }
.ss-simple-domain form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; align-items: end;
}
.ss-simple-domain label { display: grid; gap: 5px; min-width: 0; }
.ss-simple-domain span {
  color: var(--neon); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase;
}
.ss-simple-domain input, .ss-simple-prompt textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; outline: none;
  background: rgba(36, 31, 63, 0.056); color: var(--ink); font: 500 14px "Instrument Sans", sans-serif;
}
.ss-simple-domain input { padding: 10px 11px; }
.ss-simple-domain input:focus, .ss-simple-prompt textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.1); }
.ss-simple-main { min-height: 560px; overflow: visible; }
.ss-simple-preview { height: auto; min-height: 0; overflow: visible; border-radius: 18px; }
.ss-simple-preview .site-live-preview { min-height: 100%; }
.ss-public-source {
  min-height: min(560px, 100%);
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 20vw, 340px);
  /* stretch: the website preview column grows to match the editor panel, so
     the preview runs all the way down to where the effects end. */
  align-items: stretch;
  gap: clamp(8px, 0.9vw, 14px);
  padding: clamp(8px, 0.9vw, 14px);
  background: linear-gradient(135deg, rgba(4,12,16,0.96), rgba(8,27,21,0.86));
  border: 1px solid rgba(47, 255, 149, 0.18);
  border-radius: 18px;
  overflow: visible;
}
.ss-public-source.is-editor-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.ss-public-source-frame, .ss-public-source-code {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 8, 11, 0.72);
  border-radius: 14px;
  overflow: hidden;
}
.ss-public-source-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.ss-frame-stage {
  position: relative;
  min-width: 0;
  /* a comfortable floor so the preview is tall even when every effect drawer
     is collapsed; it stretches taller to match the editor panel when open. */
  min-height: min(72vh, 760px);
  overflow: hidden;
  background: #02060a;
}
.ss-public-source-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #02060a;
}
.ss-live-hotspots {
  display: none !important;
  pointer-events: none !important;
}
.ss-live-hotspots button {
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border: 1px solid rgba(47, 255, 149, 0.58);
  background: rgba(2, 8, 11, 0.7);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.48), 0 0 24px rgba(47,255,149,0.2);
  font: 900 10px var(--mono);
  text-transform: uppercase;
  opacity: 0.16;
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.ss-editor-toggle {
  border-color: rgba(47, 255, 149, 0.42) !important;
  color: var(--neon) !important;
}
.ss-live-hotspots button:hover, .ss-live-hotspots button.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.02);
  background: rgba(14, 56, 43, 0.86);
}
.ss-public-source-code {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
}
.ss-public-source-code > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.ss-public-source-code p {
  margin: 0;
  color: var(--neon);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ss-public-source-code b {
  color: var(--muted);
  font-size: 12px;
}
.ss-public-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ss-public-source-tabs button {
  border: 1px solid rgba(47, 255, 149, 0.18);
  background: rgba(5, 19, 15, 0.82);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
}
.ss-public-source-tabs button.is-active {
  border-color: rgba(47, 255, 149, 0.72);
  color: var(--ink);
  background: rgba(47, 255, 149, 0.14);
}
.ss-public-source-code textarea {
  width: 100%;
  min-width: 0;
  min-height: 480px;
  resize: vertical;
  border: 1px solid rgba(47, 255, 149, 0.2);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.44);
  color: #d8fff0;
  padding: 12px;
  font: 12px/1.55 var(--mono);
  white-space: pre;
  overflow: auto;
}
.ss-public-source-code > span, .ss-source-error {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}
.ss-source-error { color: #ff8aa0; }
.ss-site-editor-panel {
  min-width: 0;
  /* content-driven: the panel grows with its open drawers and the preview
     grows with it, instead of the panel scrolling inside a clipped box. */
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 8, 11, 0.72);
  border-radius: 14px;
  padding: 14px;
  overflow: visible;
}
.ss-editor-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(47, 255, 149, 0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
}
.ss-editor-tabs button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  font-weight: 900;
}
.ss-editor-tabs button.is-active {
  background: var(--neon);
  color: #04100d;
}
.ss-editor-heading {
  display: grid;
  gap: 5px;
}
.ss-editor-heading h3, .ss-editor-heading p, .ss-editor-heading span {
  margin: 0;
}
.ss-editor-heading p {
  color: var(--neon);
  font: 900 10px var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ss-editor-heading h3 {
  color: var(--ink);
  font-size: 22px;
}
.ss-editor-heading span {
  color: var(--muted);
  line-height: 1.45;
}
/* ---- collapsible editor drawers (page regions, smart effects, assets) ---- */
.ss-editor-drawer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px;
}
.ss-editor-drawer-bar > span {
  color: var(--dim); font: 900 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.ss-drawers-toggle {
  border: 1px solid rgba(47, 255, 149, 0.32);
  background: rgba(47, 255, 149, 0.08);
  color: var(--neon);
  border-radius: 999px;
  padding: 6px 12px;
  font: 800 11px var(--mono);
  cursor: pointer;
}
.ss-drawers-toggle:hover, .ss-drawers-toggle:focus-visible {
  border-color: rgba(47, 255, 149, 0.7);
  background: rgba(47, 255, 149, 0.14);
  outline: none;
}
.ss-editor-drawer {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(5, 19, 15, 0.42);
  overflow: hidden;
}
.ss-editor-drawer > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
}
.ss-editor-drawer > summary::-webkit-details-marker { display: none; }
.ss-editor-drawer > summary > span { flex: 1 1 auto; min-width: 0; }
.ss-editor-drawer > summary > b {
  flex: 0 0 auto;
  min-width: 22px; text-align: center;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(47, 255, 149, 0.14); color: var(--neon);
  font: 800 11px var(--mono);
}
.ss-drawer-caret {
  flex: 0 0 auto; color: var(--dim); font-style: normal;
  transition: transform 0.18s ease;
}
.ss-editor-drawer[open] > summary .ss-drawer-caret { transform: rotate(180deg); }
.ss-editor-drawer > summary:hover { background: rgba(47, 255, 149, 0.06); }
.ss-editor-drawer-body {
  padding: 0 12px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .ss-drawer-caret { transition: none; }
}
.ss-inspector-list, .ss-ai-option-grid, .ss-quick-grid, .ss-asset-grid {
  display: grid;
  gap: 8px;
}
.ss-inspector-list button, .ss-ai-option-grid button, .ss-quick-grid button, .ss-asset-card {
  min-width: 0;
  text-align: left;
  border: 1px solid rgba(47, 255, 149, 0.16);
  background: rgba(5, 19, 15, 0.74);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px;
}
.ss-ai-option-grid, .ss-quick-grid, .ss-asset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ss-inspector-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ss-inspector-list button.is-active {
  border-color: rgba(47,255,149,0.82);
  background: rgba(47,255,149,0.13);
}
.ss-inspector-list b, .ss-ai-option-grid b, .ss-quick-grid b, .ss-asset-card b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-inspector-list span, .ss-ai-option-grid span, .ss-quick-grid span, .ss-asset-card small {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 800;
}
.ss-asset-bank {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.ss-asset-card img, .ss-asset-card > span {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(47,255,149,0.1);
  object-fit: cover;
  color: var(--neon);
  font-weight: 900;
  margin-bottom: 8px;
}
.ss-source-quiet {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(47,255,149,0.18);
  border-radius: 12px;
}
.ss-simple-prompt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 10px;
  align-items: stretch;
}
.ss-simple-prompt textarea { resize: vertical; min-height: 54px; max-height: 150px; padding: 11px 12px; line-height: 1.45; }
.ss-simple-status { margin: 0; text-align: right; }
.ss-simple.is-empty {
  display: grid; place-items: stretch; align-content: stretch;
  height: 100%; min-height: 0;
  padding: clamp(22px, 4vw, 72px);
}
.ss-simple-empty {
  width: 100%; max-width: min(1180px, 100%);
  height: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr);
  align-items: center; gap: clamp(24px, 4vw, 62px);
}
.ss-simple-empty-copy { display: grid; gap: 14px; align-content: center; min-width: 0; }
.ss-simple-empty-copy p {
  margin: 0; color: var(--neon);
  font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase;
}
.ss-simple-empty-copy span {
  max-width: 450px; color: var(--dim);
  font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55;
}
.ss-simple-empty h3 {
  margin: 0; max-width: 8ch;
  font-size: clamp(48px, 5.8vw, 86px); line-height: 0.94; letter-spacing: 0;
}
.ss-simple-empty .ss-simple-prompt {
  min-height: min(470px, 60dvh);
  grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(14px, 2vw, 22px); border-radius: 20px;
}
.ss-simple-empty .ss-simple-prompt textarea {
  height: 100%; min-height: 0; max-height: none; resize: none;
  padding: clamp(15px, 1.5vw, 22px);
  font-size: clamp(15px, 1.1vw, 19px);
}
.ss-simple-empty .ss-simple-prompt .btn { min-height: 52px; font-size: 14px; }
@media (max-width: 1100px) {
  .ss-simple-empty {
    grid-template-columns: 1fr;
    height: auto;
    align-content: center;
  }
  .ss-simple-empty h3 { max-width: none; }
  .ss-simple-empty .ss-simple-prompt { min-height: min(360px, 48dvh); }
}

.ss-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 12px; }
.ss-toolbar {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--glass);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}
.ss-toolbar .ml-tabs { background: rgba(36, 31, 63, 0.064); border: 1px solid var(--line); }
.ss-toolbar .ml-tab.is-active { box-shadow: 0 4px 18px rgba(91, 76, 255,0.28); }
.ss-empty {
  margin: auto; max-width: 460px; text-align: center; display: grid; gap: 10px; justify-items: center;
  padding: 30px; border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(160deg, rgba(91, 76, 255,0.08), rgba(255, 255, 255,0.7));
}
.ss-empty-kicker { margin: 0; font: 600 10px "Spline Sans Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon); }
.ss-empty h2 { margin: 0; font-size: 22px; }
.ss-empty p { margin: 0; color: var(--dim); line-height: 1.5; }
.ss-empty-actions { display: flex; gap: 10px; margin-top: 6px; }

.ss-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ss-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-header-right { display: flex; align-items: center; gap: 8px; }
.ss-site-switch {
  max-width: 220px; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.056);
  color: var(--ink); padding: 7px 10px; font: 600 12.5px "Instrument Sans", sans-serif;
}

.ss-panel { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Canvas takes over the screen — one compact rail, the rest is preview. */
.ss-build { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 14px; height: 100%; min-height: 0; }
.ss-col { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.ss-rail { padding-right: 2px; }
.ss-col-preview { min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

.ss-accordion {
  border: 1px solid var(--line); border-radius: 16px; background: rgba(36, 31, 63, 0.032); overflow: hidden;
}
.ss-accordion summary {
  cursor: pointer; list-style: none; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between;
  font: 700 11.5px "Instrument Sans"; color: var(--ink); user-select: none;
}
.ss-accordion summary::-webkit-details-marker { display: none; }
.ss-accordion summary::after { content: "+"; color: var(--dim); font-size: 15px; flex: 0 0 auto; margin-left: 8px; }
.ss-accordion[open] summary::after { content: "–"; }
.ss-accordion summary:hover { color: var(--ink); }
.ss-accordion[open] summary { border-bottom: 1px solid var(--line); }
.ss-accordion-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ss-acc-count {
  font-style: normal; font: 700 9px "Spline Sans Mono", monospace; color: var(--dim); background: rgba(36, 31, 63, 0.06);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}

/* Narrow-rail reflow for content that used to live in a full-width panel */
.ss-rail .ss-theme-grid { grid-template-columns: repeat(2, 1fr); }
.ss-rail .ss-content, .ss-rail .ss-integration-grid { grid-template-columns: 1fr; }
.ss-rail .ss-gallery-grid { grid-template-columns: repeat(3, 1fr); }
.ss-rail .ss-page-row { flex-direction: column; align-items: flex-start; }
.ss-rail .ss-page-x { margin-left: 0; align-self: flex-end; margin-top: -22px; }
.ss-rail .ss-pages-head { margin-bottom: 8px; }

.ss-command {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--glass);
}
.ss-command label { font: 600 10px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); }
.ss-command textarea {
  width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.06);
  color: var(--ink); padding: 10px 12px; font-size: 13px; line-height: 1.45; outline: none;
}
.ss-command textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.1); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip {
  cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: rgba(36, 31, 63, 0.044);
  color: var(--dim); padding: 5px 10px; font-size: 11px; font-weight: 600;
}
.ss-chip:hover { border-color: var(--neon); background: rgba(91, 76, 255,0.1); }
.ss-suggestions { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(36, 31, 63, 0.032); }
.ss-suggest-label { margin: 0 0 8px; font: 600 10px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.ss-suggest-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-suggest {
  cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.044);
  color: var(--ink); padding: 6px 10px; font-size: 11.5px; font-weight: 600;
}
.ss-suggest:hover { border-color: var(--neon); background: rgba(91, 76, 255,0.1); }

.ss-preview-top { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; color: var(--dim); font-size: 12px; }
.ss-preview-top span { color: var(--neon); font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.ss-preview-frame { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: 24px; }
.ss-preview-frame .site-live-preview { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.ss-preview-frame .site-preview-hero { flex: 0 0 auto; min-height: 150px; }
.ss-preview-frame.ss-device-tablet { max-width: 640px; margin: 0 auto; }
.ss-preview-frame.ss-device-mobile { max-width: 360px; margin: 0 auto; }

.ss-mini-activity { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(36, 31, 63, 0.032); }
.ss-mini-activity-list { display: flex; flex-direction: column; gap: 8px; }
.ss-mini-activity-row { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.ss-mini-activity-row span { color: var(--dim); line-height: 1.4; }
.ss-mini-activity-row i { font-style: normal; color: var(--dim); font: 500 10px "Spline Sans Mono", monospace; }

.ss-readiness { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(36, 31, 63, 0.032); }
.ss-readiness-head { display: flex; align-items: center; justify-content: space-between; }
.ss-readiness-head .ss-suggest-label { margin: 0; }
.ss-readiness-count { font: 700 11px "Spline Sans Mono", monospace; color: var(--neon); }
.ss-readiness-list { display: flex; flex-direction: column; gap: 7px; }
.ss-readiness-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.ss-readiness-row.is-done { color: var(--ink); }
.ss-readiness-dot {
  display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line);
}
.ss-readiness-row.is-done .ss-readiness-dot { border-color: transparent; background: linear-gradient(120deg, var(--neon), #5b4cff); color: #ffffff; }
.ss-readiness-dot .ic { width: 10px; height: 10px; }
.ss-readiness-btn { width: 100%; justify-content: center; }

.ss-inspector-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.ss-mini-tab {
  cursor: pointer; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--dim);
  padding: 5px 9px; font: 600 11px "Instrument Sans", sans-serif;
}
.ss-mini-tab:hover { color: var(--ink); background: rgba(91, 76, 255,0.06); }
.ss-mini-tab.is-active { color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); }
.ss-field { display: grid; gap: 5px; font-size: 12px; color: var(--dim); }
.ss-field span { font: 600 10px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
.ss-field input, .ss-field select, .ss-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.056);
  color: var(--ink); padding: 8px 10px; font-size: 13px; outline: none; resize: vertical;
}
.ss-field input:focus, .ss-field select:focus, .ss-field textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.1); }
.ss-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); }
.ss-note { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.ss-section-list { display: flex; flex-direction: column; gap: 6px; }
.ss-section-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.04); font-size: 12.5px;
}
.ss-section-row button { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; }
.ss-section-row button:hover { color: #c22b52; }

/* Pages */
.ss-pages-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ss-pages-head h3 { margin: 0; font-size: 16px; }
.ss-pages-list { display: flex; flex-direction: column; gap: 8px; }
.ss-page-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(36, 31, 63, 0.032);
}
.ss-page-row.is-home { border-color: rgba(91, 76, 255,0.3); }
.ss-page-info { display: flex; flex-direction: column; min-width: 120px; }
.ss-page-info i { font-style: normal; font-size: 11px; color: var(--dim); }
.ss-home-tag { font: 600 10px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon); }
.ss-page-x {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(36, 31, 63, 0.05); color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1;
}
.ss-page-x:hover { color: #c22b52; border-color: rgba(224, 52, 94,0.5); }

/* Design */
.ss-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ss-theme-card {
  cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: rgba(36, 31, 63, 0.04); color: var(--ink);
}
.ss-theme-card b { display: block; margin-bottom: 4px; font-size: 13px; }
.ss-theme-card span { font-size: 11px; color: var(--dim); }
.ss-theme-card.is-active { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(91, 76, 255,0.16); }
.ss-theme-card.theme-neon b { color: #9c92ff; }
.ss-theme-card.theme-blue b { color: #632bb0; }
.ss-theme-card.theme-gold b { color: #ffe08a; }
.ss-theme-card.theme-red b { color: #ff8a97; }
.ss-theme-card.theme-purple b { color: #cbb0ff; }

/* Content */
.ss-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-content: start; }
.ss-card { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(36, 31, 63, 0.032); display: flex; flex-direction: column; gap: 10px; }
.ss-card h3 { margin: 0; font-size: 15px; }
.ss-mini-form { display: grid; gap: 8px; }
.ss-mini-form input, .ss-mini-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06);
  padding: 9px 11px; font-size: 13px; outline: none; resize: vertical;
}
.ss-product-list { display: flex; flex-direction: column; gap: 6px; }
.ss-product-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.032); font-size: 12.5px; }
.ss-product-row i { color: var(--neon); font-style: normal; font: 700 12.5px "Spline Sans Mono", monospace; }
.ss-product-thumb { width: 36px; height: 36px; border-radius: 8px; flex: 0 0 auto; }
.ss-empty-note { margin: 0; color: var(--dim); font-size: 12px; }
.ss-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ss-hero-thumb { display: flex; align-items: center; gap: 10px; }

.ss-hero-thumb-actions { display: flex; flex-direction: column; gap: 6px; }
.ss-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ss-gallery-item { position: relative; }

.ss-gallery-item .ss-page-x { position: absolute; top: 5px; right: 5px; background: var(--glass); }

/* media picker drawer (reuses .ml-drawer chrome) */
.ss-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ss-media-card { text-align: left; cursor: pointer; border: 0; background: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.ss-media-card i { font-style: normal; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SEO */
.ss-seo { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.ss-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Integrations */
.ss-integration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ss-integration-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(36, 31, 63, 0.032); }
.ss-integration-card.is-on { border-color: rgba(91, 76, 255,0.3); }
.ss-integration-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-integration-top b { font-size: 13px; }
.ss-integration-actions { display: flex; gap: 8px; }

/* Publish */
.ss-publish { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.ss-publish-status p { margin: 4px 0 0; color: var(--dim); font-size: 12.5px; }
.ss-publish-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-publish-meta { display: flex; flex-direction: column; gap: 6px; }

/* Activity */
.ss-activity { display: flex; flex-direction: column; gap: 6px; }
.ss-activity-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.032); font-size: 12.5px; }
.ss-activity-row b { color: var(--neon); }
.ss-activity-row span { flex: 1 1 220px; color: var(--ink); }
.ss-activity-row i { font-style: normal; color: var(--dim); font-size: 11px; }

/* AI setup drawer (reuses .ml-drawer chrome) */
.ss-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ss-step { font: 600 10.5px "Spline Sans Mono", monospace; color: var(--dim); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); }
.ss-step.is-active { color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); border-color: transparent; }
.ss-step.is-done { color: var(--neon); border-color: rgba(91, 76, 255,0.35); }
.ss-goal-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ss-setup-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.ss-review { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(36, 31, 63, 0.04); }
.ss-review b { font-size: 15px; }
.ss-review span { color: var(--ink); font-size: 12.5px; }
.ss-review i { font-style: normal; color: var(--dim); font-size: 11.5px; }

.mini-form { display: grid; gap: 8px; margin-top: 8px; }
.mini-form input, .mini-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06);
  padding: 10px 12px; font-size: 13px; outline: none; resize: vertical;
}
.mini-form input:focus, .mini-form textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255, 0.1); }

.agent-card .agent-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--dim-2); }
.agent-active .agent-dot { background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: livePulse 2.2s ease-in-out infinite; }
.agent-waiting .agent-dot, .agent-needs-approval .agent-dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.agent-stats { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 8px 0; font-size: 11px; color: var(--dim); }
.agent-stats b { font: 500 13px "Spline Sans Mono", monospace; color: var(--ink); margin-right: 3px; }
.agent-bundle { margin: 7px 0 0; font: 400 10px "Spline Sans Mono", monospace; color: var(--dim-2); }
.workers-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 16px; align-items: stretch;
  border: 1px solid rgba(91, 76, 255, 0.24); border-radius: 20px; padding: 20px;
  background: radial-gradient(circle at 82% 16%, rgba(91, 76, 255,0.12), transparent 34%), var(--glass);
}
.worker-kicker {
  margin: 0 0 6px; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.workers-hero h3 { margin: 0; font-size: 22px; letter-spacing: 0; }
.workers-hero p { margin: 9px 0 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
.worker-scale { display: grid; gap: 8px; }
.worker-scale span, .worker-metrics div {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; background: rgba(36, 31, 63, 0.044);
}
.worker-scale b, .worker-metrics b { display: block; color: var(--neon); font: 700 22px "Instrument Sans", sans-serif; }
.worker-scale span, .worker-metrics span { color: var(--dim); font-size: 12px; }
.worker-scale span:first-child, .worker-metric-primary {
  border-color: rgba(91, 76, 255,0.36);
  background:
    radial-gradient(circle at 88% 0%, rgba(91, 76, 255,0.22), transparent 38%),
    linear-gradient(145deg, rgba(91, 76, 255,0.11), rgba(36, 31, 63, 0.044));
}
.worker-scale span:first-child::after, .worker-metric-primary::after {
  content: ""; position: absolute; inset: auto 12px 9px 12px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--neon), rgba(180, 75, 240,0.16), transparent);
  opacity: 0.75;
}
.worker-scale span:first-child b, .worker-metric-primary b { font-size: 28px; line-height: 1; text-shadow: 0 0 18px rgba(91, 76, 255,0.28); }
.worker-routing-panel {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(150px, 210px);
  gap: 14px; align-items: stretch; border: 1px solid rgba(91, 76, 255, 0.2); border-radius: 18px; padding: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(91, 76, 255,0.13), transparent 34%),
    var(--glass);
}
.worker-routing-panel h4 { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: 0; }
.worker-routing-panel p { margin: 7px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.worker-routing-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.worker-routing-cards article, .worker-routing-proof span {
  border: 1px solid rgba(91, 76, 255,0.14); border-radius: 14px; padding: 11px; background: rgba(36, 31, 63, 0.044);
}
.worker-routing-cards span {
  display: block; margin-bottom: 7px; color: var(--neon);
  font: 800 9px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.worker-routing-cards b { color: var(--ink); font-size: 13.5px; }
.worker-routing-proof { display: grid; gap: 8px; }
.worker-routing-proof b { display: block; color: var(--neon); font: 900 18px "Instrument Sans", sans-serif; }
.worker-routing-proof span { color: var(--dim); font-size: 11.5px; }
.worker-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid rgba(199, 126, 0, 0.32); border-radius: 14px; padding: 12px 14px;
  background: rgba(199, 126, 0, 0.08); color: #7a5200; font-size: 12.5px; line-height: 1.45;
}
.worker-notice button {
  flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid rgba(199, 126, 0,0.32); border-radius: 999px;
  background: rgba(36, 31, 63, 0.04); color: #7a5200; cursor: pointer;
}
.worker-baseline {
  display: grid; grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr); gap: 16px; align-items: center;
  margin-top: 14px; padding: 15px; border: 1px solid rgba(91, 76, 255,0.2); border-radius: 16px;
  background:
    radial-gradient(circle at 86% 12%, rgba(91, 76, 255,0.15), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(180, 75, 240,0.08), transparent 30%),
    var(--glass);
}
.worker-baseline h4 { margin: 2px 0 0; color: var(--ink); font-size: 17px; letter-spacing: 0; }
.worker-baseline p { margin: 5px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.worker-baseline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.worker-baseline-service {
  position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 2px 8px; align-items: center;
  min-width: 0; padding: 10px; border: 1px solid rgba(91, 76, 255,0.14); border-radius: 11px; background: rgba(36, 31, 63, 0.044);
}
.worker-baseline-service > i { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 12px rgba(91, 76, 255,0.82); animation: livePulse 2.4s ease-in-out infinite; }
.worker-baseline-service > b { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.worker-baseline-service > small { overflow: hidden; color: var(--dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.worker-baseline-unavailable { grid-template-columns: 1fr auto; border-color: rgba(199, 126, 0,0.24); }
.worker-baseline-local { grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr) auto; }
.worker-mesh {
  display: flex; flex-direction: column; gap: 14px; margin: 14px 0;
}
.worker-map-view { display: grid; gap: 14px; }
.worker-map-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.worker-map-summary > span {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 1px 9px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(91, 76, 255,0.16);
  border-radius: 14px; background: var(--glass);
}
.worker-map-summary > span > i {
  grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: 50%; background: var(--neon);
  box-shadow: 0 0 12px rgba(91, 76, 255,0.72);
}
.worker-map-summary b { color: var(--ink); font: 800 18px "Instrument Sans", sans-serif; }
.worker-map-summary small { overflow: hidden; color: var(--dim); font: 600 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.1em; text-overflow: ellipsis; white-space: nowrap; }
.worker-map-summary .needs-attention { border-color: rgba(199, 126, 0,0.32); }
.worker-map-summary .needs-attention b { color: #ffe098; }
.worker-map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.worker-map-layout.has-selection { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: stretch; }
.worker-map-layout .worker-mesh { min-width: 0; margin: 0; }
.worker-map-layout .worker-map-detail { min-width: 0; margin: 0; max-height: 680px; overflow-y: auto; }
.worker-mesh-foot { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; }
.worker-mesh-stage {
  position: relative; min-height: clamp(520px, 62vh, 680px); overflow: hidden; border: 1px solid rgba(91, 76, 255, 0.2); border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(91, 76, 255,0.16), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(180, 75, 240,0.1), transparent 24%),
    var(--glass);
}
/* Interactive network canvas. It stays contained inside Workforce so the app
   shell, navigation, and companion never leak underneath a fullscreen layer. */
.worker-mesh-stage.is-web-active {
  position: relative; inset: auto; z-index: 1; min-height: clamp(520px, 62vh, 680px); border-radius: 22px;
  cursor: grab; touch-action: none; isolation: isolate;
}
.worker-mesh-stage.is-web-active:active { cursor: grabbing; }
.worker-web-world {
  position: absolute; inset: 0; transform-origin: 0 0;
}
.worker-mesh-stage.is-web-active .worker-web-world { will-change: transform; }
.worker-web-controls {
  position: absolute; top: 16px; left: 16px; right: 16px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  pointer-events: none;
}
.worker-web-fit {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(91, 76, 255,0.3);
  background: var(--glass); color: var(--ink); font: 700 12px "Instrument Sans", sans-serif; cursor: pointer; pointer-events: auto;
}
.worker-web-fit:hover { border-color: rgba(91, 76, 255,0.6); background: rgba(91, 76, 255,0.08); }
.worker-web-search { position: static; z-index: 12; display: block; pointer-events: auto; }
.worker-web-search input {
  width: min(280px, 34vw); max-width: 100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(91, 76, 255,0.3); background: var(--glass);
  color: var(--ink); font: 500 13px "Instrument Sans", sans-serif;
}
.worker-web-search input:focus { outline: none; border-color: var(--neon); }
.worker-mesh-stage.is-web-active .worker-mesh-foot {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 11;
  background: var(--glass); border: 1px solid rgba(91, 76, 255,0.22); border-radius: 16px;
  padding: 14px 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.worker-node.is-web-dimmed { opacity: 0.15; }
.worker-thread.is-web-dimmed { opacity: 0.08; }
.worker-node.is-web-match { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(91, 76, 255,0.4), 0 0 34px var(--node-glow); }
/* This is meant to be read while dragging/zooming to find a specific
   worker, not a decorative screensaver - constant motion here fights against
   actually reading it, and was the source of the "laggy and ugly" feedback.
   Everything stays put; color/selection is still how state reads. */
.worker-mesh-stage.is-web-active .worker-node, .worker-mesh-stage.is-web-active .worker-thread.is-live::after, .worker-mesh-stage.is-web-active .worker-mesh-rings span {
  animation: none;
}
/* Motion should mean something: a node actively doing work gets a visible
   pulse; an idle one stays still. Higher specificity than the animation:
   none rule above, so this wins for exactly the live/approval-tone nodes. */
.worker-mesh-stage.is-web-active .worker-node.is-live {
  animation: workerLivePulse 2.2s ease-in-out infinite;
}
@keyframes workerLivePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.025) inset, 0 12px 30px rgba(36, 31, 63, 0.122); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.025) inset, 0 12px 30px rgba(36, 31, 63, 0.122), 0 0 22px var(--node-glow); }
}
.worker-mesh-rings { position: absolute; inset: 8%; pointer-events: none; }
.worker-mesh-rings span {
  position: absolute; inset: calc(var(--ring, 0) * 11%); border: 1px solid rgba(91, 76, 255,0.12); border-radius: 50%;
  box-shadow: 0 0 34px rgba(91, 76, 255,0.05) inset;
}
.worker-mesh-rings span:nth-child(1) { --ring: 0; animation: workerRing 8s linear infinite; }
.worker-mesh-rings span:nth-child(2) { --ring: 1; animation: workerRing 12s linear infinite reverse; }
.worker-mesh-rings span:nth-child(3) { --ring: 2; animation: workerRing 16s linear infinite; }
.worker-mesh-rings span:nth-child(4) { --ring: 3; animation: workerRing 22s linear infinite reverse; opacity: 0.75; }
.worker-mesh-rings span:nth-child(5) { --ring: 4; animation: workerRing 30s linear infinite; opacity: 0.55; }
.worker-cell-field {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.worker-cell-dot {
  position: absolute; left: 50%; top: 50%; width: var(--cell-size); height: var(--cell-size);
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(var(--cell-angle, 0deg)) translateX(var(--cell-radius, 760px)) rotate(calc(-1 * var(--cell-angle, 0deg)));
  background: rgba(91, 76, 255,var(--cell-alpha,0.45));
  box-shadow: 0 0 8px rgba(91, 76, 255,0.46), 0 0 18px rgba(91, 76, 255,0.14);
  opacity: 0.84;
  animation: workerCellPulse 4.8s ease-in-out infinite;
  animation-delay: var(--cell-delay, 0s);
}
.worker-cell-memory { background: rgba(180, 75, 240,var(--cell-alpha,0.42)); box-shadow: 0 0 8px rgba(180, 75, 240,0.38), 0 0 18px rgba(180, 75, 240,0.12); }
.worker-cell-safety { background: rgba(199, 126, 0,var(--cell-alpha,0.42)); box-shadow: 0 0 8px rgba(199, 126, 0,0.38), 0 0 18px rgba(199, 126, 0,0.12); }
.worker-cell-review { background: rgba(43, 38, 73,var(--cell-alpha,0.44)); }
.worker-cell-security { background: rgba(199, 126, 0,var(--cell-alpha,0.38)); }
.worker-cell-websites { background: rgba(180, 75, 240,var(--cell-alpha,0.38)); }
.worker-cell-accounting { background: rgba(43, 38, 73,var(--cell-alpha,0.42)); }
.worker-core {
  position: absolute; inset: 50% auto auto 50%; z-index: 3; width: 116px; height: 116px; transform: translate(-50%, -50%);
  display: grid; place-items: center; align-content: center; border-radius: 50%; border: 1px solid rgba(91, 76, 255,0.44);
  background: radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.53), rgba(91, 76, 255,0.18) 42%, rgba(255, 255, 255,0.96));
  box-shadow: 0 0 46px rgba(91, 76, 255,0.18), inset 0 0 28px rgba(91, 76, 255,0.16);
}
.worker-core span { color: #ffffff; background: var(--neon); border-radius: 999px; padding: 4px 7px; font: 900 11px "Spline Sans Mono", monospace; }
.worker-core b { margin-top: 7px; color: var(--ink); font-size: 16px; }
.worker-core i { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; }
.worker-thread {
  position: absolute; left: 50%; top: 50%; height: 1px; width: var(--node-radius, 140px); z-index: 2; pointer-events: none;
  transform-origin: left center; transform: rotate(var(--node-angle, 0deg));
  background: linear-gradient(90deg, rgba(91, 76, 255,0.5), rgba(91, 76, 255,0.04));
}
.worker-thread-approval { background: linear-gradient(90deg, rgba(199, 126, 0,0.55), rgba(199, 126, 0,0.04)); }
.worker-thread-blocked { background: linear-gradient(90deg, rgba(224, 52, 94,0.32), rgba(224, 52, 94,0.02)); opacity: 0.55; }
.worker-thread-idle { background: linear-gradient(90deg, rgba(91, 76, 255,0.24), rgba(91, 76, 255,0.02)); }
.worker-thread.is-live::after {
  content: ""; position: absolute; top: -2px; left: 0; width: 16px; height: 5px; border-radius: 999px;
  background: var(--glass); box-shadow: 0 0 10px rgba(91, 76, 255,0.85), 0 0 22px rgba(91, 76, 255,0.5);
  animation: threadPulse 2.4s linear infinite; animation-delay: var(--thread-delay, 0s);
}
.worker-thread-approval.is-live::after { background: rgba(255,244,214,0.95); box-shadow: 0 0 10px rgba(199, 126, 0,0.85), 0 0 22px rgba(199, 126, 0,0.5); }
.worker-node-field {
  position: absolute; inset: 0; z-index: 4;
}
.worker-node {
  --node-glow: rgba(91, 76, 255,0.22);
  position: absolute; top: 50%; left: 50%; z-index: 5; min-width: 88px;
  transform: translate(-50%, -50%) rotate(var(--node-angle, 0deg)) translateX(var(--node-radius, 140px)) rotate(calc(-1 * var(--node-angle, 0deg)));
  display: grid; gap: 5px; justify-items: center; padding: 10px 8px;
  border: 1px solid rgba(91, 76, 255,0.2); border-radius: 16px; background: var(--glass); color: var(--ink); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.025) inset, 0 12px 30px rgba(36, 31, 63, 0.122);
  animation: workerFloat 4.6s ease-in-out infinite; animation-delay: var(--node-delay);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.worker-node:hover { border-color: rgba(91, 76, 255,0.55); box-shadow: 0 0 28px var(--node-glow); }
.worker-node.is-selected { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(91, 76, 255,0.28), 0 0 32px var(--node-glow); }
.worker-node.is-subagent {
  min-width: 62px; padding: 8px 6px; opacity: 0.86; border-style: dashed; border-color: rgba(91, 76, 255,0.16);
  background: rgba(36, 31, 63, 0.07);
}
.worker-node.is-subagent .worker-node-orb { width: 30px; height: 30px; border-radius: 11px; font-size: 9px; }
.worker-node.is-subagent .worker-node-label { font-size: 10px; }
/* Tasks (a subagent's connected helper lanes) are one tier further out and
   visually smaller/quieter than subagents - the status line under each one
   (Mapped / Waiting approval / etc, via workerStatusLabel) is the point:
   this is "what's this subagent connected to and is it doing anything." */
.worker-node.is-task {
  min-width: 52px; padding: 6px 5px; opacity: 0.8; border-style: dotted; border-color: rgba(91, 76, 255,0.14);
}
.worker-node.is-task .worker-node-orb { width: 24px; height: 24px; border-radius: 9px; font-size: 8px; }
.worker-node.is-task .worker-node-label { font-size: 9px; }
.worker-node.is-task i { font-size: 7px; }
.worker-node-orb {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px; color: var(--ink); font: 900 11px "Spline Sans Mono", monospace;
  border: 1px solid rgba(91, 76, 255,0.34); background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.49), rgba(91, 76, 255,0.14) 48%, rgba(255, 255, 255,0.98));
}
.worker-node-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 11px "Instrument Sans", sans-serif; }
.worker-node i { color: var(--dim); font: 700 8px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em; font-style: normal; }
.worker-node-live .worker-node-orb, .worker-node-ready .worker-node-orb { box-shadow: 0 0 22px rgba(91, 76, 255,0.2); }
.worker-node-approval { --node-glow: rgba(199, 126, 0,0.22); border-color: rgba(199, 126, 0,0.26); }
.worker-node-approval .worker-node-orb { border-color: rgba(199, 126, 0,0.48); box-shadow: 0 0 22px rgba(199, 126, 0,0.18); }
.worker-node-blocked { --node-glow: rgba(224, 52, 94,0.22); border-color: rgba(224, 52, 94,0.28); opacity: 0.82; }
.worker-node-blocked .worker-node-orb { border-color: rgba(224, 52, 94,0.48); box-shadow: 0 0 22px rgba(224, 52, 94,0.18); }
.worker-node-human { --node-glow: rgba(180, 75, 240,0.22); border-color: rgba(180, 75, 240,0.28); }
.worker-node-human .worker-node-orb { border-color: rgba(180, 75, 240,0.45); box-shadow: 0 0 22px rgba(180, 75, 240,0.17); }
.worker-mesh-readout { display: flex; flex-wrap: wrap; gap: 8px; }
.worker-mesh-readout span {
  display: grid; align-content: center; justify-items: center; min-width: 96px; border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; background: rgba(36, 31, 63, 0.044);
  color: var(--dim); font-size: 11px; text-align: center;
}
.worker-mesh-readout b { color: var(--neon); font: 900 24px "Instrument Sans", sans-serif; }
.worker-card-visual { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 34px; }
.worker-card-visual span {
  border-radius: 999px; background: linear-gradient(180deg, rgba(91, 76, 255,0.42), rgba(91, 76, 255,0.06));
  transform-origin: bottom; animation: workerBar 2.6s ease-in-out infinite;
}
.worker-card-visual span:nth-child(2) { animation-delay: 0.22s; }
.worker-card-visual span:nth-child(3) { animation-delay: 0.44s; }
.worker-card-visual span:nth-child(4) { animation-delay: 0.66s; }
.worker-card-visual-idle span { opacity: 0.42; animation-duration: 5s; }
.worker-card-visual-approval span { background: linear-gradient(180deg, rgba(199, 126, 0,0.46), rgba(199, 126, 0,0.07)); }
.worker-card-visual-blocked span { background: linear-gradient(180deg, rgba(224, 52, 94,0.42), rgba(224, 52, 94,0.06)); animation: none; transform: scaleY(0.24); }
@keyframes workerRing { to { transform: rotate(360deg); } }
@keyframes workerFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes workerBar { 0%,100% { transform: scaleY(0.34); } 50% { transform: scaleY(1); } }
@keyframes workerCellPulse { 0%,100% { opacity: 0.42; scale: 0.82; } 50% { opacity: 1; scale: 1.22; } }
@keyframes threadPulse {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.worker-view-toggle { display: flex; gap: 6px; align-self: flex-start; }
.worker-view-btn {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  background: rgba(91, 76, 255,0.04); color: var(--dim); font: 800 11px "Instrument Sans", sans-serif;
}
.worker-view-btn.is-active { border-color: rgba(91, 76, 255,0.5); background: linear-gradient(120deg, rgba(91, 76, 255,0.22), rgba(56, 21, 217,0.14)); color: var(--neon); }
.worker-web-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 2px 0; color: var(--dim); font: 700 11px "Instrument Sans", sans-serif; }
.worker-web-legend span { display: inline-flex; align-items: center; gap: 6px; }
.worker-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.worker-legend-live { background: var(--neon); box-shadow: 0 0 8px rgba(91, 76, 255,0.7); }
.worker-legend-approval { background: #c77e00; box-shadow: 0 0 8px rgba(199, 126, 0,0.7); }
.worker-legend-ready { background: rgba(91, 76, 255,0.4); }
.worker-legend-cell { background: rgba(91, 76, 255,0.72); box-shadow: 0 0 10px rgba(91, 76, 255,0.5); }
.worker-legend-blocked { background: rgba(224, 52, 94,0.6); }
.worker-legend-more { color: var(--dim); opacity: 0.7; }
.worker-drawer-backdrop { position: fixed; inset: 0; background: var(--glass); z-index: 40; animation: drawerFade 0.2s ease; }
.worker-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 41; overflow-y: auto;
  padding: 20px; border-left: 1px solid rgba(91, 76, 255,0.28);
  background: var(--glass);
  box-shadow: -24px 0 60px rgba(36, 31, 63, 0.158); animation: drawerSlide 0.24s ease;
}
.worker-drawer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.worker-drawer-head div { flex: 1; min-width: 0; }
.worker-drawer-head b { display: block; color: var(--ink); font-size: 16px; }
.worker-drawer-head i { color: var(--dim); font: 700 11px "Instrument Sans", sans-serif; font-style: normal; }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawerSlide { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .worker-node, .worker-cell-dot, .worker-mesh-rings span, .worker-thread.is-live::after { animation: none !important; }
}
@media (max-width: 1180px) {
  .worker-map-layout.has-selection { grid-template-columns: 1fr; }
  .worker-map-layout .worker-map-detail { max-height: none; }
  .worker-map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .worker-map-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .worker-map-summary > span { padding: 10px 11px; }
  .worker-map-summary b { font-size: 16px; }
  .worker-mesh-stage, .worker-mesh-stage.is-web-active { min-height: clamp(350px, 94vw, 430px); }
  .worker-mesh-stage .worker-mesh-foot { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; }
}
@media (max-width: 430px) {
  .worker-map-summary small { white-space: normal; }
  .worker-map-summary > span { grid-template-columns: auto minmax(0, 1fr); }
}
/* Docked side panel over the fullscreen web (z-index above .worker-mesh-stage
   .is-web-active's 400) - without this it renders in normal page flow, which
   sits underneath and behind the fullscreen canvas, invisible. */
.worker-map-detail {
  display: grid; gap: 14px; margin: 14px 0 0; padding: 16px;
  border: 1px solid rgba(91, 76, 255,0.24); border-radius: 18px;
  background:
    radial-gradient(circle at 84% 10%, rgba(91, 76, 255,0.1), transparent 32%),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.worker-map-detail.is-empty {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  border-style: dashed; color: var(--dim);
}
.worker-map-detail.is-empty h4, .worker-map-detail-head h4 {
  margin: 0; color: var(--ink); font-size: 18px; letter-spacing: 0;
}
.worker-map-detail.is-empty p {
  margin: 7px 0 0; max-width: 720px; color: var(--dim); font-size: 12.5px; line-height: 1.5;
}
.worker-map-detail.is-empty > span {
  border: 1px solid rgba(199, 126, 0,0.22); border-radius: 999px; padding: 8px 11px;
  color: #7a5200; background: rgba(199, 126, 0,0.06); font: 800 9px "Spline Sans Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
}
.worker-map-detail-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
}
.worker-map-detail-head > div { min-width: 0; }
.worker-map-detail-head > div > span {
  display: block; margin-top: 3px; color: var(--dim); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.worker-map-detail .worker-shell-expand { padding: 0; }
.worker-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 14px 0; }
.worker-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.worker-filter {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer;
  background: rgba(91, 76, 255,0.04); color: var(--dim); font: 700 11px "Instrument Sans", sans-serif;
}
.worker-filter:hover, .worker-filter.is-active { border-color: rgba(91, 76, 255,0.42); background: rgba(91, 76, 255,0.13); color: var(--neon); }
.worker-filter-propose { margin-left: auto; color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); border-color: transparent; }
.worker-directory { display: grid; gap: 14px; }
.worker-department {
  border: 1px solid rgba(91, 76, 255,0.16); border-radius: 18px; padding: 14px;
  background:
    radial-gradient(circle at 8% 8%, rgba(91, 76, 255,0.08), transparent 28%),
    rgba(36, 31, 63, 0.032);
}
.worker-department-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px;
  color: var(--dim); font: 800 10px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.14em;
}
.worker-department-head b {
  color: var(--neon); font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em;
}
.worker-shell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: start; }
.worker-shell-card {
  position: relative; overflow: hidden; border: 1px solid rgba(91, 76, 255,0.15); border-radius: 16px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.worker-shell-card.is-open {
  grid-column: span 2;
  border-color: rgba(91, 76, 255,0.42);
  box-shadow: 0 0 34px rgba(91, 76, 255,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}
.worker-shell-main {
  width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 11px; align-items: center;
  border: 0; background: transparent; color: inherit; text-align: left; padding: 13px; cursor: pointer;
}
.worker-shell-main:hover { background: rgba(91, 76, 255,0.045); }
.worker-shell-name { min-width: 0; display: grid; gap: 2px; }
.worker-shell-name b { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-shell-name i { color: var(--dim); font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-shell-meta {
  display: grid; justify-items: center; min-width: 54px; border: 1px solid rgba(91, 76, 255,0.13); border-radius: 12px; padding: 7px 8px;
  background: rgba(91, 76, 255,0.04);
}
.worker-shell-meta b { color: var(--neon); font: 900 16px "Instrument Sans", sans-serif; }
.worker-shell-meta i { color: var(--dim); font: 700 8px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em; font-style: normal; }
.worker-shell-status {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center; border-radius: 999px; padding: 5px 8px;
  background: rgba(91, 76, 255,0.08); color: var(--ink); font: 800 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em;
}
.worker-shell-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.worker-reviewing .worker-shell-status span { background: #b44bf0; box-shadow: 0 0 10px rgba(180, 75, 240,0.55); }
.worker-waiting-approval .worker-shell-status { color: var(--warn); background: rgba(199, 126, 0,0.08); }
.worker-waiting-approval .worker-shell-status span { background: var(--warn); box-shadow: 0 0 10px rgba(199, 126, 0,0.6); }
.worker-shell-bar { height: 3px; background: rgba(91, 76, 255,0.06); }
.worker-shell-bar i { display: block; width: var(--worker-cap); height: 100%; background: linear-gradient(90deg, var(--neon), #b44bf0); opacity: 0.78; }
.worker-shell-expand { display: grid; gap: 12px; padding: 0 13px 13px; }
.worker-tab-row { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(91, 76, 255,0.11); }
.worker-tab {
  border: 1px solid rgba(91, 76, 255,0.16); border-radius: 999px; padding: 7px 10px;
  background: rgba(36, 31, 63, 0.032); color: var(--dim); cursor: pointer;
  font: 800 10px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em;
}
.worker-tab:hover, .worker-tab.is-active { border-color: rgba(91, 76, 255,0.5); background: rgba(91, 76, 255,0.13); color: var(--neon); }
.worker-tab-collapse { margin-left: auto; color: #7a5200; border-color: rgba(199, 126, 0,0.24); }
.worker-tab-collapse:hover { color: #ffffff; background: linear-gradient(120deg, #c77e00, #5b4cff); border-color: transparent; }
.worker-tab-panel {
  border: 1px solid rgba(91, 76, 255,0.13); border-radius: 14px; padding: 13px;
  background: radial-gradient(circle at 78% 0%, rgba(91, 76, 255,0.08), transparent 32%), rgba(36, 31, 63, 0.036);
}
.worker-tab-copy { display: grid; gap: 9px; }
.worker-tab-copy b { color: var(--ink); font-size: 14px; }
.worker-tab-copy p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.worker-detail-stats, .worker-safe-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px;
}
.worker-detail-stats span, .worker-safe-row span {
  border: 1px solid rgba(255,255,255,0.075); border-radius: 12px; padding: 9px;
  background: rgba(36, 31, 63, 0.04); color: var(--dim); font-size: 11px;
}
.worker-detail-stats b { display: block; color: var(--neon); font: 900 15px "Instrument Sans", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-detail-stats i { display: block; margin-top: 2px; font-style: normal; }
.worker-safe-row span { color: var(--ink); font: 700 10.5px "Spline Sans Mono", monospace; }
.worker-network-panel { display: grid; gap: 12px; }
.worker-network-head {
  display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.worker-network-head b { color: var(--ink); font-size: 14px; }
.worker-network-head span { color: var(--dim); font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.worker-layer-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.worker-layer-grid span {
  position: relative; overflow: hidden; border: 1px solid rgba(91, 76, 255,0.12); border-radius: 12px; padding: 10px;
  background: linear-gradient(145deg, rgba(91, 76, 255,0.07), rgba(36, 31, 63, 0.032));
}
.worker-layer-grid span::after {
  content: ""; position: absolute; inset: auto 10px 8px 10px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--neon), transparent);
  opacity: 0.5;
}
.worker-layer-grid b { display: block; color: var(--neon); font: 900 20px "Instrument Sans", sans-serif; }
.worker-layer-grid i { color: var(--dim); font: 800 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.09em; font-style: normal; }
.worker-synapse-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.worker-synapse-list article {
  border: 1px solid rgba(91, 76, 255,0.11); border-radius: 12px; padding: 10px;
  background: rgba(36, 31, 63, 0.036);
}
.worker-synapse-list b { display: block; color: var(--ink); font-size: 12.5px; }
.worker-synapse-list p { margin: 5px 0; color: var(--dim); font: 700 10px "Spline Sans Mono", monospace; line-height: 1.35; }
.worker-synapse-list span { color: var(--dim); font-size: 11px; }
.worker-subagent-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.worker-subagent-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start;
  border: 1px solid rgba(91, 76, 255,0.11); border-radius: 13px; padding: 10px;
  background: rgba(91, 76, 255,0.035);
}
.worker-subagent-row .wf-avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 10px; }
.worker-subagent-row b { display: block; color: var(--ink); font-size: 12.5px; }
.worker-subagent-row i { display: block; color: var(--dim); font-size: 10.5px; font-style: normal; }
.worker-subagent-row p { margin: 5px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.35; }
.worker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.worker-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.worker-card.is-subagent {
  border-color: rgba(91, 76, 255,0.14);
  background: radial-gradient(circle at 82% 10%, rgba(91, 76, 255,0.07), transparent 32%), rgba(255, 255, 255,0.58);
}
.worker-card.is-subagent .worker-card-visual { height: 22px; opacity: 0.72; }
.worker-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 12%, rgba(91, 76, 255,0.1), transparent 28%);
}
.worker-card-top { position: relative; display: flex; align-items: center; gap: 10px; }
.wf-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px;
  border: 1px solid rgba(91, 76, 255,0.3); color: var(--ink); font: 800 13px "Spline Sans Mono", monospace;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.49), rgba(91, 76, 255,0.12) 48%, rgba(255, 255, 255,0.98));
  box-shadow: 0 0 22px rgba(91, 76, 255,0.12);
}
.wf-avatar-needs-approval, .wf-avatar-approval { border-color: rgba(199, 126, 0,0.4); box-shadow: 0 0 22px rgba(199, 126, 0,0.12); }
.wf-avatar-blocked { border-color: rgba(224, 52, 94,0.38); box-shadow: 0 0 22px rgba(224, 52, 94,0.12); }
.wf-avatar-human { border-color: rgba(180, 75, 240,0.34); box-shadow: 0 0 22px rgba(180, 75, 240,0.12); }
.wf-avatar-working { border-color: rgba(91, 76, 255,0.42); box-shadow: 0 0 24px rgba(91, 76, 255,0.16); }
.wf-avatar-reviewing { border-color: rgba(180, 75, 240,0.36); box-shadow: 0 0 22px rgba(180, 75, 240,0.13); }
.wf-avatar-waiting-approval { border-color: rgba(199, 126, 0,0.45); box-shadow: 0 0 22px rgba(199, 126, 0,0.15); }
.worker-id { flex: 1; min-width: 0; display: grid; gap: 3px; }
.worker-id b { color: var(--ink); font-size: 15px; }
.worker-id i { color: var(--dim); font-size: 11.5px; font-style: normal; line-height: 1.35; overflow-wrap: anywhere; }
.worker-status {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 8px;
  background: rgba(91, 76, 255,0.08); color: var(--ink); font: 700 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em;
}
.worker-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.worker-reviewing .worker-status span { background: #b44bf0; box-shadow: 0 0 10px rgba(180, 75, 240,0.55); }
.worker-waiting-approval .worker-status, .worker-waiting-approval .worker-status span { color: var(--warn); }
.worker-waiting-approval .worker-status span { background: var(--warn); box-shadow: 0 0 10px rgba(199, 126, 0,0.6); }
.worker-offline .worker-status, .worker-offline .worker-status span { color: #c22b52; }
.worker-offline .worker-status span { background: var(--risk); box-shadow: 0 0 10px rgba(224, 52, 94,0.58); }
.worker-dept {
  position: relative; width: max-content; max-width: 100%; border: 1px solid rgba(91, 76, 255,0.2); border-radius: 999px;
  padding: 5px 9px; color: var(--neon); background: rgba(91, 76, 255,0.07);
  font: 800 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.worker-parent { position: relative; margin: -4px 0 0; color: var(--dim-2); font: 700 10.5px "Spline Sans Mono", monospace; }
.worker-task { position: relative; margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.worker-capacity { position: relative; display: grid; gap: 6px; }
.worker-capacity span { color: var(--dim); font-size: 11.5px; }
.worker-capacity b { color: var(--ink); }
.worker-capacity i { height: 7px; border-radius: 999px; background: rgba(91, 76, 255,0.1); overflow: hidden; }
.worker-capacity i::before { content: ""; display: block; width: var(--worker-cap); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--neon), #b44bf0); }
.worker-productivity {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
}
.worker-productivity span {
  border: 1px solid rgba(255,255,255,0.075); border-radius: 12px; padding: 8px;
  background: rgba(36, 31, 63, 0.036); color: var(--dim); font-size: 11px; line-height: 1.25;
}
.worker-productivity b { display: block; color: var(--ink); font: 900 16px "Instrument Sans", sans-serif; }
.worker-tags, .worker-facts, .worker-actions, .worker-subagents { position: relative; display: flex; flex-wrap: wrap; gap: 7px; }
.worker-tags span, .worker-facts span, .worker-subchip {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--dim); background: rgba(36, 31, 63, 0.036);
  font: 600 10px "Spline Sans Mono", monospace;
}
.worker-subagents { align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.worker-subagents small { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.worker-human-note { position: relative; margin: 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
.worker-actions { margin-top: auto; }
.worker-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }
.worker-preview-panel {
  position: relative; display: grid; gap: 12px; margin-top: 2px; padding: 14px;
  border: 1px solid rgba(91, 76, 255,0.28); border-radius: 15px;
  background: linear-gradient(145deg, rgba(91, 76, 255,0.1), rgba(36, 31, 63, 0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.worker-preview-panel h4 { margin: 0; color: var(--ink); font-size: 15px; }
.worker-preview-panel ol { margin: 0; padding-left: 18px; color: var(--dim); font-size: 12px; line-height: 1.55; }
.worker-preview-safe {
  margin: 0; border: 1px solid rgba(199, 126, 0,0.22); border-radius: 12px; padding: 10px 11px;
  background: rgba(199, 126, 0,0.07); color: #7a5200; font-size: 11.5px; line-height: 1.45;
}
.worker-preview-panel .worker-actions { margin-top: 0; }
.worker-flow-card {
  display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr); gap: 14px; align-items: stretch;
  border: 1px solid rgba(91, 76, 255,0.18); border-radius: 18px; padding: 16px; margin: 14px 0;
  background: radial-gradient(circle at 12% 16%, rgba(91, 76, 255,0.08), transparent 32%), rgba(36, 31, 63, 0.036);
}
.worker-flow-card h4 { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: 0; }
.worker-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.worker-flow-steps article {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: rgba(91, 76, 255,0.045);
}
.worker-flow-steps article::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--neon), #b44bf0);
}
.worker-flow-steps b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 5px; }
.worker-flow-steps span { display: block; color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.worker-grid-client .worker-facts span:nth-child(3) { display: none; }
@media (max-width: 900px) {
  .workers-hero { grid-template-columns: 1fr; }
  .worker-routing-panel { grid-template-columns: 1fr; }
  .worker-routing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-routing-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .worker-shell-card.is-open { grid-column: 1 / -1; }
  .worker-detail-stats, .worker-safe-row { grid-template-columns: 1fr; }
  .worker-flow-card { grid-template-columns: 1fr; }
  .worker-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-mesh { grid-template-columns: 1fr; }
  .worker-mesh-stage {
    min-height: 0; overflow: visible; padding: 16px;
  }
  .worker-mesh-rings, .worker-cell-field, .worker-thread { display: none; }
  .worker-core {
    position: relative; inset: auto; transform: none; width: auto; height: auto; min-height: 76px;
    grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-content: center; place-items: center start;
    gap: 4px 10px; padding: 12px 14px; margin: 0 0 12px; border-radius: 18px;
  }
  .worker-core span { grid-row: 1 / span 2; }
  .worker-core b { margin: 0; font-size: 15px; }
  .worker-swarm-dot { transform: rotate(var(--orbit-angle)) translateX(118px) scale(0.68); }
  .worker-node-field {
    position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  }
  .worker-node, .worker-node.is-subagent {
    position: relative; top: auto; left: auto; width: 100%; min-width: 0; min-height: 76px;
    transform: none !important; animation: none; padding: 10px 8px; opacity: 1;
  }
  .worker-node.is-subagent { border-style: solid; }
  .worker-mesh-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .worker-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-filter-propose { margin-left: 0; }
}
@media (max-width: 560px) {
  .worker-map-view { display: flex; flex-direction: column; }
  .worker-map-view > .worker-mesh { order: 1; margin: 12px 0; }
  .worker-map-view > .worker-map-detail { order: 2; margin: 0 0 12px; }
  .worker-map-view > .worker-baseline { order: 3; }
  .worker-baseline { grid-template-columns: 1fr; padding: 12px; }
  .worker-baseline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-baseline-unavailable { grid-template-columns: 1fr auto; }
  .worker-baseline-local { grid-template-columns: 1fr; }
  .worker-department { padding: 11px; border-radius: 16px; }
  .worker-routing-cards, .worker-routing-proof { grid-template-columns: 1fr; }
  .worker-department-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .worker-shell-grid { grid-template-columns: 1fr; }
  .worker-shell-main { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; padding: 11px; }
  .worker-shell-status { grid-column: 2 / -1; width: max-content; max-width: 100%; }
  .worker-shell-meta { min-width: 48px; padding: 6px 7px; }
  .worker-shell-expand { padding: 0 11px 11px; }
  .worker-tab-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .worker-tab-row::-webkit-scrollbar { display: none; }
  .worker-tab { flex: 0 0 auto; }
  .worker-tab-collapse { margin-left: 0; }
  .worker-layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .worker-subagent-list { grid-template-columns: 1fr; }
  .worker-grid { grid-template-columns: 1fr; }
  .worker-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .worker-filter-row::-webkit-scrollbar { display: none; }
  .worker-filter { flex: 0 0 auto; }
  .worker-flow-steps { grid-template-columns: 1fr; }
  .worker-productivity { grid-template-columns: 1fr 1fr; }
  .worker-productivity span:last-child { grid-column: 1 / -1; }
  .worker-mesh-stage {
    position: relative; min-height: clamp(350px, 94vw, 410px); overflow: hidden; padding: 0; border-radius: 18px;
    background:
      radial-gradient(circle at 50% 50%, rgba(91, 76, 255,0.19), transparent 27%),
      radial-gradient(circle at 20% 18%, rgba(180, 75, 240,0.09), transparent 24%),
      var(--glass);
  }
  .worker-mesh-rings { display: block; inset: 8%; }
  .worker-thread {
    display: block; width: var(--node-mobile-radius); transform: rotate(var(--node-angle, 0deg));
  }
  .worker-core {
    position: absolute; inset: 50% auto auto 50%; width: 78px; height: 78px; min-height: 0; margin: 0; padding: 0;
    transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr; place-items: center; align-content: center;
    gap: 2px; border-radius: 50%;
  }
  .worker-core span { grid-row: auto; padding: 3px 6px; font-size: 9px; }
  .worker-core b { margin: 2px 0 0; font-size: 11px; }
  .worker-core i { font-size: 6px; letter-spacing: .08em; }
  .worker-swarm-dot { transform: rotate(var(--orbit-angle)) translateX(88px) scale(0.62); }
  .worker-node-field { position: absolute; inset: 0; display: block; padding: 0; }
  .worker-node, .worker-node.is-subagent {
    position: absolute; top: 50%; left: 50%; width: 58px; min-width: 0; min-height: 56px; padding: 6px 4px;
    transform: translate(-50%, -50%) rotate(var(--node-angle, 0deg)) translateX(var(--node-mobile-radius)) rotate(calc(-1 * var(--node-angle, 0deg))) !important;
    border-radius: 13px; animation: workerFloat 4.6s ease-in-out infinite; animation-delay: var(--node-delay); opacity: 1;
  }
  .worker-node.is-subagent { width: 43px; min-height: 43px; padding: 4px 3px; }
  .worker-node-orb { width: 27px; height: 27px; border-radius: 10px; font-size: 8px; }
  .worker-node.is-subagent .worker-node-orb { width: 23px; height: 23px; border-radius: 9px; font-size: 7px; }
  .worker-node-label { max-width: 52px; font-size: 8px; }
  .worker-node.is-subagent .worker-node-label, .worker-node i { display: none; }
  .worker-mesh-readout { grid-template-columns: 1fr; }
  .worker-mesh-foot { display: grid; gap: 10px; }
  .worker-web-legend { gap: 8px 12px; margin-top: 4px; font-size: 10px; }
  .worker-map-detail { padding: 13px; border-radius: 16px; }
  .worker-map-detail.is-empty { grid-template-columns: 1fr; }
  .worker-map-detail-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .worker-map-detail-head .worker-shell-status { grid-column: 2; width: max-content; max-width: 100%; }
  .worker-metrics { grid-template-columns: 1fr; }
  .worker-card-top { align-items: flex-start; }
  .worker-status { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .worker-mesh-rings span, .worker-node, .worker-cell-dot, .worker-card-visual span, .worker-swarm-dot { animation: none !important; }
}
.tool-spine-grid, .tool-spine-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tool-spine-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}
.tool-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(91, 76, 255, 0.22);
  background:
    radial-gradient(circle at 18% 12%, rgba(91, 76, 255, 0.13), transparent 34%),
    var(--glass);
}
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(91, 76, 255, 0.09), transparent);
  transform: translateX(-120%);
  animation: toolSweep 7s ease-in-out infinite;
}
.tool-mode-active, .tool-mode-available, .tool-mode-planning, .tool-mode-owner-controlled { box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.24), 0 0 22px rgba(91, 76, 255, 0.08); }
.tool-mode-setup-ready { border-color: rgba(199, 126, 0, 0.34); }
.tool-mode-standby { border-color: rgba(199, 126, 0, 0.34); }
.tool-mode-gated { border-color: rgba(224, 52, 94, 0.32); }
.tool-mode-sandbox { border-color: rgba(135, 122, 255, 0.24); opacity: 0.96; }
.tool-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--dim);
  font: 700 10.5px/1.35 "Spline Sans Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tool-meta span:last-child {
  max-width: 66%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.76;
}
@keyframes toolSweep {
  0%, 60% { transform: translateX(-120%); opacity: 0; }
  68% { opacity: 1; }
  86%, 100% { transform: translateX(120%); opacity: 0; }
}
.approval-card { border-color: rgba(199, 126, 0, 0.35); }
.approval-changes-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid rgba(199, 126, 0,0.35); border-radius: 12px; background: rgba(199, 126, 0,0.05); }
.approval-changes-form label { font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn); }
.approval-changes-form textarea {
  width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06);
  color: var(--ink); padding: 8px 10px; font-size: 12.5px; outline: none;
}
.approval-changes-form textarea:focus { border-color: var(--warn); }
.admin-ws-stats { font: 400 11.5px "Spline Sans Mono", monospace; color: var(--dim); }

/* phantom console */
.phantom-console { display: flex; flex-direction: column; gap: 14px; min-height: min(58vh, 560px); }
.phantom-log { flex: 1; overflow-y: auto; display: grid; gap: 16px; align-content: start; padding: 4px 2px; }
.phantom-hello { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.6; max-width: 620px; }
.phantom-entry { display: grid; gap: 8px; justify-items: start; }
.phantom-user { margin: 0; font: 500 13px "Spline Sans Mono", monospace; color: var(--dim); }
.phantom-reply { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 720px; }
.phantom-entry .rcard { max-width: 460px; }
.chat-media { width: min(100%, 520px); margin: 2px 0 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(36, 31, 63, 0.08); }
.chat-media-frame { position: relative; overflow: hidden; background: rgba(8, 6, 18, 0.72); }
.chat-media img, .chat-media video { display: block; width: 100%; max-height: min(54vh, 440px); object-fit: contain; background: #090711; }
.chat-media figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; color: var(--ink); font: 600 11px "Spline Sans Mono", monospace; }
.chat-media figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-media figcaption b { flex: 0 0 auto; color: var(--neon-2); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.chat-media[data-chat-media-status="preview"] figcaption b { color: var(--warn); }
.chat-media[data-chat-media-status="queued"] figcaption b { color: var(--neon); }

/* ---------------- phantom ai (chat / memory / activity tabs) ---------------- */
/* Base styling for the previously-orphaned phantomai.js panel. The narrow
   @media (min-width: 1181px) overrides further below (search
   ".console:not(.console-workspace) .phantomai-tabs") only shrink padding
   and font-size at that breakpoint and keep working unchanged on top of
   this base layer. */
.phantomai { display: flex; flex-direction: column; gap: 14px; min-height: min(64vh, 620px); }
.phantomai-tabs {
  display: flex; gap: 6px; padding: 4px; width: fit-content;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(36, 31, 63, 0.044);
}
.phantomai-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 10px;
  background: transparent; color: var(--dim); font: 600 12px "Spline Sans Mono", monospace; letter-spacing: 0.03em;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.phantomai-tab:hover { color: var(--ink); }
.phantomai-tab.is-active { background: rgba(91, 76, 255,0.12); color: var(--neon); box-shadow: inset 0 0 0 1px var(--line-strong); }
.phantomai-tab[hidden] { display: none; }
.phantomai-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.phantomai-pane[hidden] { display: none; }

.phantomai-chat {
  display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0;
  border: 1px solid var(--line); border-radius: 18px; padding: 16px;
  background: var(--glass);
}
.phantomai-chat-log { flex: 1; overflow-y: auto; display: grid; gap: 16px; align-content: start; padding: 4px 2px; min-height: 240px; }
.phantomai-chat-hello { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.6; max-width: 620px; }
.phantomai-chat-entry { display: grid; gap: 8px; justify-items: start; }
.phantomai-chat-user { margin: 0; font: 500 13px "Spline Sans Mono", monospace; color: var(--dim); }
.phantomai-chat-reply { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 720px; }
.phantomai-chat-status { margin: 0; font: 500 11px "Spline Sans Mono", monospace; letter-spacing: 0.04em; color: var(--neon-2); }
.phantomai-chat-entry .rcard { max-width: 460px; }
.phantomai-chat-form { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.phantomai-chat-input {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.06); color: var(--ink);
  padding: 10px 14px; font-size: 13.5px; outline: none;
}
.phantomai-chat-input:focus { border-color: var(--line-strong); }

/* ---- PhantomBot attachments (drag-drop photos & documents) ---- */
.phantomai-chat { position: relative; }
.phantomai-attach {
  flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(36, 31, 63, 0.06); color: var(--ink); font-size: 17px; cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, background .15s;
}
.phantomai-attach:hover, .phantomai-attach:focus-visible { border-color: var(--neon); background: rgba(65, 255, 161, 0.08); outline: none; }
.phantomai-attbar { display: flex; }
.phantomai-pending { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 2px 8px; width: 100%; }
.phantomai-pending[hidden] { display: none; }
.phantomai-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 6px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--glass-2); font-size: 12px; max-width: 240px;
}
.phantomai-chip img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.phantomai-chip span { font-size: 16px; }
.phantomai-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.phantomai-chip i { color: var(--dim); font-style: normal; font-size: 10px; }
.phantomai-chip button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.phantomai-chip button:hover { color: #e0345e; }
.phantomai-drop-overlay {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; border-radius: 18px;
  background: rgba(6, 12, 18, 0.82); border: 2px dashed var(--neon); text-align: center; pointer-events: none;
}
.phantomai-drop-overlay[hidden] { display: none; }
.phantomai-drop-overlay b { display: block; color: var(--neon); font-size: 18px; margin-bottom: 4px; }
.phantomai-drop-overlay span { color: var(--dim-2); font-size: 13px; }
.phantomai-att {
  margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-2); padding: 10px 12px; max-width: 520px; width: 100%;
}
.phantomai-att-head { display: flex; align-items: center; gap: 11px; }
.phantomai-att-head b { display: block; font-size: 13px; }
.phantomai-att-head span { display: block; color: var(--dim); font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.phantomai-att-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.phantomai-att-icon { font-size: 32px; flex: 0 0 auto; width: 54px; text-align: center; }
.phantomai-att-findings { margin: 9px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.phantomai-att-findings li { font-size: 12px; color: var(--dim-2); line-height: 1.45; }
.rcard-invoice { border-color: rgba(65, 255, 161, 0.4); background: linear-gradient(160deg, rgba(65,255,161,0.06), transparent 60%); }

.phantomai-memory-mount, .phantomai-activity-mount { flex: 1; min-height: 0; }

/* ---------------- mobile ---------------- */
@media (max-width: 980px) {
  .deck-body { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .crm-command { grid-template-columns: 1fr; }
  .crm-layout { grid-template-columns: 1fr; }
  .crm-detail { position: static; }
  .lead-intel { grid-template-columns: 1fr; }
  .lane-row { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .mission-map-body { grid-template-columns: 1fr; }
  .mission-map-road { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .crm-command { padding: 14px; border-radius: 15px; }
  .crm-automation-heading { align-items: flex-start; }
  .crm-automation-heading > span { display: grid; gap: 2px; }
  .crm-automation-switches { grid-template-columns: 1fr; }
  .au-client-managed-panel { align-items: stretch; flex-direction: column; }
  .crm-toolbar { display: grid; grid-template-columns: 1fr; }
  .crm-search, .crm-filter { width: 100%; min-width: 0; }
  .crm-card { grid-template-columns: 48px minmax(0, 1fr); padding-right: 40px; }
  .crm-card>b { grid-column: 2; }
  .crm-avatar { width: 46px; height: 46px; border-radius: 13px; }
  .crm-detail-grid { grid-template-columns: 1fr; }
  .lead-intel { padding: 14px; border-radius: 15px; }
  .lead-intel-form { grid-template-columns: 1fr; }
  .lead-intel-form input { min-height: 44px; }
  .lead-intel-form .btn { width: 100%; min-height: 42px; }
  .lane-row {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .mission-map-road { grid-template-columns: 1fr; }
  .mission-map-prompt { grid-template-columns: 1fr; }
  .mission-map-prompt small { white-space: normal; }
  .gate {
    align-items: start;
    justify-items: center;
    padding: max(18px, env(safe-area-inset-top)) 12px 18px;
  }
  .gate * {
    max-width: 100%;
    min-width: 0;
  }
  .gate-card {
    width: min(calc(100vw - 48px), 320px) !important;
    max-width: 320px;
    padding: 24px;
    border-radius: 24px;
    overflow: hidden;
  }
  .gate-kicker {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .gate-card h1 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.05;
  }
  .owner-login, .owner-login label, .owner-login input, .gate-submit, .gate-opt {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .owner-login input {
    padding: 16px 17px;
  }
  .gate-opt {
    padding: 18px 16px;
  }
  .gate-opt i, .gate-opt b, .gate-opt em, .gate-note {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .phantom { width: 100%; overflow-x: hidden; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .brand-word { letter-spacing: 0.22em; font-size: 11.5px; }
  .brand-sub { display: none; }
  .topbar-mid { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .org-switch { width: 100%; }
  .org-switch span { flex: 0 0 auto; }
  .org-switch select { flex: 1; min-width: 0; max-width: 100%; }
  .identity { display: none; }
  .ticker { padding: 7px 12px; gap: 8px; font-size: 11px; }
  .ticker-tag { display: none; }
  .ticker-line { min-width: 0; }
  .deck { width: 100%; padding: 0 12px 28px; overflow-x: hidden; }
  .command-hero { width: 100%; padding-top: 8px; gap: 10px; }
  .ghost-canvas { top: -6px; width: min(260px, 70vw); height: 128px; opacity: 0.84; }
  .hero-say { width: 100%; margin-top: 116px; min-height: 3.2em; padding-inline: 2px; }
  .say-line {
    width: 100%;
    max-width: calc(100vw - 24px);
    font-size: clamp(18px, 6vw, 24px);
    line-height: 1.15;
    letter-spacing: 0;
    text-wrap: balance;
  }
  .speakline {
    width: 100%;
    min-height: 58px;
    padding: 15px 18px;
    align-items: center;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .speakline input { height: 28px; min-height: 28px; font-size: 16px; line-height: 28px; }
  .speak-caret { height: 28px; line-height: 28px; }
  .suggests {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 0 2px 7px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .suggests::-webkit-scrollbar, .mission-grid::-webkit-scrollbar { display: none; }
  .suggest { flex: 0 0 auto; font-size: 11px; padding: 7px 12px; scroll-snap-align: start; }
  .flowmap { margin-top: 18px; }
  .flow-head { align-items: center; }
  .flow-head h2 { font-size: 19px; }
  .flow-map-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .flow-stage { border-radius: 18px; }
  .flow-stage::before { background-size: 30px 30px; }
  .deck-body { display: block; width: 100%; margin-top: 16px; }
  .deck-label { margin-left: 2px; }
  .mission-grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    width: 100%;
    padding: 0 2px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .tool-spine-grid, .tool-spine-compact { grid-template-columns: 1fr; }
  .widget {
    flex: 0 0 min(76vw, 278px);
    min-height: 108px;
    padding: 14px 13px 13px;
    border-radius: 15px;
    scroll-snap-align: start;
  }
  .widget-title { font-size: 13px; }
  .rail { grid-template-columns: 1fr; margin-top: 12px; width: 100%; }
  .rail-block { max-width: 100%; overflow: hidden; }
  .rail-item { min-width: 0; }
  .rail-item span { min-width: 0; overflow-wrap: anywhere; }
  .overlay { padding: 8px; align-items: end; }
  .overlay-panel { max-height: calc(100dvh - 16px); border-radius: 22px; }
  .overlay-head { padding: 16px 16px 12px; }
  .overlay-body { padding: 14px 14px 22px; }
  .stat b { font-size: 19px; }
  .kv span { flex-basis: 108px; }
  .gate-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .speakline-hero::before, .ticker-tag, .speak-caret, .say-line, .rcard, .overlay-panel, .widget-alert::before, .tool-card::before, .flow-halo, .flow-live i, .flow-node, .flow-spark, .flow-edge-watch, .flow-stage::before, .flow-stage::after { animation: none !important; }
  .flow-edge-pulse { animation: none !important; stroke-dasharray: none; opacity: 0.3; }
  .ghost-canvas { display: none; }
  .phantom, .widget, .btn, .overlay-x { transition: none; }
}

/* ============================================================= */
/* ===============  PHASE 2 — AI OPERATIONS CONSOLE  =========== */
/* ============================================================= */
.ic { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.empty-line { margin: 0; color: var(--dim); font-size: 12.5px; }

/* shell: sidebar + main (overrides the old column .phantom) */
.phantom { display: flex; flex-direction: row; min-height: 100vh; align-items: stretch; }
.app-main { flex: 1 1 auto; min-width: 0; max-width: 100%; display: flex; flex-direction: column; overflow-x: hidden; }

/* ---------------- sidebar ---------------- */
.sidebar {
  flex: 0 0 214px; width: 214px; position: sticky; top: 0; align-self: flex-start;
  height: 100vh; display: flex; flex-direction: column; gap: 10px; padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.side-brand { display: flex; align-items: center; gap: 9px; padding: 3px 7px 8px; border-bottom: 1px solid var(--line); }
.side-brand .brand-ghost { width: 27px; height: 27px; }
.side-brand-text b { display: block; font: 600 11.5px "Instrument Sans", sans-serif; letter-spacing: 0.11em; }
.side-brand-text i { display: block; margin-top: 1px; font: 500 7px "Spline Sans Mono", monospace; font-style: normal; letter-spacing: 0.14em; color: var(--dim); }
.side-toggle { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  min-height: 38px; padding: 7px 9px; border-radius: 10px; border: 1px solid transparent; background: none;
  color: var(--dim); font: 600 12.25px "Instrument Sans", sans-serif;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.nav-item .ic { width: 15px; height: 15px; flex: 0 0 15px; }
.nav-item:hover { background: rgba(91, 76, 255, 0.06); color: var(--ink); }
.nav-item-bottom:first-of-type, .nav-item:not(.nav-item-bottom) + .nav-item-bottom {
  margin-top: auto;
  position: relative;
}
.nav-item:not(.nav-item-bottom) + .nav-item-bottom::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 76, 255,0.22), transparent);
}
.nav-item-bottom {
  background: rgba(255,255,255,0.018);
  color: var(--ink);
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.nav-item-quiet {
  opacity: 0.78;
}
.nav-item-quiet:not(.is-active):hover {
  opacity: 1;
}
.nav-item-disabled {
  order: 99;
  opacity: 0.42;
  filter: saturate(0.55);
}
.nav-item-disabled:not(.is-active):hover {
  opacity: 0.68;
  filter: saturate(0.75);
}
.nav-item-disabled.is-active {
  opacity: 0.72;
  filter: saturate(0.72);
}
.nav-item.is-active {
  background: linear-gradient(120deg, rgba(91, 76, 255, 0.9), rgba(56, 21, 217, 0.9));
  color: #ffffff; font-weight: 600; box-shadow: 0 6px 20px rgba(91, 76, 255, 0.22);
}
.nav-badge {
  margin-left: auto; font: 600 10px "Spline Sans Mono", monospace; min-width: 18px; text-align: center;
  padding: 1px 6px; border-radius: 999px; background: var(--warn); color: #fff4dc;
}
.nav-item.is-active .nav-badge { background: var(--glass); color: #ffffff; }
.nav-pill {
  margin-left: auto; font: 700 8px "Spline Sans Mono", monospace; letter-spacing: 0.04em; min-width: 18px; text-align: center;
  padding: 1px 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(36, 31, 63, 0.06); color: var(--dim);
}
.nav-pill.is-on { color: #ffffff; background: var(--neon); border-color: transparent; box-shadow: 0 0 10px rgba(91, 76, 255,0.5); animation: navPillPulse 2.4s ease-in-out infinite; }
.nav-pill.is-off { color: var(--dim); }
.nav-pill.is-unknown { opacity: 0.5; }
.nav-pill.is-locked { color: var(--dim); border-color: rgba(199, 126, 0, 0.24); background: rgba(199, 126, 0, 0.06); }
.nav-item.is-active .nav-pill:not(.is-on) { border-color: rgba(255, 255, 255,0.35); color: rgba(255, 255, 255,0.6); }
@keyframes navPillPulse { 0%, 100% { box-shadow: 0 0 10px rgba(91, 76, 255,0.5); } 50% { box-shadow: 0 0 4px rgba(91, 76, 255,0.25); } }
.side-plan { margin-top: auto; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--glass); }
.side-account-card { display: flex; flex-direction: column; gap: 12px; }
.side-profile-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.side-profile-avatar {
  position: relative; width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(91, 76, 255, 0.42);
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.53), rgba(91, 76, 255, 0.16) 38%, rgba(255, 255, 255, 0.92));
  color: var(--ink); font: 700 13px "Instrument Sans", sans-serif; letter-spacing: 0.08em;
  box-shadow: inset 0 0 18px rgba(91, 76, 255, 0.12), 0 0 22px rgba(91, 76, 255, 0.16);
}
.side-profile-main { min-width: 0; }
.side-plan-kicker { margin: 0 0 5px; font: 500 8.5px "Spline Sans Mono", monospace; letter-spacing: 0.2em; color: var(--dim); }
.side-profile-name { margin: 0; font-size: 14.5px; line-height: 1.1; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-profile-status { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 11px; color: var(--dim); }
.side-profile-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.side-profile-status.is-error { color: #c22b52; }
.side-profile-status.is-error .side-profile-dot { background: #e0345e; box-shadow: 0 0 10px rgba(224, 52, 94, 0.7); }
.side-plan-meta { display: grid; gap: 3px; padding: 10px 0 0; border-top: 1px solid rgba(91, 76, 255, 0.12); }
.side-plan-meta span:first-child { font-size: 15px; font-weight: 700; color: var(--neon); }
.side-plan-meta span:last-child { font-size: 11px; color: var(--dim); }
.side-plan-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--neon); }
.side-plan-renew { margin: 2px 0 12px; font-size: 11px; color: var(--dim); }
.side-plan-btn {
  width: 100%; padding: 9px 12px; border-radius: 11px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-strong); background: rgba(91, 76, 255, 0.07); color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.side-plan-btn:hover { border-color: var(--neon); background: rgba(91, 76, 255, 0.14); }

/* ---------------- topbar ----------------
   above the dedicated mobile breakpoint (900px), this row must never wrap —
   a wrapped user pill reads as broken, not responsive. Everything left of
   the clock is allowed to shrink/truncate; clock, notifications, and the
   user menu are pinned and never compress. */
/* Three-zone topbar: left (workspace + status), center (search/command),
   right (media chip · clock · notifications · user). A grid keeps the search
   bar optically centred regardless of how wide the flanking clusters get,
   and each zone can shrink independently before anything collides. */
.topbar2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 560px) minmax(0, 1fr);
  align-items: center; gap: clamp(12px, 1.6vw, 22px);
  width: 100%; min-width: 0;
  padding: 12px clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--line);
  background: var(--glass);
  position: sticky; top: 0; z-index: 20;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.topbar-zone { display: flex; align-items: center; min-width: 0; gap: 10px; }
.topbar-left { justify-content: flex-start; }
.topbar-center { justify-content: center; }
.topbar-right { justify-content: flex-end; }
/* Browser zoom changes the effective CSS width, so every left-side topbar
   group must be allowed to shrink before it crashes into clock/user controls. */
.status-pills { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; min-width: 0; flex: 0 1 auto; }
.topbar-center .cmdk-open {
  flex: 1 1 auto; width: 100%; max-width: 560px;
  padding: 10px 12px 10px 15px; border-radius: 13px;
}
.topbar-center .cmdk-open .cmdk-open-label { font-size: 13.5px; }
/* The centred search is a real bar at every desktop/tablet width, so keep its
   placeholder visible — override the legacy icon-collapse rules that hid the
   label when the search lived crammed in the right cluster. Below 901px the
   bar folds to a 42px icon (mobile block) and the label hides again. */
@media (min-width: 901px) {
  .topbar-center .cmdk-open { flex: 1 1 auto; width: 100%; padding: 10px 12px 10px 15px; }
  .topbar-center .cmdk-open .cmdk-open-label { display: block; }
}
.topbar-right .topbar-clock { margin-left: clamp(4px, 0.6vw, 12px); }
.pill { display: flex; flex-direction: column; gap: 2px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); min-width: 0; }
.status-pills .pill { flex: 0 1 178px; }
.pill-link { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pill-link:hover, .pill-link:focus-visible { border-color: var(--line-strong); background: rgba(91, 76, 255,0.08); outline: none; }
.pill-k { font: 500 8px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pill-v { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink); min-width: 0; }
/* text-overflow: ellipsis has no effect on a flex container's own box, only
   on a block/inline content box, so the truncatable text lives in its own
   child span rather than directly inside the flex .pill-v. */
.pill-v-text { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill-v .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: livePulse 2.4s ease-in-out infinite; flex: 0 0 auto; }
.pill-warn .pill-v { color: var(--warn); }
.pill-warn .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.pill-v .lock { font-size: 11px; }
.ws-switch { display: inline-flex; min-width: 0; flex: 0 1 180px; }
.ws-switch select {
  appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 170px;
  padding: 8px 30px 8px 13px; border-radius: 12px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, var(--neon) 50%), linear-gradient(135deg, var(--neon) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.ws-switch select:focus { outline: none; border-color: var(--neon); }
.ws-switch option { background: var(--glass-2); color: var(--ink); }
.topbar-clock { text-align: right; line-height: 1.2; flex-shrink: 0; }
.topbar-clock b { display: block; font: 600 17px "Instrument Sans", sans-serif; letter-spacing: 0.02em; }
.topbar-clock i { font: 400 11px "Spline Sans Mono", monospace; font-style: normal; color: var(--dim); }
.user-menu-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.topbar-user {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass); color: var(--ink);
  transition: border-color 0.2s;
}
.topbar-user:hover, .topbar-user.is-open { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.06); }
.user-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 12px "Spline Sans Mono", monospace; color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta b { font-size: 13px; font-weight: 600; }
.user-meta i { font-size: 10.5px; font-style: normal; color: var(--dim); }
.user-caret { color: var(--dim); font-size: 10px; }
.user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  width: min(300px, calc(100vw - 24px)); padding: 12px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--glass);
  box-shadow: var(--edge-hi), 0 24px 70px rgba(36, 31, 63, 0.16), 0 0 34px rgba(91, 76, 255, 0.08);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.user-menu[hidden] { display: none; }
.user-menu-head { display: flex; align-items: center; gap: 10px; padding: 3px 2px 10px; }
.user-menu-avatar {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
  color: #ffffff; font: 800 12px "Spline Sans Mono", monospace; background: linear-gradient(120deg, var(--neon), #5b4cff);
}
.user-menu-head b { display: block; font-size: 14px; line-height: 1.1; }
.user-menu-head i { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; font-style: normal; }
.user-menu-plan {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  padding: 12px; border: 1px solid rgba(91, 76, 255, 0.24); border-radius: 14px; cursor: pointer;
  color: var(--ink); background: radial-gradient(120% 120% at 0 0, rgba(91, 76, 255, 0.14), rgba(255,255,255,0.018) 60%);
}
.user-menu-plan i, .user-menu-plan em { display: block; color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.user-menu-plan b { display: block; margin: 3px 0; color: var(--neon); font-size: 16px; }
.user-menu-plan strong { flex: 0 0 auto; color: #ffffff; background: var(--neon); border-radius: 999px; padding: 7px 10px; font-size: 11px; }
.user-menu-plan:hover { border-color: rgba(91, 76, 255, 0.48); background: rgba(91, 76, 255, 0.09); }
.user-menu-status { display: flex; align-items: center; gap: 8px; padding: 10px 4px 8px; color: var(--dim); font-size: 12px; }
.user-menu-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.user-menu-status.is-error { color: #c22b52; }
.user-menu-status.is-error span { background: #e0345e; box-shadow: 0 0 10px rgba(224, 52, 94, 0.7); }
.user-menu-link {
  width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,0.02); color: var(--dim); text-align: left; font-weight: 600;
}
.user-menu-link:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,0.04); }

/* org switcher (database-auth sessions with multiple businesses) */
.user-menu-orgs { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.user-menu-orgs > i { font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding: 0 4px 2px; }
.user-menu-org {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit;
}
.user-menu-org:hover { background: rgba(255,255,255,0.04); border-color: var(--line); }
.user-menu-org.is-active { border-color: rgba(91, 76, 255,0.4); background: rgba(91, 76, 255,0.06); }
.user-menu-org b { font-size: 12.5px; font-weight: 600; }
.user-menu-org span { font-size: 10.5px; color: var(--dim); text-transform: capitalize; }

/* ---------------- console grid ---------------- */
.console { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: clamp(10px, 1vw, 16px); padding: clamp(16px, 1.6vw, 22px); align-items: start; }
.console-center { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); overflow-y: auto; overflow-x: hidden; }
/* dashboard-brief and decision-deck must never be crushed to height:0 by
   hero2's fixed viewport-based height budget below — that silent collapse
   (content still painting via overflow:visible) is what made the Decisions
   header read as overlapped/unreadable. Let the column scroll instead. */
.console-center > .dashboard-brief, .console-center > .decision-deck { flex: none; }
.console-rail { display: flex; flex-direction: column; gap: 16px; }

/* Dashboard (chat + inline map) is a single screen, never a scrolling page —
   it should end at the bottom of the map bar. Scoped to plain .console (not
   .console-workspace, which other pages use and do scroll normally). Content
   that can't fit a very short viewport scrolls inside .console itself, so the
   sidebar/topbar/ticker stay put rather than the whole page moving. */
.app-main:has(> .console:not(.console-workspace)) { height: 100dvh; overflow: hidden; }
.app-main:has(> .console:not(.console-workspace)) .console { min-height: 0; overflow-y: auto; align-content: start; }
/* The right rail's cards (plan/desktop-context/queue/quick-actions) don't
   shrink with viewport height the way the chat does, so on shorter screens
   they can end up taller than the chat+map column. Contain any overflow to
   the rail itself rather than letting it push the console (and the map
   underneath the chat) out of view. */
.app-main:has(> .console:not(.console-workspace)) .console-rail {
  max-height: calc(100vh - 157px);
  overflow-y: auto;
  overflow-x: hidden;
}
.console-workspace {
  display: block;
  padding: clamp(16px, 2vw, 26px);
}
.workspace-page {
  min-height: calc(100vh - 126px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(90% 72% at 72% 18%, rgba(91, 76, 255, 0.07), transparent 62%),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 80px rgba(0, 0, 0, 0.18);
}
.workspace-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
}
.workspace-page-kicker {
  margin: 0 0 4px;
  font: 600 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon);
}
.workspace-page-head h1 {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.workspace-page-body {
  padding: clamp(10px, 1.2vw, 16px);
  overflow: visible;
}
.workspace-page-wide .workspace-page-body {
  padding-inline: clamp(18px, 2vw, 34px);
}
.workspace-page-first {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.workspace-page-first .workspace-page-body { padding: 0; }

/* Full work tabs should feel like app canvases, not cards floating in a page.
   Hide the wire row and let the active surface own the remaining viewport. */
.app-main:has(.workspace-page-first) .phantomwire { display: none; }
@media (min-width: 901px) {
  .app-main:has(.workspace-page-first) {
    height: 100dvh;
    overflow: hidden;
  }

  .app-main:has(.workspace-page-first) .console-workspace-wide {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: clamp(8px, 1vw, 16px);
  }

  .workspace-page-first {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-page-first .workspace-page-body {
    height: 100%;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
  }

  .workspace-page-first .workspace-page-body > :where(.ss-simple, .ml, .ch, .an, .developer-shell, .developer-denied, .au, .vm, .pl, .agentops, .media-suite) {
    width: 100%;
    min-height: 100%;
  }

  .workspace-page-first .workspace-page-body > .media-suite {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-page-first[data-workspace-page="content"] .workspace-page-body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .workspace-page-first[data-workspace-page="content"] .workspace-page-body > .media-suite {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-page-first[data-workspace-page="content"] .media-suite {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .workspace-page-first[data-workspace-page="content"] .media-suite-body {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: thin;
  }

  .workspace-page-first[data-workspace-page="content"] .media-suite-body > .ch {
    min-height: max-content;
    padding-bottom: clamp(24px, 4vh, 56px);
  }
}
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font: 600 12px "Instrument Sans", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.section-link { background: none; border: 0; cursor: pointer; color: var(--neon); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.section-link:hover { text-decoration: underline; }

/* ---------------- hero ---------------- */
.hero2 {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: center; overflow: hidden;
  padding: clamp(16px, 1.8vw, 24px); border: 1px solid var(--line); border-radius: 22px; min-height: 280px;
  background: radial-gradient(80% 90% at 78% 40%, rgba(91, 76, 255, 0.09), transparent 60%), var(--glass);
}
.hero2-copy { position: relative; z-index: 2; min-width: 0; }
.hero2-title { margin: 0 0 8px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.15; letter-spacing: -0.01em; }
.hero2-title span[data-hero-name] { background: linear-gradient(180deg, #9c92ff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.cmd-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 400px; margin-bottom: 16px; }
.cmd-chip {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--glass); color: var(--ink);
  font: 500 13px "Instrument Sans", sans-serif; transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
.cmd-chip .ic { width: 15px; height: 15px; color: var(--neon); }
.cmd-chip:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.cmd-chip.is-active { background: linear-gradient(120deg, var(--neon), #5b4cff); color: #ffffff; border-color: transparent; box-shadow: 0 6px 20px rgba(91, 76, 255, 0.24); }
.cmd-chip.is-active .ic { color: #ffffff; }
.cmd-input {
  display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 7px 7px 7px 18px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(36, 31, 63, 0.064);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cmd-input:focus-within { border-color: var(--neon); box-shadow: 0 0 0 4px rgba(91, 76, 255, 0.1); }
.cmd-input input { flex: 1; min-width: 0; height: 30px; background: none; border: 0; outline: none; color: var(--ink); caret-color: var(--neon); font-size: 15px; }
.cmd-input input::placeholder { color: var(--dim); }
.cmd-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center; color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); box-shadow: 0 0 20px rgba(91, 76, 255, 0.28); transition: transform 0.15s; }
.cmd-send:hover { transform: translateY(-1px); }
.cmd-send .ic { width: 18px; height: 18px; }
.cmd-tools { display: flex; gap: 18px; margin-top: 14px; }
.cmd-tool { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--dim); font-size: 12.5px; }
.cmd-tool:hover { color: var(--neon); }
.hero2 .hero-say {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  max-width: 100%;
  margin: 18px 0 0;
  min-height: 0;
  display: block;
  overflow: visible;
}
.hero2 .hero-say .say-line {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: clamp(13px, 1.45vw, 17px);
  line-height: 1.38;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: normal;
}
.hero2 .hero-say .say-line::after {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 2px;
}
.hero2 .response-cards { position: relative; z-index: 2; justify-content: flex-start; margin-top: 12px; max-width: 640px; }
.hero2-stage { position: relative; min-height: 380px; display: grid; place-items: center; perspective: 1100px; }
.phantom-webgl {
  position: absolute; inset: -5% -4% -3%; z-index: 4; width: 108%; height: 108%; min-height: 400px;
  pointer-events: none; opacity: 0; filter: drop-shadow(0 0 38px rgba(91, 76, 255, 0.24));
  transition: opacity 0.55s ease, filter 0.3s ease;
}
.phantom.has-3d-phantom .phantom-webgl { opacity: 0.7; }
.phantom.has-3d-phantom .hero2-stage { transform-style: preserve-3d; }
.hero2-stage .ghost-canvas {
  position: relative; top: auto; left: auto; transform: none;
  width: 100%; height: 100%; min-height: 380px; max-width: 560px; opacity: 0.98;
  filter: drop-shadow(0 0 30px rgba(91, 76, 255, 0.28));
}
.phantom.has-mode-poses .hero2-stage .ghost-canvas {
  position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; min-height: 380px; max-width: 560px;
  opacity: 0.24; pointer-events: none; mix-blend-mode: screen; transform: scale(0.9);
  filter: blur(0.3px) brightness(1.18) contrast(1.1) drop-shadow(0 0 28px rgba(91, 76, 255, 0.22));
}
.phantom.has-3d-phantom .hero2-stage .ghost-canvas {
  opacity: 0.34 !important;
  filter: blur(0.25px) brightness(1.2) contrast(1.12) drop-shadow(0 0 34px rgba(91, 76, 255, 0.26));
  transform: scale(0.9);
}
.phantom-mode-stage {
  position: relative; z-index: 2; isolation: isolate; width: min(100%, 390px); aspect-ratio: 1;
  display: grid; place-items: center; margin: clamp(22px, 4vw, 44px) auto 0; transform-style: preserve-3d;
  overflow: visible;
}


.phantom-mode-pose {
  position: relative; z-index: 1; width: min(72%, 300px); max-height: min(40vh, 330px);
  object-fit: contain; transform-origin: 50% 76%; mix-blend-mode: screen; opacity: 0.92;
  filter: saturate(1.08) contrast(1.12) brightness(1.05) drop-shadow(0 0 22px rgba(91, 76, 255, 0.28)) drop-shadow(0 26px 54px rgba(36, 31, 63, 0.16));
  animation: phantomPoseFloat 5.6s ease-in-out infinite;
  transition: filter 0.24s ease, opacity 0.2s ease, transform 0.24s ease;
}
.phantom.has-3d-phantom .phantom-mode-pose {
  opacity: 0.94; visibility: visible; transform: translateZ(-18px) scale(1.01);
  filter: saturate(1.2) contrast(1.16) brightness(1.08) drop-shadow(0 0 34px rgba(91, 76, 255, 0.36)) drop-shadow(0 26px 54px rgba(36, 31, 63, 0.147));
}
.phantom-mode-caption {
  position: absolute; left: 50%; top: 0; z-index: 7; transform: translate(-50%, -82%);
  width: max-content; max-width: min(280px, calc(100vw - 42px));
  padding: 8px 12px; border: 1px solid rgba(91, 76, 255, 0.24); border-radius: 999px;
  background: var(--glass); color: var(--ink);
  font: 700 8.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.35;
  box-shadow: 0 0 18px rgba(91, 76, 255, 0.09); backdrop-filter: blur(14px);
}
.phantom.has-3d-phantom .phantom-mode-caption { top: 0; bottom: auto; background: var(--glass); }
.phantom-mode-stage[data-pose="ask"] .phantom-mode-pose { animation-name: phantomPoseListen; }
.phantom-mode-stage[data-pose="write"] .phantom-mode-pose { animation-name: phantomPoseWrite; }
.phantom-mode-stage[data-pose="image"] .phantom-mode-pose { animation-name: phantomPosePresent; }
.phantom-mode-stage[data-pose="video"] .phantom-mode-pose { animation-name: phantomPoseDirect; }
.phantom-mode-stage[data-pose="website"] .phantom-mode-pose { animation-name: phantomPoseBuild; }
.phantom-mode-stage[data-pose="admin"] .phantom-mode-pose { animation-name: phantomPoseCommand; }
.phantom-mode-stage[data-pose="listen"] .phantom-mode-pose { animation-name: phantomPoseListenAlive; }
.phantom-mode-stage[data-pose="think"] .phantom-mode-pose, .phantom-mode-stage[data-pose="typing"] .phantom-mode-pose { animation-name: phantomPoseThinkAlive; }
.phantom-mode-stage[data-pose="talk"] .phantom-mode-pose { animation-name: phantomPoseTalkAlive; }
.phantom-mode-stage[data-pose="happy"] .phantom-mode-pose { animation-name: phantomPoseHappy; }
.phantom-mode-stage[data-pose="alert"] .phantom-mode-pose { animation-name: phantomPoseAlert; }
.phantom-mode-stage[data-pose="answer"] .phantom-mode-pose { animation: phantomPoseAha 1.08s cubic-bezier(0.18, 1.45, 0.32, 1) both; }
.phantom-mode-stage[data-mood="listening"] .phantom-mode-pose {
  opacity: 0.96;
  filter: saturate(1.14) contrast(1.16) brightness(1.1) drop-shadow(0 0 30px rgba(43, 38, 73, 0.34)) drop-shadow(0 24px 48px rgba(36, 31, 63, 0.147));
}
.phantom-mode-stage[data-mood="thinking"] .phantom-mode-pose { animation: phantomPoseThink 0.72s ease-in-out infinite; }
.phantom-mode-stage[data-mood="talking"] .phantom-mode-pose { animation: phantomPoseTalk 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.phantom-mode-stage[data-mood="thinking"]::before {
  opacity: 1;
  filter: blur(7px) saturate(1.25);
  animation-duration: 2.2s;
}
.phantom-mode-stage[data-mood="talking"]::before {
  opacity: 1;
  background:
    radial-gradient(circle at 45% 46%, rgba(135, 122, 255, 0.2), transparent 33%),
    radial-gradient(circle at 50% 76%, rgba(91, 76, 255, 0.18), transparent 34%);
}
.phantom-mode-stage[data-reaction="answer"]::after {
  animation: phantomAnswerOrbit 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  border-color: rgba(135, 122, 255, 0.56);
  box-shadow: 0 0 46px rgba(91, 76, 255, 0.22), inset 0 0 32px rgba(135, 122, 255, 0.14);
}
.phantom-mode-stage[data-reaction="answer"] .phantom-mode-pose {
  animation: phantomPoseAha 1.08s cubic-bezier(0.18, 1.45, 0.32, 1) both;
}
.phantom-mode-stage[data-reaction="listen"] .phantom-mode-pose {
  animation: phantomPoseListenAlive 1.35s ease-in-out infinite;
}
.phantom-mode-stage[data-reaction="typing"]::after, .phantom-mode-stage[data-reaction="think"]::after {
  animation-duration: 4.2s;
  border-style: dashed;
}
.phantom-mode-stage[data-reaction="typing"] .phantom-mode-pose, .phantom-mode-stage[data-reaction="think"] .phantom-mode-pose {
  animation: phantomPoseThinkAlive 0.86s ease-in-out infinite;
}
.phantom-mode-stage[data-emotion="alert"]::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(199, 126, 0, 0.16), transparent 35%),
    radial-gradient(circle at 50% 76%, rgba(91, 76, 255, 0.1), transparent 35%);
}
.phantom-mode-stage[data-emotion="alert"] .phantom-mode-caption, .phantom-mode-stage[data-emotion="sad"] .phantom-mode-caption {
  border-color: rgba(199, 126, 0, 0.46); color: #ffe8a3; box-shadow: 0 0 22px rgba(199, 126, 0, 0.18);
}
.phantom-mode-stage.is-reacting .phantom-mode-caption {
  color: var(--ink);
  border-color: rgba(135, 122, 255, 0.44);
  box-shadow: 0 0 26px rgba(91, 76, 255, 0.16);
}
.phantom-mode-stage.is-reacting::before { animation: phantomAuraPop 0.72s cubic-bezier(0.22, 1, 0.36, 1), phantomAura 7.4s ease-in-out infinite 0.72s; }
.phantom-mode-stage.is-swapping .phantom-mode-pose {
  animation: phantomPoseSwap 0.46s cubic-bezier(0.22, 1, 0.36, 1), phantomPoseFloat 5.6s ease-in-out infinite 0.46s;
}

@keyframes phantomAura {
  0%, 100% { opacity: 0.72; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes phantomOrbit {
  from { transform: rotateX(68deg) rotateZ(0deg); opacity: 0.58; }
  to { transform: rotateX(68deg) rotateZ(360deg); opacity: 0.58; }
}
@keyframes phantomAuraPop {
  0% { opacity: 0.58; transform: scale(0.9); }
  48% { opacity: 1; transform: scale(1.13); }
  100% { opacity: 0.8; transform: scale(1); }
}
@keyframes phantomAnswerOrbit {
  from { transform: rotateX(68deg) rotateZ(0deg) scale(0.86); opacity: 0.28; }
  42% { transform: rotateX(68deg) rotateZ(240deg) scale(1.1); opacity: 0.92; }
  to { transform: rotateX(68deg) rotateZ(420deg) scale(1); opacity: 0.6; }
}
@keyframes phantomPoseSwap {
  from { opacity: 0; transform: translateY(18px) scale(0.92) rotate(-2deg); filter: blur(6px) drop-shadow(0 0 0 rgba(91, 76, 255, 0)); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0) drop-shadow(0 0 20px rgba(91, 76, 255, 0.22)); }
}
@keyframes phantomPoseFloat {
  0%, 100% { transform: translateY(0) rotate(-0.8deg) scale(1); }
  50% { transform: translateY(-10px) rotate(0.8deg) scale(1.012); }
}
@keyframes phantomPoseListen {
  0%, 100% { transform: translateY(0) rotate(-1.2deg) scale(1); }
  42% { transform: translateY(-8px) rotate(1.4deg) scale(1.018); }
  72% { transform: translateY(-2px) rotate(-0.4deg) scale(1.004); }
}
@keyframes phantomPoseWrite {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); }
  32% { transform: translate3d(5px, -6px, 0) rotate(1deg); }
  64% { transform: translate3d(-3px, -2px, 0) rotate(-1deg); }
}
@keyframes phantomPosePresent {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  48% { transform: translateY(-12px) scale(1.025) rotate(1.5deg); }
}
@keyframes phantomPoseDirect {
  0%, 100% { transform: translateX(0) translateY(0) rotate(-0.7deg); }
  38% { transform: translateX(7px) translateY(-10px) rotate(1.6deg); }
  68% { transform: translateX(-4px) translateY(-3px) rotate(-1deg); }
}
@keyframes phantomPoseBuild {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  34% { transform: translateY(-7px) rotate(-1.2deg) scale(1.01); }
  68% { transform: translateY(-12px) rotate(1.1deg) scale(1.018); }
}
@keyframes phantomPoseCommand {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.01); }
}
@keyframes phantomPoseThink {
  0%, 100% { transform: translateY(-1px) rotate(-1.5deg) scale(1.012); }
  50% { transform: translateY(-11px) rotate(1.5deg) scale(1.035); }
}
@keyframes phantomPoseTalk {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  28% { transform: translateY(-8px) scale(1.018) rotate(1deg); }
  56% { transform: translateY(-3px) scale(0.998) rotate(-0.7deg); }
}
@keyframes phantomPoseListenAlive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.4deg) scale(1.01); }
  32% { transform: translate3d(-5px, -7px, 0) rotate(-2.6deg) scale(1.026); }
  62% { transform: translate3d(4px, -3px, 0) rotate(0.9deg) scale(1.014); }
}
@keyframes phantomPoseThinkAlive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.8deg) scale(1.01); }
  38% { transform: translate3d(5px, -9px, 0) rotate(1.4deg) scale(1.028); }
  70% { transform: translate3d(-3px, -4px, 0) rotate(-1.2deg) scale(1.012); }
}
@keyframes phantomPoseTalkAlive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.01); }
  18% { transform: translate3d(2px, -8px, 0) rotate(1.1deg) scale(1.024); }
  42% { transform: translate3d(-3px, -2px, 0) rotate(-0.8deg) scale(1.006); }
  68% { transform: translate3d(3px, -6px, 0) rotate(0.7deg) scale(1.018); }
}
@keyframes phantomPoseHappy {
  0%, 100% { transform: translateY(0) rotate(-0.4deg) scale(1); }
  40% { transform: translateY(-10px) rotate(1.6deg) scale(1.032); }
  70% { transform: translateY(-3px) rotate(-0.8deg) scale(1.012); }
}
@keyframes phantomPoseAlert {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); filter: saturate(1.2) contrast(1.18) brightness(1.08) drop-shadow(0 0 28px rgba(199, 126, 0, 0.26)); }
  24% { transform: translateX(-4px) rotate(-1deg) scale(1.018); }
  48% { transform: translateX(5px) rotate(1deg) scale(1.018); }
  72% { transform: translateX(-2px) rotate(-0.4deg) scale(1.006); }
}
@keyframes phantomPoseAha {
  0% { transform: translate3d(0, 10px, 0) rotate(-4deg) scale(0.92); filter: blur(5px) brightness(1.2) drop-shadow(0 0 0 rgba(91, 76, 255, 0)); opacity: 0.62; }
  34% { transform: translate3d(0, -22px, 0) rotate(4deg) scale(1.085); filter: blur(0) brightness(1.34) drop-shadow(0 0 46px rgba(135, 122, 255, 0.58)); opacity: 1; }
  58% { transform: translate3d(0, -7px, 0) rotate(-1.2deg) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); filter: blur(0) brightness(1.1) drop-shadow(0 0 34px rgba(91, 76, 255, 0.36)); opacity: 0.96; }
}

/* ---------------- rail cards ---------------- */
.plan-card, .queue-card, .quick-card { border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: var(--glass); }
.plan-inner { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }
.plan-donut { width: 72px; height: 72px; flex: 0 0 auto; }
.plan-track { fill: none; stroke: rgba(91, 76, 255, 0.12); stroke-width: 7; }
.plan-pct { fill: var(--ink); font: 600 15px "Instrument Sans", sans-serif; text-anchor: middle; }
.plan-copy { flex: 1; min-width: 0; }
.plan-copy b { display: block; font-size: 14px; }
.plan-copy i { font-size: 12px; font-style: normal; color: var(--dim); }
.plan-arrow { flex: 0 0 auto; color: var(--neon); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(91, 76, 255, 0.08); }
.queue-count { font: 600 11px "Spline Sans Mono", monospace; color: var(--neon); background: rgba(91, 76, 255, 0.1); border-radius: 999px; padding: 2px 9px; }
.queue-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.queue-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(91, 76, 255, 0.03); transition: border-color 0.2s, background 0.2s; }
.queue-item:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.07); }
.queue-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--neon); background: rgba(91, 76, 255, 0.08); }
.queue-ic .ic { width: 16px; height: 16px; }
.queue-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.queue-meta b { font-size: 12.5px; font-weight: 600; }
.queue-meta i { font-size: 11px; font-style: normal; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-badge { flex: 0 0 auto; font: 600 9px "Spline Sans Mono", monospace; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; }
.q-run { color: var(--neon); background: rgba(91, 76, 255, 0.13); }
.q-run::before { content: ""; }
.q-queue { color: var(--dim); background: rgba(255, 255, 255, 0.05); }
.q-wait { color: var(--warn); background: rgba(199, 126, 0, 0.1); }
.q-block { color: #c22b52; background: rgba(224, 52, 94, 0.1); }
.rail-foot-btn { width: 100%; padding: 10px; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--dim); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color 0.2s, background 0.2s; }
.rail-foot-btn:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.05); }
.quick-list { display: flex; flex-direction: column; gap: 8px; }
.quick-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--ink); font-size: 13px; transition: border-color 0.2s, background 0.2s; }
.quick-item:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.05); }
.quick-ic { flex: 0 0 auto; color: var(--neon); display: grid; place-items: center; }
.quick-arrow { margin-left: auto; color: var(--dim); }

/* ---------------- dashboard quick-widgets (demoted modules) ---------------- */
.quickwidgets-card { border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: var(--glass); }
.quickwidgets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.quickwidget { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; cursor: pointer; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(91, 76, 255, 0.03); transition: border-color 0.2s, background 0.2s; }
.quickwidget:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.07); }
.quickwidget.is-alert { border-color: rgba(199, 126, 0, 0.4); background: rgba(199, 126, 0, 0.07); }
.quickwidget-workers {
  position: relative;
  overflow: hidden;
  border-color: rgba(25, 245, 142, 0.24);
  background:
    radial-gradient(circle at 18% 50%, rgba(25, 245, 142, 0.1), transparent 32%),
    rgba(91, 76, 255, 0.035);
}
.quickwidget-workers::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(25, 245, 142, 0.12), transparent);
  transform: translateX(-120%);
  animation: workforce-widget-scan 3.8s ease-in-out infinite;
  pointer-events: none;
}
.qw-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--neon); background: rgba(91, 76, 255, 0.08); }
.qw-ic .ic { width: 15px; height: 15px; }
.qw-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qw-text b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qw-text i { font-size: 11px; font-style: normal; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qw-val { flex: 0 0 auto; font: 600 12px "Spline Sans Mono", monospace; color: var(--neon); background: rgba(91, 76, 255, 0.12); border-radius: 999px; padding: 2px 8px; }
.quickwidget.is-alert .qw-val { color: var(--warn); background: rgba(199, 126, 0, 0.14); }
.qw-arrow { flex: 0 0 auto; color: var(--dim); font-size: 13px; }
@keyframes workforce-widget-scan {
  55%, 100% { transform: translateX(120%); }
}
@media (max-width: 520px) { .quickwidgets-grid { grid-template-columns: 1fr; } }

/* ---------------- phase-2 responsive ---------------- */
@media (max-width: 1200px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .console-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
  .phantom { flex-direction: column; }
  .sidebar { flex: 0 0 auto; width: 100%; max-width: 100vw; height: auto; position: sticky; top: 0; z-index: 25; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: hidden; }
  .sidebar::-webkit-scrollbar, .side-nav::-webkit-scrollbar { display: none; }
  .side-brand { border-bottom: 0; padding: 4px; flex: 0 0 auto; }
  .side-brand-text { display: none; }
  .side-nav { flex-direction: row; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav-item span { display: none; }
  .nav-item { flex: 0 0 42px; justify-content: center; padding: 9px 11px; }
  .nav-item.is-active { flex-basis: auto; min-width: 42px; }
  .nav-item.is-active span { display: inline; white-space: nowrap; }
  .side-plan { display: none; }
  .hero2 { grid-template-columns: 1fr; }
  .hero2-stage { min-height: 300px; order: -1; }
  .hero2-stage .ghost-canvas { min-height: 300px; }
  .phantom-webgl { min-height: 320px; inset: -7% -5% -5%; }
  .phantom-mode-stage { width: min(100%, 380px); }
  .phantom-mode-pose { max-height: 310px; }
  .site-builder-grid, .site-start-grid { grid-template-columns: 1fr; }
  .site-preview-hero { grid-template-columns: 1fr; }
  .site-preview-products { grid-template-columns: 1fr; }
  .site-live-preview { min-height: auto; }
  .site-link-card div { grid-template-columns: 1fr; }
  .ss-simple { height: auto; min-height: 0; grid-template-rows: auto; }
  .ss-simple.is-empty {
    min-height: calc(100svh - var(--mobile-admin-topbar, 72px) - var(--mobile-admin-taskbar, 76px) - 24px);
    padding: 16px;
  }
  .ss-simple-empty {
    grid-template-columns: 1fr;
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 18px;
  }
  .ss-simple-empty-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ss-simple-empty-copy span { max-width: min(100%, 330px); }
  .ss-simple-empty h3 {
    max-width: 9ch;
    font-size: clamp(34px, 10vw, 44px);
    line-height: 0.98;
  }
  .ss-simple-empty .ss-simple-prompt {
    width: 100%;
    min-width: 0;
    min-height: min(340px, 48svh);
  }
  .ss-simple-empty .ss-simple-prompt textarea { min-width: 0; font-size: 15px; }
  .ss-simple-top, .ss-simple-domain form, .ss-simple-prompt { grid-template-columns: 1fr; }
  .ss-simple-top { align-items: stretch; }
  .ss-simple-switcher, .ss-simple-actions { width: 100%; }
  .ss-simple-switcher select { max-width: none; flex: 1 1 auto; min-width: 0; }
  .ss-simple-actions .btn { flex: 1 1 auto; justify-content: center; }
  .ss-simple-main { min-height: 420px; overflow: visible; }
  .ss-simple-preview { height: auto; min-height: 420px; overflow: visible; }
  .ss-simple-status { text-align: left; padding-bottom: 8px; }
  .app-main:has(.workspace-page[data-workspace-page="sites"]) { height: auto; overflow: visible; }
  .app-main:has(.workspace-page[data-workspace-page="sites"]) .console-workspace { min-height: 0; overflow: visible; }
  .workspace-page[data-workspace-page="sites"] { height: auto; overflow: visible; }
  .workspace-page[data-workspace-page="sites"] .workspace-page-body { overflow: visible; }
  .ss-panel { overflow: visible; }
  .ss-build { grid-template-columns: 1fr; height: auto; }
  .ss-col { overflow: visible; }
  .ss-preview-frame { overflow: visible; }
  .ss-preview-frame.ss-device-tablet, .ss-preview-frame.ss-device-mobile { max-width: 100%; }
  .memory-layout, .memory-add { grid-template-columns: 1fr; }
  .memory-controls { grid-template-columns: 1fr; }
  .memory-hero { align-items: stretch; }
  .memory-score { width: 100%; min-height: 86px; border-radius: 18px; }
  .brain-hero { align-items: stretch; flex-direction: column; }
  .brain-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brain-grid { grid-template-columns: 1fr; }
  .brain-add { grid-template-columns: 1fr; }
  .brain-memory { grid-template-columns: 1fr; }
  .brain-memory-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .ss-simple-empty-copy, .ss-simple-empty .ss-simple-prompt {
    justify-self: start;
    max-width: min(100%, 330px);
  }
}
@media (max-width: 720px) {
  .topbar2 { gap: 10px; padding: 10px 12px; }
  .topbar-clock { margin-left: auto; }
  .status-pills { order: 3; flex-basis: 100%; }
  .console-workspace { padding: 12px; }
  .workspace-page { min-height: calc(100dvh - 150px); border-radius: 20px; }
  .workspace-page-head { padding: 18px 16px; }
  .workspace-page-head h1 { font-size: 30px; }
  .workspace-page-body { padding: 14px; }
  .console-rail { grid-template-columns: 1fr; }
  .cmd-chips { max-width: none; }
  .hero2 { min-height: 0; padding: 18px 14px 20px; gap: 14px; border-radius: 20px; }
  .hero2-stage { min-height: 240px; }
  .phantom-webgl { min-height: 270px; inset: -8% -8% -4%; }
  .phantom-mode-stage { width: min(100%, 310px); }
  .phantom-mode-pose { width: min(88%, 270px); max-height: 240px; opacity: 0.9; }
  .phantom-mode-caption { top: 0; bottom: auto; transform: translate(-50%, -82%); padding: 7px 10px; font-size: 8px; letter-spacing: 0.12em; opacity: 0.9; }
  .cmd-chip { min-height: 42px; justify-content: center; padding: 10px 8px; }
  .cmd-chip span { font-size: 12px; }
  .site-builder-head { padding: 15px; border-radius: 18px; }
  .site-command-panel, .site-preview-panel { padding: 12px; border-radius: 18px; }
  .site-preview-hero { padding: 20px; min-height: 0; }
  .site-preview-hero h3 { font-size: 30px; }
  .site-preview-orb { max-width: 180px; justify-self: center; width: 66%; }
  .site-preview-sections { grid-template-columns: 1fr 1fr; padding: 12px; }
  .site-preview-offer { margin: 0 12px 12px; flex-direction: column; align-items: flex-start; }
  .site-preview-products { padding: 0 12px 12px; }
  .brain-hero, .brain-card { border-radius: 16px; padding: 14px; }
  .brain-stat-grid { grid-template-columns: 1fr; }
  .brain-stat { min-height: 72px; }
  .brain-card-head { flex-direction: column; }
  .brain-kv { grid-template-columns: 1fr; gap: 4px; }
  .brain-memory-actions .btn { min-width: 96px; }
}

/* Mobile shell cleanup: bottom dock only. */
@media (max-width: 900px) {
  .phantom {
    --mobile-admin-topbar: 0px !important;
    --mobile-admin-taskbar: 80px;
    flex-direction: column;
  }
  .os-command-rail, .mobile-admin-homebar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .phantom.nav-expanded .app-main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 54;
    background: var(--glass);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .sidebar {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    z-index: 70;
    width: 54px;
    max-width: calc(100vw - 24px);
    height: 54px;
    max-height: 54px;
    padding: 7px;
    gap: 0;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 17px;
    background: var(--glass);
    box-shadow: 0 18px 42px rgba(36, 31, 63, 0.16), 0 0 28px rgba(91, 76, 255, 0.12);
    transition: width 0.22s ease, height 0.22s ease, max-height 0.22s ease, border-radius 0.22s ease, padding 0.22s ease;
  }
  .sidebar:not(.is-expanded) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .sidebar.is-expanded {
    display: flex !important;
    width: min(296px, calc(100vw - 24px));
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
    padding: 12px;
    gap: 12px;
    border-radius: 22px;
    overflow-y: auto;
  }
  .side-toggle {
    display: grid;
    place-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(91, 76, 255, 0.28);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(91, 76, 255,0.98), rgba(55, 20, 215,0.92));
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(91, 76, 255, 0.22);
  }
  .side-toggle span {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: 99px;
    background: var(--glass-2);
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .side-toggle span:nth-child(1) { transform: translateY(-6px); }
  .side-toggle span:nth-child(3) { transform: translateY(6px); }
  .sidebar.is-expanded .side-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(91, 76, 255, 0.08);
    color: var(--neon);
  }
  .sidebar.is-expanded .side-toggle span { background: var(--neon); }
  .sidebar.is-expanded .side-toggle span:nth-child(1) { transform: rotate(45deg); }
  .sidebar.is-expanded .side-toggle span:nth-child(2) { opacity: 0; }
  .sidebar.is-expanded .side-toggle span:nth-child(3) { transform: rotate(-45deg); }
  .side-brand, .side-nav, .side-plan { display: none; }
  .sidebar.is-expanded .side-brand {
    display: flex;
    min-height: 44px;
    padding: 2px 52px 12px 4px;
    border-bottom: 1px solid var(--line);
  }
  .sidebar.is-expanded .side-brand-text { display: block; }
  .sidebar.is-expanded .side-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    flex: 0 1 auto;
  }
  .sidebar.is-expanded .nav-item {
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
    padding: 11px 12px;
    border-radius: 13px;
  }
  .sidebar.is-expanded .nav-item span {
    display: inline;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar.is-expanded .side-plan {
    display: flex;
    margin-top: auto;
  }
  .mobile-bottom-nav {
    display: grid !important;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    min-height: 64px;
    padding: 7px 10px;
    overflow: hidden !important;
    border: 1px solid rgba(91, 76, 255, 0.2);
    border-radius: 22px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -12px 36px rgba(36, 31, 63, 0.16), 0 0 22px rgba(91, 76, 255, 0.1);
  }
  .mobile-bottom-item, .mobile-bottom-item.is-active {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    min-height: 50px;
  }
  .mobile-bottom-item span {
    max-width: 100%;
  }
  .phantom.nav-expanded .mobile-bottom-nav {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }
  .topbar2 {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 70px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px 78px;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--glass);
  }
  /* Flatten the three zone wrappers so the leaf elements become direct flex
     children again — the order/flex mobile rules below then reflow them as a
     single wrapping row, exactly as the pre-zone markup did. */
  .topbar-zone { display: contents; }
  .desktop-context-top { display: none; }
  .cmdk-open {
    order: 1;
    min-width: 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
  }
  .cmdk-open-label, .cmdk-open-kbd { display: none; }
  .topbar-clock { display: none; }
  .notif-wrap { order: 2; margin-left: auto; }
  .notif-btn { width: 42px; height: 42px; border-radius: 14px; }
  .user-menu-wrap { order: 3; }
  .topbar-user {
    order: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
  }
  .topbar-user .user-meta, .topbar-user .user-caret { display: none; }
  .user-menu { right: 0; }
  .user-avatar { width: 32px; height: 32px; border-radius: 11px; }
  .status-pills {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .status-pills .pill { display: none; }
  .pill {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 13px;
  }
  .pill-k { display: none; }
  .pill-v {
    min-width: 0;
    font-size: 12px;
  }
  .pill-v-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ws-switch {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .ws-switch select {
    width: 100%;
    min-height: 42px;
    font-size: 12.5px;
    border-radius: 14px;
  }
}

@media (max-width: 420px) {
  .topbar2 { padding-left: 74px; }
  .status-pills { gap: 7px; }
  .pill-v { font-size: 11.5px; }
  .ws-switch select { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pill-v .dot { animation: none !important; }
  .phantom-webgl { display: none; }
  .phantom-mode-stage::before, .phantom-mode-stage::after, .phantom-mode-pose, .phantom-mode-stage.is-swapping .phantom-mode-pose { animation: none !important; }
}

/* ============================================================= */
/* ===============  COMMAND CENTER — ⌘K, live, intel  ========== */
/* ============================================================= */
kbd { font: 600 10px "Spline Sans Mono", monospace; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--dim); }

/* topbar search pill */
.cmdk-open {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; flex: 0 1 240px; min-width: 0; max-width: 300px;
  padding: 8px 10px 8px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.056); color: var(--dim);
  transition: border-color 0.2s, background 0.2s;
}
.cmdk-open:hover { border-color: var(--line-strong); background: rgba(91, 76, 255,0.05); }
.cmdk-open-ic { display: grid; place-items: center; color: var(--neon); }
.cmdk-open-ic .ic { width: 15px; height: 15px; }
.cmdk-open-label { flex: 1; text-align: left; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-open-kbd { flex: 0 0 auto; }

/* notifications */
.notif-wrap { position: relative; flex-shrink: 0; }
.notif-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); color: var(--dim); transition: border-color 0.2s, background 0.2s; }
.notif-btn:hover { border-color: var(--line-strong); background: rgba(91, 76, 255,0.06); }
.notif-btn .ic { width: 18px; height: 18px; }
.notif-dot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--warn); color: #fff4dc; font: 700 9.5px "Spline Sans Mono", monospace; box-shadow: 0 0 10px rgba(199, 126, 0,0.6); }
.notif-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 320px; max-height: 60vh; overflow-y: auto; padding: 8px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--glass); box-shadow: 0 24px 60px rgba(36, 31, 63, 0.16), 0 0 40px rgba(91, 76, 255,0.1); animation: panelIn 0.24s ease both; }
.notif-head { padding: 8px 10px; font: 500 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.notif-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
.notif-item:hover { background: rgba(91, 76, 255,0.06); border-color: var(--line); }
.notif-item-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.notif-item-ic.notif-warn { color: var(--warn); background: rgba(199, 126, 0,0.12); }
.notif-item-ic.notif-ok { color: var(--neon); background: rgba(91, 76, 255,0.1); }
.notif-item-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item-body b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.notif-item-body i { font-size: 11.5px; font-style: normal; color: var(--dim); }
.notif-empty { padding: 16px 10px; text-align: center; color: var(--dim); font-size: 12.5px; }

/* ⌘K command palette */
.cmdk { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding: clamp(40px, 12vh, 130px) 16px 16px; opacity: 0; transition: opacity 0.18s ease; }
.cmdk.is-open { opacity: 1; }
.cmdk-backdrop { position: absolute; inset: 0; border: 0; cursor: pointer; background: radial-gradient(70% 60% at 50% 30%, rgba(91, 76, 255,0.06), rgba(255, 255, 255,0.66) 70%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cmdk-panel { position: relative; width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--glass); box-shadow: 0 40px 120px rgba(36, 31, 63, 0.16), 0 0 80px rgba(91, 76, 255,0.12); transform: translateY(-10px) scale(0.99); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1); }
.cmdk.is-open .cmdk-panel { transform: none; }
.cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk-input-ic { color: var(--neon); display: grid; place-items: center; }
.cmdk-input-ic .ic { width: 18px; height: 18px; }
.cmdk-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); caret-color: var(--neon); font-size: 17px; }
.cmdk-input::placeholder { color: var(--dim); }
.cmdk-esc { flex: 0 0 auto; }
.cmdk-results { flex: 1; overflow-y: auto; padding: 8px; }
.cmdk-group { padding: 10px 10px 4px; font: 500 9px "Spline Sans Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim-2); }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); }
.cmdk-item.is-sel { background: rgba(91, 76, 255,0.1); border-color: var(--line-strong); }
.cmdk-item-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--neon); background: rgba(91, 76, 255,0.08); }
.cmdk-item-ic .ic { width: 16px; height: 16px; }
.cmdk-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk-item-body b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-body i { font-size: 11.5px; font-style: normal; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-enter { flex: 0 0 auto; color: var(--dim-2); font: 600 12px "Spline Sans Mono", monospace; opacity: 0; }
.cmdk-item.is-sel .cmdk-item-enter { opacity: 1; color: var(--neon); }
.cmdk-empty { padding: 30px 16px; text-align: center; color: var(--dim); font-size: 13.5px; }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--dim-2); font-size: 11px; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* boot reveal */
.phantom.booted .console-center > *, .phantom.booted .console-rail > * { animation: bootRise 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.phantom.booted .console-center > *:nth-child(2) { animation-delay: 0.05s; }
.phantom.booted .console-center > *:nth-child(3) { animation-delay: 0.1s; }
.phantom.booted .console-center > *:nth-child(4) { animation-delay: 0.15s; }
.phantom.booted .console-rail > *:nth-child(2) { animation-delay: 0.1s; }
.phantom.booted .console-rail > *:nth-child(3) { animation-delay: 0.15s; }
@keyframes bootRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 1500px) {
  .cmdk-open { flex: 0 0 auto; padding: 8px; }
  .cmdk-open-label, .cmdk-open-kbd { display: none; }
  .topbar-clock i { display: none; }
  .user-meta i { display: none; }
}
@media (max-width: 1700px) {
  .topbar2 { gap: clamp(10px, 1.2vw, 16px); padding-inline: 16px; }
  .status-pills { gap: 8px; }
  .status-pills .pill { flex-basis: 150px; padding-inline: 10px; }
  .status-pills .ws-switch { flex-basis: 158px; }
  .topbar-right { gap: 8px; }
  .desktop-context-top { flex: 0 1 240px; min-width: 0; max-width: 260px; }
  .topbar-right .topbar-clock { margin-left: 4px; }
  .topbar-clock i { display: none; }
}
@media (max-width: 1320px) {
  .desktop-context-top { flex-basis: 320px; min-width: 240px; }
  .dc-mini-copy span { display: none; }
}
@media (max-width: 1220px) { .pill-k { display: none; } .status-pills { gap: 7px; } .pill { padding: 8px 10px; } }
@media (max-width: 1040px) {
  .desktop-context-top { flex: 0 0 230px; min-width: 230px; }
  .dc-mini-shell { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; padding-inline: 6px; }
  .dc-mini-thumb { width: 36px; height: 36px; border-radius: 11px; }
  .dc-mini-controls { gap: 3px; }
  .dc-mini-controls button { width: 27px; height: 27px; border-radius: 9px; }
}
@media (min-width: 901px) and (max-width: 1450px) {
  .topbar2 { gap: 10px; padding-inline: 12px; grid-template-columns: minmax(0, auto) minmax(220px, 1fr) minmax(0, auto); }
  .status-pills { flex: 0 1 auto; max-width: min(35vw, 430px); }
  .status-pills .pill:not(.ws-switch) { display: none; }
  .status-pills .ws-switch { flex: 0 1 150px; max-width: 150px; }
  .desktop-context-top {
    position: relative;
    flex: 0 0 54px;
    min-width: 54px;
    max-width: 54px;
    height: var(--ctl-h);
    align-self: center;
    overflow: visible;
  }
  .desktop-context-top .dc-mini-shell {
    width: 54px;
    min-width: 54px;
    height: var(--ctl-h);
    grid-template-columns: 36px;
    gap: 0;
    padding: 5px 8px;
    border-radius: var(--r-md);
    cursor: pointer;
    box-shadow: var(--edge-hi), 0 10px 34px rgba(0, 0, 0, 0.28);
  }
  .desktop-context-top .dc-mini-copy, .desktop-context-top .dc-mini-controls { display: none; }
  .desktop-context-top .dc-mini-shell.is-expanded {
    position: absolute;
    z-index: 95;
    top: calc(100% + 8px);
    left: 0;
    width: min(390px, calc(100vw - 30px));
    min-width: min(390px, calc(100vw - 30px));
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
    overflow: visible;
    border: 1px solid rgba(91, 76, 255, 0.26);
    background: radial-gradient(circle at 10% 45%, rgba(91, 76, 255,0.18), transparent 45%), var(--glass);
    box-shadow: var(--edge-hi), 0 22px 70px rgba(36, 31, 63, 0.16), 0 0 30px rgba(91, 76, 255, 0.10);
  }
  .desktop-context-top .dc-mini-shell.is-expanded .dc-mini-copy { display: grid; }
  .desktop-context-top .dc-mini-shell.is-expanded .dc-mini-controls { display: inline-flex; }
  .topbar-right { flex: 0 0 auto; min-width: 0; }
  .topbar-center .cmdk-open { max-width: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .status-pills { display: none; }
  .topbar-right .topbar-clock { margin-left: 0; }
  .topbar-user { width: 48px; padding: 5px; justify-content: center; }
  .topbar-user .user-meta, .topbar-user .user-caret { display: none; }
}
@media (max-width: 720px) {
  .cmdk-open { min-width: 44px; max-width: 44px; padding: 8px; justify-content: center; }
  .cmdk-open-kbd { display: none; }
  .notif-menu { width: min(320px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .phantom.booted .console-center > *, .phantom.booted .console-rail > *, .cmdk, .cmdk-panel, .notif-menu { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ============================================================= */
/* =====================  MEDIA LAB + SETTINGS  ================ */
/* ============================================================= */
.overlay-wide .overlay-panel { width: min(1360px, 100%); }

/* Compact, denser page head just for the Media Lab workspace — same title
   size as every other workspace page (.workspace-page-head h1's shared
   default), only the padding shrinks to make room for Media Lab's own
   Create/Pending/Edit tab row directly below it. */
.workspace-page[data-workspace-page="media"] .workspace-page-head { padding: 8px clamp(18px, 2vw, 28px) 6px; }
.workspace-page[data-workspace-page="media"] .workspace-page-kicker { margin-bottom: 1px; }
.workspace-page[data-workspace-page="media"] .workspace-page-body { padding-top: 8px; }
/* Media Lab is a working cockpit, not a feed — the scrolling system ticker
   is dead weight here and costs real vertical space toward fitting the
   whole cockpit on screen without scrolling. */
.app-main:has(.workspace-page[data-workspace-page="media"]) .phantomwire { display: none; }

@keyframes mlPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.ml { display: flex; flex-direction: column; gap: 6px; }
/* topbar: view tabs + tool icons (Templates/History/Engine/Settings) +
   a compact engine/credits readout, all in one slim row */

.ml-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 13px; background: rgba(36, 31, 63, 0.044); }
.ml-tabs::-webkit-scrollbar { display: none; }
.ml-tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 15px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--dim); cursor: pointer; font: 600 13px "Instrument Sans", sans-serif; transition: background 0.18s, color 0.18s; }
.ml-tab:hover { color: var(--ink); background: rgba(91, 76, 255,0.06); }
.ml-tab.is-active { color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); box-shadow: 0 4px 16px rgba(91, 76, 255,0.22); }

/* drawers: Templates / History / Engine — slide over the main content,
   real state, not a parallel page */

/* drag & drop: local-asset cards + OS file drops */

[data-ml-dropzone].is-ml-droptarget {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(91, 76, 255,0.55);
  border-radius: 10px;
}
[data-ml-dropzone].is-ml-droptarget::after {
  content: attr(data-ml-dropzone-label);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--neon);
  background: var(--glass); color: var(--neon);
  font: 700 10px "Instrument Sans", sans-serif; letter-spacing: 0.03em;
  white-space: nowrap; pointer-events: none; z-index: 260;
}
[data-ml-dropzone].is-ml-droptarget.is-dragover {
  box-shadow: inset 0 0 0 2px var(--neon), 0 0 18px rgba(91, 76, 255,0.4);
}

/* cockpit flow: shot builder -> hero CTA -> preview stage -> production rail,
   stacked as one vertical sequence instead of three competing side columns —
   the stage is the centerpiece, everything else supports it. */
/* main workspace: Shot Builder (left, controls + primary action) / Preview
   Stage (right, the hero) — a real two-column cockpit, not a stacked flow */
/* stretch, not start: the Shot Builder's height varies with how many rows
   are open (negative prompt, advanced settings) — if the stage cell doesn't
   stretch to match, its shorter idle content leaves a dead gap of raw
   background before the status strip below. */

/* reference drop: a slim row, not a giant dead rectangle */

/* Templates drawer: presets live here now, not inline in the Shot Builder */

/* native <select> styled as a compact closed pill — click anywhere on it to
   open the (grouped, for aspect) native dropdown; no custom popover needed */

/* the shot brief is the star control — give it presence */

@keyframes mlShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* the ONE hero CTA (Shot Builder's "Generate") gets the premium glow treatment;
   the smaller reused .ml-generate buttons (save/download/upload) stay simple rows */

@keyframes mlGenerateGlow { 0%, 100% { transform: translate(-18%, -10%) scale(0.8); opacity: 0.5; } 50% { transform: translate(14%, 14%) scale(1.05); opacity: 0.85; } }

/* ---- preview stage (right column) ---- */

@keyframes mlSheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }

/* fullscreen: the stage takes over the studio's center column visually by
   floating above everything else — no layout reflow of the rail/builder */
/* Fullscreen: the FRAME is the one scrolling region (sticky header on top);
   the view must lay out top-down instead of its normal vertical centering,
   or tall content spills into the footer/next-steps below it instead of
   scrolling — align-content:center + overflow:visible was the exact bug. */

/* ---- Next steps: what to do with the cut you just made ---- */

/* ---- Job log: a slim, honest trail under the studio ---- */

/* idle stage — a lit set waiting for its first shot */

@keyframes mlOrb { 0% { transform: scale(0.45); opacity: 0.85; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes mlFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- production rail: a mission-control strip under the stage, not a
   tall column competing with it for width ---- */
/* one slim strip instead of a wall of cards — credits, content hub, and a
   queue count that expands into a dropdown only when you click it */

/* ---- result grids ---- */

@keyframes phantomFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---- Edit tab: Photo / Video editor chooser ---- */

/* ---- Media Pool tab: persistent, publish-ready media ---- */

/* touch devices: hover sticks after a tap and the overlay parks on top of the
   spec plate — give the actions their own solid strip below the image instead */

@keyframes mlShim { to { transform: translateX(100%); } }

/* editor */

/* Media Lab Create is a full-screen workbench on desktop: the page itself
   stays locked to the viewport, while dense controls and result grids own
   their internal overflow. This keeps 100% browser zoom feeling like an app
   canvas instead of a half-height panel with dead space below it. */
@media (min-width: 901px) {
  .app-main:has(.workspace-page[data-workspace-page="media"]) {
    height: 100dvh;
    overflow: hidden;
  }

  .app-main:has(.workspace-page[data-workspace-page="media"]) .console-workspace {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: clamp(8px, 1vw, 14px);
  }

  .workspace-page[data-workspace-page="media"] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-page[data-workspace-page="media"] .workspace-page-body {
    height: auto;
    min-height: 0;
    overflow: auto;
    padding: 0;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  .workspace-page[data-workspace-page="media"] .ml {
    height: 100%;
    min-height: 0;
    gap: 8px;
  }

  

  

  

  

  

  

  

  

  

  
  
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

/* ---------------- settings ---------------- */
.settings { display: flex; flex-direction: column; gap: 22px; }
.set-section { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--glass); }
.set-section h3 { margin: 0 0 6px; font-size: 16px; }

/* ---- Organization: people, roles, and module access ---- */
.org-members { display: grid; gap: 10px; }
.org-member { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(180px, auto) 34px; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2); }
.org-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(91, 76, 255,0.28), rgba(255, 255, 255,0.9)); color: var(--ink); font: 700 13px "Instrument Sans", sans-serif; }
.org-member-id { display: grid; gap: 2px; min-width: 0; }
.org-member-id b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-member-id i { font: 500 10.5px "Spline Sans Mono", monospace; font-style: normal; color: var(--dim); letter-spacing: 0.03em; }
.org-role-pick { display: grid; gap: 3px; }
.org-role-pick select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(36, 31, 63, 0.06); color: var(--ink); font: 600 12px "Instrument Sans", sans-serif; }
.org-role-pick i { font-style: normal; font-size: 10px; color: var(--dim); }
.org-remove { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; }
.org-remove:hover { border-color: var(--warn); color: var(--warn); }
.org-invite { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.org-invite input[type="email"] { flex: 1 1 240px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(36, 31, 63, 0.06); color: var(--ink); font: 500 13px "Instrument Sans", sans-serif; }
.org-invite select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(36, 31, 63, 0.06); color: var(--ink); font: 600 12px "Instrument Sans", sans-serif; }
.org-invite-list { display: grid; gap: 8px; }
.org-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.org-invite-row span { display: grid; gap: 2px; }
.org-invite-row b { font-size: 13px; }
.org-invite-row i { font: 500 10.5px "Spline Sans Mono", monospace; font-style: normal; color: var(--dim); }
.org-matrix-wrap { overflow-x: auto; margin-bottom: 12px; }
.org-matrix { border-collapse: collapse; width: 100%; min-width: 560px; }
.org-matrix th, .org-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; font-size: 12px; }
.org-matrix th:first-child, .org-matrix td:first-child { text-align: left; }
.org-matrix th { font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.org-matrix td b { font-size: 12.5px; }
.org-matrix td i { display: block; font: 500 9.5px "Spline Sans Mono", monospace; font-style: normal; color: var(--warn); }
.org-matrix tr.is-off td { opacity: 0.55; }
.org-matrix input[type="checkbox"] { accent-color: var(--neon); width: 15px; height: 15px; }
.org-message { margin: 8px 0 0; font-size: 12.5px; color: var(--neon); }
.org-message.is-error { color: var(--warn); }
.org-db-note h4 { margin: 0 0 6px; }
@media (max-width: 767px) {
  .org-member { grid-template-columns: 36px minmax(0, 1fr) 34px; }
  .org-member .org-role-pick { grid-column: 2 / -1; }
}
.set-note { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--dim); max-width: 720px; }
.settings-operator { gap: 18px; }
.set-eyebrow {
  margin: 0 0 6px; font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--neon);
}
.set-ai-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 18px;
  background: radial-gradient(circle at 0 0, rgba(91, 76, 255,0.11), transparent 44%), var(--glass);
}
.set-owner-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.set-owner-shortcuts .btn {
  border-color: rgba(124, 108, 255, 0.32);
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.14), rgba(28, 242, 185, 0.06));
  color: var(--ink);
}
.set-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.set-status-grid span {
  min-width: 0; border: 1px solid rgba(91, 76, 255,0.15); border-radius: 13px; padding: 11px 12px;
  background: var(--glass);
}
.set-status-grid b {
  display: block; margin-bottom: 4px; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.set-status-grid i { display: block; color: var(--ink); font-style: normal; font-size: 12.5px; line-height: 1.3; }
.set-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.set-sec-head .set-note { margin: 4px 0 0; }
.set-tabs { align-self: flex-start; max-width: 100%; }
.set-settings-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.set-category-nav { display: grid; gap: 10px; min-width: 0; }
.set-category {
  border: 1px solid rgba(91, 76, 255,0.13);
  border-radius: 14px;
  background: var(--glass);
  overflow: hidden;
}
.set-category summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.set-category summary::-webkit-details-marker { display: none; }
.set-category summary span:last-child {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(91, 76, 255,0.16);
  border-radius: 999px;
  color: var(--neon);
  background: rgba(91, 76, 255,0.06);
  font-size: 9px;
}
.set-category-options {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}
.set-category-options button {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 11px;
  text-align: left;
  color: var(--dim);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  font: 700 12px "Instrument Sans", sans-serif;
}
.set-category-options button:hover {
  color: var(--ink);
  border-color: rgba(91, 76, 255,0.18);
  background: rgba(91, 76, 255,0.055);
}
.set-category-options button.is-active {
  color: #ffffff;
  border-color: rgba(91, 76, 255,0.78);
  background: linear-gradient(135deg, #7a6eff, #c26af5);
  box-shadow: 0 0 24px rgba(91, 76, 255,0.16);
}
.set-workspace-mount .customization-studio { padding: 0; }
.set-tab-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.set-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(91, 76, 255,0.06); color: var(--neon); cursor: pointer; font: 600 12px "Instrument Sans"; }
.set-add:hover { background: rgba(91, 76, 255,0.14); }
.set-add .ic { width: 14px; height: 14px; }
.set-label { margin: 18px 0 8px; color: var(--dim); font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.set-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.set-choice-card {
  min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--glass); color: var(--ink); text-align: left; cursor: pointer;
}
.set-choice-card b { display: block; color: var(--ink); font-size: 13px; }
.set-choice-card i { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; font-style: normal; line-height: 1.35; }
.set-choice-card:hover, .set-choice-card.is-active { border-color: rgba(91, 76, 255,0.48); background: rgba(91, 76, 255,0.08); }
.set-choice-card.is-active { box-shadow: inset 3px 0 0 var(--neon), 0 0 22px rgba(91, 76, 255,0.06); }
.set-plan-grid { align-items: stretch; }
.set-plan-card { display: grid; align-content: start; gap: 12px; border-radius: 8px; cursor: default; }
.set-plan-card.is-selected { border-color: rgba(91, 76, 255,.62); box-shadow: inset 3px 0 var(--neon); }
.set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-card-head > span { color: var(--ink); font-size: 14px; font-weight: 800; }
.set-card-head > b { color: var(--neon); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.set-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.set-chip { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 10px; }
.set-chip.is-on { border-color: rgba(91, 76, 255,.24); background: rgba(91, 76, 255,.07); }
.set-chip.is-off { color: var(--dim); opacity: .72; }
.set-plan-card > .btn { width: 100%; margin-top: auto; }
.set-selection-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 10px 12px;
  border: 1px solid rgba(91, 76, 255,0.14); border-radius: 12px; background: rgba(91, 76, 255,0.035);
}
.set-selection-summary span { min-width: 0; }
.set-selection-summary b { display: block; color: var(--neon); font-size: 12px; }
.set-selection-summary i { display: block; margin-top: 2px; color: var(--dim); font-size: 11px; font-style: normal; }
.set-selection-summary em { flex: 0 0 auto; color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.set-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.set-model-card {
  min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; align-items: center; gap: 10px;
  text-align: left; border: 1px solid var(--line); border-radius: 15px; padding: 12px;
  background: var(--glass); color: var(--ink); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.set-model-card:hover, .set-model-card.is-active {
  border-color: rgba(91, 76, 255,0.42); background: rgba(91, 76, 255,0.08); transform: translateY(-1px);
}
.set-model-card.is-preferred { box-shadow: inset 3px 0 0 var(--neon); }
.set-provider-mark {
  width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(91, 76, 255,.28);
  border-radius: 12px; color: var(--neon); background: rgba(91, 76, 255,.08); font: 800 10px "Spline Sans Mono", monospace;
}
.set-provider-copy { min-width: 0; }
.set-provider-check {
  width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px;
  color: var(--dim); font-size: 12px;
}
.set-model-card.is-active .set-provider-check { border-color: var(--neon); color: #ffffff; background: var(--neon); }
.set-model-orb {
  display: block; width: 13px; height: 13px; margin-bottom: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #241f3f, var(--neon) 42%, rgba(91, 76, 255,0.24) 70%);
  box-shadow: 0 0 18px rgba(91, 76, 255,0.38);
}
.set-model-card b { display: block; font-size: 14px; color: var(--ink); }
.set-model-card i { display: block; margin-top: 4px; color: var(--dim); font-style: normal; font-size: 11.5px; line-height: 1.35; }
.set-preferred-provider { max-width: 360px; margin: 0 0 8px; }
.set-provider-models { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.set-response-controls { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-footnote { margin: 14px 0 0; color: var(--dim); font-size: 11px; line-height: 1.45; }
.set-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.set-grid { display: grid; gap: 12px; margin: 8px 0 14px; }
.set-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.set-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.set-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; margin: 8px 0 14px; }
.set-check-grid .set-inline-tight { margin: 4px 0; }
.set-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.set-control span {
  font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.set-control select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(36, 31, 63, 0.06); color: var(--ink); font-size: 13px; outline: none;
}
.set-control select:focus { border-color: var(--neon); }
.set-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.set-route { display: flex; flex-direction: column; gap: 6px; }
.set-route span { font: 600 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.set-route select, .set-field input, .set-field select, .set-mini select, .set-mini input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06); color: var(--ink); font-size: 13px; outline: none; width: 100%; }
.set-route select:focus, .set-field input:focus, .set-field select:focus { border-color: var(--neon); }
.set-inline { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dim); margin-bottom: 14px; cursor: pointer; }
.set-inline input { accent-color: var(--neon); width: 16px; height: 16px; }
.set-inline-tight { margin: 14px 0; }
.set-rule-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.set-rule-list span {
  border: 1px solid rgba(91, 76, 255,0.17); border-radius: 999px; padding: 6px 10px;
  color: var(--dim); background: rgba(91, 76, 255,0.06); font-size: 11.5px;
}
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field span { font: 600 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.set-field em { font-size: 11px; color: var(--dim-2); font-style: normal; }
.set-field textarea { min-height: 96px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.06); color: var(--ink); font: inherit; outline: none; }
.set-field textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,0.08); }
.set-field.is-muted { opacity: .62; }
.set-status-pill { align-self: flex-start; border: 1px solid rgba(199, 126, 0,.28); border-radius: 999px; padding: 8px 12px; color: var(--warn); background: rgba(199, 126, 0,.08); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.set-status-pill.is-on { border-color: rgba(91, 76, 255,.35); color: var(--neon); background: rgba(91, 76, 255,.1); }
.set-bridge-note {
  display: grid;
  gap: 5px;
  margin: 12px 0 4px;
  padding: 12px 13px;
  border: 1px solid rgba(199, 126, 0,.26);
  border-radius: 14px;
  color: var(--dim);
  background: rgba(199, 126, 0,.07);
}
.set-bridge-note.is-ready { border-color: rgba(91, 76, 255,.32); background: rgba(91, 76, 255,.08); }
.set-bridge-note b { color: var(--ink); font-size: 13px; }
.set-bridge-note span { font-size: 12px; line-height: 1.45; }
.set-bridge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.set-bridge-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass);
}
.set-bridge-card.is-ready { border-color: rgba(91, 76, 255,.34); box-shadow: inset 3px 0 0 var(--neon); }
.set-bridge-card b { color: var(--ink); font-size: 13px; }
.set-bridge-card i {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(91, 76, 255,.18);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--neon);
  background: rgba(91, 76, 255,.08);
  font: 800 9px "Spline Sans Mono", monospace;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.set-bridge-card span { color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.set-code-list { display: grid; gap: 7px; margin: 8px 0 14px; }
.set-code-list code {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid rgba(91, 76, 255,.14);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--ink);
  background: rgba(0,0,0,.24);
  font: 700 11px "Spline Sans Mono", monospace;
}
.set-module-card { display: grid; gap: 16px; border: 1px solid rgba(91, 76, 255,.18); border-radius: 16px; padding: 18px; background: var(--glass); }
.set-module-card-main { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: start; }
.set-module-card h3 { margin: 0 0 6px; }
.set-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 760px) {
  .set-settings-layout { grid-template-columns: 1fr; }
  .set-category-nav { grid-template-columns: 1fr; }
  .set-section-head { flex-direction: column; }
  .set-grid-two { grid-template-columns: 1fr; }
  .set-choice-grid { grid-template-columns: 1fr; }
  .set-model-grid { grid-template-columns: 1fr; }
  .set-selection-summary { align-items: flex-start; flex-direction: column; }
  .set-response-controls { grid-template-columns: 1fr; }
}
.set-providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.set-prov { position: relative; border: 1px solid var(--line); border-radius: 15px; padding: 15px; background: var(--glass); transition: border-color 0.2s; }
.set-prov.is-on { border-color: rgba(91, 76, 255,0.3); }
.set-prov-top { display: flex; align-items: center; gap: 10px; }
.set-prov-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 10px currentColor; }
.set-prov-id { flex: 1; min-width: 0; }
.set-prov-id b { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.set-prov-id i { font-size: 11.5px; font-style: normal; color: var(--dim); }
.set-tag { font: 600 8px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: rgba(91, 76, 255,0.12); color: var(--neon); }
.set-switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; }
.set-switch input { opacity: 0; width: 0; height: 0; }
.set-switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.1); transition: background 0.2s; cursor: pointer; }
.set-switch span::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #4a4568; transition: transform 0.2s; }
.set-switch input:checked + span { background: var(--neon); }
.set-switch input:checked + span::before { transform: translateX(16px); background: var(--glass-2); }
.set-switch.set-switch-large { width: 48px; height: 28px; }
.set-switch.set-switch-large span::before { width: 22px; height: 22px; }
.set-switch.set-switch-large input:checked + span::before { transform: translateX(20px); }
.set-prov-mods { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0; }
.set-mod { font: 500 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.set-prov-body { display: flex; flex-direction: column; gap: 10px; }
.set-prov-key { font-size: 11.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.set-prov-key .ic { width: 13px; height: 13px; }
.set-prov-key code { color: var(--dim); }
.set-keystate { font: 600 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; }
.set-keystate.server { color: var(--neon); background: rgba(91, 76, 255,0.1); }
.set-keystate.local { color: var(--warn); background: rgba(199, 126, 0,0.12); }
.set-mini { display: flex; flex-direction: column; gap: 5px; }
.set-mini span { font-size: 11px; color: var(--dim); }
.set-adv summary { cursor: pointer; font: 600 11px "Spline Sans Mono", monospace; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.set-adv[open] summary { color: var(--neon); }
.set-adv > .set-mini { margin-top: 10px; }
.set-del { color: #c22b52 !important; margin-top: 8px; }
.set-card-x {
  position: absolute; top: 9px; right: 9px; z-index: 2; width: 27px; height: 27px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(33, 29, 58,0.14); background: var(--glass);
  color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1;
}
.set-card-x:hover { border-color: rgba(224, 52, 94,0.62); color: #c22b52; background: rgba(224, 52, 94,0.1); }
.set-safe-pill {
  flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgba(91, 76, 255,0.28); border-radius: 999px;
  color: var(--neon); background: rgba(91, 76, 255,0.08); font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.set-safe-pill.is-off { color: var(--dim); background: rgba(255,255,255,0.04); border-color: var(--line); }
.set-rembg-rows { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 12px; }
.set-rembg-row { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.set-rembg-row span { color: var(--dim); font: 500 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.set-rembg-row b { color: var(--ink); font-weight: 600; }
.set-note-warn { color: #c77e00; }
.set-note-warn code { background: rgba(199, 126, 0,0.1); border: 1px solid rgba(199, 126, 0,0.25); border-radius: 6px; padding: 1px 6px; font: 600 11.5px "Spline Sans Mono", monospace; color: #ffe8b0; }
.set-social-section { background: linear-gradient(160deg, rgba(91, 76, 255,0.075), rgba(255, 255, 255,0.58)); }
.set-social-notice {
  margin-bottom: 14px; border: 1px solid rgba(91, 76, 255,0.28); border-radius: 13px; padding: 11px 12px;
  color: var(--ink); background: rgba(91, 76, 255,0.08); font-size: 12.5px; line-height: 1.45;
}
.set-social-command {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 14px; padding: 14px 16px; border: 1px solid rgba(91, 76, 255,0.20); border-radius: 16px;
  background: linear-gradient(135deg, rgba(91, 76, 255,0.10), rgba(36, 31, 63,0.045));
}
.set-social-command div { min-width: 0; display: grid; gap: 4px; }
.set-social-command span {
  color: var(--neon); font: 800 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
}
.set-social-command b { color: var(--ink); font-size: 17px; letter-spacing: 0; }
.set-social-command p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.set-social-bolt {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; border: 1px solid rgba(47, 255, 149,0.46); border-radius: 999px; padding: 9px 13px;
  cursor: pointer; color: #03100b; background: linear-gradient(135deg, var(--neon), #a86fff);
  box-shadow: 0 14px 32px rgba(47, 255, 149,0.18), inset 0 0 0 1px rgba(255,255,255,0.22);
  font: 900 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.set-social-bolt svg { width: 15px; height: 15px; stroke-width: 2.6; }
.set-social-bolt:disabled { cursor: wait; opacity: 0.62; filter: saturate(0.65); }
.set-social-bolt:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(47, 255, 149,0.24); }
.set-oauth-apps {
  margin-top: 14px; border: 1px dashed rgba(91, 76, 255,0.22); border-radius: 14px; padding: 11px 12px;
  background: rgba(36, 31, 63,0.035);
}
.set-oauth-apps summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  color: var(--ink); list-style: none; font: 800 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase;
}
.set-oauth-apps summary::-webkit-details-marker { display: none; }
.set-oauth-apps summary::before {
  content: "▸"; color: var(--neon); font-size: 12px; transition: transform 0.16s ease;
}
.set-oauth-apps[open] summary::before { transform: rotate(90deg); }
.set-oauth-apps summary span { flex: 1 1 auto; min-width: 0; }
.set-oauth-apps summary b {
  flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(91, 76, 255,0.18);
  color: var(--neon); background: rgba(91, 76, 255,0.08); font-size: 9px;
}
.set-oauth-apps p { margin: 10px 0 8px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.set-social-next b { color: var(--ink); }
.set-oauth-callback { display: grid; gap: 6px; margin: 10px 0; }
.set-oauth-callback span {
  color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase;
}
.set-oauth-callback input, .set-oauth-form input, .set-oauth-form select {
  min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63,0.06);
  color: var(--ink); padding: 9px 10px; font-size: 12px; outline: none;
}
.set-oauth-provider-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.set-oauth-provider-row span {
  padding: 4px 7px; border: 1px solid rgba(91, 76, 255,0.16); border-radius: 999px;
  color: var(--dim); background: rgba(36, 31, 63,0.04); font: 800 8.5px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.set-oauth-provider-row .is-ready { color: var(--neon); border-color: rgba(91, 76, 255,0.32); background: rgba(91, 76, 255,0.08); }
.set-oauth-provider-row .is-missing { color: #d6a94f; border-color: rgba(199, 126, 0,0.24); background: rgba(199, 126, 0,0.07); }
.set-oauth-form { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(170px, 1fr) auto; gap: 8px; align-items: center; }
.set-oauth-form button { min-height: 38px; white-space: nowrap; }
.set-connect-model {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px;
}
.set-connect-model article {
  min-width: 0; border: 1px solid rgba(91, 76, 255,0.16); border-radius: 14px; padding: 12px;
  background: rgba(255, 255, 255,0.34);
}
.set-connect-model b {
  display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px;
}
.set-connect-model b svg { width: 15px; height: 15px; color: var(--neon); }
.set-connect-model span {
  display: block; margin-top: 6px; color: var(--dim); font-size: 12px; line-height: 1.45;
}
.set-hermes-connect {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  margin-bottom: 14px; border: 1px solid rgba(91, 76, 255,0.18); border-radius: 15px; padding: 12px;
  background: linear-gradient(135deg, rgba(91, 76, 255,0.07), rgba(36, 31, 63, 0.044));
}
.set-hermes-connect.is-online { border-color: rgba(91, 76, 255,0.42); box-shadow: inset 0 0 0 1px rgba(91, 76, 255,0.08), 0 0 28px rgba(91, 76, 255,0.08); }
.set-hermes-orb {
  width: 37px; height: 37px; border-radius: 50%; border: 1px solid rgba(91, 76, 255,0.34);
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.59), rgba(91, 76, 255,0.16) 44%, rgba(255, 255, 255,0.95));
  box-shadow: 0 0 22px rgba(91, 76, 255,0.12);
}
.set-hermes-connect.is-online .set-hermes-orb { box-shadow: 0 0 26px rgba(91, 76, 255,0.28); }
.set-hermes-copy { min-width: 0; display: grid; gap: 3px; }
.set-hermes-copy b { color: var(--ink); font-size: 14px; }
.set-hermes-copy span { color: var(--neon); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.set-hermes-copy em { color: var(--dim); font-size: 12px; line-height: 1.4; font-style: normal; }
.set-hermes-status { display: grid; justify-items: end; gap: 4px; min-width: 124px; }
.set-hermes-status span {
  color: var(--neon); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid rgba(91, 76, 255,0.24); border-radius: 999px; background: rgba(91, 76, 255,0.08);
}
.set-hermes-status small { color: var(--ink); font-size: 10.5px; text-align: right; }
.set-hermes-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.set-social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.set-social-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: var(--glass);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.set-social-card.is-linked { border-color: rgba(91, 76, 255,0.38); box-shadow: inset 0 0 0 1px rgba(91, 76, 255,0.08); }
.set-social-card.is-pending { border-color: rgba(199, 126, 0,0.34); box-shadow: inset 0 0 0 1px rgba(199, 126, 0,0.06); }
.set-social-card.is-saved { border-color: rgba(199, 126, 0,0.28); }
.set-social-top { display: flex; align-items: center; gap: 10px; padding-right: 28px; }
.set-social-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 12px currentColor; }
.set-social-top > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; }
.set-social-top b { color: var(--ink); font-size: 14px; }
.set-social-top i {
  color: var(--dim); font: 700 8.5px "Spline Sans Mono", monospace; font-style: normal;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.set-social-lightning {
  flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(91, 76, 255,0.28); border-radius: 50%;
  color: var(--neon); background: rgba(91, 76, 255,0.08);
  box-shadow: 0 0 18px rgba(91, 76, 255,0.12);
  transition: transform 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.set-social-lightning svg { width: 16px; height: 16px; stroke-width: 2.4; }
.set-social-lightning:hover {
  transform: translateY(-1px);
  border-color: rgba(91, 76, 255,0.62);
  background: rgba(91, 76, 255,0.14);
  box-shadow: 0 0 26px rgba(91, 76, 255,0.22);
}
.set-social-connect-state {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: -2px; padding: 8px 9px; border: 1px solid rgba(255,255,255,0.075); border-radius: 11px;
  background: rgba(36, 31, 63, 0.032);
}
.set-social-connect-state span {
  color: var(--ink); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.set-social-connect-state b {
  flex: 0 0 auto; color: var(--neon); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.set-social-hermes-proof {
  display: flex; align-items: center; gap: 7px; margin-top: -2px; padding: 7px 9px; border-radius: 10px;
  border: 1px solid rgba(91, 76, 255,0.17); background: rgba(91, 76, 255,0.055);
  color: var(--ink); font-size: 11.5px; line-height: 1.35;
}
.set-social-hermes-proof svg { width: 13px; height: 13px; color: var(--neon); flex: 0 0 auto; }
.set-social-oauth {
  border: 1px solid rgba(91, 76, 255,0.13); border-radius: 12px; padding: 8px 10px;
  background: rgba(91, 76, 255,0.035);
}
.set-social-oauth summary {
  cursor: pointer; color: var(--ink); font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase;
}
.set-social-oauth p { margin: 8px 0 7px; color: var(--dim); font-size: 12px; line-height: 1.4; }
.set-social-oauth div { display: flex; flex-wrap: wrap; gap: 6px; }
.set-social-oauth div span {
  padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(91, 76, 255,0.13);
  color: var(--dim); background: rgba(36, 31, 63, 0.04); font: 700 9px "Spline Sans Mono", monospace;
}
.set-social-oauth em {
  display: block; margin-top: 8px; color: var(--ink); font-size: 11px; font-style: normal; line-height: 1.35;
}
.set-social-open {
  align-self: flex-start; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  color: var(--dim); background: rgba(36, 31, 63, 0.036); font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.set-social-open:hover { border-color: rgba(91, 76, 255,0.4); color: var(--neon); background: rgba(91, 76, 255,0.07); }
.set-social-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.set-social-action {
  flex: 1 1 132px; min-height: 36px; border-radius: 12px; padding: 8px 11px;
  font: 800 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.set-social-signin {
  width: 100%; justify-content: center; color: #ffffff;
  border-color: rgba(91, 76, 255,0.72);
  background: linear-gradient(120deg, var(--neon), #b44bf0);
  box-shadow: 0 14px 32px rgba(91, 76, 255,0.18);
}
.set-social-card.is-pending .set-social-signin {
  border-color: rgba(199, 126, 0,0.72);
  background: linear-gradient(120deg, #c77e00, #5b4cff);
}
.set-social-signin:hover { color: #ffffff; background: linear-gradient(120deg, #8d82ff, #c26af5); }
.set-social-actions span {
  flex: 1 1 100%; min-width: 0; color: var(--ink); font-size: 11px; line-height: 1.25;
  text-align: right;
}
.set-social-confirm { margin-top: 10px; }
.set-social-confirm label {
  display: block; margin-bottom: 6px; font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.set-social-confirm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.set-social-confirm-row input {
  flex: 1 1 160px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06);
  color: var(--ink); padding: 9px 11px; font-size: 12.5px; outline: none;
}
.set-social-confirm-row input:focus { border-color: var(--neon); }
.set-social-confirm-row button {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 10px; padding: 9px 14px;
  font: 800 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.04em;
}
.set-social-assist {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px;
  border: 1px dashed rgba(91, 76, 255,0.24); border-radius: 15px; padding: 14px;
  background: rgba(36, 31, 63, 0.036);
}
.set-social-assist b { color: var(--ink); font-size: 14px; }
.set-social-assist p { margin: 4px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; max-width: 780px; }
.set-info-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(36, 31, 63, 0.044); }
.set-info-card h3 { margin: 5px 0 4px; font-size: 22px; letter-spacing: 0; }
.set-panel-heading { margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(91, 76, 255,.05); }
.set-panel-heading h3 { margin: 4px 0 5px; font-size: 24px; letter-spacing: 0; }

.set-client-setup-mount { min-width: 0; }
.client-setup-console {
  display: grid;
  gap: 16px;
  width: min(100%, 1320px);
  margin: 0 auto;
  overflow: visible;
}
.cs-hero, .cs-main, .cs-slot-list, .cs-panel, .cs-savebar {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(91, 76, 255,0.07), rgba(255, 255, 255,0.72));
}
.cs-hero, .cs-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}
.cs-kicker, .cs-label, .cs-section-label {
  margin: 0;
  color: var(--neon);
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-hero h1 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 56px); letter-spacing: 0; }
.cs-note, .cs-help, .cs-safety-note, .cs-empty, .cs-loading { color: var(--dim); }
.cs-hero-stats, .cs-actions, .cs-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cs-hero-stats { justify-content: flex-end; }
.cs-hero-stats b, .cs-hero-stats i, .cs-score {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(36, 31, 63, 0.044);
  font-style: normal;
}
.cs-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 14px;
}
.cs-slot-list, .cs-main, .cs-panel { padding: 14px; }
.cs-slot-button, .cs-toggle, .cs-mini-card, .cs-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(36, 31, 63, 0.04);
}
.cs-slot-button {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cs-slot-button.is-active { border-color: var(--neon); box-shadow: inset 3px 0 0 var(--neon); }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-panel { display: grid; gap: 10px; min-width: 0; }
.cs-field { display: grid; gap: 6px; min-width: 0; }
.cs-field input, .cs-field select, .cs-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(36, 31, 63, 0.056);
  color: var(--ink);
  padding: 10px 11px;
}
.cs-toggle, .cs-mini-card, .cs-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
}
.cs-toggle input { margin-top: 3px; accent-color: var(--neon); }
.client-setup-console button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(91, 76, 255,0.09);
  color: var(--ink);
  padding: 0 12px;
  cursor: pointer;
}
.cs-savebar button {
  background: var(--neon);
  color: #ffffff;
  font-weight: 800;
}
.client-setup-console button:disabled { opacity: 0.48; cursor: not-allowed; }
@media (max-width: 980px) {
  .cs-layout, .cs-grid { grid-template-columns: 1fr; }
  .cs-hero, .cs-savebar { align-items: flex-start; flex-direction: column; }
  .cs-hero-stats { justify-content: flex-start; }
}

/* ---------------- account / plan manager ---------------- */
.account-plan { display: flex; flex-direction: column; gap: 18px; }
.account-notice {
  border: 1px solid rgba(91, 76, 255, 0.34); border-radius: 14px; padding: 12px 14px;
  background: rgba(91, 76, 255, 0.09); color: var(--ink); font-size: 12.5px; line-height: 1.45;
}
.crm-toolbar { align-items: stretch; }
.crm-search, .crm-filter {
  min-height: 40px;
  border: 1px solid rgba(91, 76, 255, 0.22);
  border-radius: 12px;
  background: var(--glass);
  color: var(--ink);
  padding: 0 12px;
  font: 700 13px "Instrument Sans", sans-serif;
}
.crm-search { flex: 1 1 260px; min-width: min(320px, 100%); }
.crm-filter { flex: 0 0 160px; }
.crm-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(330px, 0.72fr); gap: 14px; align-items: start; }
.crm-list { display: grid; gap: 10px; min-width: 0; }
.crm-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
  cursor: pointer;
}
.crm-card:hover, .crm-card.is-selected { border-color: rgba(91, 76, 255, 0.46); box-shadow: 0 10px 28px rgba(36, 31, 63, 0.112); }
.crm-card.is-due { border-color: rgba(199, 126, 0, 0.45); }
.crm-card>b { color: var(--neon); font: 800 13px "Spline Sans Mono", monospace; white-space: nowrap; }
.crm-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(91, 76, 255, 0.28);
  border-radius: 15px;
  background: radial-gradient(circle at 30% 20%, rgba(91, 76, 255,.3), rgba(255, 255, 255,.9));
  color: var(--ink);
  font: 900 14px "Spline Sans Mono", monospace;
}
.crm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-avatar.is-large { width: 74px; height: 74px; border-radius: 20px; }
.crm-main { min-width: 0; }
.crm-main h4 { margin: 0 0 2px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-main p { margin: 0; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-tags, .crm-socials { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.crm-tags span, .crm-socials a, .crm-socials span {
  padding: 3px 7px;
  border: 1px solid rgba(91, 76, 255, 0.18);
  border-radius: 999px;
  background: rgba(91, 76, 255, 0.06);
  color: var(--ink);
  font: 800 9px "Spline Sans Mono", monospace;
  text-decoration: none;
}
.crm-next { margin-top: 7px !important; color: #2b2649 !important; }
.crm-detail {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
}
.crm-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: center; }
.crm-detail-head p { margin: 0 0 4px; color: var(--neon); font: 800 10px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: .14em; }
.crm-detail-head h3 { margin: 0; font-size: 22px; line-height: 1.1; }
.crm-detail-head span { color: var(--dim); font-size: 13px; }
.crm-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crm-detail-grid span { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(91, 76, 255,.12); border-radius: 12px; background: rgba(36, 31, 63, 0.036); min-width: 0; }
.crm-detail-grid b { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.crm-detail-grid i, .crm-detail-grid a { min-width: 0; color: var(--ink); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-socials.is-detail { margin: 0; }
.auth-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.auth-recovery-codes code {
  display: block;
  padding: 8px 9px;
  border: 1px solid rgba(91, 76, 255, 0.28);
  border-radius: 8px;
  background: rgba(36, 31, 63, 0.068);
  color: var(--ink);
  font: 800 11px "Spline Sans Mono", monospace;
  letter-spacing: 0.08em;
}
.account-notice small {
  display: block;
  color: var(--dim);
}
.account-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: linear-gradient(135deg, rgba(91, 76, 255, 0.11), rgba(255, 255, 255, 0.72));
}
.account-avatar {
  width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(91, 76, 255, 0.46);
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.6), rgba(91, 76, 255, 0.16) 42%, rgba(255, 255, 255, 0.96));
  color: var(--ink); font: 800 18px "Instrument Sans", sans-serif; letter-spacing: 0.08em;
  box-shadow: inset 0 0 24px rgba(91, 76, 255, 0.14), 0 0 26px rgba(91, 76, 255, 0.16);
}
.account-hero-main { min-width: 0; }
.account-kicker, .account-card-k {
  margin: 0 0 6px; font: 600 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.account-hero h3, .account-section h3 { margin: 0; font-size: 20px; }
.account-identity { margin: 4px 0 0; color: var(--dim); font-size: 12.5px; overflow-wrap: anywhere; }
.account-status { display: inline-flex; align-items: center; gap: 7px; margin: 7px 0 0; color: var(--dim); font-size: 12.5px; }
.account-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.account-status-error { color: #c22b52; }
.account-status-error span { background: #e0345e; box-shadow: 0 0 10px rgba(224, 52, 94, 0.7); }
.account-plan-chip {
  min-width: 132px; padding: 12px 14px; border: 1px solid rgba(91, 76, 255, 0.28); border-radius: 14px;
  background: var(--glass); text-align: right;
}
.account-plan-chip span { display: block; color: var(--dim); font-size: 11px; }
.account-plan-chip b { display: block; color: var(--neon); font-size: 16px; margin-top: 3px; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-card, .account-section {
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--glass);
}
.account-card h4, .account-tier h4 { margin: 0 0 5px; font-size: 16px; }
.account-card p, .account-section p, .account-tier p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.account-facts { display: grid; gap: 8px; margin-top: 14px; }
.account-facts span {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 11px;
  background: rgba(36, 31, 63, 0.04); color: var(--ink); font-size: 12px;
}
.account-facts b { color: var(--dim); font-weight: 500; }
.account-billing-list { display: grid; gap: 8px; margin-top: 14px; }
.account-billing-list span {
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid rgba(91, 76, 255, 0.09);
  background: rgba(36, 31, 63, 0.036); color: var(--ink); font-size: 12px;
}
.account-billing-list b { color: var(--dim); font-weight: 600; }
.account-billing-list i { font-style: normal; text-align: right; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.account-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.account-tier {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 100%;
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--glass);
}
.account-tier.is-current { border-color: rgba(91, 76, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.08); }
.account-tier-badge {
  align-self: flex-start; font: 700 8px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; background: rgba(91, 76, 255, 0.1); color: var(--neon);
}
.account-tier b { color: var(--ink); font-size: 15px; }
.account-tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--dim); font-size: 12px; }
.account-tier li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--neon); }
.account-tier .btn { margin-top: auto; justify-content: center; }
.account-cancel {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-color: rgba(224, 52, 94, 0.22); background: rgba(224, 52, 94, 0.045);
}

/* ---------------- owner developer control room ---------------- */
.developer-shell { display: flex; flex-direction: column; gap: 16px; }
.developer-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
  border: 1px solid rgba(91, 76, 255, 0.28); border-radius: 18px; padding: 20px;
  background: linear-gradient(135deg, rgba(91, 76, 255, 0.1), rgba(255, 255, 255, 0.82));
}
.developer-kicker {
  margin: 0 0 7px; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}
.developer-hero h3, .developer-card h4, .developer-denied h3 { margin: 0; font-size: 22px; }
.developer-hero p:not(.developer-kicker), .developer-denied p {
  margin: 8px 0 0; max-width: 760px; color: var(--dim); font-size: 13px; line-height: 1.55;
}
.developer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.developer-card, .developer-denied {
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--glass);
}
.developer-list { display: grid; gap: 8px; margin-top: 14px; }
.developer-list span {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 10px;
  border-radius: 11px; background: rgba(36, 31, 63, 0.044); color: var(--ink); font-size: 12px;
}
.developer-list b { color: var(--dim); font-weight: 500; }
.developer-list i { font-style: normal; text-align: right; overflow-wrap: anywhere; }
.developer-lane-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.developer-lane-group > b { display: block; font-size: 12px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.developer-lane-controls { display: grid; gap: 8px; margin-top: 14px; }
.developer-lane-control {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, .95fr) minmax(150px, .95fr) auto;
  align-items: end; gap: 10px; padding: 10px; border-radius: 12px;
  background: rgba(36, 31, 63, 0.044); border: 1px solid rgba(91, 76, 255, 0.1);
}
.developer-lane-copy { min-width: 0; display: grid; gap: 2px; }
.developer-lane-copy b { color: var(--ink); font-size: 13px; }
.developer-lane-copy i { color: var(--dim); font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-lane-copy small { color: var(--neon); font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-lane-control label { display: grid; gap: 4px; min-width: 0; }
.developer-lane-control label span {
  color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase;
}
.developer-lane-control select {
  min-width: 0; width: 100%; height: 36px; border-radius: 10px; padding: 0 32px 0 10px;
  border: 1px solid rgba(91, 76, 255, 0.18); background: var(--glass); color: var(--ink);
  font: 600 12px inherit; outline: none;
}
.developer-lane-control select:focus { border-color: rgba(91, 76, 255, 0.55); box-shadow: 0 0 0 3px rgba(91, 76, 255, 0.1); }
.developer-lane-control em { color: var(--ink); font-style: normal; font-size: 11px; text-align: right; white-space: nowrap; }
.developer-lane-saved { margin: 8px 0 0; color: var(--neon); font-size: 11px; }
.developer-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.developer-shortcut {
  text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 14px; padding: 13px;
  background: var(--glass); color: var(--ink); transition: border-color .18s, transform .18s, background .18s;
}
.developer-shortcut:hover { transform: translateY(-1px); border-color: rgba(91, 76, 255, 0.38); background: rgba(91, 76, 255, 0.08); }
.developer-shortcut b { display: block; margin-bottom: 5px; font-size: 14px; }
.developer-shortcut span { color: var(--dim); font-size: 12px; line-height: 1.45; }

/* ---- developer control room v2: agents/subagents/programs, live ---- */
@keyframes devRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes devSpin { to { transform: rotate(360deg); } }
@keyframes devShim { to { transform: translateX(100%); } }
.dev-hero-right { display: grid; gap: 8px; justify-items: end; }
.dev-refresh-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; background: rgba(36, 31, 63, 0.048); color: var(--ink); font: 600 12px "Instrument Sans";
  cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.dev-refresh-btn:hover { border-color: rgba(91, 76, 255, 0.4); background: rgba(91, 76, 255, 0.1); transform: translateY(-1px); }
.dev-refresh-ic { display: inline-flex; }
.dev-refresh-btn.is-spinning .dev-refresh-ic { animation: devSpin 0.9s linear infinite; }
.dev-updated { margin: 0; font-size: 11px; color: var(--dim); }

.dev-stat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dev-stat {
  display: grid; gap: 4px; justify-items: center; text-align: center; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 8px; background: var(--glass); animation: devRise .4s ease both;
}
.dev-stat span, .dev-stat-static { font: 700 22px "Spline Sans Mono", monospace; color: var(--neon); text-shadow: 0 0 14px rgba(91, 76, 255, 0.35); }
.dev-stat i { font-style: normal; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }

.dev-error-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid rgba(91, 76, 255, 0.28);
  border-radius: 14px; padding: 14px 16px; background: rgba(91, 76, 255, 0.06);
}
.dev-error-banner b { color: #3a3560; }
.dev-error-banner span { color: var(--dim); font-size: 12px; flex: 1 1 220px; }
.dev-error-banner button {
  border: 1px solid rgba(91, 76, 255, 0.38); border-radius: 9px; padding: 6px 12px; background: rgba(91, 76, 255, 0.12);
  color: #3a3560; font: 600 12px "Instrument Sans"; cursor: pointer;
}

.dev-section { display: flex; flex-direction: column; gap: 12px; }
.dev-section-head h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.dev-section-head p { margin: 4px 0 0; color: var(--dim); font-size: 12px; line-height: 1.5; max-width: 780px; }
.dev-provider-monitor { display: grid; gap: 7px; }
.dev-provider-row {
  display: grid; grid-template-columns: 92px minmax(150px, 1.4fr) repeat(3, minmax(90px, .7fr));
  align-items: center; gap: 12px; min-height: 54px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(36, 31, 63, 0.036);
}
.dev-provider-row > div, .dev-provider-row > span:not(.dev-state-pill) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.dev-provider-row b { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dev-provider-row i { color: var(--dim); font: 600 9px "Spline Sans Mono", monospace; letter-spacing: 0; text-transform: uppercase; }
.dev-provider-empty { margin: 0; padding: 13px; border: 1px dashed var(--line); border-radius: 8px; color: var(--dim); font-size: 12px; }

.dev-agent-grid, .dev-program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dev-agent-card, .dev-program-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--glass);
  animation: devRise .4s ease both; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.dev-agent-card:hover, .dev-program-card:hover { transform: translateY(-2px); border-color: rgba(91, 76, 255, 0.32); box-shadow: 0 10px 26px rgba(36, 31, 63, 0.122); }
.dev-agent-top, .dev-program-top { display: flex; align-items: center; gap: 9px; }
.dev-agent-ic, .dev-program-ic { display: inline-flex; flex: 0 0 auto; color: var(--neon); }
.dev-agent-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.dev-agent-id b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-agent-id i { font-style: normal; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-program-top b { flex: 1 1 auto; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-agent-focus { margin: 10px 0 0; font-size: 12px; color: var(--dim); line-height: 1.5; }
.dev-program-card p { margin: 10px 0 0; font-size: 12px; color: var(--dim); line-height: 1.5; }
.dev-program-meta { display: block; margin-top: 7px; font-size: 10.5px; color: var(--dim); opacity: 0.8; overflow-wrap: anywhere; }

.dev-agent-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.dev-agent-metrics span { display: grid; justify-items: center; gap: 2px; border-radius: 9px; padding: 6px 2px; background: rgba(36, 31, 63, 0.044); }
.dev-agent-metrics b { font: 700 12px "Spline Sans Mono", monospace; color: var(--ink); }
.dev-agent-metrics i { font-style: normal; font-size: 8.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dim); }
.dev-agent-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 10.5px; color: var(--dim); }
.dev-agent-foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-agent-foot span:last-child { flex: 0 0 auto; }

.dev-sub-toggle {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; width: 100%; border: none; border-top: 1px solid var(--line);
  background: none; color: var(--dim); font: 600 11px "Instrument Sans"; padding: 9px 0 0; cursor: pointer; text-align: left;
}
.dev-sub-toggle:hover { color: var(--ink); }
.dev-sub-toggle [data-dev-sub-caret] { color: var(--neon); }
.dev-sub-list { display: grid; gap: 6px; margin-top: 8px; }
.dev-sub-item {
  display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 7px 9px; background: rgba(36, 31, 63, 0.044); font-size: 11px;
}
.dev-sub-item b { font-weight: 600; flex: 0 0 auto; }
.dev-sub-item i { font-style: normal; color: var(--dim); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-sub-item span { flex: 0 0 auto; font-size: 10px; text-transform: capitalize; color: var(--dim); }

.dev-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.dev-state-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; border-radius: 999px; padding: 4px 9px;
  font-size: 10px; text-transform: capitalize; background: rgba(36, 31, 63, 0.048); border: 1px solid transparent;
}
.dev-tone-on .dev-dot, .dev-tone-on.dev-dot { background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: livePulse 2.2s ease-in-out infinite; }
.dev-tone-warn .dev-dot, .dev-tone-warn.dev-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.dev-tone-off .dev-dot, .dev-tone-off.dev-dot { background: #e0345e; box-shadow: 0 0 8px rgba(224, 52, 94, 0.7); }
.dev-state-pill.dev-tone-on { color: #3a3560; border-color: rgba(91, 76, 255, 0.32); background: rgba(91, 76, 255, 0.08); }
.dev-state-pill.dev-tone-warn { color: #7a5200; border-color: rgba(199, 126, 0, 0.34); background: rgba(199, 126, 0, 0.08); }
.dev-state-pill.dev-tone-off { color: #ffc2cb; border-color: rgba(224, 52, 94, 0.34); background: rgba(224, 52, 94, 0.08); }
.dev-agent-card.dev-tone-off, .dev-program-card.dev-tone-off { border-color: rgba(224, 52, 94, 0.22); }
.dev-agent-card.dev-tone-warn, .dev-program-card.dev-tone-warn { border-color: rgba(199, 126, 0, 0.24); }

.dev-ticker { display: grid; gap: 7px; max-height: 280px; overflow-y: auto; }
.dev-ticker-item {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  border-radius: 10px; padding: 9px 12px; background: rgba(36, 31, 63, 0.04); font-size: 12px; animation: devRise .35s ease both;
}
.dev-ticker-item b { color: var(--neon); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-ticker-item span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-ticker-item i { font-style: normal; color: var(--dim); font-size: 10.5px; flex: 0 0 auto; }
.dev-empty { margin: 0; padding: 16px; text-align: center; color: var(--dim); font-size: 12px; border: 1px dashed var(--line); border-radius: 12px; }

.dev-skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dev-skeleton-card {
  position: relative; overflow: hidden; height: 168px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass);
}
.dev-skeleton-card::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(91, 76, 255, 0.1) 50%, transparent 80%);
  animation: devShim 1.3s ease-in-out infinite;
}

@media (max-width: 1080px) {
  
  .dev-agent-grid, .dev-program-grid, .dev-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .developer-lane-control { grid-template-columns: 1fr 1fr; }
  .developer-lane-copy, .developer-lane-control em { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 900px) {
  
  
  
  
  
  
  
  
  
  
  
  
  .developer-hero, .developer-grid, .developer-shortcuts, .developer-lane-groups { grid-template-columns: 1fr; }
  .developer-lane-control { grid-template-columns: 1fr; }
  .developer-lane-copy, .developer-lane-control em { grid-column: auto; }
  .dev-hero-right { justify-items: start; }
  .dev-agent-grid, .dev-program-grid, .dev-skeleton-grid, .dev-stat-row { grid-template-columns: 1fr; }
  .dev-agent-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dev-ticker-item { grid-template-columns: 1fr; gap: 3px; }
  .account-grid, .account-tiers { grid-template-columns: 1fr; }
  .account-hero { grid-template-columns: auto minmax(0, 1fr); }
  .account-plan-chip { grid-column: 1 / -1; text-align: left; }
  .account-cancel { align-items: stretch; flex-direction: column; }
  .set-ai-hero, .set-model-grid, .set-control-grid { grid-template-columns: 1fr; }
  .set-status-grid { grid-template-columns: 1fr; }
  .set-connect-model { grid-template-columns: 1fr; }
  .set-hermes-connect { grid-template-columns: auto minmax(0, 1fr); }
  .set-hermes-status, .set-hermes-actions { grid-column: 1 / -1; justify-items: start; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ml { gap: 10px; }
  .ml-tabs { overflow: visible; flex-wrap: wrap; width: 100%; }
  .ml-tab { flex: 1 1 calc(50% - 4px); text-align: center; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .set-sec-head, .set-social-assist { flex-direction: column; align-items: stretch; }
  .set-safe-pill { align-self: flex-start; }
  .set-oauth-form { grid-template-columns: 1fr; }
  .set-social-actions { align-items: stretch; }
  .set-social-actions .set-social-open { flex: 1 1 calc(50% - 4px); text-align: center; }
  .set-social-actions span { text-align: left; }
  /* keep the roll button reachable above the fixed bottom nav */
  
}
@media (prefers-reduced-motion: reduce) {
  
  
  
  .dev-stat, .dev-agent-card, .dev-program-card, .dev-ticker-item { animation: none; }
  .dev-refresh-btn.is-spinning .dev-refresh-ic, .dev-tone-on .dev-dot, .dev-tone-on.dev-dot, .dev-skeleton-card::after { animation: none; }
}

/* =====================  CONTENT HUB + ANALYTICS  ============= */
/* ============================================================= */
.ch, .an { display: flex; flex-direction: column; gap: 16px; }

.an { min-width: 0; }
.an-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 14px; background: var(--glass);
}
.an-hero h3 { margin: 0; font-size: 22px; }

.an-hero p { margin: 6px 0 0; max-width: 720px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.ch-eyebrow { margin: 0 !important; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--neon) !important; }

.ch-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ch-kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.ch-kpi-k { font: 600 9px "Spline Sans Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ch-kpi-v { font: 600 24px "Instrument Sans"; color: var(--ink); line-height: 1.05; }
.ch-kpi-s { font-size: 11px; color: var(--dim); }
.ch-kpi.good .ch-kpi-v { color: var(--neon); }

.ch-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--glass); }
.ch-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ch-card-h h3 { margin: 0; font-size: 14px; }

/* Managed Growth stays visually distinct from social analytics: it reports
   tenant-scoped operational records, never modeled reach or engagement. */
.analytics-stack, .mg-report { display: grid; gap: 14px; min-width: 0; }
.mg-report .ch-card { border-radius: 8px; }
.mg-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.mg-hero h3, .mg-sources h3 { margin: 3px 0 7px; letter-spacing: 0; }
.mg-hero p:not(.ch-eyebrow), .mg-row p, .mg-module p, .mg-metric p, .mg-sources small { margin: 0; color: var(--dim); line-height: 1.45; }
.mg-setup, .mg-metrics, .mg-grid, .mg-module-grid { display: grid; gap: 10px; min-width: 0; }
.mg-setup { grid-template-columns: repeat(3, minmax(90px, 1fr)); min-width: min(100%, 390px); }
.mg-setup span, .mg-sources span {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--dim);
  font-size: 11px;
}
.mg-setup b { color: var(--neon); font-size: 18px; }
.mg-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-metric { min-width: 0; }
.mg-metric > span, .mg-metric small, .mg-row > span, .mg-module > div > span {
  color: var(--neon);
  font: 700 10px "Spline Sans Mono", monospace;
  text-transform: uppercase;
}
.mg-metric > b { display: block; margin: 6px 0; font-size: 24px; overflow-wrap: anywhere; }
.mg-module-grid { grid-template-columns: repeat(5, minmax(160px, 1fr)); }
.mg-module {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--glass) 86%, transparent);
  display: grid;
  align-content: start;
  gap: 9px;
}
.mg-module.is-needs_action { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.mg-module.is-live { border-color: color-mix(in srgb, var(--neon) 42%, transparent); }
.mg-module > div:first-child { display: grid; gap: 3px; }
.mg-module b, .mg-row b { overflow-wrap: anywhere; }
.mg-module small { color: var(--warn); line-height: 1.35; }
.mg-module dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mg-module dl div { min-width: 0; padding-top: 7px; border-top: 1px solid var(--line); }
.mg-module dt { color: var(--dim); font-size: 9px; }
.mg-module dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 11px; }
.mg-module .btn { width: 100%; min-height: 34px; white-space: normal; }
.mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-list { display: grid; gap: 8px; }
.mg-row {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.mg-row:first-child { border-top: 0; }
.mg-row.is-critical > span { color: var(--risk); }
.mg-row.is-warning > span { color: var(--warn); }
.mg-row .btn { justify-self: start; }
.mg-sources { display: grid; grid-template-columns: minmax(160px, 0.6fr) minmax(0, 1.4fr); gap: 14px; }
.mg-sources > div:nth-child(2) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.mg-sources i { color: var(--dim); font-style: normal; font-size: 9px; overflow-wrap: anywhere; }
.mg-sources small { grid-column: 1 / -1; }
.mg-safe { color: var(--neon); font: 700 10px "Spline Sans Mono", monospace; }

@media (max-width: 1280px) {
  .mg-module-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .mg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mg-hero { display: grid; }
  .mg-setup { min-width: 0; width: 100%; }
  .mg-module-grid, .mg-grid, .mg-sources, .mg-sources > div:nth-child(2) { grid-template-columns: 1fr; }
}
.ch-bars { display: flex; flex-direction: column; gap: 10px; }
.ch-bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
.ch-bar-lab { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); }
.ch-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ch-bar-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ch-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--neon); transition: width .5s cubic-bezier(.22,1,.36,1); }
.ch-bar-val { font: 500 12px "Spline Sans Mono", monospace; color: var(--neon); }

.an-trend, .an-reco-grid article {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--glass);
}

.ch-remove {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid rgba(33, 29, 58,.18); border-radius: 50%;
  background: var(--glass); color: #c22b52; cursor: pointer;
  font: 700 13px "Spline Sans Mono", monospace; line-height: 1;
}
.ch-remove:hover { border-color: rgba(224, 52, 94,.62); background: rgba(224, 52, 94,.14); color: #ffc7ce; }

.an-trend span {
  align-self: flex-start; font: 700 8.5px "Spline Sans Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; color: var(--neon); background: rgba(91, 76, 255,.1);
}
.an-trend b, .an-reco-grid b { color: var(--ink); font-size: 14px; }
.an-trend p, .an-reco-grid p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }

/* Content Hub planner: one weekly operating surface for content and business time. */

.an-src { display: inline-flex; align-items: center; gap: 8px; font: 500 12px "Spline Sans Mono", monospace; color: var(--dim); }
.an-src .ic { width: 14px; height: 14px; color: var(--neon); }
.an-src b { color: var(--neon); }
.an { display: grid; gap: 16px; min-width: 0; }
.an .an-hero { margin: 0; }
.an .ch-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an .ch-kpi { min-height: 106px; justify-content: center; border-radius: 14px; background: var(--glass); }
.an .ch-kpi:nth-child(1) { border-top: 2px solid #5b4cff; }
.an .ch-kpi:nth-child(2) { border-top: 2px solid #632bb0; }
.an .ch-kpi:nth-child(3) { border-top: 2px solid #ff7aa8; }
.an .ch-kpi:nth-child(4) { border-top: 2px solid #c77e00; }
.an-flash { padding: 10px 13px; border-left: 3px solid var(--neon); background: rgba(91, 76, 255,.07); color: var(--dim); font-size: 12.5px; }
.an-visual-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .55fr); gap: 14px; align-items: stretch; }
.an-trend-card, .an-coverage-card, .an-engagement-card { margin: 0; }
.an-trend-card { min-height: 310px; overflow: hidden; }
.an-trend-card .ch-card-h { align-items: flex-start; margin-bottom: 4px; }
.an-trend-card .ch-card-h h3, .an-engagement-card .ch-card-h h3, .an-section-head h3 { margin: 3px 0 0; font-size: 16px; }
.an-live-label { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font: 700 8.5px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.an-chart-wrap { position: relative; display: grid; min-height: 238px; align-content: end; }
.an-chart-wrap .an-chart { width: 100%; height: 190px; overflow: visible; }
.an-grid-line { stroke: rgba(154, 148, 184,.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.an-channel-line { fill: none; stroke: var(--channel); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--channel) 48%, transparent)); }
.an-channel-line.is-waiting { opacity: .24; stroke-width: 2; stroke-dasharray: 7 9; filter: none; }
.an-chart-empty { position: absolute; inset: 58px 20px 48px; display: grid; place-content: center; gap: 5px; text-align: center; pointer-events: none; }
.an-chart-empty b { color: var(--ink); font-size: 14px; }
.an-chart-empty span { color: var(--dim); font-size: 11.5px; }
.an-chart-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; min-height: 22px; padding-top: 6px; }
.an-chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font: 600 9px "Spline Sans Mono", monospace; }
.an-chart-legend i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.an-coverage-card { display: grid; align-content: start; gap: 22px; background: radial-gradient(circle at 50% 40%, rgba(99, 43, 176,.08), transparent 52%), var(--glass); }
.an-coverage { display: grid; place-items: center; gap: 18px; min-height: 240px; text-align: center; }
.an-coverage-ring { position: relative; width: 152px; height: 152px; display: grid; place-items: center; border-radius: 50%; transform: rotate(-2deg); box-shadow: 0 0 42px rgba(91, 76, 255,.08); }
.an-coverage-ring::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--glass-2); border: 1px solid rgba(135, 122, 255,.12); box-shadow: inset 0 0 22px rgba(36, 31, 63, 0.16); }
.an-coverage-ring span { position: relative; z-index: 1; display: grid; gap: 2px; transform: rotate(2deg); }
.an-coverage-ring b { color: var(--ink); font: 700 26px "Spline Sans Mono", monospace; }
.an-coverage-ring i { color: var(--dim); font: 700 8px "Spline Sans Mono", monospace; letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.an-coverage-copy b { color: var(--ink); font-size: 14px; }
.an-coverage-copy p { margin: 5px auto 0; max-width: 220px; color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.an-engagement-card .ch-bars { gap: 12px; }
.an-engagement-card .ch-bar-row { grid-template-columns: 150px minmax(0, 1fr) 64px; }
.an-engagement-card .ch-bar-track { height: 10px; background: rgba(255,255,255,.045); }
.an-engagement-card .ch-bar-fill { min-width: 0; }
.an-empty-note {
  display: grid;
  gap: 4px;
  min-height: 86px;
  align-content: center;
  padding: 18px;
  border: 1px dashed rgba(91, 76, 255,.22);
  border-radius: 14px;
  background: rgba(91, 76, 255,.035);
}
.an-empty-note b { color: var(--ink); font-size: 14px; }
.an-empty-note span { color: var(--dim); font-size: 12px; line-height: 1.45; }
.an-section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 4px; }
.an-section-head > span { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: .08em; }
.an-channel-list { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--glass); }
.an-channel-row { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(320px,1.35fr) minmax(150px,.55fr) auto; align-items: center; gap: 16px; min-height: 82px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.an-channel-row:last-child { border-bottom: 0; }
.an-channel-row.is-missing { grid-template-columns: minmax(210px,.8fr) minmax(300px,1.4fr) auto; }
.an-channel-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.an-channel-id > span:last-child { min-width: 0; }
.an-channel-id b, .an-channel-id i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-channel-id b { color: var(--ink); font-size: 13.5px; }
.an-channel-id i { margin-top: 3px; color: var(--dim); font-size: 11px; font-style: normal; }
.an-channel-metrics { display: grid; grid-template-columns: repeat(4,minmax(68px,1fr)); gap: 8px; }
.an-channel-metrics span { display: grid; gap: 2px; color: var(--dim); font: 700 8px "Spline Sans Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.an-channel-metrics b { color: var(--ink); font-size: 14px; letter-spacing: 0; }
.an-channel-source, .an-channel-empty { display: grid; gap: 3px; min-width: 0; }
.an-channel-source b, .an-channel-empty b { color: var(--dim); font-size: 11.5px; }
.an-channel-source i, .an-channel-empty span { color: var(--dim); font-size: 10.5px; font-style: normal; }
.an-target-safe {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 4px 7px;
  border: 1px solid rgba(91, 76, 255,.22);
  border-radius: 999px;
  background: rgba(91, 76, 255,.055);
  color: var(--ink);
  font: 700 8.5px "Spline Sans Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: normal;
}
.an-channel-actions { display: flex; justify-content: flex-end; gap: 7px; }
.an-channel-actions .btn { min-height: 36px; white-space: nowrap; cursor: pointer; }
.an-wide { grid-column: auto; }
.an-gate { justify-content: center; min-height: 60vh; }
.an-connect-card {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  max-width: 420px; margin: 0 auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass);
}
.an-connect-lede { margin: 0; color: var(--dim); font-size: 13px; }
.an-connected-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.an-account-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(91, 76, 255,.05); font-size: 12.5px;
}
.an-account-chip b { color: var(--ink); }
.an-account-chip i { font-style: normal; color: var(--dim); }
.an-notice b { display: block; margin-bottom: 6px; font-size: 14px; color: #7a5200; }
.an-notice p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.an-assets-line { margin: 0; color: var(--dim); font-size: 12.5px; }
.an-feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.an-feed-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--glass);
}
.an-feed-card > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.an-feed-card > div:first-child b { color: var(--ink); }
.an-feed-card > div:first-child i { min-width: 0; color: var(--dim); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-feed-card strong { color: var(--neon); font-size: 14px; }
.an-feed-card p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.an-feed-card.is-missing { border-color: rgba(199, 126, 0,.24); background: rgba(199, 126, 0,.035); }
.an-feed-card.is-missing strong { color: #7a5200; }
.an-feed-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.an-feed-metrics span {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 10px; color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
}
.an-feed-metrics b { color: var(--ink); font: 600 15px "Spline Sans Mono", monospace; letter-spacing: 0; text-transform: none; }
.an-hero { align-items: center; background: linear-gradient(135deg, rgba(91, 76, 255,.08), rgba(255, 255, 255,.7)); }
.an-chart { width: 100%; height: 150px; display: block; }
.an-area { fill: rgba(91, 76, 255,.12); }
.an-line { fill: none; stroke: var(--neon); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(91, 76, 255,.5)); }
.an-donut-wrap { display: flex; align-items: center; gap: 16px; }
.an-donut { width: 120px; height: 120px; flex: 0 0 auto; transform: rotate(-90deg); }
.an-donut-c { transform: rotate(90deg); transform-origin: center; fill: var(--ink); font: 600 8px "Instrument Sans"; text-anchor: middle; }
.an-seg { transition: stroke-dasharray .6s; }
.an-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--dim); }
.an-legend span { display: inline-flex; align-items: center; gap: 7px; }
.an-legend i { width: 9px; height: 9px; border-radius: 2px; }
.an-legend b { color: var(--ink); font: 500 12px "Spline Sans Mono", monospace; margin-left: auto; }
.an-insight-card { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.an-insight-card > b { font-size: 18px; color: var(--ink); }
.an-insight-card p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.55; }
.an-business-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.an-trend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.an-trend { display: flex; flex-direction: column; gap: 8px; }
.an-reco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 980px) {
  .an .ch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-visual-grid { grid-template-columns: 1fr; }
  .an-coverage-card { min-height: 260px; }
  .an-coverage { grid-template-columns: auto minmax(0, 1fr); min-height: 190px; text-align: left; }
  .an-channel-row, .an-channel-row.is-missing { grid-template-columns: minmax(0, 1fr) auto; }
  .an-channel-metrics, .an-channel-empty { grid-column: 1 / -1; }
  .an-channel-source { grid-column: 1; }
  .an-channel-actions { grid-column: 2; grid-row: 1; }
  .ch-kpis { grid-template-columns: repeat(3, 1fr); }
  .an-business-grid { grid-template-columns: 1fr; }
  
  
  .an-trend-list, .an-reco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
  
  
}
@media (max-width: 640px) {
  
  .workspace-page[data-workspace-page="media"] .ml-tabs { width: auto; flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; }
  .workspace-page[data-workspace-page="media"] .ml-tab { flex: 0 0 auto; padding-inline: 12px; }
  .an-coverage { grid-template-columns: 1fr; text-align: center; }
  .an-channel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-engagement-card .ch-bar-row { grid-template-columns: 104px minmax(0, 1fr) 42px; }
  .an-channel-row, .an-channel-row.is-missing { padding: 12px; gap: 11px; }
  .ch-kpis { grid-template-columns: repeat(2, 1fr); }
  .an-hero { flex-direction: column; align-items: stretch; }
  
  
  
  .an-trend-list, .an-reco-grid { grid-template-columns: 1fr; }
  
  
  
  
  .ch-card-h { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ch-card-h > div { min-width: 0; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .ch-bar-row { grid-template-columns: 100px 1fr auto; }
  
  
}

/* ================= PREMIUM MATERIAL REFINEMENT ================= */
:root {
  --bg: #ffffff;
  --glass: rgba(255, 255, 255, 0.66);
  --glass-2: rgba(255, 255, 255, 0.5);
  --line: rgba(165, 150, 190, 0.11);
  --line-strong: rgba(139, 120, 220, 0.24);
  --ink: #2b2649;
  --dim: #8b87a8;
  --dim-2: #6e6992;
  --card-grad: var(--glass);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --depth-1: 0 1px 2px rgba(36, 31, 63, 0.112), 0 10px 26px -12px rgba(255, 255, 255, 0.41);
  --depth-2: 0 2px 5px rgba(255, 255, 255, 0.39), 0 20px 46px -18px rgba(255, 255, 255, 0.41);
  --accent-soft: rgba(91, 76, 255, 0.10);
}

.bg-glow {
  background:
    radial-gradient(42% 32% at 50% 4%, rgba(91, 76, 255, 0.07), transparent 62%),
    radial-gradient(40% 40% at 92% 96%, rgba(112, 39, 246, 0.035), transparent 60%);
}
.bg-grid { opacity: 0.55; }

.sidebar {
  background: var(--glass);
  border-right: 1px solid var(--line);
}
@media (min-width: 901px) {
  .phantom {
    gap: 12px;
    padding-left: 10px;
  }
  .sidebar {
    top: 10px;
    height: calc(100vh - 20px);
    margin: 0;
    border: 1px solid rgba(165, 150, 190, 0.14);
    border-radius: 18px;
    box-shadow: var(--edge-hi), 0 18px 54px -34px rgba(36, 31, 63, 0.16);
  }
}
.side-brand-text b { letter-spacing: 0.14em; font-weight: 600; }
.topbar2 {
  background: var(--glass);
  border-bottom: 1px solid var(--line);
}

.phantom .nav-item { border-radius: 11px; letter-spacing: 0.005em; }
.phantom .nav-item:hover { background: rgba(255, 255, 255, 0.035); color: var(--ink); }
.phantom .nav-item.is-active {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--edge-hi), 0 2px 10px rgba(36, 31, 63, 0.119);
}
.phantom .nav-item.is-active::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--neon), #b44bf0);
  box-shadow: 0 0 12px rgba(91, 76, 255, 0.55);
}
.phantom .nav-item.is-active .ic { color: var(--neon); }
.phantom .nav-item.is-active .nav-badge { background: var(--warn); color: #fff4dc; }
.phantom .nav-item[data-nav-id="adminos"] {
  position: relative;
  color: #f9df9a;
  border-color: rgba(255, 196, 82, 0.2);
  background:
    radial-gradient(circle at 18% 50%, rgba(199, 126, 0, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.67), rgba(255, 255, 255, 0.28));
  box-shadow: inset 0 1px rgba(255, 244, 196, 0.06), 0 0 18px rgba(255, 185, 69, 0.06);
}
.phantom .nav-item[data-nav-id="adminos"]::before {
  content: "CORE";
  margin-left: auto;
  order: 4;
  padding: 2px 6px;
  border: 1px solid rgba(199, 126, 0, 0.28);
  border-radius: 999px;
  color: #ffd978;
  background: rgba(199, 126, 0, 0.08);
  font: 800 7px "Spline Sans Mono", monospace;
  letter-spacing: 0.12em;
}
.phantom .nav-item[data-nav-id="adminos"] .ic {
  color: #c77e00;
  filter: drop-shadow(0 0 8px rgba(199, 126, 0, 0.45));
}
.phantom .nav-item[data-nav-id="adminos"]:hover {
  color: #fff3c6;
  border-color: rgba(199, 126, 0, 0.34);
  background:
    radial-gradient(circle at 18% 50%, rgba(199, 126, 0, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.77), rgba(255, 255, 255, 0.34));
}
.phantom .nav-item[data-nav-id="adminos"].is-active {
  color: #fff4dc;
  border-color: rgba(255, 225, 138, 0.78);
  background: linear-gradient(135deg, #7a5200, #c77e00 48%, #9a6300);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.52),
    0 10px 30px rgba(255, 184, 55, 0.24),
    0 0 0 1px rgba(199, 126, 0, 0.16);
}
.phantom .nav-item[data-nav-id="adminos"].is-active::after {
  background: linear-gradient(180deg, #7a5200, #c77e00, #9a6300);
  box-shadow: 0 0 16px rgba(199, 126, 0, 0.7);
}
.phantom .nav-item[data-nav-id="adminos"].is-active::before {
  color: #fff4dc;
  border-color: rgba(42, 24, 0, 0.22);
  background: rgba(42, 24, 0, 0.12);
}
.phantom .nav-item[data-nav-id="adminos"].is-active .ic {
  color: #fff4dc;
  filter: none;
}

.pill { background: var(--glass); border: 1px solid var(--line); box-shadow: var(--edge-hi); }
.pill-v { font-variant-numeric: tabular-nums; }
.topbar-user, .cmdk-open, .ws-switch select {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--edge-hi);
}
.topbar-clock b { letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.hero2 {
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 80% at 82% 30%, rgba(91, 76, 255, 0.06), transparent 58%),
    var(--glass);
  box-shadow: var(--edge-hi), var(--depth-2);
}
.hero2-title { letter-spacing: -0.028em; font-weight: 600; }
.hero2-title span[data-hero-name] {
  background: linear-gradient(180deg, #2b2649, var(--neon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero2-sub { color: #a59db6; }

@media (min-width: 901px) {
  .hero2 {
    display: block;
    width: min(100%, 1040px);
    min-height: 0;
    padding: clamp(28px, 3vw, 42px);
    padding-right: clamp(300px, 31vw, 360px);
  }
  .hero2-copy {
    max-width: 640px;
  }
  .cmd-chips {
    max-width: 540px;
  }
  .cmd-input {
    max-width: 580px;
  }
  .hero2 .hero-say, .hero2 .response-cards {
    max-width: 580px;
  }
  .hero2-stage {
    position: absolute;
    top: 50%;
    right: clamp(24px, 3vw, 42px);
    width: clamp(240px, 23vw, 300px);
    height: clamp(240px, 23vw, 300px);
    min-height: 0;
    max-height: none;
    transform: translateY(-50%);
    overflow: hidden;
  }
  .phantom-webgl {
    inset: -8%;
    width: 116%;
    height: 116%;
    min-height: 0;
  }
  .hero2-stage .ghost-canvas, .phantom.has-mode-poses .hero2-stage .ghost-canvas {
    min-height: 0;
    height: 100%;
    max-width: 100%;
  }
  .phantom-mode-stage {
    width: min(100%, 292px);
  }
  .phantom-mode-pose {
    width: min(80%, 250px);
    max-height: 250px;
  }
  .phantom-mode-caption {
    top: 0;
    bottom: auto;
    transform: translate(-50%, -82%);
  }
}

@media (min-width: 1400px) {
  .hero2 {
    width: min(100%, 1120px);
    padding-right: 380px;
  }
  .hero2-stage {
    width: 320px;
    height: 320px;
  }
  .phantom-mode-stage {
    width: 312px;
  }
  .phantom-mode-pose {
    width: 265px;
    max-height: 270px;
  }
}

.cmd-chip {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--edge-hi);
  border-radius: 11px;
}
.cmd-chip:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.cmd-input { border: 1px solid var(--line-strong); background: rgba(36, 31, 63, 0.056); box-shadow: var(--edge-hi); }

.plan-card, .queue-card, .quick-card, .desktop-context-card {
  background: var(--card-grad);
  border: 1px solid var(--line);
  box-shadow: var(--edge-hi), var(--depth-1);
}
.queue-ic {
  background: rgba(91, 76, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.12);
}
.section-head h2, .side-plan-kicker {
  color: #a79fb6;
  letter-spacing: 0.14em;
}

.plan-card, .queue-card, .quick-card, .desktop-context-card { border-radius: 18px; }
.desktop-context-card { padding: 15px; display: grid; gap: 11px; overflow: hidden; }
.dc-head, .dc-tab, .dc-tab-actions, .dc-status, .dc-state { display: flex; align-items: center; gap: 8px; }
.dc-head { justify-content: space-between; }
.dc-head p { margin: 0 0 3px; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon-2); }
.dc-head h2 { margin: 0; font-size: 15px; line-height: 1.05; }
.dc-refresh, .dc-open {
  border: 1px solid var(--line); border-radius: 999px; background: rgba(91, 76, 255,0.06);
  color: var(--dim); cursor: pointer; font-weight: 700; white-space: nowrap;
}
.dc-refresh { padding: 7px 10px; font-size: 11px; }
.dc-open { padding: 6px 10px; font-size: 11px; }
.dc-refresh:hover, .dc-open:hover { border-color: var(--neon); background: rgba(91, 76, 255,0.13); }
.dc-status { font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(167, 159, 182,0.6); }
.dc-dot.is-on { background: var(--neon); box-shadow: 0 0 12px rgba(91, 76, 255,0.75); }
.dc-now, .dc-list { display: grid; gap: 8px; }
.dc-tab {
  justify-content: space-between; align-items: flex-start; min-width: 0; padding: 10px;
  border: 1px solid rgba(91, 76, 255,0.12); border-radius: 13px; background: rgba(36, 31, 63, 0.044);
}
.dc-tab.is-primary { border-color: rgba(91, 76, 255,0.28); background: linear-gradient(135deg, rgba(91, 76, 255,0.09), rgba(36, 31, 63, 0.048)); }
.dc-tab-main { display: grid; gap: 2px; min-width: 0; }
.dc-app { font: 800 9px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon); }
.dc-tab-main b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12.5px; }
.dc-tab-main small { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-tab-actions { flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.dc-state { justify-content: flex-end; flex-wrap: wrap; max-width: 100px; }
.dc-pill { border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; font: 700 8px "Spline Sans Mono", monospace; color: var(--dim); text-transform: uppercase; }
.dc-pill.is-on { color: var(--neon); border-color: rgba(91, 76, 255,0.3); }
.dc-empty { border: 1px dashed rgba(91, 76, 255,0.18); border-radius: 13px; padding: 12px; display: grid; gap: 3px; color: var(--dim); font-size: 12px; }
.dc-empty b { color: var(--ink); }
.dc-safe { margin: 0; color: var(--dim-2); font-size: 10.5px; line-height: 1.35; }
.desktop-context-top {
  flex: 0 1 260px;
  min-width: 0;
  max-width: 300px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  align-self: center;
}
/* Idle state renders only the ♪ placeholder thumb (class is-empty), so collapse
   the whole chip to a single 40px control — no sprawling "No media playing" box
   dominating the bar. It expands back to the full media chip the moment a track
   is detected. */
.desktop-context-top:has(.dc-mini-thumb.is-empty) {
  flex: 0 0 auto;
  max-width: none;
  border-color: transparent;
  background: none;
  box-shadow: none;
}
.dc-mini-shell:has(.dc-mini-thumb.is-empty) {
  grid-template-columns: auto;
  gap: 0;
  padding: 0;
  min-height: 0;
  background: none;
}
.dc-mini-shell:has(.dc-mini-thumb.is-empty) .dc-mini-copy, .dc-mini-shell:has(.dc-mini-thumb.is-empty) .dc-mini-controls { display: none; }
.desktop-context-top:has(.dc-mini-thumb.is-empty) .dc-mini-thumb {
  width: 40px; height: 40px;
}
.dc-mini-shell {
  min-height: 52px;
  height: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 7px;
  background:
    radial-gradient(circle at 15% 45%, rgba(91, 76, 255,0.14), transparent 45%),
    var(--glass);
}
.dc-mini-thumb {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 76, 255,0.28);
  border-radius: 12px;
  background: rgba(36, 31, 63, 0.064);
  color: var(--neon);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(91, 76, 255,0.07), 0 0 18px rgba(91, 76, 255,0.08);
}
.dc-mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-mini-thumb span { font: 900 15px "Instrument Sans", sans-serif; }
.dc-mini-thumb.is-empty { color: var(--dim); border-style: dashed; }
.dc-mini-thumb.is-working { animation: livePulse 0.9s ease-in-out infinite; }
.dc-mini-copy { min-width: 0; display: grid; gap: 2px; }
.dc-mini-copy span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 800 8.5px "Spline Sans Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.dc-mini-copy b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
  font: 800 13px "Instrument Sans", sans-serif;
  letter-spacing: -0.01em;
}
.dc-mini-controls { display: inline-flex; align-items: center; gap: 5px; }
.dc-mini-controls button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 76, 255,0.18);
  border-radius: 10px;
  background: rgba(36, 31, 63, 0.052);
  color: var(--ink);
  cursor: pointer;
  font: 900 14px "Instrument Sans", sans-serif;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.dc-mini-controls button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(91, 76, 255,0.45);
  background: rgba(91, 76, 255,0.10);
}
.dc-mini-controls button:disabled { opacity: 0.35; cursor: default; }
.dc-mini-controls .is-main {
  color: #ffffff;
  border-color: rgba(91, 76, 255,0.65);
  background: var(--neon);
  box-shadow: 0 0 20px rgba(91, 76, 255,0.22);
}
.queue-item, .quick-item {
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.queue-item:hover, .quick-item:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.045); }

.section-head h2 { font-weight: 600; }
.side-plan {
  background: var(--card-grad);
  border: 1px solid var(--line);
  box-shadow: var(--edge-hi);
  border-radius: 16px;
}
.side-plan-name { color: var(--ink); font-weight: 600; }

.cmd-send, .cmd-chip.is-active, .side-plan-btn:hover {
  box-shadow: 0 6px 18px -4px rgba(91, 76, 255, 0.4), var(--edge-hi);
}
.cmd-chip.is-active { background: linear-gradient(135deg, var(--neon), #6a5cff); }

.agentops, .aops-log-wrap, .aops-t { box-shadow: var(--edge-hi), var(--depth-1); }
.aops-agent { background: rgba(255, 255, 255, 0.016); }
.aops-agent:hover { background: rgba(255, 255, 255, 0.04); }

.cmd-chip, .queue-item, .quick-item, .nav-item, .aops-agent {
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.28s ease,
    color 0.2s ease;
}

/* ================= MOBILE ADMIN HOME ================= */
.mobile-admin-homebar, .mobile-bottom-nav { display: none; }

@media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-height: 100dvh; }

  .phantom {
    display: block;
    min-height: 100dvh;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  .mobile-admin-homebar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    padding: calc(7px + env(safe-area-inset-top, 0px)) 12px 7px;
    border-bottom: 1px solid rgba(91, 76, 255, 0.16);
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 30px rgba(36, 31, 63, 0.147);
  }
  .mobile-admin-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    padding: 0;
    background: none;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .mobile-admin-brand .brand-ghost { width: 32px; height: 32px; }
  .mobile-admin-brand span:last-child { display: grid; gap: 1px; min-width: 0; }
  .mobile-admin-brand b {
    max-width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .mobile-admin-brand i {
    font: 700 9px "Spline Sans Mono", monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon);
    font-style: normal;
  }
  .mobile-admin-actions { display: none !important; }
  .mobile-icon-btn, .mobile-avatar-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(91, 76, 255, 0.2);
    border-radius: 14px;
    background: var(--glass);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    cursor: pointer;
  }
  .mobile-icon-btn span { font: 800 16px "Instrument Sans", sans-serif; }
  .mobile-avatar-btn {
    background: linear-gradient(135deg, var(--neon), #6a5cff);
    color: #ffffff;
    border-color: transparent;
    font: 800 12px "Spline Sans Mono", monospace;
  }
  .mobile-icon-btn .notif-dot {
    right: 5px;
    top: 5px;
    min-width: 9px;
    height: 9px;
    padding: 0;
    color: transparent;
    border-radius: 99px;
  }

  .sidebar {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-12px);
  }
  .sidebar.is-expanded {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .app-main { min-height: auto; width: 100%; max-width: 100%; }

  .topbar2 {
    position: relative !important;
    top: auto !important;
    z-index: 30;
    min-height: 0 !important;
    display: block;
    padding: 8px 12px 0 !important;
    border-bottom: 0;
    background: transparent !important;
    box-shadow: none;
  }
  .topbar-center, .topbar-right { display: none !important; }
  .topbar-left { display: block; width: 100%; min-width: 0; }

  .status-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
    min-width: 0;
  }
  .status-pills .pill {
    display: flex !important;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--glass);
  }
  .status-pills .pill-k {
    display: block;
    font-size: 7.5px;
    letter-spacing: 0.14em;
  }
  .status-pills .pill-v {
    font-size: 11.5px;
    line-height: 1.1;
  }
  .status-pills .ws-switch {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .status-pills .ws-switch select {
    min-height: 42px;
    width: 100%;
    border-radius: 14px;
    font-size: 13px;
    color: var(--ink);
  }

  .console {
    display: block !important;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px calc(98px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible;
  }
  .console-center { gap: 12px; }
  .console-rail { display: none !important; }

  .hero2 {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "copy";
    min-height: 0 !important;
    margin: 0;
    padding: 12px 14px 14px !important;
    border-radius: 22px;
    overflow: hidden;
    background:
      radial-gradient(210px 160px at 50% 16%, rgba(91, 76, 255, 0.14), transparent 70%),
      var(--glass);
  }
  .hero2-copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 2;
  }
  .hero2-title {
    order: 1;
    max-width: 240px;
    margin: 0 0 4px;
    font-size: clamp(18px, 6vw, 22px);
    line-height: 1.08;
  }
  .hero2-title br { display: none; }
  .hero2-sub {
    order: 2;
    max-width: 230px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.35;
  }
  .cmd-input {
    order: 3;
    width: 100%;
    max-width: none;
    min-height: 54px;
    padding: 6px 6px 6px 14px;
    border-radius: 17px;
  }
  .cmd-input input {
    height: 34px;
    font-size: 16px;
  }
  .cmd-send {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .cmd-chips {
    order: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 8px;
    margin: 12px 0 0;
  }
  .cmd-chip {
    min-height: 46px;
    justify-content: center;
    padding: 10px 9px;
    border-radius: 15px;
    font-size: 13px;
  }
  .cmd-tools { display: none; }
  .hero2 .hero-say, .hero2 .response-cards {
    order: 5;
    max-width: none;
    margin-top: 10px;
  }

  .hero2-stage {
    grid-area: stage;
    position: relative !important;
    right: auto;
    top: auto;
    width: 100%;
    height: 218px;
    min-height: 218px !important;
    margin: -10px auto 2px;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }
  .phantom-webgl {
    inset: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
  }
  .phantom-mode-stage {
    width: min(78vw, 280px) !important;
    max-width: 280px;
    aspect-ratio: 1;
    transform: translateY(-8px);
  }
  .phantom-mode-pose {
    width: min(74vw, 260px) !important;
    max-height: 252px !important;
  }
  .phantom-mode-caption { display: none; }
  .hero2-stage .ghost-canvas, .phantom.has-mode-poses .hero2-stage .ghost-canvas {
    min-height: 0 !important;
    height: 218px !important;
    width: 100% !important;
    max-width: 320px !important;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 2px;
    min-height: 64px;
    padding: 7px 14px;
    border: 1px solid rgba(91, 76, 255, 0.2);
    border-radius: 22px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -12px 36px rgba(36, 31, 63, 0.16), 0 0 22px rgba(91, 76, 255, 0.1);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .mobile-bottom-nav::-webkit-scrollbar { display: none; }
  .mobile-bottom-item {
    position: relative;
    flex: 0 0 60px;
    min-height: 50px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--ink);
    font: 700 9.5px "Instrument Sans", sans-serif;
    cursor: pointer;
    scroll-snap-align: start;
  }
  .mobile-bottom-item .ic { width: 16px; height: 16px; }
  .mobile-bottom-item span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-bottom-item.is-active {
    background: linear-gradient(135deg, rgba(91, 76, 255, 0.22), rgba(64, 23, 217, 0.1));
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.24), 0 0 18px rgba(91, 76, 255, 0.12);
  }
  .mobile-bottom-item.is-active .ic { color: var(--neon); }
  .mobile-bottom-item.is-disabled {
    order: 99;
    opacity: 0.44;
    filter: saturate(0.55);
  }
  .mobile-bottom-item.is-disabled.is-active {
    opacity: 0.7;
    filter: saturate(0.7);
  }
  .mobile-bottom-badge {
    position: absolute; top: 4px; right: 10px; min-width: 15px; height: 15px; padding: 0 3px;
    display: grid; place-items: center; border-radius: 999px; background: var(--warn);
    color: #fff4dc; font: 800 9px "Instrument Sans", sans-serif; box-shadow: 0 0 8px rgba(199, 126, 0, 0.6);
  }
}

/* PhantomPlay runtime owns the screen while a game is open. The companion must
   not float over, cover, or distract from the game iframe. */
body.phantomplay-playing .buddy, body.phantomplay-playing .buddy-menu, body.phantomplay-playing .buddy-say {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 390px) {
  .mobile-bottom-nav { left: 8px; right: 8px; padding: 6px 12px; }
  .mobile-bottom-item { flex-basis: 54px; min-height: 46px; font-size: 8.5px; }
}

/* Final phone chrome: one clean top bar, one fixed taskbar. */
@media (max-width: 767px) {
  .mobile-admin-homebar { display: flex !important; }
  .sidebar:not(.is-expanded) { display: none !important; }
  .sidebar.is-expanded { display: flex !important; }
  .topbar2 { display: none !important; }
  .app-main { padding: 0 0 calc(82px + env(safe-area-inset-bottom, 0px)) !important; }
  .console {
    padding-top: 12px !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 2px;
    min-height: 64px;
    padding: 7px 14px;
    border: 1px solid rgba(91, 76, 255, 0.2);
    border-radius: 22px;
    background: var(--glass);
    box-shadow: 0 -12px 36px rgba(36, 31, 63, 0.16), 0 0 22px rgba(91, 76, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .mobile-bottom-nav::-webkit-scrollbar { display: none; }
  .phantom.is-command-focused .app-main {
    padding-bottom: calc(122px + var(--phantom-keyboard-offset) + env(safe-area-inset-bottom, 0px)) !important;
  }
  .phantom.is-command-focused .console {
    padding-bottom: calc(134px + var(--phantom-keyboard-offset) + env(safe-area-inset-bottom, 0px)) !important;
  }
  .phantom.is-command-focused .hero2 {
    overflow: visible;
  }
  .phantom.is-command-focused .hero2-stage {
    width: 132px;
    height: 112px;
    min-height: 0 !important;
    opacity: 0.2;
  }
  .phantom.is-command-focused .phantom-webgl {
    min-height: 0 !important;
  }
  .phantom.is-command-focused .phantom-mode-stage {
    width: 116px !important;
    max-width: 116px;
  }
  .phantom.is-command-focused .phantom-mode-pose {
    width: 106px !important;
    max-height: 112px !important;
  }
  .phantom.is-command-focused .cmd-input {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + var(--phantom-keyboard-offset) + env(safe-area-inset-bottom, 0px));
    z-index: 110;
    max-width: none;
    min-height: 58px;
    border-radius: 18px;
    background: var(--glass);
    box-shadow: 0 18px 44px rgba(36, 31, 63, 0.16), 0 0 0 1px rgba(91, 76, 255, 0.24), 0 0 36px rgba(91, 76, 255, 0.18);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform: translateZ(0);
  }
  .phantom.is-command-focused .cmd-input input {
    font-size: 16px;
  }
  .phantom.is-command-focused .cmd-chips {
    margin-bottom: 82px;
  }
  .phantom.is-command-focused .mobile-bottom-nav {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }
  .mobile-bottom-item {
    position: relative;
    flex: 0 0 60px;
    min-height: 50px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--ink);
    font: 700 9.5px "Instrument Sans", sans-serif;
    scroll-snap-align: start;
  }
  .mobile-bottom-item.is-active {
    background: linear-gradient(135deg, rgba(91, 76, 255, 0.22), rgba(64, 23, 217, 0.1));
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.24), 0 0 18px rgba(91, 76, 255, 0.12);
  }
  .mobile-bottom-item.is-active .ic { color: var(--neon); }
}

/* ============================================================= */
/* COMBINED MAIN UI PORT: AgentOps, unified chatbox */
/* ============================================================= */
/* (Codex's base material stays canonical; these only fill gaps) */
/* ============================================================= */
:root {
  --card-grad: var(--glass);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --depth-1: 0 1px 2px rgba(36, 31, 63, 0.112), 0 10px 26px -12px rgba(255, 255, 255, 0.41);
  --depth-2: 0 2px 5px rgba(255, 255, 255, 0.39), 0 20px 46px -18px rgba(255, 255, 255, 0.41);
  --accent-soft: rgba(91, 76, 255, 0.10);
}

/* ============================================================= */
/* ========================  PHANTOMWIRE  ===================== */
/* ============================================================= */

/* ---- scrolling report ticker (band under the topbar) ---- */
.phantomwire, .agent-ticker {
  display: flex; align-items: stretch; gap: 0; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(36, 31, 63, 0.032) 2px 4px),
    var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 19;
}
.atk-label {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.24em; color: #ffffff;
  background: linear-gradient(120deg, var(--neon), #b44bf0);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.atk-view { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.atk-view::before, .atk-view::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 2; pointer-events: none;
}
.atk-view::before { left: 0; background: var(--glass); }
.atk-view::after { right: 0; background: var(--glass); }
.atk-track {
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap; padding: 8px 0;
  will-change: transform; animation: atkScroll 64s linear infinite;
}
.atk-track.is-static { animation: none; }
.atk-loop-copy { display: contents; }
.phantomwire:hover .atk-track, .agent-ticker:hover .atk-track { animation-play-state: paused; }
.atk-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 12px; }
.atk-item b { font-weight: 600; color: var(--ink); }
.atk-item em { font: 500 10px "Spline Sans Mono", monospace; font-style: normal; color: var(--neon-2); letter-spacing: 0.02em; }
.atk-txt { color: var(--dim); }
.atk-sep { color: rgba(91, 76, 255,0.28); padding: 0 12px; font-weight: 700; }
.atk-led { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.atk-on { background: var(--neon);   box-shadow: 0 0 7px var(--neon); }
.atk-idle { background: var(--dim-2); }
.atk-gate { background: var(--warn);   box-shadow: 0 0 7px rgba(199, 126, 0,0.5); }
.atk-hold { background: #ff9d5c;        box-shadow: 0 0 7px rgba(255,157,92,0.5); }
@keyframes atkScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- hero rotating typewriter line ---- */
.hero2-ticker {
  display: flex; align-items: center; gap: 2px; min-height: 20px; margin: -8px 0 20px;
  font: 500 13px "Spline Sans Mono", monospace; letter-spacing: 0.01em; color: var(--neon-2);
  max-width: 440px; overflow: hidden;
}
.hero2-tick-txt { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hero2-cursor { display: inline-block; width: 8px; height: 15px; margin-left: 1px; background: var(--neon); box-shadow: 0 0 8px rgba(91, 76, 255,0.6); animation: heroCaret 1s steps(1) infinite; }
@keyframes heroCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- agent operations console ---- */
.agentops {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px; padding: 18px 18px 16px;
  background:
    radial-gradient(120% 100% at 100% 0, rgba(180, 75, 240,0.05), transparent 55%),
    var(--glass);
}
.agentops::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(91, 76, 255,0.02) 3px 4px);
}
.agentops > * { position: relative; z-index: 1; }
.aops-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aops-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aops-title h2 { margin: 0; font: 600 15px "Instrument Sans", sans-serif; letter-spacing: -0.01em; color: var(--ink); }
.aops-sub { font: 500 11px "Spline Sans Mono", monospace; color: var(--dim); letter-spacing: 0.02em; }
.aops-live { display: inline-flex; align-items: center; gap: 6px; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.18em; color: var(--neon); padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(91, 76, 255,0.06); }
.aops-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: livePulse 2.2s ease-in-out infinite; }
.aops-scan { width: 60px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(91, 76, 255,0.16), transparent) 0 0 / 200% 100%; animation: aopsScan 3.2s linear infinite; opacity: 0.7; }
@keyframes aopsScan { from { background-position: 200% 0; } to { background-position: -60% 0; } }

/* telemetry strip */
.aops-tele { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.aops-t { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.048); }
.aops-t-k { font: 500 8.5px "Spline Sans Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.aops-t-v { font: 600 20px "Instrument Sans", sans-serif; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.aops-t-v.aops-ok { color: var(--neon); font-size: 15px; }
.aops-t i { font: 400 10px "Spline Sans Mono", monospace; font-style: normal; color: var(--dim-2); }

/* roster + log two-up */
.aops-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: stretch; }
.aops-roster { display: flex; flex-direction: column; gap: 6px; }
.aops-agent {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(91, 76, 255,0.02);
  transition: border-color 0.2s, background 0.2s;
}
.aops-agent:hover { border-color: var(--line-strong); background: rgba(91, 76, 255,0.05); }
.aops-led { position: relative; width: 12px; height: 12px; display: grid; place-items: center; }
.aops-led i { width: 8px; height: 8px; border-radius: 50%; }
.aops-led::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0.5; }
.aops-on i { background: var(--neon);  box-shadow: 0 0 8px var(--neon); }
.aops-on::after { border: 1px solid var(--neon); animation: aopsRing 2.6s ease-out infinite; }
.aops-idle i { background: var(--dim-2); }
.aops-gate i { background: var(--warn);  box-shadow: 0 0 8px rgba(199, 126, 0,0.5); }
.aops-hold i { background: #ff9d5c;       box-shadow: 0 0 8px rgba(255,157,92,0.5); }
@keyframes aopsRing { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.aops-agent-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aops-agent-main b { font-size: 13px; font-weight: 600; color: var(--ink); }
.aops-agent-tool { font: 500 10px "Spline Sans Mono", monospace; color: var(--neon-2); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aops-agent-act { display: none; }
.aops-agent-mode { flex: 0 0 auto; font: 700 8px "Spline Sans Mono", monospace; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.aops-m-on { color: var(--neon); background: rgba(91, 76, 255,0.12); }
.aops-m-idle { color: var(--dim);  background: rgba(255,255,255,0.05); }
.aops-m-gate { color: var(--warn); background: rgba(199, 126, 0,0.1); }
.aops-m-hold { color: #ffb98a;      background: rgba(255,157,92,0.1); }

/* live tail log */
.aops-log-wrap { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.068); overflow: hidden; }
.aops-log-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); font: 700 8.5px "Spline Sans Mono", monospace; letter-spacing: 0.16em; color: var(--dim); background: rgba(91, 76, 255,0.03); }
.aops-log-head i { font-style: normal; color: var(--neon); letter-spacing: 0.06em; }
.aops-log { flex: 1 1 auto; min-height: 168px; max-height: 200px; overflow-y: auto; padding: 8px 10px; scrollbar-width: thin; }
.aops-log-line { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; padding: 3px 0; font: 400 11px "Spline Sans Mono", monospace; line-height: 1.4; }
.aops-log-t { color: var(--dim-2); }
.aops-log-code { color: var(--neon-2); font-weight: 500; }
.aops-log-msg { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.aops-lvl-gate .aops-log-msg, .aops-lvl-hold .aops-log-msg { color: #f2d69a; }
.aops-lvl-idle .aops-log-msg { color: var(--dim); }
.aops-log-line.is-fresh { animation: aopsFresh 0.5s ease; }
@keyframes aopsFresh { from { opacity: 0; transform: translateY(6px); background: rgba(91, 76, 255,0.08); } to { opacity: 1; transform: none; background: transparent; } }

/* ---- staggered reveal for the whole console once booted ---- */
.phantom .console-center > section, .phantom .console-rail > * { opacity: 1; }
.phantom.booted .console-center > section { animation: aopsRise 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.phantom.booted .console-center > section:nth-child(1) { animation-delay: 0.02s; }
.phantom.booted .console-center > section:nth-child(2) { animation-delay: 0.09s; }
.phantom.booted .console-center > section:nth-child(3) { animation-delay: 0.16s; }
.phantom.booted .console-center > section:nth-child(4) { animation-delay: 0.23s; }
.phantom.booted .console-center > section:nth-child(5) { animation-delay: 0.30s; }
.phantom.booted .console-rail > * { animation: aopsRise 0.6s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.22s; }
@keyframes aopsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- responsive ---- */
@media (max-width: 1200px) {
  .aops-grid { grid-template-columns: 1fr; }
  .aops-tele { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .phantomwire, .agent-ticker { display: none; }
  .aops-tele { grid-template-columns: repeat(2, 1fr); }
  .aops-scan { display: none; }
  .hero2-ticker { margin: -4px 0 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .atk-track { animation: none !important; transform: none; }
  .aops-scan, .aops-on::after, .aops-live i, .hero2-cursor { animation: none !important; }
  .aops-log-line.is-fresh { animation: none !important; }
  .phantom.booted .console-center > section, .phantom.booted .console-rail > * { animation: none !important; }
}

/* ============================================================================ */

/* ==============  REDESIGN v2 — living ghost, true pages, chrome  ============ */
/* ============================================================================ */

/* ---- the ghost lives: raise the animated 2D layer, deepen the aura ---- */
.phantom.has-mode-poses .hero2-stage .ghost-canvas {
  opacity: 0.24; filter: blur(4px) brightness(1.3) contrast(1.14) drop-shadow(0 0 26px rgba(91, 76, 255, 0.24));
}
.phantom-mode-stage::before { opacity: 0.85; animation-duration: 5.8s; }
.phantom-mode-stage { transition: filter 0.3s ease; }
.hero2:hover .phantom-mode-pose { filter: saturate(1.12) contrast(1.14) brightness(1.08) drop-shadow(0 0 28px rgba(91, 76, 255, 0.34)) drop-shadow(0 26px 54px rgba(36, 31, 63, 0.16)); }

/* ---- overlay chrome: the workspace shell matches the new material ---- */
.overlay-panel {
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--edge-hi), 0 40px 120px -20px rgba(36, 31, 63, 0.16);
}
.overlay-head { border-bottom: 1px solid var(--line); }
.overlay-kicker { color: var(--neon); letter-spacing: 0.22em; }
.overlay-x {
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); border-radius: 12px;
  transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.overlay-x:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.07); transform: rotate(90deg); }

/* ---- global finish: scrollbars, selection, focus ---- */
::selection { background: rgba(91, 76, 255, 0.28); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: rgba(128, 120, 150, 0.28) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(128, 120, 150, 0.22); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(136, 120, 200, 0.4); border: 2px solid transparent; background-clip: padding-box; }
:where(button, input, select, textarea, a):focus-visible { outline: 2px solid rgba(91, 76, 255, 0.65); outline-offset: 2px; border-radius: 6px; }

/* ---- gate aligned with the material system ---- */
.gate-card {
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--edge-hi), 0 40px 130px rgba(36, 31, 63, 0.16), 0 0 80px rgba(91, 76, 255, 0.07);
}
.gate-opt { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.gate-opt:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.06); box-shadow: 0 12px 40px rgba(36, 31, 63, 0.158), 0 0 30px rgba(91, 76, 255, 0.12); }

/* ============================================================= */
/* ============  AUTOMATION WORKSPACE (true page)  ======== */
/* ============================================================= */
.bm { display: flex; flex-direction: column; gap: 16px; }
.bm-note {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 13px;
  border: 1px solid rgba(91, 76, 255, 0.18); background: rgba(91, 76, 255, 0.05);
  font-size: 12.5px; color: var(--ink);
}
.bm-note i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 9px var(--neon); }
.bm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bm-card {
  border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  background: var(--card-grad); box-shadow: var(--edge-hi), var(--depth-1);
}
.bm-wide { grid-column: 1 / -1; }
.bm-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bm-card-h h3 { margin: 0; font: 600 14px "Instrument Sans", sans-serif; letter-spacing: -0.01em; }
.bm-hint { font: 500 10px "Spline Sans Mono", monospace; color: var(--dim-2); letter-spacing: 0.04em; }
.bm-facts { display: grid; gap: 12px; }
.bm-facts label { display: grid; gap: 6px; }
.bm-facts span, .bm-palette > span { font: 500 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.bm-facts input, .bm-facts textarea, .bm-add input, .bm-add select {
  width: 100%; min-width: 0; padding: 11px 13px; border-radius: 11px; resize: vertical;
  border: 1px solid var(--line); background: rgba(36, 31, 63, 0.056); color: var(--ink); outline: none;
  box-shadow: var(--edge-hi); font-size: 13.5px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bm-facts input:focus, .bm-facts textarea:focus, .bm-add input:focus, .bm-add select:focus {
  border-color: rgba(91, 76, 255, 0.5); box-shadow: 0 0 0 3px rgba(91, 76, 255, 0.08);
}
.bm-palette { display: grid; gap: 6px; }
.bm-swatches { display: flex; gap: 8px; }
.bm-swatches i { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--edge-hi); }
.bm-save { justify-self: start; }
.bm-saved { font: 500 11px "Spline Sans Mono", monospace; color: var(--neon); }
.bm-add { display: flex; gap: 8px; margin-bottom: 12px; }
.bm-add select { flex: 0 0 auto; width: auto; }
.bm-add input { flex: 1 1 auto; }
.bm-add .btn { flex: 0 0 auto; }
.bm-assets, .bm-mems { display: flex; flex-direction: column; gap: 7px; }
.bm-asset, .bm-mem {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.016); font-size: 13px;
}
.bm-asset-kind { flex: 0 0 auto; font: 600 8.5px "Spline Sans Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon-2); padding: 3px 8px; border-radius: 999px; background: rgba(180, 75, 240, 0.07); border: 1px solid rgba(180, 75, 240, 0.16); }
.bm-asset-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-asset-at, .bm-mem em { flex: 0 0 auto; font: 400 10.5px "Spline Sans Mono", monospace; font-style: normal; color: var(--dim-2); }
.bm-mem { align-items: flex-start; }
.bm-mem-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 7px rgba(91, 76, 255, 0.6); }
.bm-mem span { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.bm-x {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--dim-2); font-size: 11px;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.bm-x:hover { color: #ff9aa8; border-color: rgba(224, 52, 94, 0.3); background: rgba(224, 52, 94, 0.07); }
.bm-empty { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }

.au { display: flex; flex-direction: column; gap: 16px; }
.au-card { min-height: 360px; }
.au-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 14px;
}
.au-summary span {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px;
  background: linear-gradient(180deg, rgba(91, 76, 255,0.055), rgba(255,255,255,0.014));
}
.au-summary b { color: var(--ink); font: 600 23px/1 "Instrument Sans", sans-serif; font-variant-numeric: tabular-nums; }
.au-summary i { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.au-list { display: flex; flex-direction: column; gap: 7px; }
.au-item { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.016); }
.au-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.au-item-main b { font-size: 13.5px; font-weight: 600; }
.au-item-main i { font-size: 11.5px; font-style: normal; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-item-main em { font: 500 10px "Spline Sans Mono", monospace; font-style: normal; color: var(--dim-2); letter-spacing: 0.03em; }
.au-vacation-flag { text-transform: uppercase; letter-spacing: 0.06em; }
.au-vacation-flag-on { color: var(--neon); }
.au-vacation-flag-off { color: var(--warn); }
.au-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.au-actions .btn { padding: 7px 10px; min-height: 32px; border-radius: 10px; font-size: 11.5px; }
.au-empty {
  display: flex; flex-direction: column; gap: 6px; min-height: 150px; justify-content: center;
  padding: 22px; border: 1px dashed rgba(91, 76, 255, 0.22); border-radius: 16px;
  background: radial-gradient(70% 100% at 50% 0, rgba(91, 76, 255,0.08), transparent 70%), rgba(255,255,255,0.012);
}
.au-empty b { color: var(--ink); font-size: 16px; }
.au-empty span { color: var(--dim); font-size: 13px; line-height: 1.5; max-width: 520px; }
.au-empty .btn { width: fit-content; margin-top: 8px; }

@media (max-width: 900px) {
  .bm-grid { grid-template-columns: 1fr; }
  .bm-add { flex-wrap: wrap; }
  .au-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-item { align-items: flex-start; flex-wrap: wrap; }
  .au-actions { width: 100%; justify-content: flex-start; padding-left: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay-x:hover { transform: none; }
}

/* ============================================================= */
/* ================  UNIFIED CHATBOX (hero command)  ============= */
/* ============================================================= */
.chatbox {
  position: relative;
  display: flex; flex-direction: column; width: min(100%, 500px); overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--glass);
  box-shadow: var(--edge-hi), 0 18px 50px -18px rgba(36, 31, 63, 0.16), 0 0 40px rgba(91, 76, 255, 0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.chatbox::after {
  content: "";
  position: absolute;
  right: clamp(18px, 6vw, 70px);
  bottom: 68px;
  z-index: 1;
  width: min(260px, 36%);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  background: url("/app/assets/brand-phantom.png?v=phantom-live-20260801-144") center / contain no-repeat;
  filter: saturate(1.2) drop-shadow(0 0 28px rgba(91, 76, 255, 0.28));
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.chatbox.is-typing::after, .chatbox:focus-within::after {
  opacity: 0.095;
  transform: translateY(0) scale(1);
  animation: chatPhantomBreathe 3.4s ease-in-out infinite;
}
@keyframes chatPhantomBreathe {
  50% { opacity: 0.16; transform: translateY(-5px) scale(1.015); }
}
.chatbox:focus-within { border-color: rgba(91, 76, 255, 0.55); box-shadow: var(--edge-hi), 0 18px 50px -18px rgba(36, 31, 63, 0.16), 0 0 46px rgba(91, 76, 255, 0.12); }
.chatbox-head {
  /* explicit stacking context: chat messages keep animation-fill stacking
     contexts alive, and iOS paints them over a z-auto header — the settings
     popover must always sit above the log */
  position: relative; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: rgba(91, 76, 255, 0.028);
}
.chatbox-brand { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.22em; color: var(--neon); }
.chatbox-brand i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: livePulse 2.4s ease-in-out infinite; }
.chatbox .hero2-ticker { margin: 0; flex: 1 1 auto; min-width: 0; max-width: none; font-size: 10.5px; opacity: 0.85; }
.chatbox-log {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 128px; max-height: 250px; overflow-y: auto; padding: 14px;
  scrollbar-width: thin; overscroll-behavior: contain;
}
.msg { display: flex; align-items: flex-end; gap: 8px; animation: msgIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg-user { justify-content: flex-end; }
.msg-avatar {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-bottom: 2px;
  background:
    radial-gradient(circle at 50% 38%, rgba(134, 107, 249, 0.95), rgba(91, 76, 255, 0.35) 58%, transparent 72%),
    rgba(91, 76, 255, 0.08);
  box-shadow: 0 0 10px rgba(91, 76, 255, 0.4), inset 0 0 0 1px rgba(91, 76, 255, 0.3);
}
.msg-body { max-width: 82%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.msg-phantom .msg-body {
  padding: 9px 13px; border-radius: 4px 14px 14px 14px;
  border: 1px solid var(--line); border-left: 2px solid rgba(91, 76, 255, 0.55);
  background: rgba(91, 76, 255, 0.05);
}
.msg-user .msg-body {
  padding: 8px 13px; border-radius: 14px 4px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.045);
}
.msg-text { margin: 0; max-width: 68ch; font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-user .msg-text { color: var(--ink); font-size: 13px; }
.msg-cards { display: flex; flex-direction: column; gap: 8px; }
.msg-cards .rcard { width: 100%; }
.msg-typing-label { margin: 0 0 5px; font: 600 10.5px "Spline Sans Mono", monospace; color: var(--neon); letter-spacing: 0.02em; }
.msg-dots { display: inline-flex; gap: 4px; align-items: center; min-height: 14px; }
.msg-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--neon); opacity: 0.5; animation: dotBeat 1.1s ease-in-out infinite; }
.msg-dots i:nth-child(2) { animation-delay: 0.16s; }
.msg-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes dotBeat { 40% { opacity: 1; transform: translateY(-3px); } }
.chatbox-composer {
  display: flex; align-items: center; gap: 9px; padding: 9px 9px 9px 15px;
  border-top: 1px solid var(--line); background: rgba(36, 31, 63, 0.044);
}
.chatbox-composer input {
  flex: 1 1 auto; min-width: 0; height: 32px; background: none; border: 0; outline: none;
  color: var(--ink); caret-color: var(--neon); font-size: 14.5px;
}
.chatbox-composer input::placeholder { color: var(--dim); }
.chatbox-composer .cmd-send { width: 38px; height: 38px; border-radius: 11px; }
.chatbox-tools { display: flex; gap: 16px; padding: 8px 15px 11px; }
.chatbox-tools .cmd-tool { font-size: 12px; }
.chat-mini-settings {
  border: 1px solid rgba(91, 76, 255, 0.16); border-radius: 16px;
  background: var(--glass); overflow: hidden;
}
.chat-mini-heading {
  padding: 2px 1px 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(91, 76, 255, 0.1);
}
.chat-mini-heading b {
  color: var(--ink); font: 700 12px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.chat-mini-heading span { color: var(--dim); font-size: 11px; white-space: nowrap; }
.chat-mini-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin: 11px 0; border: 1px solid rgba(91, 76, 255, 0.13); border-radius: 13px;
  background: rgba(91, 76, 255, 0.04); overflow: hidden;
}
.chat-mini-summary span { min-width: 0; padding: 10px 11px; }
.chat-mini-summary b {
  display: block; margin-bottom: 2px; font: 700 8px "Spline Sans Mono", monospace; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neon);
}
.chat-mini-summary i {
  display: block; overflow: hidden; color: var(--ink); font-style: normal; font-size: 11.5px;
  line-height: 1.25; text-overflow: ellipsis;
}
.chat-mini-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.chat-mini-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.chat-mini-wide { grid-column: 1 / -1; }
.chat-mini-field > span {
  font: 700 8px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.chat-mini-field select {
  width: 100%; min-width: 0; height: 36px; border: 1px solid rgba(91, 76, 255, 0.15); border-radius: 10px;
  background: rgba(36, 31, 63, 0.068); color: var(--ink); font-size: 13px; outline: none;
  padding: 0 10px;
}
.chat-mini-field select:focus { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(91, 76, 255, 0.08); }
.chat-mini-actions {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; margin-top: 12px;
}
.chat-mini-actions:has(.chat-mini-full:only-child) { grid-template-columns: 1fr; }
.chat-mini-loop { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.chat-mini-loop .chat-mini-fields { margin-top: 0; }
.chat-mini-hands {
  display: grid; gap: 10px; margin-top: 10px; padding: 10px; border: 1px solid rgba(91, 76, 255, 0.13);
  border-radius: 13px; background: rgba(91, 76, 255, 0.032);
}
.chat-mini-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-mini-subhead b {
  color: var(--ink); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase;
}
.chat-mini-subhead span {
  color: var(--dim); font-size: 11px; line-height: 1.25; text-align: right;
}
.chat-mini-switch {
  min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid rgba(91, 76, 255, 0.15); border-radius: 12px;
  background: rgba(91, 76, 255, 0.045); color: var(--ink);
}
.chat-mini-switch input { flex: 0 0 auto; accent-color: var(--neon); width: 16px; height: 16px; }
.chat-mini-switch span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-mini-switch b {
  color: var(--ink); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase;
}
.chat-mini-switch i {
  overflow: hidden; color: var(--dim); font-size: 11px; font-style: normal; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.chat-mini-full {
  min-width: 124px; min-height: 42px; padding: 0 13px; border: 1px solid rgba(91, 76, 255, 0.24); border-radius: 12px;
  color: var(--neon); background: rgba(91, 76, 255, 0.06); cursor: pointer;
  font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.chat-mini-full:hover { border-color: rgba(91, 76, 255, 0.5); background: rgba(91, 76, 255, 0.12); }
.pc { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding-right: 32px; }
.pc-avatar {
  flex: 0 0 auto; display: block; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(91, 76, 255, 0.12), rgba(36, 31, 63, 0.05) 70%);
  box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.28), 0 0 14px rgba(91, 76, 255, 0.18);
  transition: box-shadow 0.3s ease;
}
.pc[data-state="thinking"] .pc-avatar, .pc[data-state="building"] .pc-avatar { animation: pcThink 1.6s ease-in-out infinite; }
.pc[data-state="speaking"] .pc-avatar, .pc[data-state="success"] .pc-avatar { box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.45), 0 0 22px rgba(91, 76, 255, 0.4); }
.pc[data-state="warning"] .pc-avatar { box-shadow: inset 0 0 0 1px rgba(199, 126, 0, 0.5), 0 0 20px rgba(199, 126, 0, 0.3); }
.pc[data-state="error"] .pc-avatar, .pc[data-state="paused"] .pc-avatar { box-shadow: inset 0 0 0 1px rgba(224, 52, 94, 0.5), 0 0 20px rgba(224, 52, 94, 0.28); }
@keyframes pcThink { 50% { box-shadow: inset 0 0 0 1px rgba(91, 76, 255, 0.5), 0 0 26px rgba(91, 76, 255, 0.42); } }
.pc-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pc-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-title b { font: 600 13.5px "Instrument Sans", sans-serif; letter-spacing: 0.01em; color: var(--ink); }
.pc-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.pc-dot-ok { background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: livePulse 2.6s ease-in-out infinite; }
.pc-dot-warn { background: var(--warn); box-shadow: 0 0 8px rgba(199, 126, 0, 0.6); animation: none; }
.pc-dot-err { background: var(--risk); box-shadow: 0 0 8px rgba(224, 52, 94, 0.6); animation: none; }
.pc-label { font: 600 9px "Spline Sans Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.pc-caption { margin: 0; font-size: 12px; color: #a59fc4; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-core {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; max-width: 520px;
}
.pc-core span {
  min-width: 0; display: grid; gap: 1px; padding: 5px 7px; border: 1px solid rgba(91, 76, 255, 0.13);
  border-radius: 9px; background: linear-gradient(180deg, rgba(91, 76, 255, 0.07), rgba(91, 76, 255, 0.025));
}
.pc-core b {
  color: var(--dim); font: 800 7.5px "Spline Sans Mono", monospace; letter-spacing: 0.13em; text-transform: uppercase;
}
.pc-core i {
  overflow: hidden; color: var(--ink); font: 600 10px "Instrument Sans", sans-serif; font-style: normal; line-height: 1.1;
  text-overflow: ellipsis; white-space: nowrap;
}
.pc-actions { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; align-self: start; gap: 8px; margin-right: 8px; }
.pc-mode {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--dim);
  font: 600 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pc-mode b { color: var(--ink); font: inherit; letter-spacing: 0.08em; }
.pc-mode:hover { border-color: var(--line-strong); color: var(--ink); }
.pc-mode.is-build { border-color: rgba(91, 76, 255, 0.55); background: rgba(91, 76, 255, 0.1); color: var(--neon); box-shadow: 0 0 16px rgba(91, 76, 255, 0.15); }
.pc-mode.is-build b { color: var(--neon); }
.pc-settings, .pc-minimize {
  flex: 0 0 auto; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 999px; cursor: pointer;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--ink);
  font: 700 16px "Instrument Sans", sans-serif; letter-spacing: 0; line-height: 1;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pc-minimize {
  position: absolute;
  top: -4px;
  right: -6px;
  z-index: 6;
  color: var(--dim);
}
.pc-settings span { transform: translateY(-0.5px); }
.pc-settings:hover, .pc-settings[aria-expanded="true"], .pc-minimize:hover, .pc-minimize[aria-expanded="false"] {
  border-color: rgba(91, 76, 255, 0.46);
  background: rgba(91, 76, 255, 0.075);
  color: var(--ink);
}
.pc-minimize span {
  transform: translateY(-0.5px);
  font: 900 14px/1 "Instrument Sans", sans-serif;
}
.chatbox.is-minimized {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: 58px !important;
  cursor: pointer;
  overflow: visible;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(3, 10, 9, 0.92), rgba(10, 32, 23, 0.96));
  box-shadow: 0 22px 70px rgba(0,0,0,0.28), 0 0 0 1px rgba(65,255,161,0.13), 0 0 32px rgba(65,255,161,0.08);
}
.chatbox.is-minimized .chatbox-log, .chatbox.is-minimized .chatbox-composer, .chatbox.is-minimized .chatbox-tools, .chatbox.is-minimized .chatbox-trust, .chatbox.is-minimized .phantomai-tabs, .chatbox.is-minimized .hero2-stage {
  display: none !important;
}
.chatbox.is-minimized .chatbox-head {
  height: 100%;
  padding: 8px 54px 8px 12px;
  border-bottom: 0;
}
.chatbox.is-minimized::after, .chatbox.is-minimized .pc-caption, .chatbox.is-minimized .pc-core, .chatbox.is-minimized .pc-mode, .chatbox.is-minimized .pc-settings, .chatbox.is-minimized .pc-menu {
  display: none !important;
}
.chatbox.is-minimized .pc {
  height: 100%;
  padding-right: 0;
}
.chatbox.is-minimized .pc-avatar {
  width: 38px !important;
  height: 38px !important;
}
.chatbox.is-minimized .pc-title {
  gap: 8px;
}
.chatbox.is-minimized .pc-title b {
  font-size: 15px;
}
.chatbox.is-minimized .pc-label {
  color: var(--neon);
}
.chatbox.is-minimized .pc-minimize {
  top: 50%;
  right: 12px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  transform: translateY(-50%);
  border-color: rgba(91, 76, 255, 0.42);
  background: rgba(91, 76, 255, 0.12);
  color: var(--neon);
}
.chatbox.is-minimized .pc-minimize span {
  font-size: 19px;
}
.chatbox.is-floating {
  position: fixed !important;
  z-index: 120;
  width: min(720px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px);
}
.chatbox.is-floating.is-minimized {
  width: min(360px, calc(100vw - 24px)) !important;
}
.chatbox.is-dragging {
  user-select: none;
  box-shadow: 0 24px 90px rgba(0,0,0,0.42), 0 0 0 1px rgba(65,255,161,0.18), 0 0 38px rgba(91,76,255,0.18);
}
.chatbox-head {
  cursor: grab;
}
.chatbox.is-dragging .chatbox-head {
  cursor: grabbing;
}
.chatbox-context-menu {
  position: fixed;
  z-index: 300;
  width: 180px;
  padding: 7px;
  border: 1px solid rgba(91, 76, 255, 0.26);
  border-radius: 14px;
  background: rgba(4, 9, 9, 0.96);
  box-shadow: 0 18px 60px rgba(0,0,0,0.34), 0 0 28px rgba(91,76,255,0.12);
}
.chatbox-context-menu[hidden] { display: none; }
.chatbox-context-menu button {
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: 700 11px "Instrument Sans", sans-serif;
}
.chatbox-context-menu button:hover {
  background: rgba(91, 76, 255, 0.11);
  color: var(--neon);
}
.pc-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(560px, calc(100vw - 42px)); padding: 13px; border: 1px solid rgba(91, 76, 255, 0.28);
  border-radius: 16px;
  background-color: var(--glass-2);   /* solid floor — the panel is NEVER see-through */
  background-image: var(--glass);
  box-shadow: 0 24px 70px rgba(36, 31, 63, 0.16), 0 0 36px rgba(91, 76, 255, 0.12);
}
.pc-menu[hidden] { display: none; }
.pc-menu b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 13px; }
.pc-menu p { margin: 0 0 11px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.pc-menu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 39px; padding: 9px 11px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(91, 76, 255, 0.055); color: var(--ink);
  font: 700 12px "Instrument Sans", sans-serif;
}
.pc-menu button[aria-pressed="true"] { border-color: rgba(91, 76, 255, 0.55); box-shadow: 0 0 20px rgba(91, 76, 255, 0.1); }
.pc-menu em { padding: 3px 7px; border-radius: 999px; color: #ffffff; background: var(--neon); font: 800 8px "Spline Sans Mono", monospace; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.pc-menu .chat-mini-settings { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.pc-menu .chat-mini-full { display: inline-flex; align-items: center; justify-content: center; }
.chat-start { padding: 6px 4px 10px; animation: msgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.chat-start-t { margin: 0 0 3px; font: 600 16px "Instrument Sans", sans-serif; letter-spacing: 0; color: var(--ink); }
.chat-start-s { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--dim); max-width: 460px; }
.chat-start-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-start-btn {
  padding: 9px 14px; border-radius: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--dim);
  font: 500 12.5px "Instrument Sans", sans-serif;
  transition: border-color 0.2s, background 0.2s, transform 0.16s;
}
.chat-start-btn:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.06); transform: translateY(-1px); }
.chat-start-btn.is-build { border-color: rgba(91, 76, 255, 0.4); color: var(--neon); background: rgba(91, 76, 255, 0.06); }
.chat-start-btn span {
  display: inline-flex; margin-left: 8px; padding: 2px 6px; border-radius: 999px;
  background: rgba(91, 76, 255, 0.12); color: var(--ink);
  font: 700 8px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.chatbox-trust {
  margin: 0; padding: 0 15px 11px; display: flex; align-items: center; gap: 7px;
  font: 400 10.5px "Spline Sans Mono", monospace; letter-spacing: 0.02em; color: var(--dim-2);
}
.chatbox-trust span { color: var(--dim); font-size: 12px; }
@media (max-width: 720px) {
  .chatbox { width: 100%; }
  .chatbox-log { max-height: 205px; min-height: 96px; padding: 12px; }
  .msg-body { max-width: 88%; }
  .pc { gap: 9px; }
  .pc-caption { display: none; }
  .pc-core { display: none; }
  .pc-mode { padding: 5px 10px; }
  .pc-settings { width: 34px; height: 34px; min-height: 34px; font-size: 15px; }
  .pc-actions { gap: 6px; position: static; }
  /* the status label truncates instead of running under the Loop chip */
  .pc-title { overflow: hidden; }
  .pc-title b { white-space: nowrap; }
  .pc-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.1em; }
  /* settings popover becomes a full-width sheet anchored under the header —
     never right-clipped, never taller than the screen, always opaque */
  .pc-menu {
    left: 8px; right: 8px; top: calc(100% + 8px); width: auto;
    max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .chat-mini-heading, .chat-mini-subhead { align-items: flex-start; flex-direction: column; gap: 3px; }
  .chat-mini-subhead span { text-align: left; }
  .chat-mini-summary, .chat-mini-fields, .chat-mini-actions { grid-template-columns: 1fr; }
  .chat-mini-switch, .chat-mini-full { width: 100%; }
  .chat-mini-full { justify-content: center; }
  .chat-start-grid { gap: 6px; }
  .chat-start-btn { flex: 1 1 45%; text-align: center; padding: 9px 8px; }
  .chatbox-trust { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .msg-dots i, .chatbox-brand i, .pc-dot-ok, .pc[data-state="thinking"] .pc-avatar, .pc[data-state="building"] .pc-avatar, .chat-start { animation: none !important; }
}

/* chat-first hero: give the conversation column the room it deserves */
.chatbox { width: 100%; max-width: 640px; }
@media (min-width: 901px) {
  /* the compact hero reserves ghost space via padding-right; trim it so the
     conversation gets a real chat column */
  .hero2 { padding-right: clamp(250px, 24vw, 300px); }
  .hero2-copy { max-width: 680px; }
}

/* ============================================================= */
/* ==========  CHAT-FIRST DASHBOARD HERO — companion pass  ===== */
/* ============================================================= */
.console .hero2 {
  container-type: inline-size;
  width: 100%;
  /* height (not min-height): this must be a hard ceiling too, so it leaves
     room below for the collapsed operations-map bar and the dashboard never
     needs a scroll to reach it — see .app-main:has(> .console…). The
     chatbox's own flexible log area (flex:1, min-height:0) absorbs the
     difference by shrinking, rather than the hero growing past its budget. */
  min-height: clamp(360px, calc(100vh - 345px), 920px);
  flex: 1 1 auto;
  position: relative;
  display: block;
  padding: clamp(14px, 1.4vw, 24px);
}
.console .hero2-title, .console .hero2-sub, .console .cmd-chips {
  display: none;
}
.console .hero2-copy {
  display: flex;
  align-items: stretch;
  max-width: none;
  width: 100%;
  min-width: 0;
  height: 100%;
}
.console .chatbox {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 76% 48%, rgba(91, 76, 255, 0.18), rgba(91, 76, 255, 0.055) 27%, transparent 57%),
    var(--glass);
}
.console .chatbox.is-floating {
  position: fixed !important;
  flex: 0 0 auto !important;
  width: min(720px, calc(100vw - 24px)) !important;
}
.console .chatbox.is-minimized {
  flex: 0 0 auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  min-height: 0 !important;
  height: 58px !important;
}
.console .chatbox.is-floating.is-minimized {
  width: min(360px, calc(100vw - 24px)) !important;
}
.console .chatbox-head, .console .chatbox-log, .console .chatbox-composer, .console .chatbox-tools, .console .chatbox-trust {
  position: relative;
  z-index: 3;
}
.console .chatbox-head {
  padding: 14px 18px;
  z-index: 40;   /* above the log/composer siblings so the gear popover can never be painted over */
}
.console .chatbox-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: clamp(16px, 2.2vw, 24px);
}
.console .msg-body {
  max-width: min(780px, 88%);
}
.console .chatbox-composer {
  padding: 13px 13px 13px 18px;
}
.console .chatbox-composer input {
  height: 44px;
  font-size: 17px;
}
.console .chatbox-composer .cmd-send {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.console .chatbox-tools {
  padding: 11px 18px 12px;
}
.console .chatbox-trust {
  padding: 0 18px 14px;
}
.console .chat-start {
  padding-top: 12px;
}
.console .chat-start-t {
  font-size: 20px;
}
.console .chat-start-s {
  max-width: 720px;
  font-size: 14px;
}
.console .chat-start-btn {
  min-height: 44px;
  padding: 11px 18px;
}
/* On shorter screens the chat column's height budget is tight (it shares the
   viewport with the map bar below it — see .console .hero2's height calc).
   Trim the welcome chrome so the greeting message is never the thing that
   gets scrolled out of view by default. */
@media (max-height: 900px) {
  .console .chatbox-head { padding: 10px 16px; }
  .console .chat-start { padding-top: 6px; }
  .console .chat-start-t { font-size: 16px; margin-bottom: 1px; }
  .console .chat-start-s { font-size: 12.5px; margin-bottom: 8px; }
  .console .chat-start-btn { min-height: 36px; padding: 8px 14px; font-size: 12.5px; }
  .console .chatbox-tools { padding: 7px 18px 8px; }
  .console .chatbox-trust { display: none; }
}
@media (max-width: 1200px) and (min-width: 901px) {
  .console {
    padding-top: 18px;
  }
  .console .hero2 {
    height: min(660px, max(500px, calc(100dvh - 265px)));
  }
  .console .chatbox-head {
    padding: 11px 16px;
  }
  .console .chatbox-log {
    padding: clamp(15px, 2vw, 22px);
    padding-right: min(38%, 320px);
  }
  .console .chat-start {
    padding-top: 8px;
  }
  .console .chat-start-t {
    font-size: clamp(18px, 2.1vw, 22px);
  }
  .console .chat-start-s {
    max-width: 620px;
  }
  .console .chatbox-composer {
    padding: 12px 12px 12px 18px;
  }
  .console .chatbox-tools {
    padding: 9px 18px 10px;
  }
  .console .chatbox-trust {
    padding-bottom: 12px;
  }
}
.console .hero2-stage {
  position: absolute;
  top: clamp(40px, 5cqw, 76px);
  right: clamp(-102px, -5cqw, -22px);
  bottom: clamp(145px, 13cqw, 188px);
  width: clamp(580px, 58cqw, 900px);
  min-height: 0;
  height: auto;
  align-items: end;
  justify-items: end;
  transform: none;
  pointer-events: none;
  opacity: 0.68;
  z-index: 1;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, rgba(36, 31, 63, 0.16) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 78%, rgba(36, 31, 63, 0.16) 88%, transparent 100%);
}
/* the WebGL glow layer has no .console-scoped rule of its own upstream, so
   without this it silently inherits whichever plain .phantom-webgl rule
   matches the current viewport width (desktop/mobile breakpoints tuned for
   the older non-console hero) instead of following its own stage box. */
.console .phantom-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.console .phantom-mode-stage {
  width: min(100%, 860px);
  height: 100%;
  aspect-ratio: auto;
  filter: saturate(1.22) contrast(1.12) drop-shadow(0 0 72px rgba(91, 76, 255, 0.42));
}
.console .phantom-mode-pose {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: contain;
  opacity: 0.96;
}
.console .hero2-stage .ghost-canvas {
  opacity: 0.2;
  transform: scale(1.18);
}
.console .phantom-mode-caption {
  display: none;
}

@media (min-width: 768px) {
  .console .hero2-stage > .phantom-mode-stage {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none;
    height: 100% !important;
    max-height: 100%;
    margin: 0;
    display: grid;
    place-items: end center;
  }
}

@container (min-width: 900px) {
  .console .hero2-stage {
    top: clamp(40px, 5cqw, 76px);
    right: clamp(-102px, -5cqw, -22px);
    bottom: clamp(145px, 13cqw, 188px);
    width: clamp(580px, 58cqw, 900px);
    min-height: 0;
    transform: none;
    opacity: 0.68;
  }
}

@media (max-width: 1100px) {
  .console .hero2-copy {
    width: 100%;
  }
  .console .hero2-stage {
    top: clamp(42px, 6cqw, 78px);
    right: clamp(-42px, -4cqw, -10px);
    bottom: clamp(142px, 13cqw, 168px);
    width: clamp(440px, 56cqw, 660px);
    min-height: 0;
    height: auto !important;
    align-items: end;
    justify-items: end;
    transform: none;
    opacity: 0.58;
    -webkit-mask-image: linear-gradient(180deg, #000 0 76%, rgba(36, 31, 63, 0.16) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 76%, rgba(36, 31, 63, 0.16) 88%, transparent 100%);
  }
  .console .phantom-mode-stage {
    width: min(100%, 640px) !important;
    max-width: none;
    height: 100%;
  }
  .console .phantom-mode-pose {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain;
    opacity: 0.88;
  }
  .console .hero2-stage .ghost-canvas {
    display: block;
    min-height: 0 !important;
    opacity: 0.16;
    transform: scale(1.05);
  }
}

@media (max-width: 900px) {
  .console .hero2 {
    display: block !important;
    min-height: auto;
    padding: 16px;
  }
  .console .chatbox {
    min-height: min(72vh, 660px);
  }
  .console .hero2-stage {
    position: absolute !important;
    top: 18px;
    right: 18px;
    width: 112px;
    height: 112px !important;
    min-height: 112px !important;
    margin: 0 !important;
    order: 0 !important;
    transform: none;
    opacity: 0.34;
    z-index: 0;
  }
  .console .hero2-copy {
    position: relative;
    z-index: 2;
  }
  .console .phantom-mode-stage {
    width: 112px !important;
    max-width: 112px;
  }
  .console .phantom-mode-pose {
    width: 104px !important;
    max-height: 112px !important;
  }
  .console .phantom-mode-caption, .console .hero2-stage .ghost-canvas {
    display: none;
  }
}

@media (max-width: 900px) and (min-width: 768px) {
  .console .hero2 {
    height: min(720px, max(560px, calc(100dvh - 260px)));
  }
  .console .chatbox {
    min-height: 0;
    height: 100%;
  }
  .console .chatbox-log {
    padding-right: min(36%, 270px);
  }
  .console .hero2-stage {
    top: clamp(98px, 14cqw, 146px);
    right: clamp(-48px, -6cqw, -24px);
    bottom: clamp(148px, 15cqw, 178px);
    width: clamp(380px, 54cqw, 500px);
    height: auto !important;
    min-height: 0 !important;
    opacity: 0.58;
    z-index: 1;
    justify-items: end;
    -webkit-mask-image: linear-gradient(180deg, #000 0 76%, rgba(36, 31, 63, 0.16) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 76%, rgba(36, 31, 63, 0.16) 88%, transparent 100%);
  }
  .console .phantom-mode-stage {
    width: min(100%, 560px) !important;
    max-width: none;
    height: 100%;
    transform: none;
  }
  .console .phantom-mode-pose {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain;
    opacity: 0.86;
  }
  .console .hero2-stage .ghost-canvas {
    display: block;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    left: auto;
    transform: scale(1.04);
    opacity: 0.14;
  }
}

/* Keep the desktop/tablet dashboard Phantom staged above the command bar
   instead of sinking behind the composer as the viewport or zoom level changes. */
@media (min-width: 768px) {
  .phantom .console .hero2-stage {
    display: grid !important;
    align-items: end !important;
    justify-items: center !important;
    overflow: hidden !important;
  }

  .phantom .console .hero2-stage > .phantom-mode-stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    display: grid !important;
    place-items: end center !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }

  .phantom .console .hero2-stage > .phantom-mode-stage > .phantom-mode-pose {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* Below 768px (real phones) the "watermark absolutely-positioned behind the
   chat" treatment above breaks down: the chat panel is full-bleed with a
   near-opaque background and z-index:2 (see the plain max-width:900px block
   above), while the stage sits at z-index:0/1 beneath it — so on every
   phone width the phantom was rendered completely invisible, tucked behind
   the chat panel as a 112px corner badge nobody could ever see. Below this
   breakpoint the phantom becomes an in-flow banner ABOVE the chat instead,
   guaranteeing it always has its own visible space rather than being
   layered under anything. A later max-width:767px block ("Mobile admin fit
   pass") owns .console .hero2's display (flex-column, DOM order
   copy-then-stage), so this uses order:-1 on the stage — not
   grid-template-areas — to land above the chat regardless of which rule
   wins the display property. */
@media (max-width: 767px) {
  .console .hero2 {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "copy";
    height: auto;
    min-height: auto;
    padding: 16px;
  }
  .console .chatbox {
    min-height: min(62vh, 560px);
    height: auto;
  }
  .console .hero2-stage {
    grid-area: stage;
    position: relative !important;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: clamp(170px, 42vw, 230px);
    min-height: clamp(170px, 42vw, 230px) !important;
    margin: 0 0 10px;
    order: -1 !important;
    align-items: center;
    justify-items: center;
    transform: none;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .console .hero2-copy {
    grid-area: copy;
    position: relative;
    z-index: 2;
  }
  .console .phantom-mode-stage {
    width: clamp(150px, 40vw, 210px) !important;
    max-width: 210px;
    height: 100%;
    margin: 0 auto;
    transform: none;
  }
  .console .phantom-mode-pose {
    width: clamp(140px, 38vw, 200px) !important;
    max-height: 100% !important;
    opacity: 0.96;
  }
  .console .phantom-mode-caption, .console .hero2-stage .ghost-canvas {
    display: none;
  }
}

@media (max-width: 520px) {
  .console .chatbox {
    min-height: min(62vh, 560px);
    border-radius: 16px;
  }
  .console .chatbox-log {
    padding: 13px;
  }
  .console .chatbox-composer {
    margin: 0 10px;
    border: 1px solid rgba(91, 76, 255, 0.26);
    border-radius: 18px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 28px rgba(91, 76, 255, 0.08);
  }
  .console .chatbox-composer input {
    height: 38px;
    font-size: 15px;
  }
  .console .chatbox-tools {
    padding-top: 9px;
  }
  .console .chatbox-trust {
    display: none;
  }
}

/* companion portrait: squash-and-stretch pop on every mood change */
.pc-avatar.pc-pop { animation: pcPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pcPop {
  0% { transform: scale(1); }
  35% { transform: scale(0.94, 1.07); }
  65% { transform: scale(1.08, 0.95); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .pc-avatar.pc-pop { animation: none !important; } }

/* saved confirmation inside the chat mini settings panel */
.chat-mini-saved { display: block; margin-top: 4px; font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; color: #5b4cff; }
.chat-mini-saved[hidden] { display: none; }

/* Media Lab engine doctor: the pipeline states its own truth */

/* the default view is a short stats list — never a transport/vendor name.
   Anything technical lives in the collapsed Details toggle beside it. */

/* ============ Automation workspace — Configured/Recipes/Logs/Safety ============ */
.au-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  justify-content: start;
  gap: 8px;
  margin: 2px 0 4px;
}
.au-recipes-note { margin: 0 0 12px; }
.au-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.au-recipe-card {
  display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,0.016);
}
.au-recipe-card b { font-size: 13px; }
.au-recipe-card p { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; flex: 1 1 auto; }
.au-recipe-card .btn { align-self: flex-start; }
.au-logs { display: flex; flex-direction: column; gap: 6px; }
.au-log-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.012); font-size: 12px; }
.au-log-row b { color: var(--neon); font-size: 11px; }
.au-log-row span { color: var(--dim); }
.au-log-row i { font-style: normal; font: 500 10px "Spline Sans Mono", monospace; color: var(--dim-2); white-space: nowrap; }
.au-empty-note { margin: 4px 0; font-size: 12.5px; color: var(--dim); }
.au-safety { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.au-safety-card { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.016); }
.au-safety-card b { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--ink); }
.au-safety-card p { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.55; }
.au-config-wrap { display: grid; gap: 14px; }
.au-config-card {
  border: 1px solid rgba(91, 76, 255,.15); border-radius: 18px; padding: clamp(14px, 1.6vw, 20px);
  background: var(--glass);
}
.au-config-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.au-config-head h3 { margin: 2px 0 5px; font-size: clamp(18px, 1.7vw, 25px); }
.au-config-head p { margin: 0; max-width: 780px; color: var(--dim); line-height: 1.5; }
.au-big-switch .ap-switch-track { width: 46px; height: 26px; }
.au-big-switch .ap-switch-thumb { width: 18px; height: 18px; }
.au-big-switch input:checked + .ap-switch-track .ap-switch-thumb { transform: translateX(20px); }
.au-config-grid, .au-profile-grid {
  display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px;
}
.au-config-grid label, .au-profile-grid label {
  display: grid; gap: 6px; color: var(--muted); font: 700 9px "Spline Sans Mono", monospace;
  letter-spacing: .11em; text-transform: uppercase;
}
.au-config-wide { grid-column: span 2; }
.au-config-grid input, .au-config-grid select, .au-profile-grid input {
  min-height: 42px; border: 1px solid rgba(135, 122, 255,.16); border-radius: 12px;
  background: rgba(36, 31, 63, 0.044); color: var(--ink); padding: 0 12px; font: 600 13px "Inter", sans-serif;
}
.au-profile-box {
  margin-top: 14px; display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(135, 122, 255,.12);
  border-radius: 16px; background: rgba(255,255,255,.018);
}
.au-profile-box.needs-profile { border-color: rgba(199, 126, 0,.28); background: rgba(199, 126, 0,.035); }
.au-profile-box b { color: var(--ink); }
.au-profile-box p { margin: 4px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.au-config-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.au-list.compact { display: grid; gap: 10px; }
.au-config-list-card { padding: clamp(10px, 1.2vw, 14px); }
.au-config-list-card .au-config-head { margin-bottom: 10px; }
.au-automation-list { display: grid; gap: 14px; }
.au-automation-group { display: grid; gap: 8px; }
.au-automation-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 2px 2px; color: var(--dim);
}
.au-automation-group-head b {
  color: var(--ink); font: 800 10px "Spline Sans Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
}
.au-automation-group-head span {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; border: 1px solid rgba(91, 76, 255,.2); background: rgba(91, 76, 255,.07);
  color: var(--neon); font: 800 9px "Spline Sans Mono", monospace;
}
.au-automation-block { display: grid; gap: 8px; }
.au-automation-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(160px, auto) auto; align-items: center; gap: 10px;
  min-height: 62px; padding: 9px 10px; border: 1px solid rgba(135, 122, 255,.12); border-radius: 13px;
  background: rgba(36, 31, 63, 0.04); cursor: pointer; transition: border-color .16s, background .16s, transform .16s;
}
.au-automation-row:hover, .au-automation-row:focus-visible, .au-automation-row.is-expanded {
  border-color: rgba(91, 76, 255,.36); background: rgba(91, 76, 255,.055); outline: none;
}
.au-automation-row:active { transform: translateY(1px); }
.au-row-switch { align-self: center; }
.au-row-main { min-width: 0; display: grid; gap: 2px; }
.au-row-kicker {
  color: var(--neon); font: 800 8.5px "Spline Sans Mono", monospace; letter-spacing: .13em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.au-row-main b { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-row-main p { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-row-meta { display: grid; justify-items: end; gap: 3px; min-width: 0; }
.au-row-meta i {
  font-style: normal; justify-self: end; color: #ffffff; background: var(--neon); border-radius: 999px; padding: 2px 7px;
  font: 800 8.5px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
}
.au-row-meta span { color: var(--dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.au-row-open {
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--ink);
  padding: 7px 10px; font: 700 11px "Instrument Sans", sans-serif; cursor: pointer;
}
.au-row-open:hover { border-color: rgba(91, 76, 255,.38); background: rgba(91, 76, 255,.08); }
.au-edit-panel {
  padding: 12px; border: 1px solid rgba(91, 76, 255,.18); border-radius: 14px;
  background: var(--glass);
}
.au-edit-grid {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px); gap: 10px;
}
.au-edit-grid label {
  display: grid; gap: 6px; color: var(--muted); font: 700 9px "Spline Sans Mono", monospace;
  letter-spacing: .11em; text-transform: uppercase;
}
.au-edit-grid input, .au-edit-grid textarea {
  min-height: 42px; border: 1px solid rgba(135, 122, 255,.16); border-radius: 12px;
  background: rgba(36, 31, 63, 0.044); color: var(--ink); padding: 10px 12px; font: 600 13px "Inter", sans-serif;
}
.au-edit-grid textarea { min-height: 96px; resize: vertical; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.au-edit-grid input:disabled { opacity: .72; color: var(--dim); }
@media (max-width: 720px) {
  .au-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-tabs .ml-tab { justify-content: center; }
  .au-log-row { grid-template-columns: 1fr; gap: 2px; }
  .au-config-head { align-items: center; }
  .au-config-grid, .au-profile-grid { grid-template-columns: 1fr; }
  .au-config-wide { grid-column: auto; }
  .au-config-actions .btn { flex: 1 1 150px; }
  .au-automation-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .au-row-meta { grid-column: 2 / -1; justify-items: start; }
  .au-row-meta span { max-width: 100%; }
  .au-edit-grid { grid-template-columns: 1fr; }
}

/* ---- Autopilot: real scheduled server automations ---- */
.ap-wrap { display: flex; flex-direction: column; gap: 14px; }
.ap-curtain { display: flex; flex-direction: column; gap: 14px; }
.ap-curtain-hero {
  position: relative; overflow: hidden; border: 1px solid rgba(91, 76, 255, 0.22); border-radius: 18px;
  padding: 24px; min-height: 185px; display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(circle at 78% 38%, rgba(91, 76, 255, 0.2), transparent 28%),
    var(--glass);
}
.ap-curtain-hero::after {
  content: ""; position: absolute; inset: 16px 18px; pointer-events: none; opacity: 0.28;
  border: 1px solid rgba(91, 76, 255, 0.22); border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(91, 76, 255, 0.08) 18% 18.5%, transparent 18.5% 100%),
    repeating-linear-gradient(180deg, rgba(91, 76, 255, 0.07) 0 1px, transparent 1px 13px);
}
.ap-curtain-hero h3 { position: relative; z-index: 1; margin: 0; max-width: 660px; font-size: 28px; }
.ap-curtain-hero p:not(.ch-eyebrow) { position: relative; z-index: 1; margin: 10px 0 0; max-width: 780px; color: var(--dim); line-height: 1.55; }
.ap-curtain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ap-curtain-card {
  min-height: 118px; padding: 15px; border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255, 255, 255, 0.018);
}
.ap-curtain-card b { display: block; margin-bottom: 8px; color: var(--ink); }
.ap-curtain-card p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.ap-curtain-note {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 15px; border: 1px solid rgba(91, 76, 255, 0.2); border-radius: 14px;
  background: rgba(91, 76, 255, 0.055);
}
.ap-curtain-note b { color: var(--ink); }
.ap-curtain-note span { color: var(--dim); font-size: 12px; line-height: 1.4; }
.ap-dev-panel { display: flex; flex-direction: column; gap: 12px; }

/* Agent runs — real server lifecycle panel in Developer */
.dev-run-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.dev-run-op { display: flex; flex-direction: column; gap: 8px; }
.dev-run-op .btn { align-self: flex-start; padding: 6px 14px; font-size: 12px; }
.dev-run-list { display: flex; flex-direction: column; gap: 8px; }
.dev-run-item { flex-wrap: wrap; }
.dev-run-state {
  font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: rgba(36, 31, 63, 0.048); margin-left: 6px; font-style: normal;
}
.dev-run-state-completed { color: #3a3560; }
.dev-run-state-executing, .dev-run-state-verifying { color: #632bb0; }
.dev-run-state-failed { color: #c22b52; }
.dev-run-state-queued, .dev-run-state-cancelled { color: var(--dim); }
.dev-run-artifact { color: #3a3560 !important; }
.dev-run-proof { color: #632bb0 !important; }
.dev-run-error { color: #c22b52 !important; }
.dev-run-actions { display: flex; flex: 0 0 auto; gap: 6px; align-items: flex-start; }
.dev-run-actions .btn { padding: 5px 10px; font-size: 11px; }
.dev-run-events {
  flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.036);
}
.dev-run-event { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; }
.dev-run-event i { font-style: normal; flex: 0 0 auto; color: var(--dim); font-family: "Spline Sans Mono", monospace; font-size: 10px; }
.dev-run-event b { flex: 0 0 72px; font: 700 9.5px "Spline Sans Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #632bb0; }
.dev-run-event span { color: var(--ink); line-height: 1.45; }
.ap-category { display: flex; flex-direction: column; gap: 9px; }
.ap-category h4 { margin: 0; font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ap-job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ap-job-card {
  display: flex; flex-direction: column; gap: 8px; padding: 13px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.016); transition: border-color .18s;
}
.ap-job-card.ap-tone-on { border-color: rgba(91, 76, 255, 0.24); }
.ap-job-card.ap-tone-warn { border-color: rgba(199, 126, 0, 0.26); }
.ap-job-card.ap-tone-off { opacity: 0.6; }
.ap-job-top { display: flex; align-items: center; gap: 10px; }
.ap-job-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-job-id b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-job-id i { font-style: normal; font-size: 10.5px; color: var(--dim); }
.ap-run-now { flex: 0 0 auto; padding: 5px 10px; font-size: 11px; }
.ap-job-desc { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.ap-job-benefit { margin: -2px 0 0; font-size: 11.5px; color: var(--ink); line-height: 1.45; }
.ap-job-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.ap-job-meta span {
  padding: 3px 7px; border-radius: 999px; background: rgba(91, 76, 255, 0.07);
  color: var(--ink); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
}
.ap-job-setup { display: flex; gap: 5px; flex-wrap: wrap; }
.ap-job-setup i {
  font-style: normal; padding: 3px 7px; border: 1px solid rgba(199, 126, 0, 0.18); border-radius: 999px;
  color: #7a5200; background: rgba(199, 126, 0, 0.06); font-size: 10px;
}
.ap-job-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 7px; border-top: 1px solid var(--line); }
.ap-job-status { align-self: flex-start; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(36, 31, 63, 0.048); }
.ap-job-status.ap-tone-on { color: #3a3560; }
.ap-job-status.ap-tone-warn { color: #7a5200; }
.ap-job-status.ap-tone-off { color: var(--dim); }
.ap-job-foot span:nth-child(2) { font-size: 11px; color: var(--ink); line-height: 1.4; }
.ap-job-foot i { font-style: normal; font-size: 10px; color: var(--dim); }
.ap-loading { padding: 20px; text-align: center; }

.ap-switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.ap-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap-switch-track {
  display: inline-flex; align-items: center; width: 34px; height: 19px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line); transition: background .18s, border-color .18s; padding: 0 2px;
}
.ap-switch-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--dim); transform: translateX(0);
  transition: transform .18s, background .18s;
}
.ap-switch input:checked + .ap-switch-track { background: rgba(91, 76, 255, 0.22); border-color: rgba(91, 76, 255, 0.4); }
.ap-switch input:checked + .ap-switch-track .ap-switch-thumb { transform: translateX(15px); background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.ap-switch input:disabled + .ap-switch-track { opacity: 0.5; cursor: not-allowed; }
.ap-switch input:focus-visible + .ap-switch-track { outline: 2px solid var(--neon); outline-offset: 2px; }
@media (max-width: 720px) {
  .ap-curtain-grid { grid-template-columns: 1fr; }
  .ap-curtain-hero { min-height: 0; padding: 18px; }
  .ap-curtain-hero h3 { font-size: 22px; }
  .ap-job-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-switch-track, .ap-switch-thumb, .ap-job-card { transition: none; }
}

/* ============ Vacation Mode first-class workspace ============ */
.vm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vm-hero, .vm-card, .vm-metric {
  border: 1px solid rgba(91, 76, 255, 0.16);
  background:
    var(--glass),
    radial-gradient(circle at 82% 0%, rgba(91, 76, 255, 0.13), transparent 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018), 0 26px 80px rgba(0, 0, 0, 0.22);
}
.vm-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 24px;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  position: relative;
}
.vm-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(rgba(91, 76, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 76, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 65% 46%, #000, transparent 64%);
  pointer-events: none;
}
.vm-hero > * { position: relative; z-index: 1; }
.vm-hero h2 {
  margin: 0;
  max-width: 640px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.vm-hero p {
  margin: 8px 0 0;
  max-width: 640px;
  color: var(--dim);
  font-size: clamp(13px, 1.2vw, 14.5px);
  line-height: 1.5;
}
.vm-kicker {
  display: block;
  color: var(--neon);
  font: 700 11px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.vm-hero-mark {
  width: 92px;
  min-height: 92px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 1px solid rgba(91, 76, 255, 0.18);
  background: radial-gradient(circle, rgba(91, 76, 255, 0.18), rgba(36, 31, 63, 0.07));
  flex: 0 0 auto;
}
.vm-hero-mark span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon), rgba(91, 76, 255, 0.08));
  box-shadow: 0 0 20px rgba(91, 76, 255, 0.42);
}
.vm-hero-mark b {
  font: 800 11px "Spline Sans Mono", monospace;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.vm-card {
  border-radius: 20px;
  padding: clamp(13px, 1.4vw, 17px);
}
.vm-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 14px;
}
.vm-status-main h3, .vm-card-head h3 {
  margin: 4px 0 0;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.vm-status-main p {
  margin: 10px 0 0;
  max-width: 720px;
  color: var(--dim);
  line-height: 1.55;
}
.vm-status-side {
  display: grid;
  gap: 12px;
  align-content: start;
}
.vm-state-pill {
  justify-self: start;
  border-radius: 999px;
  padding: 8px 13px;
  font: 800 11px "Spline Sans Mono", monospace;
  letter-spacing: 0.16em;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.vm-state-pill.on {
  color: #ffffff;
  background: var(--neon);
  border-color: transparent;
  box-shadow: 0 0 22px rgba(91, 76, 255, 0.3);
}
.vm-state-pill.off {
  color: #a29fb5;
  background: rgba(255, 255, 255, 0.05);
}
.vm-mode-select, .vm-field {
  display: grid;
  gap: 7px;
}
.vm-mode-select span, .vm-field span {
  color: var(--dim-2);
  font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vm-mode-select select, .vm-field select, .vm-field input, .vm-field textarea {
  width: 100%;
  border: 1px solid rgba(91, 76, 255, 0.18);
  border-radius: 12px;
  background: var(--glass);
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
}
.vm-field textarea {
  resize: vertical;
  min-height: 118px;
  line-height: 1.45;
}
.vm-mode-select select:focus, .vm-field select:focus, .vm-field input:focus, .vm-field textarea:focus {
  border-color: rgba(91, 76, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(91, 76, 255, 0.09);
}
.vm-mini-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vm-mini-facts span, .vm-provider-state, .vm-empty {
  border: 1px solid rgba(91, 76, 255, 0.11);
  border-radius: 14px;
  background: rgba(36, 31, 63, 0.044);
  padding: 11px 12px;
}
.vm-mini-facts b, .vm-provider-state b {
  display: block;
  color: var(--dim-2);
  font: 700 9px "Spline Sans Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vm-mini-facts i, .vm-provider-state i {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-style: normal;
  font-size: 12.5px;
}
.vm-status-actions, .vm-save-row, .vm-approval-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vm-danger {
  background: linear-gradient(120deg, #ff6b6b, #ffce5c);
  color: #fdecef;
}
.vm-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.vm-metric {
  border-radius: 14px;
  padding: 11px;
  min-height: 66px;
}
.vm-metric b {
  display: block;
  color: var(--ink);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1;
}
.vm-metric span {
  display: block;
  margin-top: 8px;
  color: var(--dim);
  font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.vm-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.vm-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vm-toggle-grid-compact {
  grid-template-columns: 1fr;
}
.vm-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  border: 1px solid rgba(91, 76, 255, 0.13);
  border-radius: 15px;
  padding: 11px 12px;
  background: rgba(36, 31, 63, 0.04);
}
.vm-toggle-small { min-height: 52px; }
.vm-toggle span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.vm-toggle b {
  font-size: 13.5px;
  line-height: 1.15;
}
.vm-toggle i {
  color: var(--dim);
  font-size: 11.5px;
  font-style: normal;
}
.vm-toggle input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--neon);
}
.vm-save-row {
  margin-top: 14px;
}
.vm-save-row span {
  color: var(--dim);
  font-size: 12.5px;
}
.vm-readiness, .vm-approvals, .vm-feed {
  display: grid;
  gap: 9px;
}
.vm-ready, .vm-feed-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  border: 1px solid rgba(91, 76, 255, 0.12);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(36, 31, 63, 0.04);
}
.vm-ready > span, .vm-feed-item > span {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 12px rgba(91, 76, 255, 0.35);
}
.vm-ready b, .vm-feed-item b {
  display: block;
  font-size: 13px;
}
.vm-ready i, .vm-feed-item p, .vm-feed-item i {
  display: block;
  margin: 3px 0 0;
  color: var(--dim);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}
.vm-ready em, .vm-feed-item time {
  color: var(--dim-2);
  font: 700 10px "Spline Sans Mono", monospace;
  font-style: normal;
  letter-spacing: 0.06em;
  text-align: right;
  white-space: nowrap;
}
.vm-ready-off > span, .vm-ready-block > span, .vm-event-blocked > span, .vm-event-needs_setup > span {
  background: #ffd35c;
  box-shadow: 0 0 12px rgba(255, 211, 92, 0.35);
}
.vm-ready-setup > span {
  background: #8b87a8;
  box-shadow: none;
}
.vm-approval {
  border: 1px solid rgba(91, 76, 255, 0.14);
  border-radius: 16px;
  padding: 14px;
  background: rgba(36, 31, 63, 0.044);
}
.vm-approval-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.vm-approval-top span {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(91, 76, 255, 0.12);
  color: var(--neon);
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vm-risk-urgent .vm-approval-top span, .vm-risk-high .vm-approval-top span {
  background: rgba(255, 99, 99, 0.14);
  color: #ff9a9a;
}
.vm-approval-top i {
  color: var(--dim-2);
  font: 600 10px "Spline Sans Mono", monospace;
  font-style: normal;
}
.vm-approval h4 {
  margin: 12px 0 8px;
  font-size: 17px;
}
.vm-approval p {
  margin: 6px 0;
  color: var(--dim);
  line-height: 1.45;
  font-size: 13px;
}
.vm-approval p b {
  color: var(--ink);
}
.vm-approval-actions {
  margin-top: 12px;
}
.vm-ooo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vm-wide {
  grid-column: 1 / -1;
}
.vm-provider-state {
  margin-top: 12px;
}
.vm-provider-state span {
  display: inline-flex;
  margin: 7px 0;
  border-radius: 999px;
  padding: 5px 9px;
  color: #ffd35c;
  background: rgba(255, 211, 92, 0.1);
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vm-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vm-action-list span {
  border-radius: 999px;
  border: 1px solid rgba(91, 76, 255, 0.17);
  padding: 8px 11px;
  color: var(--ink);
  background: rgba(91, 76, 255, 0.055);
  font-size: 13px;
}
.vm-queue-card p {
  margin: 12px 0 0;
  color: var(--dim);
  line-height: 1.45;
}
.vm-automation-flag.is-blocked {
  border-color: rgba(199, 126, 0, 0.28);
  background: rgba(199, 126, 0, 0.08);
  color: var(--warn);
}
.vm-empty-inline { color: var(--dim); font-size: 13px; }
.vm-loading, .vm-error {
  border: 1px solid rgba(91, 76, 255, 0.16);
  border-radius: 20px;
  padding: 24px;
  background: var(--glass);
}
.vm-error {
  display: grid;
  gap: 10px;
}
.vm-error span, .vm-empty {
  color: var(--dim);
}

.vm-command {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(230px, .4fr);
  gap: 28px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(91, 76, 255, .25);
  border-radius: 24px;
  background: radial-gradient(circle at 80% 40%, rgba(91, 58, 247, .13), transparent 34%), var(--glass);
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 24px 70px rgba(0,0,0,.25);
}
.vm-command::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(116, 87, 248,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 87, 248,.025) 1px, transparent 1px);
  background-size: 32px 32px;
}
.vm-command > * { position: relative; z-index: 1; }
.vm-command h2 { margin: 7px 0 10px; max-width: 760px; font-size: clamp(31px, 4vw, 58px); line-height: .98; letter-spacing: 0; }
.vm-command p { max-width: 760px; margin: 0; color: var(--dim); font-size: 15px; line-height: 1.65; }
.vm-command-state { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.vm-command-state strong { font-size: 20px; }
.vm-command-state small { min-height: 36px; color: var(--dim); line-height: 1.45; }
.vm-command-state .btn { width: 100%; justify-content: center; }
.vm-promise-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; }
.vm-promise-row span { color: var(--dim); font-size: 12px; }
.vm-promise-row b { color: var(--neon); font: 700 11px "Spline Sans Mono", monospace; text-transform: uppercase; }
.vm-command.is-active { border-color: rgba(91, 76, 255,.55); box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 0 1px rgba(91, 76, 255,.2), 0 24px 70px rgba(91, 76, 255,.08); }
.vm-command .vm-since { margin-top: 2px; color: var(--neon); font: 700 12px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: .04em; }
.vm-behaviors { list-style: none; display: grid; gap: 9px; margin: 18px 0 0; padding: 0; max-width: 760px; }
.vm-behaviors li { position: relative; padding-left: 18px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.vm-behaviors li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); opacity: .75; }
.vm-behaviors li b { color: var(--ink); }
.vm-digest-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vm-digest-stats span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 11px; }
.vm-digest-stats b { margin-right: 4px; color: var(--neon); font: 700 12px "Spline Sans Mono", monospace; }
.vm-digest-stats .is-waiting { border-color: rgba(199, 126, 0,.4); }
.vm-digest-stats .is-waiting b { color: var(--warn); }
.vm-grid-power { align-items: start; }
.vm-grid-power .vm-wide { grid-column: 1 / -1; }
.vm-plan-card { grid-column: 1 / -1; }
.vm-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vm-coverage-toggles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.vm-cover-toggle { display: flex; gap: 10px; align-items: flex-start; min-height: 86px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--glass); cursor: pointer; }
.vm-cover-toggle input { margin-top: 3px; accent-color: var(--neon); }
.vm-cover-toggle span { display: grid; gap: 5px; }
.vm-cover-toggle b { color: var(--ink); font-size: 13px; }
.vm-cover-toggle i { color: var(--dim); font-size: 11px; line-height: 1.4; font-style: normal; }
.vm-wallet-card > p { color: var(--dim); line-height: 1.55; }
.vm-wallet-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 15px 0; }
.vm-wallet-numbers span { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--dim); font: 600 10px "Spline Sans Mono", monospace; text-transform: uppercase; }
.vm-wallet-numbers b { color: var(--ink); font-size: 22px; }
.vm-cost-list { display: flex; flex-wrap: wrap; gap: 7px; }
.vm-cost-list span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 11px; }
.vm-cost-list b { color: var(--neon); }
.vm-staffing { display: flex; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid rgba(199, 126, 0,.22); border-radius: 12px; background: rgba(199, 126, 0,.06); }
.vm-staffing.is-ready { border-color: rgba(91, 76, 255,.23); background: rgba(91, 76, 255,.06); }
.vm-staffing i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--warn); }
.vm-staffing.is-ready i { background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.vm-staffing span { display: grid; gap: 3px; color: var(--dim); font-size: 11px; line-height: 1.45; }
.vm-staffing b { color: var(--ink); font-size: 12px; }
.vm-operator-form { display: grid; gap: 11px; }
.vm-operator-form > .btn { justify-content: center; min-height: 46px; }
.vm-op-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.vm-op-task { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.vm-op-task-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vm-op-task h4 { margin: 12px 0 6px; font-size: 15px; }
.vm-op-task p { margin: 0; min-height: 38px; color: var(--dim); font-size: 12px; line-height: 1.55; }
.vm-op-task-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.vm-op-task-meta span { color: var(--dim); font: 600 9px "Spline Sans Mono", monospace; text-transform: uppercase; }
.vm-task-x { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--dim); font-size: 20px; cursor: pointer; }
.vm-task-x:hover { color: var(--ink); border-color: rgba(255,107,124,.5); }
.vm-empty { display: grid; gap: 5px; padding: 18px; border: 1px dashed var(--line); border-radius: 14px; }
.vm-empty b { color: var(--ink); }
.vm-empty span { font-size: 12px; line-height: 1.45; }
.vm-details { padding: 0; overflow: hidden; }
.vm-details summary { display: flex; justify-content: space-between; gap: 18px; padding: 18px; cursor: pointer; list-style: none; }
.vm-details summary::-webkit-details-marker { display: none; }
.vm-details summary span { display: grid; gap: 5px; }
.vm-details summary b { color: var(--ink); }
.vm-details summary i { color: var(--dim); font-size: 12px; font-style: normal; }
.vm-details summary em { color: var(--neon); font: 700 10px "Spline Sans Mono", monospace; font-style: normal; text-transform: uppercase; }
.vm-details .vm-readiness { padding: 0 18px 18px; }

@media (max-width: 1100px) {
  .vm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-grid-power .vm-wide, .vm-plan-card { grid-column: auto; }
  .vm-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vm-coverage-toggles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vm-op-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .vm { gap: 12px; }
  .vm-command { grid-template-columns: 1fr; gap: 14px; padding: 17px; border-radius: 18px; }
  .vm-command h2 { font-size: 31px; }
  .vm-command p { font-size: 13px; line-height: 1.55; }
  .vm-command-state { padding: 14px; }
  .vm-promise-row { display: grid; grid-template-columns: 1fr auto; margin-top: 14px; }
  .vm-plan-grid, .vm-coverage-toggles, .vm-op-list { grid-template-columns: 1fr; }
  .vm-cover-toggle { min-height: 0; }
  .vm-wallet-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vm-wallet-numbers span { padding: 9px; }
  .vm-wallet-numbers b { font-size: 18px; }
  .vm-details summary { align-items: center; padding: 14px; }
  .vm-hero, .vm-status-card {
    grid-template-columns: 1fr;
  }
  .vm-hero {
    padding: 17px;
    border-radius: 18px;
  }
  .vm-hero-mark {
    width: 88px;
    min-height: 88px;
    border-radius: 20px;
    position: absolute;
    right: 14px;
    top: 14px;
    opacity: 0.32;
  }
  .vm-hero h2 {
    max-width: 82%;
    font-size: 31px;
  }
  .vm-hero p {
    font-size: 13.5px;
  }
  .vm-status-card, .vm-card {
    border-radius: 18px;
    padding: 14px;
  }
  .vm-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vm-metric {
    min-height: 74px;
  }
  .vm-toggle-grid, .vm-ooo-grid {
    grid-template-columns: 1fr;
  }
  .vm-mini-facts {
    grid-template-columns: 1fr;
  }
  .vm-ready, .vm-feed-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .vm-ready em, .vm-feed-item time {
    grid-column: 2;
    text-align: left;
  }
  .vm-status-actions .btn, .vm-save-row .btn, .vm-approval-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 42px;
  }
}

/* ============================================================= */
/* =====================  PROMPT LIBRARY  ======================= */
/* ============================================================= */
.pl { display: flex; flex-direction: column; gap: 16px; }
.pl-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--glass);
}
.pl-eyebrow { margin: 0; font: 700 9px "Spline Sans Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.pl-head h3 { margin: 6px 0 0; font-size: 22px; }
.pl-sub { margin: 6px 0 0; max-width: 640px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.pl-sub b { color: var(--ink); }
.pl-whats-new {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; cursor: pointer; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(36, 31, 63, 0.044); color: var(--dim); padding: 8px 12px; font: 600 12px "Instrument Sans";
}
.pl-whats-new:hover { color: var(--ink); border-color: var(--line-strong); }
.pl-whats-new .ic { width: 14px; height: 14px; }
.pl-updates { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: rgba(36, 31, 63, 0.032); }
.pl-update-row { display: flex; flex-direction: column; gap: 2px; }
.pl-update-row b { font-size: 12.5px; color: var(--neon); }
.pl-update-row span { font-size: 12px; color: var(--dim); }

.pl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.pl-search span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.pl-search .ic { width: 14px; height: 14px; }
.pl-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06); color: var(--ink);
  padding: 9px 12px 9px 32px; font-size: 12.5px; outline: none;
}
.pl-search input:focus { border-color: var(--neon); }
.pl-filters { display: flex; gap: 6px; }
.pl-filter {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(36, 31, 63, 0.044); color: var(--dim); padding: 8px 12px; font: 600 12px "Instrument Sans";
}
.pl-filter .ic { width: 13px; height: 13px; }
.pl-filter:hover { color: var(--ink); }
.pl-filter.is-on { color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); border-color: transparent; }
.pl-add-btn { flex: 0 0 auto; }

.pl-cats { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.pl-cat {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--dim); padding: 8px 12px; font: 600 12.5px "Instrument Sans";
}
.pl-cat .ic { width: 14px; height: 14px; }
.pl-cat i { font: 600 11px "Spline Sans Mono", monospace; color: var(--dim); font-style: normal; }
.pl-cat:hover { color: var(--ink); background: rgba(91, 76, 255,.05); }
.pl-cat.is-on { color: var(--neon); border-color: rgba(91, 76, 255,0.35); background: rgba(91, 76, 255,0.08); }
.pl-cat.is-on i { color: var(--neon); }

.pl-add-form {
  display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; background: var(--glass);
}
.pl-add-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-add-row input { flex: 1 1 220px; }
.pl-add-form input, .pl-add-form select, .pl-add-form textarea {
  border: 1px solid var(--line); border-radius: 10px; background: rgba(36, 31, 63, 0.06); color: var(--ink);
  padding: 9px 11px; font-size: 12.5px; outline: none; font-family: inherit;
}
.pl-add-form select { flex: 0 0 200px; }
.pl-add-form textarea { resize: vertical; min-height: 64px; }
.pl-add-form input:focus, .pl-add-form select:focus, .pl-add-form textarea:focus { border-color: var(--neon); }
.pl-add-actions { display: flex; justify-content: flex-end; gap: 8px; }

.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pl-empty { color: var(--dim); font-size: 13px; padding: 24px 0; }
.pl-card {
  display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; background: var(--glass); min-width: 0;
}
.pl-card-top { display: flex; justify-content: space-between; align-items: center; }
.pl-card-cat {
  display: inline-flex; align-items: center; gap: 5px; font: 600 10px "Spline Sans Mono", monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
}
.pl-card-cat .ic { width: 12px; height: 12px; }
.pl-star { border: 0; background: none; cursor: pointer; color: var(--dim); padding: 2px; }
.pl-star .ic { width: 16px; height: 16px; }
.pl-star:hover { color: var(--ink); }
.pl-star.is-on { color: #c77e00; }
.pl-card h4 { margin: 0; font-size: 14.5px; line-height: 1.3; }
.pl-card-platform { margin: 0; font-size: 11px; color: var(--neon); }
.pl-card-prompt {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); max-height: 6.2em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.pl-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pl-action {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(36, 31, 63, 0.044); color: var(--dim); padding: 7px 10px; font: 600 11.5px "Instrument Sans";
}
.pl-action .ic { width: 13px; height: 13px; }
.pl-action:hover { color: var(--ink); border-color: var(--line-strong); }
.pl-action-danger:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }

@media (max-width: 720px) {
  .pl-head { flex-direction: column; align-items: stretch; }
  .pl-toolbar { flex-direction: column; align-items: stretch; }
  .pl-add-btn { width: 100%; justify-content: center; }
  .pl-grid { grid-template-columns: 1fr; }
}

/* ============================================================= */
/* ==============  CONTENT HUB — inline image editor  ========== */
/* ============================================================= */

@keyframes chLbIn { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }

@keyframes chBokehPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(91, 76, 255,0.16), 0 0 18px rgba(91, 76, 255,0.55); } 50% { box-shadow: 0 0 0 7px rgba(91, 76, 255,0.08), 0 0 22px rgba(91, 76, 255,0.4); } }

@media (max-width: 900px) {
  .dev-provider-row { grid-template-columns: 88px minmax(130px, 1fr) repeat(2, minmax(72px, .65fr)); }
  .dev-provider-row > span:last-child { display: none; }
  
  
  
  
  
}

/* Mobile admin fit pass: keep the command cockpit and taskbar in one phone viewport. */
@media (max-width: 767px) {
  :root {
    --mobile-admin-topbar: 64px;
    --mobile-admin-taskbar: 80px;
  }

  html, body, .phantom {
    min-height: 100svh;
  }

  .phantom {
    padding-bottom: 0;
  }

  .mobile-admin-homebar {
    min-height: calc(var(--mobile-admin-topbar) + env(safe-area-inset-top, 0px));
    padding: calc(7px + env(safe-area-inset-top, 0px)) 12px 7px;
  }

  .mobile-admin-brand {
    gap: 8px;
  }

  .mobile-admin-brand .brand-ghost {
    width: 30px;
    height: 30px;
  }

  .mobile-admin-brand b {
    max-width: 148px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .mobile-admin-brand i {
    font-size: 8.5px;
    letter-spacing: 0.14em;
  }

  .mobile-admin-actions {
    gap: 7px;
  }

  .mobile-icon-btn, .mobile-avatar-btn {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .app-main {
    min-height: calc(100svh - var(--mobile-admin-topbar));
    padding: 0 0 calc(var(--mobile-admin-taskbar) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
  }

  .app-main:has(> .console:not(.console-workspace)) {
    height: auto;
    min-height: calc(100svh - var(--mobile-admin-topbar));
    padding-bottom: 0 !important;
    overflow: visible;
  }

  .app-main:has(> .console:not(.console-workspace)) .console {
    overflow: visible;
  }

  .console {
    min-height: calc(100svh - var(--mobile-admin-topbar));
    padding: 10px 10px calc(var(--mobile-admin-taskbar) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }

  .console-center {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    gap: 0;
  }

  .console .hero2 {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: calc(100svh - var(--mobile-admin-topbar) - var(--mobile-admin-taskbar) - 24px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px !important;
    border-radius: 20px;
  }

  .console .hero2-copy {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
  }

  .console .chatbox {
    min-height: 0;
    height: 100%;
    border-radius: 18px;
  }

  .console .chatbox-head {
    padding: 10px 12px;
  }

  .console .chatbox-log {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    gap: 8px;
  }

  .console .msg-body {
    max-width: 92%;
  }

  .console .msg-phantom .msg-body {
    padding: 8px 11px;
  }

  .console .msg-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .console .chat-start {
    padding: 3px 0 6px;
  }

  .console .chat-start-t {
    font-size: 18px;
  }

  .console .chat-start-s {
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .console .chat-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .console .chat-start-btn {
    min-height: 40px;
    padding: 8px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
  }

  .console .chat-start-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .console .chatbox-composer {
    margin: 0 8px 8px;
    padding: 8px 8px 8px 13px;
    border-radius: 17px;
  }

  .console .chatbox-composer input {
    height: 36px;
    font-size: 15px;
  }

  .console .chatbox-composer .cmd-send {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .console .chatbox-tools, .console .chatbox-trust {
    display: none !important;
  }

  .pc {
    gap: 9px;
  }

  .pc-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .pc-title {
    gap: 6px;
  }

  .pc-title b {
    max-width: 114px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  .pc-label {
    display: none;
  }

  .pc-mode {
    padding: 5px 9px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }

  .pc-settings {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .mobile-bottom-nav {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    min-height: 66px;
    padding: 7px 10px;
    gap: 6px;
    mask-image: none;
    -webkit-mask-image: none;
    scroll-padding-inline: 10px;
  }

  .mobile-bottom-item {
    flex: 0 0 74px;
    min-height: 52px;
    border-radius: 16px;
    font-size: 9.5px;
  }

  .mobile-bottom-item.is-active {
    flex-basis: 80px;
  }

  .mobile-bottom-item span {
    max-width: 68px;
  }
}

@media (max-width: 390px) {
  .mobile-admin-brand b {
    max-width: 132px;
  }

  .mobile-bottom-item {
    flex-basis: 70px;
  }

  .mobile-bottom-item.is-active {
    flex-basis: 76px;
  }
}

/* Mobile dock polish: the taskbar is a solid control surface, not a glass layer
   over active page text. Keep enough scroll runway below workspace pages so
   the final cards never park behind the fixed nav. */
@media (max-width: 767px) {
  .app-main {
    padding-bottom: calc(var(--mobile-admin-taskbar) + 34px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .console-workspace {
    padding-bottom: calc(var(--mobile-admin-taskbar) + 42px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .workspace-page {
    margin-bottom: calc(var(--mobile-admin-taskbar) + 26px + env(safe-area-inset-bottom, 0px));
  }

  .workspace-page-body {
    padding-bottom: calc(var(--mobile-admin-taskbar) + 30px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-bottom-nav {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--glass);
    border-color: rgba(91, 76, 255, 0.32);
    box-shadow:
      0 -30px 58px 14px rgba(255, 255, 255, 0.9),
      0 -10px 30px rgba(36, 31, 63, 0.16),
      0 0 0 1px rgba(36, 31, 63, 0.16),
      inset 0 1px 0 rgba(43, 38, 73, 0.08),
      0 0 26px rgba(91, 76, 255, 0.12);
    mask-image: none !important;
    -webkit-mask-image: none !important;
    isolation: isolate;
  }

  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass);
  }

  .mobile-bottom-item {
    background: rgba(255, 255, 255, 0.01);
  }

  .mobile-bottom-item.is-active {
    background: linear-gradient(135deg, rgba(91, 76, 255, 0.26), rgba(37, 13, 132, 0.2));
  }
}

/* Mobile keyboard focus: the active chat input is .chatbox-composer. Older
   focus rules moved .cmd-input, which left the real composer buried under the
   iOS keyboard. Pin the real composer above the visual viewport keyboard gap. */
@media (max-width: 767px) {
  .phantom.is-command-focused {
    overflow-x: hidden;
  }

  .phantom.is-command-focused .app-main {
    padding-bottom: calc(150px + var(--phantom-keyboard-offset) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .phantom.is-command-focused .console, .phantom.is-command-focused .console-workspace {
    padding-bottom: calc(158px + var(--phantom-keyboard-offset) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .phantom.is-command-focused .console .hero2 {
    min-height: calc(100svh - var(--mobile-admin-topbar) - 22px) !important;
    overflow: visible;
  }

  .phantom.is-command-focused .console .chatbox {
    overflow: visible;
  }

  .phantom.is-command-focused .console .chatbox-log {
    padding-bottom: 92px;
  }

  .phantom.is-command-focused .console .chatbox-composer {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + var(--phantom-keyboard-offset) + env(safe-area-inset-bottom, 0px));
    z-index: 140;
    width: auto;
    max-width: none;
    min-height: 58px;
    margin: 0;
    padding: 8px 8px 8px 15px;
    border: 1px solid rgba(91, 76, 255, 0.44);
    border-radius: 18px;
    background: var(--glass);
    box-shadow:
      0 18px 44px rgba(36, 31, 63, 0.16),
      0 0 0 1px rgba(36, 31, 63, 0.16),
      0 0 34px rgba(91, 76, 255, 0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: translateZ(0);
  }

  .phantom.is-command-focused .console .chatbox-composer input {
    height: 40px;
    font-size: 16px;
    color: var(--ink);
    opacity: 1;
  }

  .phantom.is-command-focused .console .chatbox-composer input::placeholder {
    color: var(--ink);
  }

  .phantom.is-command-focused .console .chatbox-composer .cmd-send {
    width: 44px;
    height: 44px;
  }

  .phantom.is-command-focused .mobile-bottom-nav, body.phantom-keyboard-active .mobile-bottom-nav {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }
}

/* ============================================================= */
/* =================  LIVING CONSOLE — magic pass  ============= */
/* PhantomForce is a magical workforce environment, not a war    */
/* room. This block adds the ambient life layer: drifting spark  */
/* motes, the sidebar-docked phantom companion, page-enter transitions, */
/* an aurora breath on the glow field, and micro-interactions.   */
/* Every animation here is decorative and fully disabled under   */
/* prefers-reduced-motion.                                       */
/* ============================================================= */

/* ---- ambient spark motes (canvas mounted by ambient.js) ---- */
.ambient-motes {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---- aurora breath: the glow field slowly drifts and dims ---- */
@keyframes auroraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50% { transform: translate3d(0, -16px, 0) scale(1.045); opacity: 0.8; }
}
.bg-glow { animation: auroraDrift 26s ease-in-out infinite; will-change: transform, opacity; }

/* ---- the phantom companion: docked in the console, not flying over work ---- */
/* z-index 46: above every page surface, below overlays (50), the  */
/* notif menu (60), cmdk (80), and the mobile chrome (95) so it    */
/* can never block a control that matters.                         */
.buddy {
  position: fixed; left: 0; top: 0; z-index: 46;
  pointer-events: none; will-change: transform;
  transition: opacity 0.35s ease, width 0.18s ease, height 0.18s ease;
  width: var(--buddy-width, var(--buddy-size, 118px));
  height: var(--buddy-height, var(--buddy-size, 118px));
}
.buddy.is-booting {
  opacity: 0;
  pointer-events: none;
}
.buddy.is-booting .buddy-canvas {
  pointer-events: none;
}
.buddy.is-scroll-hidden {
  opacity: 0;
  pointer-events: none;
}
.buddy.is-scroll-hidden .buddy-canvas {
  pointer-events: none !important;
}
.buddy-canvas {
  display: block; pointer-events: auto; cursor: grab; touch-action: none;
  border-radius: 999px;
  filter: drop-shadow(0 12px 26px rgba(36, 31, 63, 0.147)) drop-shadow(0 0 22px rgba(91, 76, 255, 0.16));
  transform-origin: 50% 50%;
  transition: width 0.18s ease, height 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}
.buddy[data-dock="sidebar"] .buddy-canvas {
  border-radius: 34px;
  filter: drop-shadow(0 14px 26px rgba(36, 31, 63, 0.154)) drop-shadow(0 0 20px rgba(91, 76, 255, 0.16));
}
.buddy.is-docked .buddy-canvas {
  filter: drop-shadow(0 10px 22px rgba(36, 31, 63, 0.14)) drop-shadow(0 0 16px rgba(91, 76, 255, 0.14));
}
.buddy.is-docked[data-dock="sidebar"] .buddy-canvas {
  filter: drop-shadow(0 14px 28px rgba(36, 31, 63, 0.16)) drop-shadow(0 0 22px rgba(91, 76, 255, 0.16));
}
.buddy.is-grabbed .buddy-canvas { cursor: grabbing; }
.buddy-say {
  position: absolute; left: 50%; bottom: calc(100% - 26px); transform: translateX(-50%);
  width: max-content; max-width: min(230px, calc(100vw - 28px)); padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 14px 14px 14px 5px;
  background: var(--glass); color: var(--ink);
  font: 500 12px "Instrument Sans", sans-serif; line-height: 1.4; text-align: center;
  box-shadow: 0 10px 30px rgba(36, 31, 63, 0.158), 0 0 24px rgba(91, 76, 255, 0.12);
  backdrop-filter: blur(8px); pointer-events: none;
}
.buddy[data-dock="sidebar"] .buddy-say {
  left: 0;
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  transform: none;
  width: max-content;
  max-width: min(190px, calc(100vw - 24px));
  padding: 6px 9px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.22;
  overflow-wrap: anywhere;
  border-radius: 12px 12px 12px 4px;
  background: var(--glass);
  box-shadow: 0 10px 24px rgba(36, 31, 63, 0.16), 0 0 14px rgba(91, 76, 255, 0.08);
}
.buddy[data-state="notifying"] .buddy-canvas, .buddy[data-state="celebrating"] .buddy-canvas {
  filter: drop-shadow(0 12px 26px rgba(36, 31, 63, 0.147)) drop-shadow(0 0 30px rgba(91, 76, 255, 0.24));
}
.buddy-say.pop { animation: buddyPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.buddy[data-dock="sidebar"] .buddy-say.pop { animation-name: buddySidebarPop; }
@keyframes buddyPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.85); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes buddySidebarPop {
  0% { opacity: 0; transform: translateY(6px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.buddy-menu {
  position: fixed;
  z-index: 61;
  width: min(220px, calc(100vw - 20px));
  max-height: min(360px, calc(100vh - 20px));
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--glass);
  box-shadow: 0 24px 60px rgba(36, 31, 63, 0.16), 0 0 40px rgba(91, 76, 255,0.1);
  color: var(--ink);
  pointer-events: auto;
}
.buddy-menu[hidden] { display: none; }
.buddy-menu b {
  padding: 4px 5px 2px;
  color: var(--neon);
  font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.buddy-menu hr {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(91, 76, 255,0.14);
  margin: 3px 0;
}
.buddy-menu button, .buddy-menu label {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  color: var(--ink);
  text-align: left;
  font: 600 12px "Instrument Sans", sans-serif;
}
.buddy-menu button {
  cursor: pointer;
  padding: 7px 8px;
}
.buddy-menu button:hover, .buddy-menu button:focus-visible {
  outline: none;
  border-color: var(--line);
  background: rgba(91, 76, 255,0.07);
}
.buddy-menu label {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  color: var(--dim);
}
.buddy-menu select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(36, 31, 63, 0.048);
  color: var(--ink);
  padding: 7px 8px;
}
/* workspace overlays blur the whole console — the buddy ducks out too */
body.overlay-open .buddy { opacity: 0; }
body.overlay-open .buddy-canvas { pointer-events: none; }

/* ---------------- Mission Control Mode ---------------- */
.mission-control-mount { margin: 18px 0 0; }
.mc-switch-card, .mission-control, .mc-dialog::backdrop, .mc-setup {
  font-family: "Instrument Sans", sans-serif;
}
.mc-switch-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(91, 76, 255,0.18);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: 0 18px 50px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.mc-switch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 14% 0%, rgba(91, 76, 255,0.18), transparent 34%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.mc-switch-card.is-on::before { opacity: 1; }
.mc-kicker {
  margin: 0 0 5px;
  color: var(--neon);
  font: 800 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-switch-card h2, .mission-control h2, .mission-control h3, .mc-setup h3 { margin: 0; color: var(--ink); letter-spacing: -0.02em; }
.mc-switch-card h2 span { color: var(--neon); text-shadow: 0 0 18px rgba(91, 76, 255,0.28); }
.mc-switch-card small, .mission-control small, .mc-muted { color: var(--dim); }
.mc-toggle {
  width: 92px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font: 900 12px "Spline Sans Mono", monospace;
  cursor: pointer;
}
.mc-toggle span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.mc-toggle.is-on span {
  transform: translateX(48px);
  color: #ffffff;
  background: linear-gradient(120deg, var(--neon), #5b4cff);
  box-shadow: 0 0 24px rgba(91, 76, 255,0.42);
}
body.mission-control-on .phantom {
  background:
    radial-gradient(circle at 30% 5%, rgba(91, 76, 255,0.08), transparent 28%),
    var(--glass);
}
body.mission-control-on .sidebar, body.mission-control-on .topbar2, body.mission-control-on .console {
  border-color: rgba(91, 76, 255,0.18);
}
.mission-control {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(91, 76, 255,0.24);
  border-radius: 26px;
  background:
    linear-gradient(rgba(91, 76, 255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 76, 255,0.035) 1px, transparent 1px),
    var(--glass);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 28px 90px rgba(36, 31, 63, 0.147), 0 0 70px rgba(91, 76, 255,0.08);
  overflow: hidden;
  animation: mcBoot 0.42s ease both;
}
.mission-control::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(91, 76, 255,0.08), transparent);
  transform: translateX(-120%);
  animation: mcScan 3.2s ease-in-out infinite;
  pointer-events: none;
}
.mc-online-flash {
  position: absolute;
  top: 12px;
  right: 18px;
  color: var(--neon);
  font: 900 10px "Spline Sans Mono", monospace;
  letter-spacing: 0.18em;
  opacity: 0;
  animation: mcFlash 2.4s ease 0.15s both;
  pointer-events: none;
}
@keyframes mcBoot { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes mcScan { 0%, 45% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
@keyframes mcFlash { 0%, 12%, 72% { opacity: 0; } 20%, 58% { opacity: 1; } 100% { opacity: 0; } }
.mc-head, .mc-commander, .mc-grid2, .mc-workers, .mc-team {
  position: relative;
  z-index: 1;
}
.mc-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.mc-head small { display: block; margin-top: 5px; line-height: 1.45; }
.mc-actions, .mc-view-row, .mc-worker footer, .mc-approvals footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mc-actions button, .mc-view-row button, .mc-worker button, .mc-approvals button, .mc-primary, .mc-setup footer button, .mc-empty button {
  border: 1px solid rgba(91, 76, 255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: var(--ink);
  padding: 8px 11px;
  font: 800 11px "Instrument Sans", sans-serif;
  cursor: pointer;
}
.mc-primary, .mc-view-row .is-active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--neon), #5b4cff);
  box-shadow: 0 0 24px rgba(91, 76, 255,0.22);
}
.mc-danger { border-color: rgba(224, 52, 94,0.34) !important; color: #ffb9c2 !important; }
.mc-commander, .mc-worker, .mc-board-col, .mc-approvals article, .mc-deliverables article, .mc-activity, .mc-cli, .mc-empty, .mc-worker-chat {
  border: 1px solid rgba(91, 76, 255,0.16);
  border-radius: 18px;
  background: rgba(36, 31, 63, 0.044);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.mc-commander { display: grid; gap: 12px; padding: 14px; grid-template-columns: minmax(0,1fr) auto; }
.mc-overall {
  display: grid;
  place-items: center;
  min-width: 90px;
  padding: 9px;
  border-radius: 16px;
  background: rgba(91, 76, 255,0.08);
}
.mc-overall b { color: var(--neon); font-size: 25px; line-height: 1; }
.mc-chatlog {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
}
.mc-chatlog p, .mc-worker-chat p {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.mc-chatlog b, .mc-worker-chat b { display: block; color: var(--neon); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.mc-chat-user { justify-self: end; max-width: 86%; background: rgba(91, 76, 255,0.09) !important; }
.mc-chat-phantom { border: 1px solid rgba(91, 76, 255,0.12); }
.mc-commander form, .mc-worker-chat form { grid-column: 1 / -1; display: flex; gap: 8px; }
.mc-commander input, .mc-worker-chat input, .mc-setup input, .mc-setup textarea, .mc-setup select {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(91, 76, 255,0.2);
  border-radius: 14px;
  background: rgba(36, 31, 63, 0.07);
  color: var(--ink);
  padding: 10px 11px;
}
.mc-workers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.mc-worker { display: grid; gap: 10px; padding: 12px; min-width: 0; }
.mc-worker header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; }
.mc-worker header b { display: block; color: var(--ink); }
.mc-worker header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-worker header i {
  color: var(--neon);
  font: 800 9px "Spline Sans Mono", monospace;
  font-style: normal;
  text-transform: uppercase;
}
.mc-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(120deg, var(--neon), #5b4cff);
  box-shadow: 0 0 22px rgba(91, 76, 255,0.24);
}
.mc-worker p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.35; }
.mc-progress { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.08); }
.mc-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--neon), #5b4cff); box-shadow: 0 0 18px rgba(91, 76, 255,0.35); transition: width 0.35s ease; }
.mc-worker-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-worker-meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  color: var(--dim);
  font-size: 10px;
}
.mc-latest { min-height: 32px; }
.mc-grid2 { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,0.65fr); gap: 12px; }
.mc-board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.mc-board-col { padding: 10px; display: grid; gap: 7px; align-content: start; min-height: 120px; }
.mc-board-col > b { color: var(--neon); font: 900 10px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.12em; }
.mc-board-col article, .mc-approvals article, .mc-deliverables article { padding: 9px; border-radius: 12px; background: rgba(255,255,255,0.04); }
.mc-board-col p, .mc-approvals p, .mc-deliverables p { margin: 4px 0; color: var(--ink); font-size: 12px; line-height: 1.35; }
.mc-board-col span { color: var(--dim); font-size: 10px; }
.mc-board-col em { color: rgba(43, 38, 73,0.36); font-style: normal; font-size: 11px; }
.mc-approvals, .mc-deliverables { display: grid; gap: 8px; }
.mc-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mc-worker-chat { padding: 10px; }
.mc-worker-chat summary { cursor: pointer; color: var(--ink); font-weight: 800; }
.mc-worker-chat div { display: grid; gap: 6px; margin: 9px 0; max-height: 190px; overflow: auto; }
.mc-activity { padding: 12px; }
.mc-activity summary { color: var(--ink); font-weight: 900; cursor: pointer; }
.mc-activity ol { margin: 10px 0 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
.mc-activity li { color: var(--ink); }
.mc-activity li b { color: var(--neon); margin-right: 6px; }
.mc-activity li span { display: block; font-size: 12px; line-height: 1.35; }
.mc-activity li small { display: block; color: var(--dim); font-size: 10px; }
.mc-cli { padding: 13px; display: grid; gap: 7px; }
.mc-cli code {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--glass-2);
  color: var(--neon);
  font: 700 11px "Spline Sans Mono", monospace;
}
.mc-empty { margin-top: 14px; padding: 18px; display: grid; gap: 8px; }
.mc-dialog {
  width: min(760px, calc(100vw - 24px));
  border: 0;
  border-radius: 24px;
  padding: 0;
  color: var(--ink);
  background: transparent;
}
.mc-dialog::backdrop { background: var(--glass); backdrop-filter: blur(10px); }
.mc-setup {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(91, 76, 255,0.22);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: 0 30px 100px rgba(36, 31, 63, 0.16);
}
.mc-setup header, .mc-setup footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-setup header button { border: 0; background: rgba(255,255,255,0.06); color: #fff; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; }
.mc-setup label { display: grid; gap: 6px; color: var(--dim); font-size: 12px; }
.mc-setup textarea { min-height: 96px; resize: vertical; }
.mc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .mission-control, .mission-control::after, .mc-online-flash { animation: none !important; }
}
@media (max-width: 900px) {
  .mc-grid2 { grid-template-columns: 1fr; }
  .mc-board { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .mc-switch-card, .mc-head, .mc-commander { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .mc-workers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .mc-worker { min-width: 82vw; scroll-snap-align: start; }
  .mc-board, .mc-form-grid { grid-template-columns: 1fr; }
  .mc-actions button, .mc-view-row button { flex: 1; }
}
/* The home console already has Phantom in the hero. Keep the sidebar companion
   for actual work pages so it feels useful instead of crowded. */
body:has(.phantom .app-main > .console:not(.console-workspace)) .buddy {
  opacity: 0;
  pointer-events: none;
}
body:has(.phantom .app-main > .console:not(.console-workspace)) .buddy-canvas {
  pointer-events: none;
}
/* ---- page life: entering a tab feels like arriving somewhere ---- */
@keyframes pageBloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.workspace-page.page-enter { animation: pageBloom 0.3s ease both; }
.workspace-page.page-enter .workspace-page-head { animation: pageRise 0.45s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both; }
.workspace-page.page-enter .workspace-page-body { animation: pageRise 0.52s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.console.console-enter { animation: pageBloom 0.32s ease both; }
.console.console-enter .hero2 { animation: pageRise 0.5s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both; }
.console.console-enter .console-rail { animation: pageRise 0.55s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---- micro-interactions: the console answers your hand ---- */
.nav-item { transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s; }
.nav-item:hover { transform: translateX(2px); }
.nav-item:active { transform: translateX(2px) scale(0.98); }
.nav-item .ic { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-item:hover .ic { transform: scale(1.14) rotate(-5deg); }
.plan-card, .queue-card, .quick-card, .desktop-context-card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.plan-card:hover, .queue-card:hover, .quick-card:hover, .desktop-context-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 76, 255, 0.3);
  box-shadow: var(--edge-hi), var(--depth-2), 0 0 26px rgba(91, 76, 255, 0.07);
}
.ml-tab, .set-model-card, .cmd-chip, .chat-start-btn { transition: transform 0.16s ease, background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.2s; }
.ml-tab:active, .cmd-chip:active, .chat-start-btn:active { transform: scale(0.97); }
.set-model-card:hover { transform: translateY(-2px); }

/* ---- stillness is a feature: kill every decorative motion ---- */
@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none; }
  .buddy-say.pop { animation: none; }
  .buddy, .buddy-canvas { transition: none !important; }
  .workspace-page.page-enter, .workspace-page.page-enter .workspace-page-head, .workspace-page.page-enter .workspace-page-body, .console.console-enter, .console.console-enter .hero2, .console.console-enter .console-rail { animation: none !important; }
  .nav-item:hover, .nav-item:active, .nav-item:hover .ic, .plan-card:hover, .queue-card:hover, .quick-card:hover, .desktop-context-card:hover, .set-model-card:hover, .ml-tab:active, .cmd-chip:active, .chat-start-btn:active { transform: none; }
}

@media (max-width: 720px) {
  .buddy {
    opacity: 0;
    pointer-events: none;
    z-index: 44;
  }
  .buddy-canvas {
    pointer-events: none !important;
  }
  .buddy-say {
    display: none;
    left: auto;
    right: 0;
    bottom: calc(100% - 18px);
    transform: none;
    max-width: min(210px, calc(100vw - 24px));
    font-size: 11px;
    padding: 7px 10px;
  }
  .buddy-say.pop { animation-name: buddyMobilePop; }
  .buddy-menu {
    left: 10px !important;
    right: 10px;
    width: auto;
  }
}

@keyframes buddyMobilePop {
  0% { opacity: 0; transform: translateY(6px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Final mobile dashboard fit: the home screen is the command console, not a
   scroll page. Keep the upper nav and full chat visible in one phone viewport. */
@media (max-width: 767px) {
  html:has(.phantom .app-main > .console:not(.console-workspace)), body:has(.phantom .app-main > .console:not(.console-workspace)) {
    height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .app-main {
    height: calc(100svh - var(--mobile-admin-topbar));
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .console {
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: 8px 10px calc(var(--mobile-admin-taskbar) + 10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .console-center {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .hero2 {
    height: 100%;
    min-height: 0 !important;
    display: flex !important;
    overflow: hidden;
    padding: 8px !important;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .hero2-title, .phantom:has(.app-main > .console:not(.console-workspace)) .hero2-sub, .phantom:has(.app-main > .console:not(.console-workspace)) .cmd-chips, .phantom:has(.app-main > .console:not(.console-workspace)) .hero2-stage {
    display: none !important;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .hero2-copy {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .chatbox {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .chatbox-head, .phantom:has(.app-main > .console:not(.console-workspace)) .chatbox-composer {
    flex: 0 0 auto;
  }

  .phantom:has(.app-main > .console:not(.console-workspace)) .chatbox-log {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
}

/* ---- Memory page: Phantom Brain server-vault panel (owner-only) ---- */
.memory-brain-panel {
  margin-top: 6px;
  border: 1px solid rgba(91, 76, 255, 0.22);
  border-radius: 18px;
  background: var(--glass);
  overflow: hidden;
}
.memory-brain-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 18px;
}
.memory-brain-panel > summary::-webkit-details-marker { display: none; }
.memory-brain-panel > summary b { color: var(--ink); font-size: 14px; }
.memory-brain-panel > summary b::before { content: "▸ "; color: var(--neon); }
.memory-brain-panel[open] > summary b::before { content: "▾ "; }
.memory-brain-panel > summary span { color: var(--dim); font-size: 12px; line-height: 1.45; }
.memory-brain-panel > summary:hover { background: rgba(91, 76, 255, 0.05); }
.memory-brain-mount { padding: 4px 18px 18px; }

/* Phantom smart layer system */

/* Phantom AI quick tools */

/* ---- Websites editor: device preview, history, sections, publish ---- */
.ss-editbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 8px;
}
.ss-devbar { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(36, 31, 63, 0.048); }
.ss-devbar button {
  padding: 6px 13px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--dim);
  cursor: pointer; font: 600 12px "Instrument Sans", sans-serif; transition: background 0.16s, color 0.16s;
}
.ss-devbar button:hover { color: var(--ink); background: rgba(91, 76, 255,0.07); }
.ss-devbar button.is-active { color: #ffffff; background: linear-gradient(120deg, var(--neon), #5b4cff); }
.ss-editbar-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-history { position: relative; }
.ss-history > summary {
  cursor: pointer; list-style: none; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); font-size: 12.5px; background: rgba(91, 76, 255,0.06);
}
.ss-history > summary::-webkit-details-marker { display: none; }
.ss-history[open] > summary { border-color: var(--neon); }
.ss-history-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(320px, 84vw);
  max-height: 300px; overflow-y: auto; padding: 8px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--glass); box-shadow: 0 18px 50px rgba(36, 31, 63, 0.16);
  display: flex; flex-direction: column; gap: 4px;
}
.ss-history-list article {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px;
  padding: 7px; border: 1px solid transparent; border-radius: 9px;
}
.ss-history-list article:hover { border-color: var(--line-strong); background: rgba(91, 76, 255,0.07); }
.ss-history-list article > div { min-width: 0; }
.ss-history-list article b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-history-list article span { display: block; color: var(--dim); font-size: 10.5px; white-space: nowrap; }
.ss-history-list article button {
  min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 10.5px;
}
.ss-history-list article button:hover { border-color: var(--neon); color: var(--neon); }
.ss-history-list p { margin: 4px 6px; color: var(--dim); font-size: 11.5px; }
.ss-publish-chip {
  padding: 7px 13px; border-radius: 999px; font: 600 11.5px "Instrument Sans", sans-serif; white-space: nowrap;
}
.ss-publish-waiting { border: 1px solid rgba(199, 126, 0,0.4); color: var(--warn); background: rgba(199, 126, 0,0.08); }
.ss-publish-approved { border: 1px solid rgba(91, 76, 255,0.4); color: var(--neon); background: rgba(91, 76, 255,0.08); }
.ss-publish-live {
  border: 1px solid rgba(91, 76, 255,0.55); color: #ffffff; background: var(--neon);
  text-decoration: none; display: inline-block;
}
.ss-publish-live:hover { filter: brightness(1.08); }

/* device preview: real constrained widths so layout is actually checked */
.ss-simple-preview { transition: max-width 0.28s ease; }
.ss-simple-preview.ss-device-tablet { max-width: 768px; margin-inline: auto; }
.ss-simple-preview.ss-device-phone { max-width: 400px; margin-inline: auto; }

.ss-template-picker { position: relative; }
.ss-template-picker > summary {
  min-height: 38px; display: flex; align-items: center; padding: 7px 13px; border: 1px solid var(--line-strong);
  border-radius: 10px; list-style: none; cursor: pointer; color: var(--ink); font-size: 12px;
}
.ss-template-picker > summary::-webkit-details-marker { display: none; }
.ss-template-picker > div {
  position: absolute; z-index: 32; top: calc(100% + 7px); right: 0; width: min(260px, 80vw);
  display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--glass); box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.ss-template-picker button {
  min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.ss-template-picker button:hover { border-color: var(--neon); background: color-mix(in srgb, var(--neon) 8%, transparent); }

.ss-preview-toggle { margin-left: auto; display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; }
.ss-preview-toggle button {
  min-height: 28px; padding: 4px 9px; border: 0; border-radius: 6px; background: transparent;
  color: var(--dim); cursor: pointer; font: 700 9px "Spline Sans Mono", monospace; text-transform: uppercase;
}
.ss-preview-toggle button.is-active { background: var(--neon); color: #04150f; }
.ss-structured-draft { min-width: 0; min-height: 100%; overflow: auto; background: #04100c; }
.ss-structured-draft .site-live-preview { min-height: 100%; border-radius: 0; }

.ss-direct-editor {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018);
}
.ss-direct-editor label { grid-column: 1 / -1; color: var(--dim); font-size: 10px; font-weight: 700; }
.ss-direct-editor textarea {
  min-width: 0; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(36,31,63,.055); color: var(--ink); line-height: 1.4;
}
.ss-direct-editor textarea:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 11%, transparent); }
.ss-direct-editor button {
  min-height: 44px; align-self: end; padding: 8px 11px; border: 1px solid var(--neon); border-radius: 9px;
  background: color-mix(in srgb, var(--neon) 12%, transparent); color: var(--neon); cursor: pointer; font-weight: 800;
}

.ss-lifecycle-notice {
  margin: 2px 0 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--neon) 35%, transparent);
  border-radius: 11px; background: color-mix(in srgb, var(--neon) 7%, transparent); color: var(--ink); font-size: 12px;
}
.ss-lifecycle-notice.is-error { border-color: rgba(224,52,94,.45); background: rgba(224,52,94,.08); color: #ffb1bd; }

.ss-proposal, .ss-version-compare, .ss-release-receipt {
  display: grid; gap: 12px; margin: 8px 0; padding: 14px; border: 1px solid var(--line-strong);
  border-radius: 15px; background: color-mix(in srgb, var(--neon) 5%, var(--glass));
}
.ss-proposal > header, .ss-version-compare > header, .ss-release-receipt > header, .ss-proposal > footer, .ss-version-compare > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.ss-proposal header p, .ss-version-compare header p, .ss-release-receipt header p {
  margin: 0 0 3px; color: var(--neon); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: .14em; text-transform: uppercase;
}
.ss-proposal h3, .ss-version-compare h3, .ss-release-receipt h3 { margin: 0; font-size: 17px; }
.ss-proposal header div > span, .ss-version-compare header div > span { color: var(--dim); font-size: 11px; }
.ss-proposal header > span {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--dim); font-size: 10px;
}
.ss-proposal-diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.ss-proposal-diff article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.ss-proposal-diff article > b { display: block; margin-bottom: 7px; color: var(--ink); font-size: 12px; }
.ss-proposal-diff article > div { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 7px; }
.ss-proposal-diff span { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; text-transform: uppercase; }
.ss-proposal-diff p, .ss-proposal > footer p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.ss-proposal > footer p { margin-right: auto; }

.ss-version-compare header > button {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.ss-version-compare > div { display: grid; gap: 5px; }
.ss-version-compare article {
  display: grid; grid-template-columns: 120px minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: start;
  padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; font-size: 11px;
}
.ss-version-compare article span { color: var(--dim); overflow-wrap: anywhere; }
.ss-version-compare article i { color: var(--neon); font-style: normal; }
.ss-version-compare article strong { overflow-wrap: anywhere; }

.ss-readiness { margin: 8px 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); }
.ss-readiness > summary {
  min-height: 46px; display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 9px; align-items: center;
  padding: 9px 12px; cursor: pointer; list-style: none;
}
.ss-readiness > summary::-webkit-details-marker { display: none; }
.ss-readiness summary > span { font-weight: 800; }
.ss-readiness summary > b { color: var(--neon); font: 800 11px "Spline Sans Mono", monospace; }
.ss-readiness summary > i { color: var(--dim); font-size: 11px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-readiness > div { display: grid; gap: 4px; padding: 0 10px 10px; }
.ss-readiness p { display: grid; grid-template-columns: 22px 140px minmax(0,1fr); gap: 7px; margin: 0; padding: 7px; border-radius: 8px; font-size: 11px; }
.ss-readiness p b { color: var(--neon); }
.ss-readiness p small { color: var(--dim); }
.ss-readiness p.is-blocked { background: rgba(199,126,0,.08); }
.ss-readiness p.is-blocked b { color: var(--warn); }
.ss-readiness {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 2px 0 7px;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ss-readiness > summary {
  display: inline-grid;
  grid-template-columns: 18px auto auto;
  min-height: 26px;
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  opacity: .68;
}
.ss-readiness > summary:hover { background: rgba(255,255,255,.035); opacity: 1; }
.ss-readiness:not([open]) > div { display: none; }
.ss-readiness summary > span {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--warn);
  font: 900 10px/1 "Spline Sans Mono",monospace;
}
.ss-readiness.is-ready summary > span { color: var(--neon); }
.ss-readiness summary > i {
  color: var(--dim);
  font: 700 9px "Spline Sans Mono",monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ss-readiness summary > b { color: var(--dim); font-size: 9px; }
.ss-readiness[open] {
  width: min(620px,100%);
  padding: 6px;
  border: 1px solid var(--line);
  background: rgba(4,9,16,.86);
}

.ss-sentry {
  display: grid;
  gap: 10px;
  margin: 7px 0 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--neon) 28%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--neon) 7%, transparent), transparent 46%),
    rgba(4,9,16,.9);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.ss-sentry header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ss-sentry header p {
  margin: 0 0 3px;
  color: var(--neon);
  font: 800 9px "Spline Sans Mono", monospace;
  letter-spacing: .16em;
}
.ss-sentry h3 { margin: 0; font-size: 16px; }
.ss-sentry header span { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; }
.ss-sentry-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-sentry-actions > b {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font: 800 9px "Spline Sans Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-sentry.is-clean .ss-sentry-actions > b { border-color: color-mix(in srgb, var(--neon) 52%, transparent); color: var(--neon); }
.ss-sentry.is-review .ss-sentry-actions > b { border-color: rgba(255,202,87,.42); color: #ffd983; }
.ss-sentry.is-blocked .ss-sentry-actions > b { border-color: rgba(255,95,126,.48); color: #ff9cac; }
.ss-sentry-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.ss-sentry-stats p {
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
}
.ss-sentry-stats p:last-child { border-right: 0; }
.ss-sentry-stats span {
  display: block;
  margin-bottom: 4px;
  color: var(--dim);
  font: 700 9px "Spline Sans Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-sentry-stats b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ss-sentry-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; }
.ss-sentry-links > p, .ss-sentry-clean { margin: 0; color: var(--dim); font-size: 11px; }
.ss-sentry-link {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.ss-sentry-link span {
  color: var(--dim);
  font: 800 8px "Spline Sans Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-sentry-link b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ss-sentry-link i {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font: 800 9px "Spline Sans Mono", monospace;
  font-style: normal;
}
.ss-sentry-link small {
  grid-column: 1 / -1;
  color: var(--dim);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-sentry-link.is-ok i { border-color: color-mix(in srgb, var(--neon) 50%, transparent); color: var(--neon); }
.ss-sentry-link.is-attention i { border-color: rgba(255,202,87,.4); color: #ffd983; }
.ss-sentry-fix-receipt {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--neon) 38%, var(--line));
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 10%, transparent), rgba(255,255,255,.025));
}
.ss-sentry-fix-receipt b { color: var(--neon); font-size: 12px; }
.ss-sentry-fix-receipt span,
.ss-sentry-fix-receipt small { color: var(--dim); font-size: 11px; line-height: 1.4; }
.ss-sentry-fix-receipt small { color: color-mix(in srgb, #ffd983 72%, var(--dim)); }
.ss-sentry-findings { display: grid; gap: 7px; }
.ss-sentry-findings article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 4px 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255,202,87,.22);
  border-radius: 10px;
  background: rgba(255,202,87,.045);
}
.ss-sentry-findings span {
  grid-row: 1 / span 3;
  color: #ffd983;
  font: 800 9px "Spline Sans Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-sentry-findings b { min-width: 0; font-size: 12px; }
.ss-sentry-findings p, .ss-sentry-findings small { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.4; }
.ss-sentry-findings small { color: color-mix(in srgb, var(--neon) 70%, var(--dim)); }

.ss-release-receipt code, .ss-domain-evidence code {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim);
  font: 600 10px "Spline Sans Mono", monospace;
}
.ss-receipt-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.ss-receipt-grid p { min-width: 0; margin: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.ss-receipt-grid span { display: block; margin-bottom: 3px; color: var(--dim); font-size: 9px; text-transform: uppercase; }
.ss-receipt-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ss-domain-evidence { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.ss-domain-evidence > p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.ss-domain-evidence > span { color: var(--dim); font-size: 11px; }

/* selectable sections inside the preview */

/* Sidebar polish: nav items should never create horizontal scrollbars. */
body .phantom .sidebar, body .phantom .side-nav {
  overflow-x: hidden !important;
  scrollbar-width: none;
}
body .phantom .sidebar::-webkit-scrollbar, body .phantom .side-nav::-webkit-scrollbar {
  display: none;
}
body .phantom .nav-item {
  max-width: 100%;
  min-width: 0;
}
body .phantom .nav-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-preview-section {
  cursor: pointer; border: 1px dashed transparent; border-radius: 8px;
  background: rgba(255,255,255,0.05); color: inherit; font: inherit; padding: 6px 10px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.site-preview-section:hover { border-color: rgba(91, 76, 255,0.5); transform: translateY(-1px); }
.site-preview-section.is-selected {
  border: 1px solid var(--neon); background: rgba(91, 76, 255,0.14); color: var(--ink);
  box-shadow: 0 0 14px rgba(91, 76, 255,0.22);
}
.ss-section-toolbar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 8px 0; padding: 10px 12px; border: 1px solid rgba(91, 76, 255,0.3); border-radius: 13px;
  background: rgba(91, 76, 255,0.05);
}
.ss-section-toolbar b { font-size: 12.5px; color: var(--neon); margin-right: 2px; }
.ss-section-toolbar input {
  flex: 1 1 130px; min-width: 110px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(36, 31, 63, 0.06); color: var(--ink); font-size: 12.5px; outline: none;
}
.ss-section-toolbar input:focus { border-color: var(--neon); }
.ss-section-remove { border-color: rgba(224, 52, 94,0.4); color: #c22b52; }
.ss-section-remove:hover { border-color: rgba(224, 52, 94,0.7); background: rgba(224, 52, 94,0.1); }
.ss-select-hint { margin: 6px 2px; color: var(--dim); font-size: 11.5px; }
@media (max-width: 720px) {
  .ss-editbar { gap: 8px; }
  .ss-history-list { right: auto; left: 0; }
  .ss-simple .btn, .ss-simple summary, .ss-template-picker button, .ss-history-list article button, .ss-simple-site, .ss-site-editor-panel button, .site-cart-button, .site-preview-section, .site-preview-products article button { min-height: 44px; }
  .ss-template-picker > div { left: 0; right: auto; }
  .ss-proposal-diff { grid-template-columns: 1fr; }
  .ss-version-compare article { grid-template-columns: 1fr; }
  .ss-version-compare article i { transform: rotate(90deg); justify-self: start; }
  .ss-receipt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ss-readiness p { grid-template-columns: 22px minmax(90px, .5fr) minmax(0,1fr); }
}

/* ================= Workspace Studio =================
   Schema-driven organization customization. The UI only emits validated
   configuration patches; no raw CSS, HTML, JavaScript, or platform code. */
.customization-studio { display: grid; gap: 16px; min-width: 0; padding-bottom: 40px; }
.cust-hero, .cust-ai, .cust-panel, .cust-publish {
  border: 1px solid var(--line); border-radius: var(--org-radius, 18px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--neon) 7%, transparent), rgba(255, 255, 255, .78));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 50px rgba(0,0,0,.2);
}
.cust-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
.cust-hero h2, .cust-panel h3, .cust-ai h3, .cust-publish h3 { margin: 0; color: var(--ink); letter-spacing: -.02em; }
.cust-hero h2 { font-size: clamp(25px, 3vw, 42px); }
.cust-hero p:not(.cust-kicker), .cust-ai p, .cust-panel p { margin: 7px 0 0; color: var(--dim); line-height: 1.5; }
.cust-kicker { margin: 0 0 7px; color: var(--neon); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: .19em; }
.cust-scope { flex: 0 0 min(320px, 34%); display: grid; gap: 4px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(36, 31, 63, 0.044); }
.cust-scope span, .cust-scope i { color: var(--dim); font: 500 10px "Spline Sans Mono", monospace; font-style: normal; }
.cust-scope b { color: var(--ink); font-size: 16px; }
.cust-ai { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr); gap: 20px; padding: 20px 22px; }
.cust-ai form { display: flex; align-items: stretch; gap: 10px; }
.cust-ai textarea { flex: 1; min-width: 0; resize: vertical; }
.cust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cust-panel { min-width: 0; padding: 20px; }
.cust-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.cust-protected { padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--dim); font: 600 9px "Spline Sans Mono", monospace; white-space: nowrap; }
.cust-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cust-form-grid label { display: grid; gap: 7px; color: var(--dim); font-size: 11px; font-weight: 600; }
.cust-form-grid input, .cust-form-grid select, .cust-ai textarea, .cust-object-form input {
  width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: rgba(36, 31, 63, 0.05); color: var(--ink); outline: none;
}
.cust-form-grid input:focus, .cust-form-grid select:focus, .cust-ai textarea:focus, .cust-object-form input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 10%, transparent); }
.cust-form-grid input[type="color"] { padding: 4px; min-height: 42px; cursor: pointer; }
.cust-module { display: grid; grid-template-columns: 22px minmax(100px, 1fr) minmax(120px, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.045); }
.cust-module:first-of-type { border-top: 0; }
.cust-module-grip { color: var(--dim-2); }
.cust-module div, .cust-object div, .cust-version div { min-width: 0; }
.cust-module b, .cust-object b, .cust-version b { display: block; font-size: 13px; }
.cust-module i, .cust-object i, .cust-version i { display: block; margin-top: 2px; color: var(--dim); font: 500 9px "Spline Sans Mono", monospace; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-module input { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(36, 31, 63, 0.044); }
.cust-module input:disabled { color: var(--dim); opacity: .66; }
.cust-switch { position: relative; width: 38px; height: 22px; }
.cust-switch input { position: absolute; opacity: 0; }
.cust-switch span { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.05); transition: .18s; }
.cust-switch span::after { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: var(--dim); transition: .18s; }
.cust-switch input:checked + span { background: color-mix(in srgb, var(--neon) 20%, transparent); border-color: color-mix(in srgb, var(--neon) 50%, transparent); }
.cust-switch input:checked + span::after { transform: translateX(16px); background: var(--neon); box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 55%, transparent); }
.cust-object, .cust-version { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; margin-top: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.036); }
.cust-field-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.cust-field-list span { padding: 5px 7px; border-radius: 8px; background: color-mix(in srgb, var(--neon) 8%, transparent); color: var(--dim); font-size: 10px; }
.cust-object-form { display: grid; grid-template-columns: .7fr .7fr 1.4fr auto; gap: 8px; margin-top: 12px; }
.cust-primary, .cust-secondary, .cust-icon-btn { cursor: pointer; border-radius: 11px; transition: .18s; }
.cust-primary { padding: 10px 15px; border: 1px solid transparent; background: var(--neon); color: #ffffff; font-weight: 800; }
.cust-secondary { padding: 9px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink); }
.cust-icon-btn { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; color: var(--dim); }
.cust-primary:hover:not(:disabled), .cust-secondary:hover, .cust-icon-btn:hover { transform: translateY(-1px); border-color: var(--neon); }
.cust-primary:disabled { opacity: .35; cursor: not-allowed; }
.cust-publish { position: sticky; bottom: 14px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 18px; backdrop-filter: blur(18px); }
.cust-publish-actions { display: flex; gap: 9px; }
.cust-issues { display: grid; gap: 5px; margin-top: 8px; }
.cust-issues p { margin: 0; color: var(--dim); font-size: 11px; }
.cust-issues b { margin-right: 7px; text-transform: uppercase; font: 700 9px "Spline Sans Mono", monospace; }
.cust-issues .is-error b { color: var(--risk); }
.cust-issues .is-warning b { color: var(--warn); }
.cust-ok { margin: 7px 0 0; color: var(--neon); font-size: 11px; }
.cust-message { padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: color-mix(in srgb, var(--neon) 7%, transparent); }
.cust-empty, .cust-loading { display: grid; gap: 5px; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; color: var(--dim); }
.cust-empty b { color: var(--ink); }
.cust-muted { color: var(--dim); }

.media-suite {
  display: grid;
  gap: 18px;
  width: 100%;
}

.media-suite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(91, 76, 255, 0.08), rgba(36, 31, 63, 0.036));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

.media-suite-kicker {
  margin: 0 0 4px;
  color: var(--neon);
  font: 700 10px "Spline Sans Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.media-suite-head h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 46px);
}

.media-suite-head p:last-child {
  margin: 5px 0 0;
  color: var(--dim);
}

.media-suite-tabs, .media-suite-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.media-suite-tabs button, .media-suite-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(36, 31, 63, 0.056);
  color: var(--dim);
  cursor: pointer;
  font-weight: 800;
  transition: .18s ease;
  text-decoration: none;
}

.media-suite-tabs button.is-active, .media-suite-link:hover {
  border-color: color-mix(in srgb, var(--neon) 70%, transparent);
  background: color-mix(in srgb, var(--neon) 14%, transparent);
  color: var(--ink);
  box-shadow: 0 0 22px color-mix(in srgb, var(--neon) 16%, transparent);
}

.media-suite-body {
  min-width: 0;
}

@media (min-width: 901px) {
  .media-suite {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1vw, 12px);
    overflow: hidden;
  }

  .media-suite-head {
    min-height: 0;
    padding: clamp(12px, 1vw, 16px);
    border-radius: 18px;
  }

  .media-suite-head h2 {
    font-size: clamp(28px, 3vw, 42px);
  }

  .media-suite-body {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .media-suite-body > .ml {
    min-height: max-content;
    overflow: visible;
  }

  .media-suite-body > .ch {
    min-height: max-content;
    overflow: visible;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  
}

@media (max-width: 900px) {
  .media-suite-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-suite-tabs, .media-suite-link {
    width: 100%;
    justify-content: flex-start;
  }

  .cust-grid, .cust-ai { grid-template-columns: 1fr; }
  .cust-hero { align-items: flex-start; flex-direction: column; }
  .cust-scope { width: 100%; flex-basis: auto; }
  .cust-object-form { grid-template-columns: 1fr 1fr; }
  .cust-object-form input:nth-child(3), .cust-object-form button { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .customization-studio { gap: 12px; }
  .cust-hero, .cust-ai, .cust-panel { padding: 15px; }
  .cust-ai form { flex-direction: column; width: 100%; }
  .cust-ai textarea { width: 100%; min-height: 96px; }
  .cust-ai form .cust-primary { width: 100%; min-height: 46px; }
  .cust-form-grid { grid-template-columns: 1fr; }
  .cust-module { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .cust-module input { grid-column: 2 / -1; }
  .cust-publish { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); align-items: stretch; flex-direction: column; }
  .cust-publish-actions { width: 100%; }
  .cust-publish-actions button { flex: 1; }
}

/* ============================== ASSET CLOUD ============================== */
.ac { position: relative; display: flex; flex-direction: column; gap: 16px; }
.ac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ac-head-main h3 { margin: 0; font-size: 22px; }
.ac-head-main p { margin: 4px 0 0; color: var(--dim); font-size: 13px; }
.ac-upload-btn { position: relative; cursor: pointer; }
.ac-views { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.ac-view {
  padding: 8px 14px; border: none; background: none; color: var(--dim); cursor: pointer;
  font: 600 13px "Instrument Sans", sans-serif; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.ac-view:hover { color: var(--ink); }
.ac-view.is-active { color: var(--neon); border-bottom-color: var(--neon); }
.ac-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ac-search {
  flex: 1 1 200px; min-width: 160px; padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 13px;
}
.ac-select {
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03); color: var(--ink); font-size: 12.5px; cursor: pointer;
}
.ac-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px;
}
.ac-loading, .ac-empty { grid-column: 1 / -1; padding: 48px 16px; text-align: center; color: var(--dim); }
.ac-card {
  display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: rgba(255,255,255,0.015); cursor: pointer; text-align: left;
  padding: 0; transition: border-color .16s, transform .16s;
}
.ac-card:hover { border-color: rgba(91, 76, 255,0.4); transform: translateY(-2px); }
.ac-thumb {
  position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center;
}
.ac-thumb.is-loaded { background-color: transparent; }
.ac-thumb-ic { font-size: 34px; opacity: 0.7; }
.ac-thumb-video, .ac-thumb-audio, .ac-thumb-font, .ac-thumb-document { background: linear-gradient(135deg, rgba(91, 76, 255,0.06), rgba(255,255,255,0.02)); }
.ac-badge {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
  font: 700 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em;
}
.ac-badge-proc { background: rgba(199, 126, 0,0.2); color: var(--warn); }
.ac-badge-fail { background: rgba(255,89,100,0.2); color: #c22b52; }
.ac-star { position: absolute; top: 8px; right: 8px; color: #c77e00; font-size: 16px; text-shadow: 0 1px 3px rgba(36, 31, 63, 0.16); }
.ac-brandtag {
  position: absolute; bottom: 8px; right: 8px; padding: 2px 8px; border-radius: 999px;
  font: 700 9px "Spline Sans Mono", monospace; text-transform: uppercase; background: var(--neon); color: #ffffff;
}
.ac-card-meta { padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.ac-card-meta b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-card-meta i { font-style: normal; font-size: 10.5px; color: var(--dim); }

/* drop overlay */
.ac-drop {
  position: absolute; inset: 0; z-index: 40; border-radius: 16px;
  border: 2px dashed var(--neon); background: var(--glass);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ac-drop-inner { color: var(--neon); font: 600 16px "Instrument Sans", sans-serif; }

/* detail drawer */
.ac-detail {
  position: fixed; inset: 0; z-index: 120; background: var(--glass);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ac-detail-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
  gap: 0; max-width: 940px; width: 100%; max-height: 86vh; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 18px; background: var(--glass-2);
}
.ac-detail-x {
  position: absolute; top: 12px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(36, 31, 63, 0.07); color: var(--ink); font-size: 18px; cursor: pointer;
}
.ac-detail-preview { display: flex; align-items: center; justify-content: center; background: rgba(36, 31, 63, 0.06); overflow: hidden; }
.ac-detail-preview img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.ac-detail-nopreview { text-align: center; color: var(--dim); padding: 40px; }
.ac-detail-nopreview span { font-size: 52px; display: block; margin-bottom: 12px; }
.ac-detail-body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ac-detail-title { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 15px; font-weight: 600; }
.ac-detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-detail-facts span { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--ink); }
.ac-detail-facts b { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.ac-detail-tags-l { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); }
.ac-detail-tags { padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 12.5px; }
.ac-detail-toggles { display: flex; gap: 8px; }
.ac-toggle { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--dim); cursor: pointer; font-size: 12px; }
.ac-toggle.is-on { border-color: var(--neon); color: var(--neon); background: rgba(91, 76, 255,0.08); }
.ac-detail-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.ac-flag { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); text-transform: capitalize; }
.ac-usage { font-size: 11.5px; color: var(--warn); line-height: 1.5; }
.ac-versions { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
.ac-versions > b { font-size: 11px; color: var(--dim); }
.ac-version { text-align: left; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; font-size: 11.5px; }
.ac-version:hover { border-color: var(--neon); }
.ac-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.btn-danger { border-color: rgba(255,89,100,0.5); color: #c22b52; }
.ac-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 130;
  padding: 12px 18px; border-radius: 12px; border: 1px solid var(--neon);
  background: var(--glass); color: var(--ink); font-size: 13px; max-width: 90vw;
}
.ac-signin { display: flex; align-items: center; justify-content: center; padding: 60px 16px; }
.ac-signin-card { max-width: 460px; text-align: center; }
.ac-signin-card h3 { margin: 0 0 10px; }
.ac-signin-card p { color: var(--dim); line-height: 1.6; }

@media (max-width: 760px) {
  .ac-detail-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: 92vh; }
  .ac-detail-preview { max-height: 40vh; }
  .ac-detail-facts, .ac-detail-flags { grid-template-columns: 1fr; }
}

/* Live social analytics: connector-first, report import stays secondary. */
.an-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.an-channel-actions { align-items: center; }
.an-import-backup { position: relative; }
.an-import-backup > summary {
  min-height: 34px; display: inline-flex; align-items: center; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--dim); cursor: pointer;
  font: 600 10px "Spline Sans Mono", monospace; list-style: none;
}
.an-import-backup > summary::-webkit-details-marker { display: none; }
.an-import-backup[open] > summary { border-color: rgba(91, 76, 255,.45); color: var(--ink); }
.an-import-backup > small { display: block; margin-top: 7px; color: var(--dim); font: 600 8px "Spline Sans Mono", monospace; letter-spacing: .07em; }
.an-import-backup > label { margin-top: 6px; }
.an-channel-source b { max-width: 240px; }
/* Sync actions live outside .an-hero so the workspace-page hero cleanup below
   never hides the "Sync live data" control. */
.an-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.an-toolbar .an-hero-actions { width: 100%; }
.an-channel-source .an-sync-error { display: block; max-width: 260px; margin-top: 3px; color: var(--risk); font-size: 10px; font-style: normal; line-height: 1.45; }
.an-channel-empty.is-sync-error b { color: var(--risk); }
.an-channel-empty.is-sync-error span { color: #f2b8c1; }
.an-first-party-card { margin: 0; display: grid; gap: 12px; background: linear-gradient(135deg, rgba(91, 76, 255,.07), rgba(255, 255, 255,.7)); }
.an-first-party-copy { margin: 0; color: var(--dim); font-size: 11.5px; }
.an-first-party-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.an-first-party-metrics span { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); font: 700 8px "Spline Sans Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.an-first-party-metrics b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; letter-spacing: 0; }
.an-first-party-card > small { color: var(--dim); font-size: 10px; }
@media (max-width: 760px) {
  .an-hero-actions { width: 100%; justify-content: flex-start; }
  .an-channel-actions { width: 100%; justify-content: flex-start; }
  .an-channel-actions .btn { min-height: 42px; }
  .an-import-backup > summary { min-height: 42px; }
  .an-first-party-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Unified Analytics: one chart, one dropdown to switch what it shows. */
.an-domain-shell { display: grid; gap: 16px; min-width: 0; }
.an-domain-picker .ch-card-h { flex-wrap: wrap; gap: 10px; }
.an-domain-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-domain-controls select { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--ink); font: 600 12.5px "Instrument Sans", sans-serif; }
.an-add-source-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.an-add-source-form input[type="text"] { flex: 1 1 220px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--ink); }
.an-add-source-form select { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--ink); }
.an-connections { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); overflow: hidden; }
.an-connections > summary {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none; color: var(--ink); font-size: 13px;
}
.an-connections > summary::-webkit-details-marker { display: none; }
.an-connections > summary span { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.an-connections[open] > summary { border-bottom: 1px solid var(--line); }
.an-connections .an-channel-list { border: 0; border-radius: 0; }
.an-custom-form { display: grid; gap: 10px; }
.an-custom-log-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-custom-log-form input { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); color: var(--ink); }
.an.is-living {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1px;
}
.an.is-living::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(99, 226, 169,.18), transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(91, 76, 255,.18), transparent 28%),
    conic-gradient(from 120deg, transparent, rgba(244, 201, 93,.1), transparent 38%);
  opacity: .72;
  animation: anAuroraDrift 14s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}
.an.is-living::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(99,226,169,.12), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
  opacity: .22;
  transform: translateX(-60%);
  animation: anScanSweep 8s ease-in-out infinite;
}
.an-analysis-head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(91, 76, 255,.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% 12%, rgba(99,226,169,.12), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(36,31,63,.12)),
    var(--glass);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.14);
}
.an-analysis-head h2 { margin: 4px 0 0; color: var(--ink); font-size: clamp(24px, 3vw, 42px); letter-spacing: -.04em; }
.an-analysis-head p:not(.ch-eyebrow) { max-width: 760px; margin: 8px 0 0; color: var(--dim); line-height: 1.45; }
.an-live-label {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(99,226,169,.08);
}
.an-live-label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: anBlink 1.8s ease-in-out infinite;
}
.an-primary-visual,
.an-secondary-visual {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(91, 76, 255,.18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(36,31,63,.1)), var(--glass);
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.an-primary-visual { padding: 14px; }
.an-secondary-visual { padding: 12px; }
.an-rank-chart { display: grid; gap: 8px; padding: 2px; }
.an-rank-row {
  display: grid;
  grid-template-columns: 34px minmax(110px,.62fr) minmax(150px,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid rgba(91, 76, 255,.13);
  border-radius: 12px;
  padding: 9px 11px;
  background: rgba(255,255,255,.045);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.an-rank-row:hover,
.an-rank-row:focus-visible { transform: translateY(-1px); border-color: rgba(99,226,169,.38); background: rgba(99,226,169,.06); outline: none; }
.an-rank-order { color: var(--dim); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: .08em; }
.an-rank-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.an-rank-track { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.075); }
.an-rank-track span { display: block; height: 100%; border-radius: inherit; transform-origin: left center; animation: anBarGrow .72s cubic-bezier(.2,.9,.2,1) both; box-shadow: 0 0 16px color-mix(in srgb, currentColor 35%, transparent); }
.an-rank-row > b { font: 900 13px "Spline Sans Mono", monospace; color: var(--ink); }
.an-line-chart { display: grid; gap: 8px; min-height: 286px; }
.an-line-chart svg { width: 100%; min-height: 260px; overflow: visible; }
.an-line-chart .an-series path {
  fill: none;
  stroke: var(--series);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--series) 55%, transparent));
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: anTrace 1.1s ease-out both;
}
.an-line-chart .an-series circle {
  fill: var(--series);
  stroke: rgba(255,255,255,.82);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--series) 58%, transparent));
  transition: transform .16s ease, filter .16s ease;
}
.an-line-chart .an-series circle:hover,
.an-line-chart .an-series circle:focus-visible { transform: scale(1.35); outline: none; filter: drop-shadow(0 0 18px var(--series)); }
.an-line-chart text { fill: var(--dim); font: 700 9px "Spline Sans Mono", monospace; }
.an-chart-legend output { margin-left: auto; color: var(--ink); font: 700 10px "Spline Sans Mono", monospace; }
.an-insight-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid rgba(91,76,255,.18);
  border-radius: 14px;
  background: rgba(91,76,255,.055);
}
.an-insight-strip span { color: var(--neon); font: 900 9px "Spline Sans Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.an-insight-strip output { color: var(--dim); font-size: 12.5px; }
.an-business-command {
  display: grid;
  grid-template-columns: minmax(180px,.72fr) minmax(220px,1fr);
  gap: 10px;
}
.an-business-command > article {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(91,76,255,.18);
  border-radius: 16px;
  padding: 13px;
  background: rgba(255,255,255,.052);
}
.an-business-command > article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.1), transparent 58%);
  opacity: .32;
  transform: translateX(-110%);
  animation: anSheen 6.5s ease-in-out infinite;
}
.an-finance-orb-card { display: grid; place-items: center; text-align: center; }
.an-finance-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: min(176px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--glass-2) 0 46%, transparent 47%),
    conic-gradient(from -90deg, rgba(99,226,169,.9) 0 var(--credit-stop), rgba(255,104,125,.86) var(--credit-stop) 100%);
  box-shadow: 0 0 44px rgba(99,226,169,.18), inset 0 0 24px rgba(0,0,0,.2);
}
.an-finance-orb span { position: absolute; inset: 9%; border: 1px solid rgba(99,226,169,.22); border-radius: 50%; animation: anOrbit 12s linear infinite; }
.an-finance-orb span:nth-child(2) { inset: 21%; border-style: dashed; border-color: rgba(244,201,93,.25); animation-duration: 17s; animation-direction: reverse; }
.an-finance-orb span:nth-child(3) { inset: 34%; border-color: rgba(91,76,255,.22); animation-duration: 9s; }
.an-finance-orb b { position: relative; color: var(--ink); font: 900 24px "Spline Sans Mono", monospace; }
.an-finance-orb i { position: relative; margin-top: 34px; color: var(--dim); font: 900 9px "Spline Sans Mono", monospace; letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.an-finance-orb-card p { margin: 9px 0 0; display: grid; gap: 3px; }
.an-finance-orb-card p b { color: var(--ink); }
.an-finance-orb-card p span { color: var(--dim); font-size: 11.5px; }
.an-finance-flow-card { display: grid; align-content: start; gap: 10px; }
.an-finance-flow-card header,
.an-finance-flow-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.an-finance-flow-card header b { color: var(--ink); }
.an-finance-flow-card header span,
.an-finance-flow-card footer span { color: var(--dim); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.an-finance-flow-card footer b { color: var(--ink); display: block; font-size: 12px; letter-spacing: 0; text-transform: none; }
.an-flow-lanes { display: grid; gap: 9px; }
.an-flow-lanes span { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; color: var(--dim); font: 800 9px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.an-flow-lanes i { color: var(--ink); font-style: normal; letter-spacing: 0; text-transform: none; }
.an-flow-lanes em { grid-column: 1 / -1; height: 8px; width: var(--w); max-width: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(99,226,169,.28), rgba(99,226,169,.95)); transform-origin: left center; animation: anBarGrow .75s ease-out both; box-shadow: 0 0 14px rgba(99,226,169,.26); }
.an-flow-lanes .is-out em { background: linear-gradient(90deg, rgba(255,104,125,.28), rgba(255,104,125,.95)); box-shadow: 0 0 14px rgba(255,104,125,.22); }
.an-flow-lanes .is-warn em { background: linear-gradient(90deg, rgba(244,201,93,.25), rgba(244,201,93,.95)); box-shadow: 0 0 14px rgba(244,201,93,.2); }
.an-latest-transaction { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; min-height: 64px; }
.an-latest-transaction strong { color: var(--ink); font: 900 20px "Spline Sans Mono", monospace; }
.an-latest-transaction.is-in strong { color: #63e2a9; }
.an-latest-transaction.is-out strong { color: #ff8797; }
.an-latest-transaction span { min-width: 0; }
.an-latest-transaction b,
.an-latest-transaction i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-latest-transaction b { color: var(--ink); }
.an-latest-transaction i { color: var(--dim); font-size: 11px; font-style: normal; }
.an-category-stream { display: grid; gap: 7px; }
.an-category-stream button {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(91,76,255,.13);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(255,255,255,.04);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.an-category-stream button:hover,
.an-category-stream button:focus-visible { border-color: rgba(99,226,169,.34); outline: none; }
.an-category-stream i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.an-category-stream span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-category-stream b { font: 900 11px "Spline Sans Mono", monospace; }
.an-category-stream p { margin: 0; color: var(--dim); font-size: 12px; }
.an-ledger-list { display: grid; }
.an-ledger-row {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr) auto 110px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.an-ledger-row:last-child { border-bottom: 0; }
.an-ledger-row time,
.an-ledger-row span { color: var(--dim); font: 800 9px "Spline Sans Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.an-ledger-row b,
.an-ledger-row i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ledger-row b { color: var(--ink); font-size: 13px; }
.an-ledger-row i { color: var(--dim); font-size: 11px; font-style: normal; }
.an-ledger-row strong { color: #63e2a9; font: 900 13px "Spline Sans Mono", monospace; }
.an-ledger-row.is-out strong { color: #ff8797; }
.an-ledger-row.is-empty { grid-template-columns: 1fr auto; }
.an-business-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
}
@keyframes anAuroraDrift {
  from { transform: translate3d(-1.5%, -1%, 0) rotate(0deg); }
  to { transform: translate3d(1.5%, 1%, 0) rotate(7deg); }
}
@keyframes anScanSweep {
  0%, 46% { transform: translateX(-64%); opacity: .12; }
  68%, 100% { transform: translateX(64%); opacity: .24; }
}
@keyframes anBlink { 50% { opacity: .38; transform: scale(.72); } }
@keyframes anBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes anTrace { to { stroke-dashoffset: 0; } }
@keyframes anOrbit { to { transform: rotate(360deg); } }
@keyframes anSheen {
  0%, 48% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .an.is-living::before,
  .an.is-living::after,
  .an-live-label::before,
  .an-rank-track span,
  .an-line-chart .an-series path,
  .an-business-command > article::before,
  .an-finance-orb span,
  .an-flow-lanes em {
    animation: none !important;
  }
}
@media (max-width: 760px) {
  .an-domain-controls, .an-add-source-form, .an-custom-log-form { width: 100%; }
  .an-domain-controls select, .an-add-source-form input, .an-add-source-form select { flex: 1 1 auto; }
  .an-analysis-head { align-items: flex-start; flex-direction: column; }
  .an-rank-row { grid-template-columns: 28px minmax(0,1fr) auto; }
  .an-rank-track { grid-column: 2 / -1; width: 100%; }
  .an-business-command { grid-template-columns: 1fr; }
  .an-ledger-row { grid-template-columns: 1fr auto; }
  .an-ledger-row time,
  .an-ledger-row span { grid-column: 1 / -1; }
  .an-business-footnote { align-items: stretch; flex-direction: column; }
}
@media (max-width: 620px) {
  .an-rank-row { grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; }
  .an-rank-label { font-size: 12px; }
  .an-line-chart svg { min-height: 220px; }
  .an-finance-orb { width: min(148px, 68vw); }
}

/* Final scroll contract: every workspace, tab, and subtab must remain reachable.
   The dashboard chat can be viewport-locked, but work pages are scrollable apps. */
body .phantom .app-main:has(.console-workspace) {
  min-height: 0 !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body .phantom .console-workspace, body .phantom .console-workspace-wide {
  min-height: 0 !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  align-content: start !important;
}

body .phantom .workspace-page, body .phantom .workspace-page-first, body .phantom .workspace-page[data-workspace-page] {
  min-height: calc(100dvh - 130px) !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body .phantom .workspace-page-body, body .phantom .workspace-page-first .workspace-page-body, body .phantom .workspace-page[data-workspace-page] .workspace-page-body {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

body .phantom .workspace-page :where(
  .ml,
  .ch,
  .an,
  .pp-shell,
  .ci-shell,
  .developer-shell,
  .developer-denied,
  .au,
  .vm,
  .pl,
  .agentops,
  .ss-simple,
  .cust,
  .memory,
  .workers
) {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  body .phantom .app-main:has(.console-workspace), body .phantom .console-workspace {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body .phantom .workspace-page {
    margin-bottom: calc(var(--mobile-admin-taskbar) + 40px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body .phantom .workspace-page-body {
    padding-bottom: calc(var(--mobile-admin-taskbar) + 54px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Build staleness banner (admin-only, written by the sync watchdog) */
.build-stale-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--glass);
  border-bottom: 1px solid rgba(255,197,80,0.5);
  color: #ffe9bd; font-size: 13px;
}
.build-stale-banner b { color: #ffd375; font-size: 13px; }
.build-stale-banner span { flex: 1; min-width: 200px; color: #e8d3a4; }
.build-stale-banner button {
  border: 1px solid rgba(255,211,117,0.4); border-radius: 8px;
  width: 28px; height: 28px; background: transparent; color: #ffd375;
  font-size: 16px; cursor: pointer;
}

/* ============================== PAGE WORKER PROMPTS ============================== */
.page-worker {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(190px, .62fr) minmax(320px, 1.38fr);
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(91, 76, 255,.3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 9% 0%, rgba(91, 76, 255,.24), transparent 32%),
    radial-gradient(circle at 78% 120%, rgba(104, 33, 246,.14), transparent 42%),
    var(--glass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -40px 80px rgba(91, 76, 255,.035),
    0 22px 70px rgba(0,0,0,.26);
}
.page-worker::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(91, 76, 255,.22), transparent),
    repeating-linear-gradient(90deg, rgba(91, 76, 255,.08) 0 1px, transparent 1px 42px);
  opacity: .22;
  transform: translateX(-38%);
  animation: pageWorkerSweep 7s ease-in-out infinite;
}
.page-worker::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 76, 255,.8), transparent);
  opacity: .55;
}
@keyframes pageWorkerSweep {
  0%, 46% { transform: translateX(-42%); opacity: .14; }
  62% { transform: translateX(42%); opacity: .34; }
  100% { transform: translateX(42%); opacity: .14; }
}
.page-worker-copy { display: grid; gap: 5px; min-width: 0; }
.page-worker-copy p {
  margin: 0;
  color: var(--neon);
  font: 900 9px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.page-worker-copy h3 { margin: 0; color: var(--ink); font-size: clamp(16px, 1.05vw, 21px); line-height: 1.08; text-shadow: 0 0 22px rgba(91, 76, 255,.16); }
.page-worker-copy span { max-width: 54ch; color: var(--dim); font-size: 12px; line-height: 1.45; }
.page-worker-form {
  position: relative;
  display: block;
  min-width: 0;
}
.page-worker-form textarea {
  width: 100%;
  min-height: 58px;
  max-height: 120px;
  resize: none;
  overflow: auto;
  padding: 17px 118px 15px 18px;
  border: 1px solid rgba(91, 76, 255,.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(91, 76, 255,.18), transparent 38%),
    linear-gradient(180deg, rgba(15, 18, 34,.96), rgba(5, 8, 16,.94));
  color: var(--ink);
  font: 700 14px/1.35 "Instrument Sans", system-ui, sans-serif;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 32px rgba(91, 76, 255,.035),
    0 0 0 1px rgba(0,0,0,.14);
}
.page-worker-form textarea::placeholder {
  color: rgba(238, 244, 247,.64);
}
.page-worker-form textarea:focus {
  border-color: rgba(91, 76, 255,.78);
  box-shadow:
    0 0 0 3px rgba(91, 76, 255,.09),
    0 0 30px rgba(91, 76, 255,.13),
    inset 0 0 34px rgba(91, 76, 255,.05);
}
.page-worker-form button {
  position: absolute;
  right: 9px;
  bottom: 9px;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b4cff, #b44bf0);
  color: #ffffff;
  font: 950 12px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(91, 76, 255,.22);
}
.page-worker-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(91, 76, 255,.3);
}
.page-worker[aria-busy="true"] .page-worker-form button, .page-worker-form button:disabled {
  cursor: wait;
  opacity: .72;
  transform: none;
}
.page-worker-output {
  grid-column: 1 / -1;
  padding: 13px 14px;
  border: 1px solid rgba(91, 76, 255,.18);
  border-radius: 14px;
  background: var(--glass);
  color: var(--ink);
}
.page-worker-output.is-thinking {
  border-color: rgba(91, 76, 255,.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255,.78), rgba(36, 31, 63, 0.07)),
    rgba(255, 255, 255,.64);
}
.page-worker-thinking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
}
.page-worker-thinking span, .page-worker-backend-result span {
  color: var(--neon);
  font: 900 9px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.page-worker-thinking b {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}
.page-worker-thinking p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.42;
}
.page-worker-thinking i {
  width: 42px;
  height: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #5b4cff 0 2px, transparent 3px) 0 50% / 14px 10px repeat-x;
  animation: pageWorkerDots 1s linear infinite;
  opacity: .82;
}
@keyframes pageWorkerDots {
  from { background-position-x: 0; }
  to { background-position-x: 14px; }
}
.page-worker-intel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.page-worker-intel-head span {
  color: var(--neon);
  font: 900 9px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-worker-intel-head b {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}
.page-worker-intel-head em {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(91, 76, 255,.24);
  border-radius: 999px;
  color: var(--dim);
  font: 800 9px "Spline Sans Mono", ui-monospace, monospace;
  font-style: normal;
  white-space: nowrap;
}
.page-worker-understood {
  margin: 0 0 11px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.page-worker-backend-result {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(91, 76, 255,.22);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(91, 76, 255,.09), rgba(104, 33, 246,.04)),
    rgba(36, 31, 63, 0.036);
}
.page-worker-backend-result.is-fallback {
  border-color: rgba(199, 126, 0,.32);
  background: rgba(199, 126, 0,.055);
}
.page-worker-backend-result p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}
.page-worker-intel-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 10px;
}
.page-worker-intel-grid article, .page-worker-memory, .page-worker-gate {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(91, 76, 255,.13);
  border-radius: 12px;
  background: rgba(36, 31, 63, 0.036);
}
.page-worker-intel-grid article > span, .page-worker-memory > span {
  display: block;
  margin-bottom: 8px;
  color: var(--neon);
  font: 800 9px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-worker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.page-worker-chips i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(91, 76, 255,.16);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
}
.page-worker-chips b {
  margin: 0;
  color: var(--dim);
  font: 800 8px "Spline Sans Mono", ui-monospace, monospace;
  text-transform: uppercase;
}
.page-worker-memory {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.page-worker-memory p {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
}
.page-worker-memory b { color: var(--ink); }
.page-worker-action-result {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(91, 76, 255,.28);
  border-radius: 13px;
  background:
    radial-gradient(circle at 0% 0%, rgba(91, 76, 255,.13), transparent 32%),
    rgba(255, 255, 255,.68);
}
.page-worker-action-result > span {
  color: var(--neon);
  font: 900 9px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.page-worker-action-result > b {
  color: var(--ink);
  font-size: 14px;
}
.page-worker-action-result p {
  margin: 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.45;
}
.page-worker-action-result ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}
.page-worker-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  border-color: rgba(91, 76, 255,.22);
}
.page-worker-gate.needs-input {
  border-color: rgba(199, 126, 0,.38);
  background: rgba(199, 126, 0,.05);
}
.page-worker-gate b {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}
.page-worker-gate span {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}
.page-worker-output > b { display: block; margin-bottom: 8px; font-size: 13px; }
.page-worker-output ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-worker-output li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}
.page-worker-output li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 12px rgba(91, 76, 255,.5);
}

@media (max-width: 760px) {
  .page-worker {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }
  .page-worker-form { display: grid; gap: 9px; }
  .page-worker-form textarea { min-height: 72px; padding: 13px 14px; }
  .page-worker-form button { position: static; width: 100%; min-height: 44px; }
  .page-worker-intel-head em { margin-left: 0; }
  .page-worker-intel-grid { grid-template-columns: 1fr; }
  .page-worker-gate { align-items: flex-start; flex-direction: column; }
  .page-worker-gate b { white-space: normal; }
}

/* ======================= Website + store dogfood flow ======================= */
.ss-modebar {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(36, 31, 63, 0.048);
}
.ss-modebar button {
  min-height: 34px; padding: 6px 13px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim); cursor: pointer; font-weight: 700;
}
.ss-modebar button:hover { color: var(--ink); background: rgba(91, 76, 255,.07); }
.ss-modebar button.is-active { color: #ffffff; background: var(--neon); }
.ss-modebar span {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px;
  border-radius: 99px; background: rgba(36, 31, 63, 0.036); font: 700 10px "Spline Sans Mono", monospace;
}
.ss-editbar { justify-content: flex-start; }
.ss-editbar-actions { margin-left: auto; }
.ss-simple-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ss-simple-main.has-store-console { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.ss-simple-main.has-store-console .ss-simple-preview { max-width: none; margin: 0; }
.site-cart-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-left: 6px; padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--site-accent) 45%, transparent); border-radius: 99px;
  background: color-mix(in srgb, var(--site-accent) 10%, transparent); color: var(--site-accent); cursor: pointer;
  font: 700 10px "Spline Sans Mono", monospace;
}
.site-cart-button b { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; background: var(--site-accent); color: #ffffff; }
.site-preview-products { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-preview-products article button {
  align-self: end; min-height: 38px; margin-top: 5px; border: 1px solid color-mix(in srgb, var(--site-accent) 55%, transparent);
  border-radius: 9px; background: color-mix(in srgb, var(--site-accent) 12%, transparent); color: var(--site-accent);
  cursor: pointer; font-weight: 800;
}
.site-preview-products article button:hover { background: var(--site-accent); color: #ffffff; }
.site-preview-products-empty {
  grid-column: 1 / -1; display: grid; gap: 5px; padding: 24px; border: 1px dashed rgba(255,255,255,.13);
  border-radius: 14px; text-align: center; color: var(--dim);
}
.site-preview-products-empty b { color: var(--ink); }
.ss-store-console {
  min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--glass);
}
.ss-store-console > header, .ss-cart > header, .ss-checkout > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.ss-store-console header p, .ss-cart header p, .ss-checkout header p {
  margin: 0 0 3px; color: var(--neon); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
}
.ss-store-console header h3, .ss-cart header h3, .ss-checkout header h3 { margin: 0; font-size: 19px; }
.ss-store-console > header > span {
  padding: 5px 8px; border: 1px solid rgba(199, 126, 0,.28); border-radius: 99px; color: var(--warn);
  font: 700 9px "Spline Sans Mono", monospace; white-space: nowrap;
}
.ss-product-add, .ss-product-list article { display: grid; gap: 8px; }
.ss-product-add { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(36, 31, 63, 0.04); }
.ss-product-add > div, .ss-product-list article > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ss-product-add input, .ss-product-add select, .ss-product-list input, .ss-product-list select, .ss-checkout input {
  width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(36, 31, 63, 0.056); color: var(--ink); outline: none;
}
.ss-product-add input:focus, .ss-product-add select:focus, .ss-product-list input:focus, .ss-product-list select:focus, .ss-checkout input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(91, 76, 255,.1); }
.ss-product-list { display: grid; gap: 8px; }
.ss-product-list article { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(36, 31, 63, 0.034); }
.ss-product-delete, .ss-cart header > button, .ss-checkout header > button {
  display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(36, 31, 63, 0.048); color: var(--dim); cursor: pointer; font-size: 19px;
}
.ss-product-delete { position: absolute; top: 7px; right: 7px; z-index: 2; }
.ss-product-delete:hover, .ss-cart header > button:hover, .ss-checkout header > button:hover { color: #ff9ca8; border-color: rgba(224, 52, 94,.5); }
.ss-store-empty { margin: 0; padding: 18px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--dim); text-align: center; }
.ss-test-orders { display: grid; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }
.ss-test-orders > div, .ss-test-orders p { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.ss-test-orders p { color: var(--dim); font-size: 11px; }
.ss-test-orders p b { color: var(--ink); }
.ss-test-orders small { color: var(--dim); }
.ss-cart {
  position: absolute; z-index: 35; top: 10px; right: 10px; width: min(380px, calc(100% - 20px)); max-height: calc(100% - 20px);
  overflow: auto; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--glass); box-shadow: 0 24px 70px rgba(36, 31, 63, 0.16), 0 0 40px rgba(91, 76, 255,.08);
}
.ss-cart-items { display: grid; gap: 8px; }
.ss-cart-items article { display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.ss-cart-items article > div:first-child, .ss-cart footer, .ss-checkout-summary p, .ss-checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ss-cart-items span { color: var(--neon); font: 700 11px "Spline Sans Mono", monospace; }
.ss-cart-qty { display: flex; align-items: center; gap: 7px; }
.ss-cart-qty button { min-width: 30px; min-height: 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(36, 31, 63, 0.044); color: var(--ink); cursor: pointer; }
.ss-cart-qty button:last-child { margin-left: auto; padding-inline: 9px; color: #ff9ca8; }
.ss-cart footer { padding-top: 10px; border-top: 1px solid var(--line); }
.ss-cart footer b { color: var(--neon); font-size: 20px; }
.ss-cart > small { color: var(--dim); text-align: center; }
.ss-checkout-backdrop {
  position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 20px;
  background: var(--glass); backdrop-filter: blur(14px);
}
.ss-checkout {
  width: min(480px, 100%); display: grid; gap: 15px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 20px;
  background: var(--glass-2); box-shadow: 0 28px 90px rgba(36, 31, 63, 0.16), 0 0 60px rgba(91, 76, 255,.1);
}
.ss-checkout-summary { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ss-checkout-summary p { margin: 0; color: var(--dim); }
.ss-checkout-summary b { color: var(--ink); }
.ss-checkout form { display: grid; gap: 11px; }
.ss-checkout label { display: grid; gap: 6px; color: var(--dim); font-size: 12px; }
.ss-checkout-total { padding: 12px 0; border-top: 1px solid var(--line); }
.ss-checkout-total b { color: var(--neon); font-size: 21px; }
.ss-checkout form small { color: var(--dim); text-align: center; line-height: 1.4; }
.ss-order-confirmation {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(91, 76, 255,.35); border-radius: 12px;
  background: rgba(91, 76, 255,.08); color: var(--dim); font-size: 12px;
}
.ss-order-confirmation b { color: var(--neon); }
.ss-order-confirmation.is-receipt { flex-direction: column; align-items: stretch; gap: 10px; }
.ss-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ss-receipt-head b { color: var(--neon); }
.ss-testmode-chip {
  margin: 0; padding: 3px 9px; border: 1px solid rgba(199, 126, 0,.45); border-radius: 999px;
  background: rgba(199, 126, 0,.08); color: var(--warn); font: 700 10.5px "Spline Sans Mono", monospace;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; justify-self: center; text-align: center;
}
.ss-receipt-delivery { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid rgba(91, 76, 255,.3); border-radius: 10px; background: rgba(36, 31, 63, 0.04); }
.ss-receipt-delivery > b { color: var(--ink); font-size: 12px; }
.ss-receipt-delivery p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.5; }
.ss-receipt-delivery a { color: var(--neon); }
.ss-checkout-shipping { display: grid; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ss-checkout-shipping > span { color: var(--neon); font: 600 10px "Spline Sans Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.ss-checkout-digital { margin: 0; padding: 10px 12px; border: 1px dashed rgba(91, 76, 255,.4); border-radius: 10px; color: var(--dim); font-size: 12px; line-height: 1.5; }
.ss-digital-tag { display: inline-block; font-style: normal; color: var(--neon); font: 600 10px "Spline Sans Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.ss-delivery-fields { display: grid; gap: 7px; padding: 9px; border: 1px dashed var(--line); border-radius: 10px; }
.ss-delivery-fields small { color: var(--dim); font-size: 10.5px; }
.ss-template-row { display: grid; gap: 8px; margin-top: 4px; }
.ss-template-row p { margin: 0; color: var(--dim); font-size: 12px; }
.ss-copy-blocks { display: grid; gap: 10px; padding: 14px 18px; }
.ss-copy-block { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.032); }
.ss-copy-block h4 { margin: 0 0 6px; font-size: 13px; color: var(--neon); }
.ss-copy-block p { margin: 0 0 6px; color: var(--dim); font-size: 12px; line-height: 1.55; }
.ss-copy-block p:last-child { margin-bottom: 0; }

@media (max-width: 1180px) {
  .ss-public-source {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .ss-public-source-frame {
    min-height: min(660px, 72dvh);
    grid-template-rows: auto minmax(420px, 1fr);
  }
  .ss-site-editor-panel { max-height: none; }
}
@media (max-width: 900px) {
  .ss-simple-main.has-store-console { grid-template-columns: 1fr; overflow: visible; }
  .ss-store-console { max-height: none; overflow: visible; }
  .ss-editbar-actions { margin-left: 0; width: 100%; }
  .ss-cart { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100% - 24px); max-height: none; }
  .ss-public-source { padding: 10px; }
  .ss-public-source-frame { grid-template-rows: auto minmax(420px, 58dvh); }
  .ss-public-source-frame iframe { min-height: 420px; }
  .ss-public-source-code textarea { min-height: 360px; }
}
@media (max-width: 620px) {
  .ss-modebar, .ss-devbar { width: 100%; }
  .ss-modebar button, .ss-devbar button { flex: 1; min-height: 42px; }
  .ss-simple-preview.ss-device-phone, .ss-simple-preview.ss-device-tablet { max-width: 100%; }
  .site-browser-bar small { display: none; }
  .site-preview-hero { grid-template-columns: 1fr; }
  .site-preview-orb, .site-preview-media { max-width: 170px; }
  .site-preview-products { grid-template-columns: 1fr; }
  .ss-product-add > div, .ss-product-list article > div { grid-template-columns: 1fr; }
  .ss-order-confirmation { align-items: flex-start; flex-direction: column; }
  .ss-checkout-backdrop { align-items: end; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  .ss-checkout { border-radius: 18px 18px 12px 12px; }
  .ss-simple .site-live-preview button { min-height: 44px; }
  .ss-preview-toggle button, .ss-live-hotspots button { min-height: 44px; }
  .ss-live-hotspots button {
    width: 44px; max-width: 44px; padding: 0; border-radius: 50%; font-size: 0;
  }
  .ss-live-hotspots button span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .ss-live-hotspots button::after { content: "✦"; font-size: 14px; line-height: 1; }
  .ss-direct-editor { grid-template-columns: 1fr; }
  .ss-direct-editor button { width: 100%; }
  .ss-readiness > summary { grid-template-columns: auto auto; }
  .ss-readiness summary > i { grid-column: 1 / -1; white-space: normal; }
  .ss-readiness p { grid-template-columns: 22px minmax(0,1fr); }
  .ss-readiness p small { grid-column: 2; }
  .ss-receipt-grid { grid-template-columns: 1fr; }
}

/* ---- PhantomCut video editor ---- */
.vc { display: grid; gap: 14px; }
.vc-microlabel { color: var(--dim); font: 700 10px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.vc-head {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2);
}
.vc-field { display: grid; gap: 5px; min-width: 0; }
.vc-field-grow { flex: 1 1 220px; }
.vc-title-in, .vc-text-in {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(36, 31, 63, 0.06); color: var(--ink); font: 600 14px "Instrument Sans", sans-serif;
}
.vc-title-in:focus, .vc-text-in:focus { outline: none; border-color: var(--line-strong); }
.vc-select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(36, 31, 63, 0.06); color: var(--ink); font: 600 12.5px "Instrument Sans", sans-serif;
}
.vc-total { color: var(--neon); font: 700 17px "Spline Sans Mono", monospace; line-height: 32px; }
.vc-export-slot { display: grid; gap: 6px; margin-left: auto; max-width: 300px; }
.vc-save-project {
  min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass); color: var(--ink); cursor: pointer; white-space: nowrap;
  font: 700 12px "Instrument Sans", sans-serif;
}
.vc-save-project:hover { border-color: var(--line-strong); color: var(--neon); }
.vc-export-btn {
  padding: 10px 20px; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(120deg, var(--neon), #5b4cff); color: #ffffff;
  font: 700 13.5px "Instrument Sans", sans-serif; box-shadow: 0 4px 18px rgba(91, 76, 255, 0.24);
}
.vc-export-btn:disabled { filter: grayscale(0.8); opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.vc-export-unsupported { color: var(--warn); font-size: 11px; line-height: 1.45; }

.vc-stage {
  position: relative; display: grid; place-items: center; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2);
}
.vc-canvas { max-width: 100%; max-height: 52vh; border-radius: 8px; background: #000; }
.vc-export-panel {
  position: absolute; inset: auto 14px 14px 14px; display: grid; gap: 8px; padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--glass);
}
.vc-export-panel b { color: var(--ink); font-size: 13px; }
.vc-export-bar { height: 7px; border-radius: 999px; background: rgba(91, 76, 255, 0.12); overflow: hidden; }
.vc-export-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--neon), #5b4cff); border-radius: 999px; }
.vc-cancel-btn {
  justify-self: start; padding: 6px 13px; border: 1px solid rgba(199, 126, 0, 0.4); border-radius: 9px;
  background: none; color: var(--warn); cursor: pointer; font: 600 12px "Instrument Sans", sans-serif;
}
.vc.is-exporting .vc-transport, .vc.is-exporting .vc-addrow, .vc.is-exporting .vc-lane, .vc.is-exporting .vc-inspector, .vc.is-exporting .vc-head { pointer-events: none; opacity: 0.5; }

.vc-transport {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2);
}
.vc-play {
  flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%;
  background: rgba(91, 76, 255, 0.1); color: var(--neon); cursor: pointer; font-size: 14px; line-height: 1;
}
.vc-play:hover { background: rgba(91, 76, 255, 0.2); }
.vc-scrub { flex: 1; height: 9px; border-radius: 999px; background: rgba(91, 76, 255, 0.1); cursor: pointer; overflow: hidden; }
.vc-scrub i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--neon), #b44bf0); border-radius: 999px; }
.vc-time { flex: 0 0 auto; color: var(--dim); font: 600 12px "Spline Sans Mono", monospace; }

.vc-addrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vc-add-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(91, 76, 255, 0.06);
  color: var(--ink); font: 600 12.5px "Instrument Sans", sans-serif;
}
.vc-add-btn:hover { border-color: var(--line-strong); background: rgba(91, 76, 255, 0.12); }
.vc-add-btn-ghost { background: none; color: var(--dim); }
.vc-music {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-left: auto; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--glass-2);
}
.vc-music-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12px; }
.vc-music-vol { width: 110px; }
.vc-range { accent-color: var(--neon); }
.vc-mini-btn {
  width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 8px;
  background: none; color: var(--dim); cursor: pointer; font-size: 11px; line-height: 1;
}
.vc-mini-btn:hover { color: var(--risk); border-color: rgba(224, 52, 94, 0.4); }

@media (max-width: 700px) {
  
  
  
  .vc-save-project, .vc-export-slot { margin-left: 0; }
}

.vc-lane { display: grid; gap: 8px; }
.vc-timeline { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.vc-empty {
  flex: 1; display: grid; gap: 6px; padding: 22px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--glass-2);
}
.vc-empty b { color: var(--neon); font-size: 15px; }
.vc-empty p { margin: 0 auto; max-width: 62ch; color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.vc-clip {
  position: relative; flex: 0 0 172px; display: grid; gap: 7px; padding: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vc-clip[draggable="true"] { cursor: grab; }
.vc-clip.is-dragging { cursor: grabbing; opacity: 0.48; }
.vc-clip.is-drop-before::before, .vc-clip.is-drop-after::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--neon);
  box-shadow: 0 0 12px rgba(91, 76, 255, 0.72);
}
.vc-clip.is-drop-before::before { left: -7px; }
.vc-clip.is-drop-after::after { right: -7px; }
.vc-clip:hover { border-color: var(--line-strong); }
.vc-clip.is-selected { border-color: var(--neon); box-shadow: 0 0 16px rgba(91, 76, 255, 0.18); }
.vc-clip.is-error { border-color: rgba(224, 52, 94, 0.5); }
.vc-clip.is-error .vc-clip-copy span { color: var(--risk); }
.vc-clip-fade {
  position: absolute; top: -7px; left: -6px; z-index: 1; padding: 2px 7px;
  border: 1px solid rgba(180, 75, 240, 0.4); border-radius: 999px; background: var(--glass-2);
  color: var(--neon-2); font: 700 9px "Spline Sans Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.vc-clip-thumb { position: relative; height: 86px; border-radius: 9px; overflow: hidden; background: #000; }
.vc-clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-clip-thumb-blank { display: grid; place-items: center; height: 100%; color: var(--dim-2); font: 600 12px "Spline Sans Mono", monospace; }
.vc-clip-kind {
  position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 6px;
  background: rgba(36, 31, 63, 0.07); color: var(--neon); font: 700 9px "Spline Sans Mono", monospace; font-style: normal;
}
.vc-clip-copy { display: grid; gap: 2px; min-width: 0; }
.vc-clip-copy b { color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-clip-copy span { color: var(--dim); font: 600 10.5px "Spline Sans Mono", monospace; }
.vc-clip-copy em { font-style: normal; color: var(--neon); }
.vc-clip-actions { display: flex; gap: 5px; }
.vc-clip-actions button {
  flex: 1; padding: 4px 0; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(36, 31, 63, 0.06); color: var(--dim); cursor: pointer; font-size: 10.5px;
}
.vc-clip-actions button:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
.vc-clip-actions button:disabled { opacity: 0.3; cursor: default; }
.vc-clip-actions [data-vc-del]:hover { color: var(--risk); border-color: rgba(224, 52, 94, 0.4); }

.vc-inspector { min-height: 10px; }
.vc-hint { margin: 0; color: var(--dim); font-size: 12px; }
.vc-ins-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2);
}
.vc-ins-section { display: grid; gap: 8px; align-content: start; }
.vc-ins-title { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-ins-note { color: var(--dim); font-size: 11px; font-style: normal; line-height: 1.45; }
.vc-ins-error { color: var(--risk); }
.vc-ins-tools { display: grid; gap: 5px; }
.vc-ins-tools button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(91, 76, 255, 0.08);
  color: var(--ink);
  cursor: pointer;
  font: 800 11px "Instrument Sans", sans-serif;
}
.vc-ins-tools button:hover:not(:disabled) { border-color: var(--neon); background: rgba(91, 76, 255, 0.16); }
.vc-ins-tools button:disabled { opacity: 0.44; cursor: not-allowed; }
.vc-ins-tools i { color: var(--dim); font-size: 10.5px; font-style: normal; line-height: 1.35; }
.vc-ins-slider { display: flex; align-items: center; gap: 9px; }
.vc-ins-slider b { flex: 0 0 26px; color: var(--dim); font: 700 10px "Spline Sans Mono", monospace; text-transform: uppercase; }
.vc-ins-slider input { flex: 1; min-width: 0; }
.vc-ins-slider em { flex: 0 0 52px; text-align: right; color: var(--neon); font: 600 11.5px "Spline Sans Mono", monospace; font-style: normal; }
.vc-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); font-size: 12.5px; cursor: pointer; }
.vc-check input { accent-color: var(--neon); }
.vc-check i { color: var(--dim); font-size: 10.5px; font-style: normal; }

.vc-picker { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; }
.vc-picker[hidden] { display: none; }
.vc-picker-backdrop { position: absolute; inset: 0; background: var(--glass); backdrop-filter: blur(3px); }
.vc-picker-panel {
  position: relative; width: min(680px, 100%); max-height: 78vh; display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--glass-2); overflow: hidden;
}
.vc-picker-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.vc-picker-head b { color: var(--ink); font-size: 14px; }
.vc-picker-head .vc-mini-btn { margin-left: auto; }
.vc-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  padding: 14px; overflow-y: auto;
}
.vc-picker-empty { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.vc-pick {
  display: grid; gap: 7px; padding: 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(36, 31, 63, 0.056);
}
.vc-pick:hover { border-color: var(--neon); background: rgba(91, 76, 255, 0.07); }
.vc-pick-thumb { height: 84px; border-radius: 8px; overflow: hidden; background: #000; display: block; }
.vc-pick-thumb img, .vc-pick-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-pick-copy { display: grid; gap: 1px; min-width: 0; }
.vc-pick-copy b { color: var(--ink); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-pick-copy i { color: var(--dim); font: 700 9px "Spline Sans Mono", monospace; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }

.vc-offstage { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .vc-head { align-items: stretch; }
  .vc-field, .vc-export-slot { flex: 1 1 45%; margin-left: 0; max-width: none; }
  .vc-canvas { max-height: 42vh; }
  .vc-music { margin-left: 0; width: 100%; }
  .vc-clip { flex-basis: 148px; }
  .vc-timeline { -webkit-overflow-scrolling: touch; }
  .vc-ins-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-clip, .vc * { transition: none !important; }
}

/* ============================================================= */
/* ========== DASHBOARD COCKPIT PASS — dense owner view ========= */
/* ============================================================= */
@media (min-width: 1181px) {
  .app-main:has(> .console:not(.console-workspace)) {
    height: 100dvh;
    overflow: hidden;
  }

  .app-main:has(> .console:not(.console-workspace)) .phantomwire {
    min-height: 38px;
  }

  .console:not(.console-workspace) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 14px;
    padding: 14px 18px 18px;
    overflow-y: auto;
    align-content: start;
  }

  .console:not(.console-workspace) .console-center {
    gap: 12px;
  }

  .console:not(.console-workspace) .console-rail {
    gap: 12px;
    max-height: calc(100dvh - 148px);
    overflow: auto;
    scrollbar-width: thin;
  }

  .console:not(.console-workspace) .hero2 {
    height: clamp(318px, 39dvh, 430px);
    min-height: 318px;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background:
      radial-gradient(58% 86% at 88% 36%, rgba(91, 76, 255,.18), transparent 68%),
      radial-gradient(64% 130% at 0% 0%, rgba(91, 76, 255,.075), transparent 58%),
      var(--glass);
  }

  .console:not(.console-workspace) .hero2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(rgba(91, 76, 255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91, 76, 255,.028) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  .console:not(.console-workspace) .hero2-copy {
    position: relative;
    z-index: 3;
    width: min(820px, 72%);
    height: 100%;
    padding: 16px;
  }

  .console:not(.console-workspace) .chatbox {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    border-color: rgba(91, 76, 255,.28);
    border-radius: 22px;
    background: var(--glass);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 24px 80px rgba(0,0,0,.28), 0 0 44px rgba(91, 76, 255,.06);
  }

  .console:not(.console-workspace) .phantomai-tabs {
    padding: 6px 10px 0;
  }

  .console:not(.console-workspace) .phantomai-tab {
    padding: 7px 11px;
    font-size: 10px;
  }

  .console:not(.console-workspace) .chatbox-head {
    padding: 9px 14px;
  }

  .console:not(.console-workspace) .chatbox-log {
    padding: 14px 16px;
    padding-right: 28%;
  }

  .console:not(.console-workspace) .msg-body {
    max-width: min(680px, 92%);
  }

  .console:not(.console-workspace) .chatbox-composer {
    padding: 10px 10px 10px 16px;
  }

  .console:not(.console-workspace) .chatbox-composer input {
    height: 38px;
    font-size: 15px;
  }

  .console:not(.console-workspace) .chatbox-tools {
    padding: 8px 16px 10px;
  }

  .console:not(.console-workspace) .chatbox-trust {
    display: none;
  }

  .console:not(.console-workspace) .hero2-stage {
    display: grid !important;
    top: 18px;
    right: -28px;
    bottom: 18px;
    width: min(360px, 31%);
    opacity: .62;
    z-index: 2;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  }

  .console:not(.console-workspace) .phantom-mode-stage {
    width: 100% !important;
    height: 100%;
    filter: saturate(1.22) contrast(1.14) drop-shadow(0 0 52px rgba(91, 76, 255,.38));
  }

  .console:not(.console-workspace) .phantom-mode-pose {
    width: min(100%, 330px) !important;
    max-height: 100% !important;
    opacity: .94;
  }

  .console:not(.console-workspace) .hero2-stage .ghost-canvas, .console:not(.console-workspace) .phantom-webgl {
    display: none !important;
  }

  .command-widgets {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }

  .command-widget {
    min-height: 94px;
    border-radius: 16px;
  }

  .command-widget summary {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 92px;
    padding: 12px;
  }

  .cw-ic {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .cw-copy b {
    font-size: 13px;
  }

  .cw-copy i {
    -webkit-line-clamp: 1;
    font-size: 11px;
  }

  .cw-stat {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 0;
    margin-left: 45px;
    padding: 4px 7px;
    font-size: 9px;
  }

  .cw-body {
    padding: 0 12px 12px;
    font-size: 11px;
  }

  .cw-body span:nth-child(n+3) {
    display: none;
  }

  .plan-card, .queue-card, .quick-card {
    border-radius: 18px;
  }

  .plan-card {
    min-height: 0;
  }

  .queue-card, .quick-card {
    padding: 16px;
  }

  .queue-list, .quick-list {
    gap: 8px;
  }

  .rail-foot-btn, .quick-item {
    min-height: 42px;
  }
}

@media (min-width: 1380px) {
  .console:not(.console-workspace) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  }
  .command-widgets {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
  }
}

/* ============================================================= */
/* ===== Dashboard command surface: one brief, one chat, proof === */
/* ============================================================= */
.side-nav-main, .side-nav-utility {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.side-nav-main {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.side-nav-main::-webkit-scrollbar { display: none; }
.side-nav-utility {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid rgba(91, 76, 255, 0.12);
}
.side-nav-utility .nav-item-bottom { margin-top: 0; }
.side-nav-utility .nav-item-bottom::before { display: none; }

.dashboard-brief {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(91, 76, 255, 0.18);
  border-radius: 8px;
  background: var(--glass);
}
.dashboard-brief-copy { min-width: 0; }
.dashboard-brief-kicker {
  margin: 0 0 5px;
  color: var(--neon);
  font: 700 9px "Spline Sans Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dashboard-brief h1 {
  margin: 0;
  color: var(--ink);
  font: 700 22px/1.15 "Instrument Sans", sans-serif;
  letter-spacing: 0;
}
.dashboard-brief-copy > p:last-child {
  margin: 5px 0 0;
  max-width: 56ch;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}
.dashboard-brief-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  border: 1px solid rgba(91, 76, 255, 0.12);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(36, 31, 63, 0.036);
}
.dashboard-brief-metric {
  display: grid;
  min-width: 0;
  min-height: 72px;
  align-content: center;
  gap: 3px;
  padding: 9px 11px;
  text-align: left;
  border: 0;
  border-right: 1px solid rgba(91, 76, 255, 0.1);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.dashboard-brief-metric:last-child { border-right: 0; }
.dashboard-brief-metric:hover, .dashboard-brief-metric:focus-visible { background: rgba(91, 76, 255, 0.06); outline: none; }
.dashboard-brief-metric span {
  color: var(--dim);
  font: 700 8px "Spline Sans Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dashboard-brief-metric b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-brief-metric i {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1201px) {
  .app-main:has(> .console:not(.console-workspace)) .console {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    grid-auto-rows: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px 16px;
    overflow: hidden;
    align-items: stretch;
  }
  .console:not(.console-workspace) .console-center {
    display: grid;
    grid-template-rows: auto auto minmax(280px, 1fr);
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .console:not(.console-workspace) .hero2 {
    height: auto;
    min-height: 0;
    border-radius: 8px;
  }
  .console:not(.console-workspace) .hero2-copy { padding: 12px; }
  .console:not(.console-workspace) .chatbox {
    min-height: 0;
    border-radius: 8px;
  }
  .console:not(.console-workspace) .chatbox-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 12px 26% 12px 14px;
  }
  .console:not(.console-workspace) .console-rail {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  .console:not(.console-workspace) .plan-card, .console:not(.console-workspace) .queue-card { border-radius: 8px; }
  .console:not(.console-workspace) .queue-card { min-height: 0; overflow-y: auto; }
}

@media (max-width: 1450px) and (min-width: 901px) {
  .cmdk-open-kbd, .topbar-clock i, .user-meta i { display: none; }
  .topbar-clock b { font-size: 14px; }
  .status-pills .pill { flex-basis: 138px; }
  .ws-switch { flex-basis: 145px; }
  .ws-switch select { max-width: 145px; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .console:not(.console-workspace) { grid-template-columns: minmax(0, 1fr); }
  .console:not(.console-workspace) .console-rail { display: none; }
  .dashboard-brief { grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr); }
  .console:not(.console-workspace) .hero2 { height: clamp(390px, calc(100dvh - 320px), 560px); }
}

@media (max-width: 900px) {
  .sidebar.is-expanded .side-nav { min-height: 0; overflow-y: auto; }
  .sidebar.is-expanded .side-nav-main, .sidebar.is-expanded .side-nav-utility { display: grid; flex: 0 0 auto; overflow: visible; }
  .sidebar.is-expanded .side-nav-utility { margin-top: 4px; }
  .console:not(.console-workspace) { padding: 10px 10px calc(86px + env(safe-area-inset-bottom)); }
  .console:not(.console-workspace) .console-rail { display: none; }
  .dashboard-brief {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .dashboard-brief h1 { font-size: 19px; }
  .dashboard-brief-copy > p:last-child { font-size: 11.5px; }
  .dashboard-brief-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-brief-metric { min-height: 60px; }
  .dashboard-brief-metric:nth-child(2) { border-right: 0; }
  .dashboard-brief-metric:nth-child(-n+2) { border-bottom: 1px solid rgba(91, 76, 255, 0.1); }
  .console:not(.console-workspace) .hero2 {
    height: min(64dvh, 570px);
    min-height: 430px;
    padding: 0;
    border-radius: 8px;
  }
  .console:not(.console-workspace) .hero2-copy { width: 100%; height: 100%; padding: 8px; }
  .console:not(.console-workspace) .chatbox { height: 100%; border-radius: 8px; }
  .console:not(.console-workspace) .chatbox-log { flex: 1 1 auto; min-height: 0; max-height: none; }
  .console:not(.console-workspace) .hero2-stage { display: none !important; }
  .chat-start-btn { min-height: 40px; }
}

/* Internal builder layer: Admin is a gold control, not a generic customer tab. */
@media (max-width: 900px) {
  .mobile-bottom-item[data-mobile-nav="adminos"] {
    color: #ffe3a0;
    border: 1px solid rgba(199, 126, 0, 0.22);
    background:
      radial-gradient(circle at 50% 12%, rgba(199, 126, 0, 0.18), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.26));
    box-shadow: inset 0 1px rgba(255, 244, 196, 0.08), 0 0 16px rgba(255, 184, 55, 0.08);
  }
  .mobile-bottom-item[data-mobile-nav="adminos"]::after {
    content: "CORE";
    position: absolute;
    top: 5px;
    right: 6px;
    color: #ffd978;
    font: 800 5.5px "Spline Sans Mono", monospace;
    letter-spacing: 0.1em;
  }
  .mobile-bottom-item[data-mobile-nav="adminos"] .ic {
    color: #c77e00;
    filter: drop-shadow(0 0 7px rgba(199, 126, 0, 0.5));
  }
  .mobile-bottom-item[data-mobile-nav="adminos"].is-active {
    color: #fff4dc;
    background: linear-gradient(135deg, #7a5200, #c77e00 52%, #9a6300);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.48), 0 0 24px rgba(255, 184, 55, 0.25);
  }
  .mobile-bottom-item[data-mobile-nav="adminos"].is-active::after, .mobile-bottom-item[data-mobile-nav="adminos"].is-active .ic {
    color: #fff4dc;
    filter: none;
  }
}

/* Phone navigation: five daily destinations stay one tap away. The sixth
   control opens the complete, permission-aware sidebar instead of clipping a
   long horizontal list off-screen. The bottom dock is the only mobile nav bar. */
@media (max-width: 767px) {
  .phantom {
    --mobile-admin-topbar: 0px !important;
  }

  .mobile-admin-homebar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .sidebar {
    z-index: 110;
    transition:
      width 0.22s ease,
      height 0.22s ease,
      max-height 0.22s ease,
      border-radius 0.22s ease,
      padding 0.22s ease,
      opacity 0.16s ease,
      transform 0.2s ease,
      visibility 0s linear 0.2s;
  }

  .sidebar.is-expanded {
    transition-delay: 0s;
  }

  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    overflow: hidden !important;
    padding-inline: 7px;
  }

  .mobile-bottom-item, .mobile-bottom-item.is-active {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    min-height: 52px;
  }

  .mobile-bottom-item span {
    max-width: 100%;
  }

  .mobile-bottom-more .ic {
    width: 17px;
    height: 17px;
  }

  .phantom.nav-expanded .mobile-bottom-nav {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }
}

@media (max-width: 390px) {
  .mobile-bottom-item, .mobile-bottom-item.is-active {
    min-height: 48px;
    font-size: 8.5px;
  }
}

/* ---------------- decision deck (Command home) ---------------- */
/* Decision Cards are the product's signature object: a Signal packaged for
   one-motion approval. The deck sits directly under the business brief and
   uses a left evidence-spine accent per impact instead of another identical
   rectangle. Hidden entirely when no decisions are open — no giant empty
   panel, no fake cards. */
.decision-deck { display: grid; gap: 12px; margin: 2px 0 4px; }
.decision-head { display: flex; align-items: baseline; gap: 10px; }
.decision-head h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.decision-count {
  min-width: 22px; text-align: center; padding: 1px 8px; border-radius: 999px;
  font: 600 11px "Spline Sans Mono", monospace;
  background: var(--neon); color: #ffffff;
}
.decision-head i {
  font-style: normal; font-size: 12px; color: var(--dim);
}
.decision-list { display: grid; gap: 10px; }
.decision-card {
  position: relative;
  display: grid; gap: 7px;
  padding: 13px 16px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: 0 1px 2px rgba(36, 31, 63, 0.05), 0 8px 26px rgba(70, 58, 194, 0.07);
}
.decision-card::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 999px; background: var(--neon);
}
.decision-card.dc-high::before { background: var(--risk); }
.decision-card.dc-medium::before { background: var(--warn); }
.decision-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dim);
}
.decision-dept { display: inline-flex; align-items: center; gap: 5px; color: var(--neon); }
.decision-dept svg { width: 12px; height: 12px; }
.decision-impact.di-high { color: var(--risk); }
.decision-impact.di-medium { color: var(--warn); }
.decision-card h3 { margin: 0; font-size: 14.5px; line-height: 1.3; }
.decision-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.decision-evidence {
  font: 400 11px "Spline Sans Mono", monospace; color: var(--dim-2);
}
.decision-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.decision-actions .btn { font-size: 12px; padding: 7px 13px; }
@media (max-width: 900px) {
  .decision-card { padding: 12px 13px 11px 15px; }
  .decision-actions .btn { flex: 1 1 auto; }
}

/* ---------------- skills (superpowers) ---------------- */
/* Chips under a chat reply naming the playbooks the brain visibly engaged. */
.chat-skill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px 2px; }
.chat-skill-chips span {
  padding: 2.5px 10px; border-radius: 999px;
  font: 500 10px "Spline Sans Mono", monospace; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--neon); border: 1px solid rgba(91, 76, 255, 0.32); background: rgba(91, 76, 255, 0.07);
}
.brain-skill-add { display: grid; gap: 8px; grid-template-columns: 1fr; }
.brain-skill-add input, .brain-skill-add textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--glass); color: var(--ink);
  font: inherit;
}
.brain-skill-add button { justify-self: start; }
.brain-skill p b { font-size: 13.5px; }
.brain-skill small { display: block; margin-top: 2px; color: var(--dim); }

/* ============================================================= */
/* ========  PHANTOM BRIDGE — full-width command deck  ========= */
/* ============================================================= */
/* Desktop (>=901px) only: the sidebar ELEMENT becomes the horizontal
   command deck across the top of the viewport. Same DOM, same [data-nav]
   mounts, same delegated click handling — main.js renderNav()/goNav()
   never know the difference. Below 901px nothing here applies: the
   phone keeps its homebar + drawer + bottom dock exactly as before.
   The deck owns --deck-h; every viewport-height lock downstream
   subtracts it so one-screen surfaces stay one screen. */

.canopy { display: none; }

@media (min-width: 901px) {
  /* ---- shell: column stack — deck / instruments / wire / console ---- */
  .phantom {
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    --deck-h: 52px;
  }

  /* ---- the command deck (formerly the sidebar) ---- */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    height: var(--deck-h);
    min-height: var(--deck-h);
    margin: 0;
    padding: 0 clamp(14px, 1.8vw, 28px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(10px, 1.5vw, 22px);
    border: 0;
    border-bottom: 1px solid rgba(124, 108, 255, 0.34);
    border-radius: 0;
    box-shadow: 0 14px 44px -18px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(124, 108, 255, 0.12);
    background: linear-gradient(180deg, rgba(19, 16, 32, 0.94), rgba(9, 8, 15, 0.9));
    overflow: visible;
  }
  /* energized seam: a light pulse travelling the deck's lower edge.
     bottom:0 (not -1px): an inherited overflow-x:hidden !important on
     .sidebar clips anything outside the border-box. */
  .sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(124, 108, 255, 0.9) 46%, rgba(69, 230, 189, 0.9) 54%, transparent 65%, transparent 100%);
    background-size: 280% 100%;
    animation: deckSeam 11s linear infinite;
    opacity: 0.8;
  }

  /* ---- ship sigil ---- */
  .side-brand {
    padding: 0 clamp(10px, 1.4vw, 20px) 0 0;
    border-bottom: 0;
    border-right: 1px solid rgba(124, 108, 255, 0.16);
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
  }
  .side-brand .brand-ghost { width: 25px; height: 25px; }
  .side-brand-text b { font-size: 10.5px; letter-spacing: 0.16em; }
  .side-brand-text i { letter-spacing: 0.18em; }

  /* ---- nav: one horizontal rail of modules ---- */
  .side-nav {
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: clamp(8px, 1.2vw, 16px);
  }
  .side-nav-main {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-y: visible;
    counter-reset: deckmod;
  }
  .side-nav-utility {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0 0 0 clamp(8px, 1.2vw, 14px);
    border-top: 0;
    border-left: 1px solid rgba(124, 108, 255, 0.16);
    max-width:54%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .side-nav-utility::-webkit-scrollbar { display:none; }

  /* ---- nav modules: clipped plates, not website pills ---- */
  .sidebar .nav-item {
    width: auto;
    flex: 0 0 auto;
    min-height: 34px;
    height: 34px;
    padding: 0 12px 0 10px;
    gap: 7px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    background: rgba(124, 108, 255, 0.055);
    box-shadow: inset 0 0 0 1px rgba(124, 108, 255, 0.15);
    color: var(--dim);
    font: 600 11.5px "Instrument Sans", sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  /* auto-numbered module designators: 01…07, straight off the flight deck */
  .side-nav-main .nav-item::before {
    counter-increment: deckmod;
    content: "0" counter(deckmod);
    font: 700 7.5px "Spline Sans Mono", monospace;
    letter-spacing: 0.06em;
    color: var(--dim);
    transform: translateY(-4px);
  }
  .sidebar .nav-item .ic { width: 14px; height: 14px; flex: 0 0 14px; }
  .sidebar .nav-item:hover {
    transform: translateY(-1px);
    background: rgba(124, 108, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(124, 108, 255, 0.32);
    color: var(--ink);
  }
  .sidebar .nav-item:active { transform: translateY(0) scale(0.985); }
  /* powered module */
  .phantom .sidebar .nav-item.is-active {
    background: linear-gradient(180deg, rgba(124, 108, 255, 0.3), rgba(124, 108, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(124, 108, 255, 0.6), 0 0 22px rgba(124, 108, 255, 0.22);
    color: #ffffff;
  }
  .phantom .sidebar .nav-item.is-active::after {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--neon), var(--neon-2, #45e6bd));
    box-shadow: 0 0 12px rgba(124, 108, 255, 0.85);
  }
  .sidebar .nav-item .nav-badge { margin-left: 3px; }

  /* ---- utility cluster: icon plates, labels slide out on approach ---- */
  .side-nav-utility .nav-item { padding: 0 9px; }
  .side-nav-utility .nav-item span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.28s ease, opacity 0.22s ease, margin-left 0.28s ease;
    margin-left: -7px;
  }
  .side-nav-utility .nav-item:hover span, .side-nav-utility .nav-item:focus-visible span, .side-nav-utility .nav-item.is-active span {
    max-width: 120px;
    opacity: 1;
    margin-left: 0;
  }
  .side-nav-utility .nav-item .nav-pill { margin-left: 4px; }
  .phantom .sidebar .nav-item[data-nav-id="adminos"]::before { margin-left: 4px; }
  .sidebar .nav-item-bottom { min-height: 34px; padding-top: 0; padding-bottom: 0; background: rgba(124, 108, 255, 0.055); }
  .sidebar .nav-item:not(.nav-item-bottom) + .nav-item-bottom { margin-top: 0; }
  .sidebar .nav-item:not(.nav-item-bottom) + .nav-item-bottom::before { display: none; }

  /* ---- instrument strip: the old topbar rides under the deck ----
     top: 0, NOT var(--deck-h): .app-main is always its own scrollport
     (overflow-x hidden forces overflow-y auto), so the strip's sticky inset
     resolves against app-main's top edge — which already sits below the
     deck. A --deck-h inset here would double-offset it into a dead band. */
  .topbar2 {
    display:none;
  }

  /* ---- canopy: HUD frame you look through, never touch ---- */
  .canopy {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.5;
    background:
      /* bottom-left corner bracket */
      linear-gradient(rgba(124, 108, 255, 0.55), rgba(124, 108, 255, 0.55)) 12px calc(100% - 12px) / 24px 1px,
      linear-gradient(rgba(124, 108, 255, 0.55), rgba(124, 108, 255, 0.55)) 12px calc(100% - 12px) / 1px 24px,
      /* bottom-right corner bracket */
      linear-gradient(rgba(124, 108, 255, 0.55), rgba(124, 108, 255, 0.55)) calc(100% - 12px) calc(100% - 12px) / 24px 1px,
      linear-gradient(rgba(124, 108, 255, 0.55), rgba(124, 108, 255, 0.55)) calc(100% - 12px) calc(100% - 12px) / 1px 24px,
      /* bottom edge tick ruler */
      repeating-linear-gradient(90deg, rgba(124, 108, 255, 0.34) 0 1px, transparent 1px 42px) 50% calc(100% - 4px) / 42% 5px,
      /* left + right edge tick rails */
      repeating-linear-gradient(0deg, rgba(124, 108, 255, 0.26) 0 1px, transparent 1px 56px) 3px 50% / 5px 34%,
      repeating-linear-gradient(0deg, rgba(124, 108, 255, 0.26) 0 1px, transparent 1px 56px) calc(100% - 3px) 50% / 5px 34%;
    background-repeat: no-repeat;
  }

  /* ---- height budgets: everything one-screen subtracts the deck ---- */
  .app-main:has(> .console:not(.console-workspace)) { height: calc(100dvh - var(--deck-h, 52px)); }
  .app-main:has(.workspace-page-first) { height: calc(100dvh - var(--deck-h, 52px)); }
  .app-main:has(.workspace-page[data-workspace-page="media"]) { height: calc(100dvh - var(--deck-h, 52px)); }
  .app-main:has(.workspace-page[data-workspace-page="sites"]) { height: calc(100dvh - var(--deck-h, 52px)); }
  .workspace-page { min-height: calc(100vh - 52px - var(--deck-h, 52px)); }
  .console .hero2 { min-height: clamp(360px, calc(100vh - 275px - var(--deck-h, 52px)), 920px); }

  /* ---- power-on: modules energize left to right ---- */
  .phantom.booted .sidebar .nav-item { animation: deckPower 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .phantom.booted .side-nav-main .nav-item:nth-child(2) { animation-delay: 0.04s; }
  .phantom.booted .side-nav-main .nav-item:nth-child(3) { animation-delay: 0.08s; }
  .phantom.booted .side-nav-main .nav-item:nth-child(4) { animation-delay: 0.12s; }
  .phantom.booted .side-nav-main .nav-item:nth-child(5) { animation-delay: 0.16s; }
  .phantom.booted .side-nav-main .nav-item:nth-child(6) { animation-delay: 0.2s; }
  .phantom.booted .side-nav-main .nav-item:nth-child(7) { animation-delay: 0.24s; }
  .phantom.booted .side-nav-main .nav-item:nth-child(8) { animation-delay: 0.28s; }
  .phantom.booted .side-nav-utility .nav-item { animation-delay: 0.32s; }

  /* ---- dashboard panels: designation codes + status LEDs ---- */
  .console:not(.console-workspace) .console-rail { counter-reset: deckpanel; }
  .console:not(.console-workspace) .console-rail .section-head h2 { position: relative; }
  .console:not(.console-workspace) .console-rail .section-head h2::before {
    counter-increment: deckpanel;
    content: "P·0" counter(deckpanel) "  ";
    color: var(--dim);
    letter-spacing: 0.1em;
  }
  .console:not(.console-workspace) .quickwidget {
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .console:not(.console-workspace) .queue-item {
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  }
}

/* tighter decks: shed ornament before shedding function */
@media (min-width: 901px) and (max-width: 1499px) {
  .side-brand-text i { display: none; }
  .side-nav-main .nav-item::before { display: none; }
  .sidebar .nav-item { padding: 0 10px; font-size: 11px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .side-brand-text { display: none; }
  .side-nav-main .nav-item span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: -7px;
    transition: max-width 0.28s ease, opacity 0.22s ease, margin-left 0.28s ease;
  }
  .side-nav-main .nav-item:hover span, .side-nav-main .nav-item:focus-visible span, .side-nav-main .nav-item.is-active span {
    max-width: 120px;
    opacity: 1;
    margin-left: 0;
  }
}

/* the 901-1200 hero keeps one-screen height now that the deck eats 52px */
@media (max-width: 1200px) and (min-width: 901px) {
  .console:not(.console-workspace) .hero2 { height: clamp(390px, calc(100dvh - 320px - var(--deck-h, 52px)), 560px); }
}

@keyframes deckSeam {
  from { background-position: 140% 0; }
  to { background-position: -140% 0; }
}
@keyframes deckPower {
  from { opacity: 0; transform: translateY(-9px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar::after { animation: none; opacity: 0.4; }
  .phantom.booted .sidebar .nav-item { animation: none; }
  .side-nav-utility .nav-item span, .side-nav-main .nav-item span { transition: none; }
}

/* Final compact nav guard: phones and narrow tablets get exactly one nav bar. */
@media (max-width: 900px) {
  .phantom {
    --mobile-admin-topbar: 0px !important;
  }

  .topbar2, .os-command-rail, .mobile-admin-homebar, .os-system-line {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .phantom > .sidebar:not(.is-expanded) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-main {
    min-height: 100svh !important;
    padding-top: 0 !important;
  }

  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
/* Shared product-state grammar: every module gets the same compact,
   accessible loading/empty/error treatment without inventing local cards. */
.pf-state {
  display: grid;
  justify-items: start;
  gap: 0.38rem;
  min-width: 0;
}
.pf-state > b {
  color: var(--text, #effff7);
  font-size: 0.95rem;
}
.pf-state > span {
  color: var(--muted, #8fa5a0);
  max-width: 58ch;
}
.pf-state-error {
  border-color: color-mix(in srgb, #ff626f 50%, transparent);
}
.pf-state-action {
  margin-top: 0.35rem;
}

/* Final work-surface containment: no central Phantom stage, WebGL canvas, or
   orbital ghost layer can sit on top of CRM, PhantomBot, or any workspace app. */
body .phantom .console-workspace :where(
  .hero2-stage,
  .phantom-webgl,
  .phantom-mode-stage,
  .ghost-canvas,
  .os-gravity-map,
  .os-earth-horizon
) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body .phantom .workspace-page,
body .phantom .workspace-page-body,
body .phantom .phantomai,
body .phantom .crm-layout,
body .phantom .crm-detail {
  position: relative;
  isolation: isolate;
}

body .phantom .crm-detail,
body .phantom .crm-card,
body .phantom .crm-command {
  background-color: rgba(5, 8, 10, 0.96) !important;
  background-blend-mode: normal !important;
}

body .phantom .crm-detail {
  z-index: 5;
  overflow: hidden;
}

/* Modern workspace command headers: compact app chrome, not oversized ribbons. */
body .phantom .workspace-page-head {
  min-height: 56px;
  padding: 10px clamp(16px, 1.6vw, 24px) !important;
  border-color: rgba(133, 171, 198, 0.11) !important;
  background: rgba(5, 8, 10, 0.74) !important;
  backdrop-filter: blur(18px);
}

body .phantom .workspace-page-kicker,
body .phantom .crm-command p,
body .phantom .lead-intel p {
  margin-bottom: 3px !important;
  color: rgba(143, 153, 255, 0.86) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

body .phantom .workspace-page-head h1 {
  font-size: clamp(18px, 1.25vw, 22px) !important;
  letter-spacing: 0 !important;
}

body .phantom .crm-command,
body .phantom .lead-intel,
body .phantom .vm-command,
body .phantom .an-business-command > article,
body .phantom .mc-head,
body .phantom .mc-commander {
  border-color: rgba(133, 171, 198, 0.13) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(9, 14, 18, 0.94), rgba(5, 8, 10, 0.9)) !important;
  background-blend-mode: normal !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body .phantom .workspace-page :where(
  .an-hero,
  .an-analysis-head,
  .media-suite-head,
  .developer-hero,
  .dev-hero,
  .brain-hero,
  .memory-hero,
  .workers-hero,
  .cust-hero,
  .cs-hero,
  .comm-header,
  .ci-radar-hero,
  .ci-position-hero,
  .ci-dossier-hero,
  .ci-competitor-command,
  .mg-hero,
  .pl-head,
  .ss-simple-top,
  .set-ai-hero,
  .set-social-command,
  .ps-top,
  .ps-market-hero
) {
  border-color: rgba(133, 171, 198, 0.13) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(9, 14, 18, 0.94), rgba(5, 8, 10, 0.9)) !important;
  background-blend-mode: normal !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body .phantom .workspace-page :where(
  .an-hero,
  .an-analysis-head,
  .media-suite-head,
  .developer-hero,
  .dev-hero,
  .brain-hero,
  .memory-hero,
  .workers-hero,
  .cust-hero,
  .cs-hero,
  .comm-header,
  .ci-radar-hero,
  .ci-position-hero,
  .ci-dossier-hero,
  .ci-competitor-command,
  .mg-hero,
  .pl-head,
  .ss-simple-top,
  .set-ai-hero,
  .set-social-command,
  .ps-top,
  .ps-market-hero
) {
  padding: 12px !important;
}

body .phantom .workspace-page :where(
  .an-hero,
  .media-suite-head,
  .developer-hero,
  .dev-hero,
  .brain-hero,
  .memory-hero,
  .workers-hero,
  .cust-hero,
  .cs-hero,
  .comm-header,
  .ci-radar-hero,
  .ci-position-hero,
  .ci-dossier-hero,
  .ci-competitor-command,
  .mg-hero,
  .pl-head,
  .set-ai-hero,
  .set-social-command
) :where(h1, h2, h3) {
  font-size: clamp(18px, 1.45vw, 24px) !important;
  letter-spacing: 0 !important;
}

body .phantom .crm-command,
body .phantom .lead-intel {
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding: 12px !important;
}

body .phantom .crm-command h3,
body .phantom .lead-intel h3 {
  margin-bottom: 3px !important;
  font-size: clamp(18px, 1.35vw, 22px) !important;
  letter-spacing: 0 !important;
}

body .phantom .crm-command span,
body .phantom .lead-intel span {
  max-width: 560px !important;
  color: rgba(169, 178, 190, 0.82) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

body .phantom .lead-intel-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .phantom .lead-intel-form input {
  min-height: 38px !important;
  border-color: rgba(133, 171, 198, 0.15) !important;
  border-radius: 6px !important;
  background: rgba(1, 4, 7, 0.82) !important;
}

body .phantom .lead-intel-form .btn,
body .phantom .crm-command .btn-primary {
  min-height: 38px !important;
  border: 1px solid rgba(143, 153, 255, 0.42) !important;
  border-radius: 6px !important;
  background: rgba(91, 76, 255, 0.2) !important;
  box-shadow: none !important;
  white-space: nowrap;
}

body .phantom .crm-automation-control {
  margin-top: 0 !important;
  border-color: rgba(133, 171, 198, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(5, 8, 10, 0.62) !important;
}

@media (max-width: 900px) {
  body .phantom .workspace-page-head {
    min-height: 48px;
    padding: 9px 12px !important;
  }

  body .phantom .crm-command,
  body .phantom .lead-intel {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  body .phantom .lead-intel-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 560px) {
  body .phantom .lead-intel-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Accounting is one modern workspace: books, offers, and review queue. */
.accounting-hub { display: grid; gap: 18px; }
.accounting-tabs { display: inline-flex; width: fit-content; max-width: 100%; padding: 5px; gap: 4px; overflow-x: auto; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: 0 14px 40px rgba(0, 0, 0, .16); }
.accounting-tabs button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 11px; color: var(--dim); background: transparent; font: inherit; font-weight: 760; white-space: nowrap; cursor: pointer; }
.accounting-tabs button:hover { color: var(--text); background: color-mix(in srgb, var(--panel-2) 82%, transparent); }
.accounting-tabs button.is-active { color: #07120c; background: linear-gradient(135deg, var(--neon), color-mix(in srgb, var(--neon) 64%, white)); box-shadow: 0 7px 22px color-mix(in srgb, var(--neon) 24%, transparent); }
.accounting-tab-body { min-width: 0; }
.mission-map-body-clean { grid-template-columns: minmax(0, 1fr); }