:root{--bg:#0a0d12;--panel:#0e1422;--text:#e7edf6;--ring:#60a5fa;--primary:#88c2ff;--primary2:#8b5cf6;--radius:16px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.gc-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);background:
radial-gradient(900px 400px at 80% -10%, rgba(139,92,246,.18), transparent 60%),
radial-gradient(600px 400px at 0% 120%, rgba(34,211,238,.14), transparent 60%),
#0b111c;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}.logo{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--primary),var(--primary2))}
.status{display:flex;align-items:center;gap:10px}.dot{width:8px;height:8px;border-radius:999px;display:inline-block}.dot.idle{background:#64748b}.dot.run{background:#22d3ee}.dot.err{background:#ef4444}
.primary,.ghost{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);padding:8px 12px;border-radius:10px;font-weight:600}.primary{background:linear-gradient(180deg,rgba(125,211,252,.18),rgba(139,92,246,.18))}.ghost{background:transparent}
.gc-main{display:grid;gap:16px;padding:14px;grid-template-columns:1.5fr 1fr}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card-h{display:flex;justify-content:space-between;align-items:center;padding:12px 12px;border-bottom:1px solid rgba(255,255,255,.06)}.card-b{padding:12px}
.seg{display:flex;gap:6px;align-items:center}.segbtn{border:0;background:rgba(255,255,255,.06);color:var(--text);padding:6px 10px;border-radius:8px;font-weight:700}.segbtn.active{background:rgba(255,255,255,.16)}
.preview iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#0b0f1a}
.chatlog{padding:12px;display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow:auto}
.msg{display:flex;gap:10px}.avatar{width:28px;height:28px;display:grid;place-items:center;background:rgba(255,255,255,.08);border-radius:8px}
.bubble{padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.msg.user .bubble{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.35)}
.composer{display:flex;gap:10px;align-items:flex-end;padding:12px;border-top:1px solid rgba(255,255,255,.06)}
.composer textarea{flex:1;min-height:40px;max-height:160px;resize:none;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(7,11,20,.6);color:var(--text)}
.composer textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(96,165,250,.15)}
.pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:45vh;overflow:auto}.pre.small{max-height:30vh}
.diag{position:fixed;inset:0;background:rgba(2,6,12,.75);backdrop-filter:blur(8px);display:grid;place-items:center}.diag.hidden{display:none}
.diag-inner{width:min(920px,92vw);background:#0e1422;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.diag-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.diag-actions{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}.diag-last{padding:10px 12px}.player-msg{margin-top:8px;font-size:12px;color:#ef4444}
@media (max-width:980px){.gc-main{grid-template-columns:1fr}.preview iframe{aspect-ratio:9/16}}