:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #07101c;
  --surface: #0c1827;
  --surface-2: #101f31;
  --line: #20344b;
  --text: #eaf3fc;
  --muted: #879bb1;
  --green: #42e5b0;
  --blue: #53a7ff;
  --amber: #ffbd59;
  --red: #ff6b76;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 70% -10%, #123356 0, transparent 35%), var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px; border-right: 1px solid var(--line); background: rgba(5, 13, 23, .92); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--green), var(--blue)); color: #03120e; display: grid; place-items: center; font-weight: 900; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.08rem; }
.brand small { color: var(--muted); margin-top: 2px; }
nav { display: grid; gap: 6px; }
.nav-item { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 12px 14px; border-radius: 10px; }
.nav-item:hover, .nav-item.active { color: var(--text); background: #102238; }
.nav-item.active { box-shadow: inset 3px 0 var(--green); }
.connection { margin-top: auto; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; gap: 10px; }
.connection span { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px currentColor; }
.connection span.online { background: var(--green); }
.connection strong, .connection small { display: block; font-size: .75rem; }
.connection small { color: var(--muted); margin-top: 3px; }
main { min-width: 0; padding: 28px clamp(20px, 4vw, 54px) 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); max-width: 750px; line-height: 1.08; margin: 18px 0 12px; }
h3 { margin-bottom: 16px; }
.eyebrow { color: var(--green); letter-spacing: .14em; font-weight: 800; font-size: .7rem; margin-bottom: 7px; }
.access { display: flex; gap: 9px; min-width: min(440px, 46vw); }
input, textarea, select { width: 100%; color: var(--text); background: #081522; border: 1px solid #29415b; border-radius: 10px; padding: 11px 12px; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(66, 229, 176, .1); }
textarea { min-height: 105px; resize: vertical; }
button.primary, button.ghost, .table-action { border-radius: 10px; padding: 11px 15px; font-weight: 800; }
button.primary { border: 0; background: var(--green); color: #04150f; }
button.ghost, .table-action { border: 1px solid var(--line); color: var(--text); background: #102238; }
#notice { min-height: 22px; color: var(--muted); margin-bottom: 10px; }
#notice.error { color: var(--red); }
#notice.success { color: var(--green); }
.view { display: none; }
.view.active { display: block; }
.hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 34px; border: 1px solid #24415e; border-radius: 20px; background: linear-gradient(120deg, rgba(16, 40, 62, .96), rgba(8, 23, 37, .92)); }
.hero::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -70px; top: -120px; background: rgba(66, 229, 176, .1); filter: blur(2px); }
.hero p { color: var(--muted); margin-bottom: 0; }
.pill { padding: 6px 9px; border: 1px solid rgba(66, 229, 176, .35); border-radius: 999px; color: var(--green); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.metrics article, .panel { border: 1px solid var(--line); background: rgba(12, 24, 39, .9); border-radius: 16px; }
.metrics article { padding: 20px; }
.metrics span, .metrics small { display: block; color: var(--muted); }
.metrics strong { display: block; font-size: 2rem; margin: 8px 0 3px; }
.metrics small { font-size: .72rem; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asset-layout, .playbook-layout { grid-template-columns: minmax(260px, .65fr) minmax(0, 1.6fr); }
.panel { padding: 22px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form label { display: grid; gap: 7px; margin: 13px 0; color: var(--muted); font-size: .78rem; }
.form button { width: 100%; margin-top: 8px; }
.stack { display: grid; gap: 10px; }
.stack-item { display: flex; justify-content: space-between; gap: 15px; padding: 13px; background: #091522; border-radius: 11px; }
.stack-item small { color: var(--muted); display: block; margin-top: 4px; }
.status { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: .66rem; font-weight: 900; background: rgba(83, 167, 255, .12); color: var(--blue); }
.status.online, .status.ACTIVE, .status.SUCCEEDED, .status.RESOLVED { background: rgba(66, 229, 176, .12); color: var(--green); }
.status.COMPATIBLE { background: rgba(66, 229, 176, .12); color: var(--green); }
.status.offline, .status.FAILED, .status.ESCALATED { background: rgba(255, 107, 118, .12); color: var(--red); }
.status.INCOMPATIBLE, .status.ROLLED_BACK { background: rgba(255, 107, 118, .12); color: var(--red); }
.status.DRAFT, .status.WAITING_APPROVAL { background: rgba(255, 189, 89, .12); color: var(--amber); }
.status.PENDING, .status.DOWNLOADING, .status.VERIFIED, .status.INSTALLING, .status.ROLLING_BACK { background: rgba(255, 189, 89, .12); color: var(--amber); }
.rollout-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr auto; gap: 14px; align-items: end; }
.rollout-form label { margin: 0; }
.rollout-form button { width: auto; margin: 0; }
.empty { color: var(--muted); padding: 20px 0; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { text-align: left; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
th, td { padding: 12px 9px; border-bottom: 1px solid #1b3046; vertical-align: top; }
td small { display: block; color: var(--muted); margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-action { padding: 6px 9px; font-size: .68rem; }
.conversation { display: grid; gap: 10px; max-height: 330px; overflow-y: auto; margin: 14px 0; }
.message { max-width: 88%; padding: 11px 13px; border-radius: 12px; background: #091522; }
.message.user { justify-self: end; background: #12344a; }
.message.assistant { justify-self: start; border: 1px solid #20415a; }
.message strong { color: var(--green); font-size: .7rem; }
.message p { margin: 5px 0 0; white-space: pre-wrap; }
.welcome-message { margin: 16px 0; padding: 15px; border: 1px solid #20415a; border-radius: 14px 14px 14px 4px; background: #091522; line-height: 1.5; }
.chat-start textarea { min-height: 132px; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.chat-compose button { width: auto; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.status.CONVERTED { background: rgba(66, 229, 176, .12); color: var(--green); }
.status.AWAITING_PROBLEM { background: rgba(83, 167, 255, .12); color: var(--blue); }
.status.IDENTIFYING_TENANT, .status.IDENTIFYING_USER, .status.IDENTIFYING_ASSET, .status.AWAITING_ASSET_HELP, .status.WAITING_HUMAN_TRIAGE { background: rgba(255, 189, 89, .12); color: var(--amber); }
@media (max-width: 820px) {
  .shell { grid-template-columns: 78px 1fr; }
  .brand div, .nav-item, .connection div { font-size: 0; }
  .nav-item::first-letter { font-size: 1rem; }
  .sidebar { padding-inline: 12px; }
  .brand { padding-inline: 6px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .asset-layout, .playbook-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .shell { display: block; }
  .sidebar { position: static; width: auto; height: auto; padding: 14px; }
  .brand { padding-bottom: 12px; }
  .brand div, .nav-item, .connection div { font-size: inherit; }
  nav { display: flex; overflow-x: auto; }
  .connection { display: none; }
  main { padding: 20px 14px 50px; }
  .topbar, .hero { align-items: stretch; flex-direction: column; }
  .access { min-width: 0; width: 100%; }
  .grid.two, .metrics { grid-template-columns: 1fr; }
  .rollout-form { grid-template-columns: 1fr; }
  .panel { overflow-x: auto; }
}