:root {
  color-scheme: dark;
  --bg: #070a10;
  --bg2: #0b1019;
  --panel: rgba(17, 23, 35, .78);
  --panel2: rgba(20, 28, 43, .92);
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.14);
  --text: #f4f7fb;
  --muted: #8e9bad;
  --accent: #8ea9ff;
  --accent2: #88e0c4;
  --warn: #ffcc78;
  --danger: #ff7d8e;
  --good: #75e0b6;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background: radial-gradient(circle at 16% -8%, #14203b 0, transparent 30%), radial-gradient(circle at 88% 4%, #102a29 0, transparent 24%), var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
button, input, select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.tiny { font-size:12px; }
.error { color:var(--danger); min-height:20px; margin:10px 0 0; font-size:13px; }
.eyebrow { margin:0 0 7px; color:#9eb0c9; font-size:10px; font-weight:800; letter-spacing:.18em; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:34px; line-height:1.02; letter-spacing:-.04em; margin-bottom:12px; }
h2 { font-size:22px; letter-spacing:-.025em; margin:0; }
h3 { font-size:14px; margin:0 0 12px; color:#dce4ef; }
.brand-mark { width:54px; height:54px; border-radius:17px; display:grid; place-items:center; font-weight:900; font-size:24px; color:#061113; background: linear-gradient(145deg, #a6bcff, #7ee0c0); box-shadow:0 12px 40px rgba(125,198,220,.22); }
.brand-mark.small { width:38px; height:38px; border-radius:12px; font-size:17px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); padding:34px; border:1px solid var(--line2); border-radius:24px; background:linear-gradient(160deg, rgba(21,29,45,.96), rgba(10,14,23,.94)); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.login-card .brand-mark { margin-bottom:28px; }
label { display:block; color:#cfd8e6; font-size:13px; font-weight:650; }
input, select { width:100%; border:1px solid var(--line2); background:#0b111c; color:var(--text); border-radius:11px; padding:11px 12px; outline:none; transition:.18s ease; }
input:focus, select:focus { border-color:rgba(142,169,255,.68); box-shadow:0 0 0 3px rgba(142,169,255,.09); }
label input { margin-top:8px; }
.btn { border:1px solid var(--line2); background:#131c2b; color:#eaf0f8; border-radius:11px; padding:10px 13px; font-weight:720; font-size:13px; transition:transform .12s ease, border-color .12s ease, background .12s ease; }
.btn:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.24); background:#192437; }
.btn:active { transform:translateY(0); }
.btn.primary { color:#071018; background:linear-gradient(135deg,#a8baff,#7fdcc2); border-color:transparent; }
.btn.danger { color:#ffe8ec; background:rgba(255,74,102,.14); border-color:rgba(255,111,133,.26); }
.btn.ghost { background:transparent; }
.btn.compact { padding:8px 10px; font-size:12px; }
.btn.wide { width:100%; margin-top:16px; }
.topbar { position:sticky; top:0; z-index:20; min-height:66px; padding:12px clamp(18px,3vw,42px); display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); background:rgba(7,10,16,.76); backdrop-filter:blur(18px); }
.brand-row, .top-actions, .scale-box, .button-row, .section-head, .metric-row { display:flex; align-items:center; }
.brand-row { gap:12px; }
.brand-title { font-weight:850; letter-spacing:-.015em; }
.top-actions { gap:9px; }
.scale-box { gap:8px; padding:5px 6px 5px 11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.scale-box select { width:70px; padding:7px 8px; }
.layout { width:min(1580px,100%); margin:0 auto; padding:28px clamp(18px,3vw,42px) 70px; }
.hero-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:30px; }
.hero-card { min-height:158px; padding:19px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(19,27,42,.86),rgba(12,17,27,.78)); box-shadow:0 15px 48px rgba(0,0,0,.17); }
.hero-value { font-size:39px; font-weight:900; letter-spacing:-.055em; line-height:1; margin:16px 0 7px; }
.hero-unit { font-size:20px; color:var(--muted); margin-left:3px; }
.hero-label { color:var(--muted); font-size:12px; }
.metric-row { justify-content:space-between; gap:8px; margin-top:16px; color:var(--muted); font-size:11px; }
.metric-row b { color:#dce5f2; font-size:12px; }
.progress { height:4px; background:rgba(255,255,255,.06); margin-top:16px; border-radius:9px; overflow:hidden; }
.progress-fill { width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .4s ease; }
.health-good { color:var(--good); }
.health-warn { color:var(--warn); }
.health-bad { color:var(--danger); }
.section-block { margin-top:12px; }
.section-head { justify-content:space-between; gap:16px; margin-bottom:15px; }
.section-head.compact-head { margin-bottom:12px; }
.legend { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot.online { background:#7ca8ff; box-shadow:0 0 12px rgba(124,168,255,.7); }
.dot.joined { background:var(--good); box-shadow:0 0 12px rgba(117,224,182,.6); }
.dot.stale { background:#6e7888; }
.bot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.bot-card { position:relative; min-height:210px; padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(13,19,30,.77); transition:.18s ease; overflow:hidden; }
.bot-card::after { content:""; position:absolute; inset:auto -20% -55% 35%; height:110px; background:radial-gradient(circle,rgba(142,169,255,.12),transparent 68%); pointer-events:none; }
.bot-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-1px); }
.bot-card.joined { border-color:rgba(117,224,182,.20); }
.bot-card.stale { opacity:.82; }
.bot-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bot-name { font-size:16px; font-weight:860; }
.bot-meta { margin-top:3px; font-size:10px; color:var(--muted); }
.select-bot { accent-color:#8ea9ff; width:15px; height:15px; }
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; background:rgba(255,255,255,.05); color:#aab5c4; }
.status-pill.good { background:rgba(117,224,182,.09); color:#8be6c1; }
.status-pill.warn { background:rgba(255,204,120,.08); color:#ffd18b; }
.status-pill.bad { background:rgba(255,125,142,.09); color:#ff9baa; }
.hp-line { display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:11px; }
.hp-track { height:5px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; margin-top:6px; }
.hp-fill { height:100%; background:linear-gradient(90deg,#75e0b6,#a5e0a9); width:0; transition:width .3s; }
.bot-kv { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.bot-kv div { min-width:0; padding:7px 8px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(255,255,255,.018); }
.bot-kv span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.bot-kv b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; font-size:11px; font-weight:700; }
.bot-actions { display:flex; gap:7px; margin-top:13px; position:relative; z-index:2; }
.bot-actions button { flex:1; padding:7px 8px; font-size:10px; }
.observatory-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(320px,.7fr); gap:14px; margin-top:30px; }
.panel { border:1px solid var(--line); border-radius:var(--radius); background:rgba(12,18,28,.80); padding:18px; box-shadow:0 18px 55px rgba(0,0,0,.18); }
.pill { padding:6px 9px; border-radius:999px; background:rgba(142,169,255,.08); color:#aebeff; font-size:10px; font-weight:800; }
.brain-flow { display:grid; grid-template-columns:minmax(190px,1.1fr) 45px 190px 45px minmax(150px,.85fr); gap:10px; align-items:center; min-height:235px; padding:12px 4px 8px; }
.actor-nodes { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.actor-node { min-width:0; padding:8px; border:1px solid var(--line); border-radius:10px; background:#0b111b; text-align:center; font-size:9px; color:var(--muted); position:relative; }
.actor-node strong { display:block; color:#e9eff8; font-size:10px; overflow:hidden; text-overflow:ellipsis; }
.actor-node.live::before { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--good); top:6px; right:6px; box-shadow:0 0 10px var(--good); animation:pulse 1.5s infinite; }
.flow-arrow { height:120px; display:flex; flex-direction:column; justify-content:space-around; align-items:center; }
.flow-arrow span { width:20px; height:1px; background:linear-gradient(90deg,transparent,var(--accent)); position:relative; }
.flow-arrow span::after { content:""; position:absolute; right:-1px; top:-2px; width:5px; height:5px; border-radius:50%; background:#a4b5ff; animation:stream 1.6s infinite; }
.flow-arrow span:nth-child(2)::after { animation-delay:.5s; }.flow-arrow span:nth-child(3)::after { animation-delay:1s; }
.flow-arrow.reverse { transform:rotate(180deg); }
.brain-core { position:relative; width:166px; height:166px; margin:auto; display:grid; place-items:center; }
.core-ring { position:absolute; inset:14px; border:1px solid rgba(142,169,255,.22); border-radius:50%; }
.ring-a { animation:spin 9s linear infinite; border-top-color:#91aaff; border-right-color:transparent; }
.ring-b { inset:31px; animation:spin 6s linear infinite reverse; border-bottom-color:#80dec1; border-left-color:transparent; }
.core-center { width:76px; height:76px; display:grid; place-items:center; border-radius:24px; font-weight:950; letter-spacing:-.06em; font-size:25px; color:#071114; background:linear-gradient(145deg,#a4b9ff,#80dec0); box-shadow:0 0 50px rgba(117,197,209,.18); }
.core-label { position:absolute; bottom:-5px; color:var(--muted); font-size:9px; }
.checkpoint-card { padding:16px; border:1px solid var(--line); border-radius:13px; background:#0b111b; }
.checkpoint-card strong { display:block; font-size:14px; margin:6px 0; }
.chart-wrap { border-top:1px solid var(--line); padding-top:14px; }
.chart-head { display:flex; justify-content:space-between; margin-bottom:9px; font-size:11px; color:#dfe7f2; }
#learningChart { width:100%; height:160px; border-radius:10px; background:linear-gradient(180deg,rgba(142,169,255,.025),transparent); }
.inbox-strip { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.inbox-chip { padding:5px 7px; border-radius:8px; font-size:9px; background:rgba(255,255,255,.035); color:var(--muted); }
.inbox-chip b { color:#e5edf7; }
.feed-panel { min-height:520px; }
.event-feed { display:flex; flex-direction:column; max-height:585px; overflow:auto; padding-right:3px; }
.event-row { padding:10px 2px; border-bottom:1px solid rgba(255,255,255,.055); }
.event-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.event-tactic { font-size:11px; font-weight:820; color:#e7edf6; }
.event-time { font-size:9px; color:var(--muted); }
.event-detail { margin-top:4px; font-size:9px; color:var(--muted); line-height:1.45; }
.event-detail .plus { color:var(--good); }.event-detail .minus { color:var(--danger); }
.empty { padding:30px 0; text-align:center; color:var(--muted); font-size:12px; }
.drawer-backdrop { position:fixed; inset:0; z-index:49; background:rgba(0,0,0,.48); backdrop-filter:blur(3px); }
.drawer { position:fixed; z-index:50; top:0; right:0; bottom:0; width:min(620px,100%); border-left:1px solid var(--line2); background:rgba(9,13,21,.98); box-shadow:-35px 0 80px rgba(0,0,0,.35); }
.drawer-head { min-height:88px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.icon-btn { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); color:#dce4ef; background:#111827; font-size:20px; }
.drawer-scroll { height:calc(100% - 88px); overflow:auto; padding:4px 20px 40px; }
.control-section { padding:20px 0; border-bottom:1px solid var(--line); }
.button-row { gap:8px; flex-wrap:wrap; }
.inline-form { display:flex; gap:8px; }
.inline-form input { flex:1; min-width:0; }
.inline-form .btn { flex:0 0 auto; }
.console-toolbar { width:180px; margin-bottom:8px; }
.quick-commands { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.quick-commands button { border:1px solid var(--line); background:transparent; color:#9facbf; padding:5px 8px; border-radius:8px; font-size:9px; }
.kv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.kv { padding:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); min-width:0; }
.kv span { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.kv b { display:block; font-size:11px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logs { margin:12px 0 0; max-height:360px; overflow:auto; white-space:pre-wrap; word-break:break-word; padding:12px; border-radius:11px; background:#05080d; border:1px solid var(--line); color:#aeb8c7; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.toast { position:fixed; z-index:80; left:50%; bottom:26px; transform:translateX(-50%); max-width:min(520px,90vw); padding:11px 15px; border:1px solid var(--line2); border-radius:12px; background:#151e2c; color:#eaf0f8; box-shadow:var(--shadow); font-size:12px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { opacity:.35; transform:scale(.75); } }
@keyframes stream { from { transform:translateX(-18px); opacity:0; } 30%{opacity:1} to { transform:translateX(0); opacity:0; } }
@media (max-width:1200px) { .hero-grid{grid-template-columns:repeat(2,1fr)} .bot-grid{grid-template-columns:repeat(3,1fr)} .observatory-grid{grid-template-columns:1fr} .brain-flow{grid-template-columns:1fr 40px 180px 40px 1fr} }
@media (max-width:820px) { .topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;flex-wrap:wrap}.bot-grid{grid-template-columns:repeat(2,1fr)} .brain-flow{grid-template-columns:1fr; gap:4px}.flow-arrow{height:30px; transform:rotate(90deg)}.flow-arrow.reverse{transform:rotate(270deg)} .hero-grid{grid-template-columns:1fr 1fr}.kv-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px) { .layout{padding-left:12px;padding-right:12px}.hero-grid,.bot-grid{grid-template-columns:1fr}.top-actions{gap:6px}.scale-box{width:100%}.scale-box .btn{margin-left:auto}.inline-form{flex-direction:column}.inline-form .btn{width:100%}.kv-grid{grid-template-columns:1fr 1fr}.login-card{padding:26px} }