/* The AI → Brain */
.brain-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:18px; align-items:start; margin-bottom:18px; }
.brain-grid .panel { margin:0; }
.brain-grid > .bmain > #drive { order:3; }
.bmain { display:flex; flex-direction:column; gap:18px; min-width:0; }
.bside { display:flex; flex-direction:column; gap:18px; min-width:0; }
.bstage { position:relative; height:clamp(460px, 68vh, 720px); overflow:hidden; background:
  radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--surface) 70%, var(--bg)), var(--bg)); }
.bstage::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), var(--gold-2), var(--gold), transparent); opacity:.7; z-index:1; }
.bstage canvas { position:absolute; inset:0; display:block; touch-action:manipulation; }
.bwell { position:absolute; transform:translate(-50%, -50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; user-select:none; text-align:center; }
.bwell .bw-i { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--surface); box-shadow:var(--shadow), 0 0 0 1.5px var(--wc); color:var(--wc); transition:transform .2s var(--ease), box-shadow .2s; }
.bwell:hover .bw-i, .bwell.on .bw-i { transform:scale(1.08); box-shadow:var(--shadow), 0 0 0 2.5px var(--wc), 0 0 22px color-mix(in srgb, var(--wc) 40%, transparent); }
.bwell b { font-size:12px; font-weight:600; margin-top:4px; color:var(--ink); text-shadow:0 0 6px var(--bg); white-space:nowrap; }
.bwell .bw-n { font-size:11px; color:var(--muted); white-space:nowrap; }
.bwell[data-w="wa"] { --wc:#2f9e74; } .bwell[data-w="crm"] { --wc:var(--accent); } .bwell[data-w="drive"] { --wc:#4f6fae; }
.bwell[data-w="drive"] { flex-direction:row; gap:8px; } .bwell[data-w="drive"] b { margin:0; } .bwell[data-w="drive"] .bw-i { width:38px; height:38px; }
.bstatus { position:absolute; left:14px; top:14px; z-index:2; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--ink-2); padding:6px 11px; border-radius:99px; background:color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter:blur(8px); border:1px solid var(--line); max-width:calc(100% - 28px); }
.bstatus span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.bstatus.busy .bs-dot { animation:pulse 0.9s infinite; background:var(--gold-2); }
.blegend { position:absolute; left:14px; bottom:12px; z-index:2; display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--muted); }
.blegend span { display:flex; align-items:center; gap:7px; }
.blegend i, .fi > i, .bt-k::before, .bc-k::before { width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.lg-wa { --lc:#2f9e74; } .lg-crm { --lc:var(--accent); } .lg-brain, .lg-core { --lc:var(--gold); } .lg-drive { --lc:#4f6fae; }
.blegend i, .fi > i { background:var(--lc); }
.btip { position:absolute; z-index:3; pointer-events:none; max-width:240px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 11px; box-shadow:var(--shadow-lg); font-size:12.5px; display:flex; flex-direction:column; gap:2px; animation:fade .15s; }
.btip b { font-weight:600; line-height:1.35; } .btip span { color:var(--muted); font-size:12px; }
.bt-k, .bc-k { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) !important; }
.bt-k::before, .bc-k::before { content:""; background:var(--lc); }
.bcard { position:absolute; right:14px; top:14px; z-index:3; width:min(330px, calc(100% - 28px)); max-height:calc(100% - 28px); overflow:auto; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(14px); border:1px solid var(--line); border-top:2px solid var(--gold); border-radius:14px; padding:16px; box-shadow:var(--shadow-lg); animation:rise .25s var(--ease); }
.bcard h3 { font:700 18px/1.25 Montserrat, sans-serif; margin:6px 28px 2px 0; }
.bc-sub { margin:0 0 10px; color:var(--muted); font-size:12.5px; }
.bc-x { position:absolute; right:8px; top:8px; }
.bc-sum { font-size:13px; line-height:1.55; color:var(--ink-2); padding:8px 0 8px 12px; border-left:2px solid var(--gold-2); margin:8px 0 10px; }
.bc-kv td { padding:6px 0 !important; font-size:13px; border-bottom:1px solid var(--line); }
.bc-h { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--gold); margin:14px 0 6px; }
.bc-facts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; }
.bc-facts li { padding:6px 9px; border-radius:8px; background:var(--soft); }
.bc-facts b { font-weight:600; color:var(--gold-ink); margin-right:4px; text-transform:capitalize; }
.bc-facts a { color:var(--accent-text); text-decoration:underline; text-underline-offset:2px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px color-mix(in srgb, #22c55e 20%, transparent); animation:pulse 1.8s infinite; }
.bfeed { max-height:360px; overflow-y:auto; }
.fi { display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:start; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; transition:background .15s; }
.fi:hover { background:var(--soft); }
.fi:last-child { border-bottom:0; }
.fi > i { margin-top:6px; }
.fi b { display:block; font-weight:600; font-size:12.5px; }
.fi span { color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.fi time { color:var(--muted); font-size:11.5px; white-space:nowrap; }
.fi.new { animation:feedIn .6s var(--ease); }
@keyframes feedIn { from { opacity:0; transform:translateY(-6px); background:var(--gold-soft); } to { opacity:1; transform:none; } }
.crumbs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 18px; border-bottom:1px solid var(--line); font-size:13px; background:var(--soft); }
.crumbs a { color:var(--accent-text); cursor:pointer; } .crumbs a:hover { text-decoration:underline; } .crumbs span { color:var(--muted); }
tr.dr { cursor:pointer; }
.fn { display:flex; align-items:center; gap:9px; } .fn svg.i { color:var(--gold); width:17px; height:17px; }
.fn b { font-weight:500; }
.mdview { margin:0 18px 18px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--bg); font-size:13.5px; }
.mdview h3 { font:700 18px Montserrat, sans-serif; margin:4px 0 6px; } .mdview h4 { margin:14px 0 6px; font-size:13px; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; }
.mdview p { margin:4px 0; color:var(--ink-2); } .mdview .li { padding:2px 0 2px 14px; position:relative; } .mdview .li::before { content:"•"; position:absolute; left:2px; color:var(--gold); }
/* System → Claude API */
.keyrow { display:flex; gap:8px; flex-wrap:wrap; } .keyrow input { flex:1; min-width:200px; font-family:ui-monospace, Menlo, monospace; font-size:12.5px; }
.eng { display:inline-flex; gap:2px; padding:3px; background:var(--soft); border-radius:10px; }
.eng button { border:0; background:none; font:inherit; font-size:13px; font-weight:500; color:var(--muted); padding:5px 12px; border-radius:8px; cursor:pointer; }
.eng button.on { background:var(--surface); color:var(--accent-text); box-shadow:var(--shadow-sm), 0 0 0 1px var(--line); }
.eng button[disabled] { cursor:default; }
.test-ok { color:var(--ok); font-size:13px; } .test-bad { color:var(--bad); font-size:13px; }
@media (max-width: 1100px) { .brain-grid { grid-template-columns:1fr; } .bmain { display:contents; } .bside { position:static; order:2; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } }
@media (max-width: 820px) {
  .bstage { height:clamp(420px, 72vh, 560px); }
  .bwell .bw-i { width:38px; height:38px; } .bwell b { font-size:11px; } .bwell .bw-n { display:none; }
  .blegend { display:none; }
  .bcard { top:auto; bottom:10px; right:10px; left:10px; width:auto; max-height:60%; }
  .bstatus { top:12px; left:50%; transform:translateX(-50%); font-size:11.5px; max-width:44%; padding:5px 9px; }
}