/* ============================================================
   website-brain — shared design system (directional mockups)
   Dark GoUltra palette, continuous with website-brain-b3 + gua-home-dark.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy:#0a0a16; --navy-2:#111122; --navy-3:#16162a; --navy-4:#1c1c33;
  --ink:#ececf6; --muted:#9b9bb4; --muted-2:#6f6f8a;
  --coral:#f77062; --pink:#fe5196; --violet:#bc4cf4; --blue:#4d8bff; --teal:#2dd4bf;
  --amber:#f5b544; --green:#34d399; --red:#f87171;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.06);
  --grad:linear-gradient(135deg,#f77062 0%,#fe5196 48%,#bc4cf4 100%);
  --grad-soft:linear-gradient(135deg,rgba(247,112,98,.16),rgba(188,76,244,.16));
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:#c7c7d8;
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- top chrome ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;height:54px;background:rgba(10,10,22,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.brand .dot{width:19px;height:19px;border-radius:6px;background:var(--grad);display:inline-block}
.top-right{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);background:var(--navy-2)}
.chip .g{width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ---------- suite subnav ---------- */
.subnav{position:sticky;top:54px;z-index:20;display:flex;gap:6px;padding:11px 22px;background:rgba(10,10,22,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap}
.subnav a{flex:none;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid transparent}
.subnav a:hover{color:var(--ink);background:var(--glass)}
.subnav a.active{color:#fff;background:var(--navy-4);border-color:var(--line-2)}
.subnav a.active .n{color:var(--violet)}
.subnav a .n{color:var(--muted-2);margin-right:5px;font-weight:700}

/* ---------- layout ---------- */
.page{max-width:1180px;margin:0 auto;padding:26px 22px 90px}
.page-narrow{max-width:960px}
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--violet);background:var(--grad-soft);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.h1{font-size:29px;font-weight:700;color:var(--ink);margin:14px 0 0;letter-spacing:-.02em;line-height:1.15}
.h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:15.5px;color:var(--muted);margin:10px 0 0;max-width:760px}
.h2{font-size:19px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
.sectlabel{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:34px 0 13px;
  display:flex;align-items:center;gap:9px}
.sectlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.sub{font-size:14px;color:var(--muted);margin:5px 0 0}

/* ---------- cards ---------- */
.card{background:var(--navy-2);border:1px solid var(--line);border-radius:15px;padding:17px}
.card.hl{border-color:var(--line-2)}
.card.grad{background:var(--grad-soft);border-color:rgba(188,76,244,.35)}
.grid{display:grid;gap:15px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
.tile{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:5px}
.tile .num{font-size:25px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tile .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tile .num.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- pills / badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.04em}
.b-violet{background:rgba(188,76,244,.16);color:#d9a6f7} .b-teal{background:rgba(45,212,191,.15);color:#7ff0e0}
.b-amber{background:rgba(245,181,68,.15);color:#f3cf8e} .b-blue{background:rgba(77,139,255,.15);color:#a9c6ff}
.b-green{background:rgba(52,211,153,.15);color:#8ff0cc} .b-red{background:rgba(248,113,113,.15);color:#f6b0b0}
.b-muted{background:var(--glass-2);color:var(--muted)}
.tag{display:inline-block;font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;background:var(--navy-3);color:var(--ink);border:1px solid var(--line)}
.btn:hover{border-color:var(--line-2)}
.btn.primary{background:var(--grad);color:#fff;border:none}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 11px;font-size:12px}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
.th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);
  padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.td{font-size:13px;color:var(--ink);padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover .td{background:var(--glass)}

/* ---------- diagram primitives ---------- */
.diagram{background:radial-gradient(120% 120% at 50% -10%,rgba(188,76,244,.08),transparent 60%),var(--navy-2);
  border:1px solid var(--line);border-radius:18px;padding:22px}
.lanes{display:grid;grid-template-columns:1fr auto 1.35fr auto 1fr;gap:0;align-items:stretch}
@media(max-width:900px){.lanes{grid-template-columns:1fr}}
.lane{display:flex;flex-direction:column;gap:11px}
.lane-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);text-align:center;margin-bottom:2px}
.node{background:var(--navy-3);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.node .nt{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.node .ns{font-size:12px;color:var(--muted);margin-top:4px}
.node.brain{background:var(--grad-soft);border-color:rgba(188,76,244,.4)}
.node.accent{border-color:var(--line-2)}
.node .ic{width:17px;height:17px;flex:none;border-radius:5px;background:var(--grad);display:inline-block}
.node .ic.plain{background:var(--navy-4)}
.conn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:52px;color:var(--muted-2)}
.conn .arw{font-size:20px;line-height:1;color:var(--violet)}
.conn .cl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;text-align:center;color:var(--muted-2);max-width:60px}
@media(max-width:900px){.conn{flex-direction:row;min-height:34px}.conn .arw{transform:rotate(90deg)}}

/* loop strip */
.loop{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:6px}
.loop .step{flex:1;min-width:130px;background:var(--navy-3);border:1px solid var(--line);border-radius:12px;padding:12px 13px;position:relative}
.loop .step .k{font-size:10px;font-weight:700;color:var(--violet);letter-spacing:.05em}
.loop .step .t{font-size:13px;font-weight:600;color:var(--ink);margin-top:3px}
.loop .step .d{font-size:11.5px;color:var(--muted);margin-top:3px}
.loop .sep{display:flex;align-items:center;color:var(--violet);font-size:18px;padding:0 3px}
@media(max-width:760px){.loop .sep{transform:rotate(90deg)}}

/* ---------- sequence (MCP flow) ---------- */
.seq{display:flex;flex-direction:column;gap:0}
.seq-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.seq-actor{font-size:12px;font-weight:700;color:var(--muted);text-align:right;padding-top:9px}
.seq-actor.claude{color:#a9c6ff} .seq-actor.mcp{color:#d9a6f7} .seq-actor.brain{color:#7ff0e0} .seq-actor.human{color:#f3cf8e}
.bubble{background:var(--navy-3);border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;color:var(--ink)}
.bubble .call{font-size:12px;color:var(--violet)}
.bubble .meta{font-size:11.5px;color:var(--muted);margin-top:4px}

/* ---------- checklist ---------- */
.check{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:none}
.ck{width:20px;height:20px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}
.ck.pass{background:rgba(52,211,153,.16);color:var(--green)} .ck.warn{background:rgba(245,181,68,.16);color:var(--amber)}
.ck.fail{background:rgba(248,113,113,.16);color:var(--red)} .ck.todo{background:var(--glass-2);color:var(--muted)}
.check .ci{font-size:13.5px;color:var(--ink);font-weight:500} .check .cs{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- score meter ---------- */
.meter{height:7px;border-radius:999px;background:var(--navy-4);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--grad)}
.ring{--v:72;position:relative;width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(from -90deg,var(--violet) calc(var(--v)*1%),var(--navy-4) 0)}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--navy-2)}
.ring b{position:relative;font-size:25px;font-weight:700;color:var(--ink);line-height:1}
.ring small{position:relative;font-size:10px;color:var(--muted);text-align:center;font-weight:600;margin-top:3px}

/* ---------- kanban ---------- */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
@media(max-width:900px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.board{grid-template-columns:1fr}}
.col{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:9px;min-height:120px}
.col-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tk{background:var(--navy-3);border:1px solid var(--line);border-radius:11px;padding:11px}
.tk .tt{font-size:13px;font-weight:600;color:var(--ink)}
.tk .tm{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.owner{width:20px;height:20px;border-radius:50%;background:var(--navy-4);display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--ink)}
.owner.ai{background:var(--grad);color:#fff}

/* ---------- misc ---------- */
.note{display:flex;gap:11px;align-items:flex-start;background:var(--grad-soft);border:1px solid rgba(188,76,244,.32);border-radius:13px;
  padding:14px 15px;font-size:13px;color:var(--muted);line-height:1.55}
.note b{color:var(--ink)}
.rowlist{display:flex;flex-direction:column;gap:9px}
.rl{display:flex;align-items:center;gap:12px;background:var(--navy-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rl .rl-t{font-size:13.5px;font-weight:600;color:var(--ink)} .rl .rl-s{font-size:12px;color:var(--muted);margin-top:2px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mut{color:var(--muted)} .mut2{color:var(--muted-2)} .ink{color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:4px}
.hr{height:1px;background:var(--line);margin:14px 0;border:none}
.cardlink{display:block;transition:border-color .12s}
.cardlink:hover{border-color:var(--line-2)}
.dl{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:13px}
.dl dt{color:var(--muted)} .dl dd{margin:0;color:var(--ink)}
.entity{display:inline-flex;align-items:center;gap:6px;background:var(--navy-3);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--ink)}
.entity .ed{width:7px;height:7px;border-radius:50%;background:var(--violet)}