:root{
  --bg:#0b1220; --panel:#0e1b2e; --line:#1d3559;
  --muted:#9fbad3; --text:#eaf6ff;
  --acc:#47d6ff; --acc2:#41ff9a; --good:#4cffb1; --bad:#ff6e7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 900px at 70% -10%, #11325a 0%, rgba(11,17,32,0) 55%),
    radial-gradient(900px 800px at 20% -20%, #0f2850 0%, rgba(11,17,32,0) 45%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* bg */
.bg-grid{position:fixed; inset:0; background-image:linear-gradient(#152b48 1px,transparent 1px), linear-gradient(90deg,#152b48 1px,transparent 1px); background-size:60px 60px; opacity:.18; pointer-events:none; transform:perspective(700px) rotateX(55deg) translateY(-35%); transform-origin:top; animation:gridDrift 26s linear infinite}
@keyframes gridDrift{from{transform:perspective(700px) rotateX(55deg) translateY(-35%) translateX(0)}to{transform:perspective(700px) rotateX(55deg) translateY(-35%) translateX(-60px)}}
#stars{position:fixed; inset:0; z-index:-1; mix-blend-mode:screen; opacity:.6}

/* header */
.topbar{position:sticky; top:0; z-index:30; backdrop-filter: blur(10px); background:linear-gradient(180deg,rgba(20,38,64,.55),rgba(20,38,64,.1)); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:12px 18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo{width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(71,214,255,.4))}
.brand-txt h1{font-size:18px; margin:0 0 2px 0; font-weight:800; letter-spacing:.6px}
.brand-txt p{margin:0; font-size:12px; color:var(--muted)}
.top-actions{display:flex; align-items:center; gap:10px}

.status{color:var(--muted); font-family:"Share Tech Mono", monospace}
.status .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--acc2); box-shadow:0 0 10px var(--acc2); margin-right:6px; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

.btn{border:1px solid var(--acc); background:transparent; color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:.2s ease; box-shadow:0 0 18px rgba(71,214,255,.2)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{border-color:#274d76; color:var(--muted)}

.container{padding:18px; max-width:1280px; margin:0 auto}
.panel{border:1px solid var(--line); background:linear-gradient(180deg,rgba(10,25,45,.8),rgba(8,18,34,.65)); border-radius:16px; overflow:hidden; margin-bottom:18px; box-shadow:0 10px 40px rgba(0,0,0,.35)}
.panel-title{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--muted); letter-spacing:.5px; background:rgba(12,26,44,.6)}

/* graph */
.graph-wrap{position:relative; padding:10px}
.legend{position:absolute; right:12px; bottom:12px; display:flex; gap:8px}
.chip{border:1px solid #2a4e7a; background:#0b1a2c; color:var(--muted); padding:6px 10px; border-radius:999px; font-size:12px}

.node{fill:#10233d; stroke:#2a4e7a; stroke-width:1.4; filter:url(#glow); transition:transform .2s ease}
.node.poly{fill:#0f2a3f}
.node-txt{fill:#d7eeff; font-weight:700; text-anchor:middle}
.agent:hover .node{transform:translateY(-2px)}
.flow{stroke:url(#grad); stroke-width:3; fill:none; filter:url(#glow)}
.flow.dashed{stroke-dasharray:10 12; opacity:.75}
.label{fill:#9fc9ff; font-size:12px}
.mover{fill:#fff; filter:url(#glow)}
@keyframes mover{from{offset-distance:0%}to{offset-distance:100%}}
.mover{offset-path:path("M0,0 L100,0"); animation:mover 3.8s linear infinite; animation-delay:var(--delay,0s)}

/* grid/cards */
.grid{display:grid; gap:14px}
.g-3{grid-template-columns: 2fr 2fr 1.4fr}
.card{border:1px solid var(--line); background:linear-gradient(180deg, rgba(17,39,66,.65), rgba(10,24,42,.6)); border-radius:14px; padding:12px}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{border:1px solid var(--line); border-radius:12px; background:rgba(9,24,40,.6); padding:12px}
.kpi .k{color:var(--muted); font-size:12px}
.kpi .v{font-size:28px; margin:6px 0}
.kpi .v.good{color:var(--good)} .kpi .v.bad{color:var(--bad)}
.kpi .s{color:var(--muted); font-size:12px}

/* log & chat */
.log .title,.chat .title{color:var(--muted); margin-bottom:8px}
.stream{height:240px; overflow:auto; font-family:"Share Tech Mono", monospace}
.entry{padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.06)}
.entry .t{color:#a8d7ff}

.chatlog{height:240px; overflow:auto}
.bubble{border:1px solid var(--line); background:rgba(10,28,48,.6); border-radius:12px; padding:8px; margin:6px 0}
.input{display:flex; gap:8px; margin-top:8px}
.input input{flex:1; background:#0a1c2f; border:1px solid var(--line); color:var(--text); padding:10px 12px; border-radius:10px}

/* markets */
.market-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:12px}
.market{border:1px solid var(--line); border-radius:12px; padding:10px; position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(24,80,140,.25), rgba(12,22,40,.7)); transition:transform .18s ease, box-shadow .18s ease}
.market.green{background:linear-gradient(180deg, rgba(24,120,70,.25), rgba(16,40,28,.65))}
.market.red{background:linear-gradient(180deg, rgba(140,30,50,.25), rgba(40,16,24,.65))}
.market.big{grid-column:span 3; grid-row:span 2}
.market:hover{transform:translateY(-2px); box-shadow:0 0 22px rgba(71,214,255,.18)}
.market .name{color:var(--muted); font-size:12px}
.market .price{font-size:26px; margin:6px 0}
.market .delta{font-size:12px}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)} .delta.flat{color:var(--muted)}
.market .view{position:absolute; right:10px; bottom:10px; color:#a8dcff; font-size:12px; text-decoration:none}

/* feed */
.feed{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.card.op{border:1px dashed #2b4d77; padding:12px; border-radius:12px; background:rgba(8,22,38,.6)}
.op-title{font-weight:700}
.op-meta{display:flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; margin-top:4px}
.op-body{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.badge{border:1px solid #3ef4a5; color:#3ef4a5; padding:4px 10px; border-radius:999px}
.op-more{display:inline-block; margin-top:8px; color:#a8dcff; font-size:12px; text-decoration:none}

/* footer */
.foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; border-top:1px solid var(--line); color:var(--muted)}

/* responsive */
@media (max-width:1200px){
  .g-3{grid-template-columns:1fr}
  .market-grid{grid-template-columns:repeat(3,1fr)}
  .feed{grid-template-columns:1fr}
}