:root { color-scheme: dark; --bg:#06090b; --panel:#0d1518; --line:rgba(196,229,223,.2); --text:#e8f0ed; --muted:#95aaa6; --signal:#8ad7c1; --amber:#d8b46a; --danger:#e0876a; }
* { box-sizing: border-box; }
html,body { margin:0; min-height:100%; }
body { font-family:"Segoe UI",system-ui,sans-serif; color:var(--text); background:radial-gradient(circle at 50% 0,rgba(50,89,86,.32),transparent 40rem),var(--bg); }
button { font:inherit; cursor:pointer; border:1px solid rgba(138,215,193,.5); background:#102326; color:var(--text); padding:.65rem .9rem; }
button:disabled { opacity:.42; cursor:not-allowed; }
.shell { max-width:1240px; margin:auto; padding:clamp(1rem,3vw,2rem); display:grid; gap:1.4rem; }
.hero,.control-bar,.history-panel { border:1px solid var(--line); background:rgba(13,21,24,.9); }
.hero { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; padding:1.4rem; }
.eyebrow { margin:0 0 .35rem; color:var(--amber); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.new-badge { margin-left:.4rem; padding:.15rem .35rem; background:var(--amber); color:#151108; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:.35rem; font-size:clamp(1.8rem,4vw,3rem); }
h2 { margin-bottom:0; }
h3 { margin:0; font-size:1.3rem; }
.subtitle,.section-heading>p { margin:0; color:var(--muted); max-width:48rem; }
.link-state { display:flex; gap:.65rem; align-items:center; min-width:150px; }
.link-state small,.control-bar small,.posture small { display:block; color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; }
.link-state strong,.control-bar strong,.posture strong { display:block; color:var(--signal); margin-top:.2rem; }
.live-dot { width:.65rem; height:.65rem; border-radius:50%; background:var(--muted); }
.live-dot.is-live { background:var(--signal); box-shadow:0 0 14px rgba(138,215,193,.8); }
.control-bar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.5rem; padding:1rem 1.25rem; }
.control-bar button { margin-left:auto; }
#fleetState.is-paused { color:var(--amber); }
.feedback { margin:0; padding:.7rem 1rem; border:1px solid var(--signal); background:rgba(138,215,193,.08); }
.feedback.is-error { border-color:var(--danger); color:var(--danger); }
.section-heading { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:.8rem; }
.section-heading>p { font-size:.82rem; }
.captain-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.captain-card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(19,37,39,.94),rgba(9,14,16,.95)); padding:1rem; min-width:0; }
.captain-card.is-disabled { opacity:.6; }
.captain-card header { display:flex; justify-content:space-between; gap:.8rem; }
.runtime-status,.outcome { border:1px solid var(--line); padding:.25rem .4rem; height:max-content; color:var(--signal); font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }
.status-error,.status-fallback,.outcome.rejected,.rejected { color:var(--danger); }
.status-disabled { color:var(--muted); }
.posture { margin:1rem 0; padding:.7rem; border-left:3px solid var(--amber); background:rgba(216,180,106,.08); }
.posture strong { color:var(--amber); }
dl { display:grid; gap:.75rem; margin:0; }
dt { color:var(--muted); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; }
dd { margin:.2rem 0 0; line-height:1.4; font-size:.86rem; overflow-wrap:anywhere; }
.accepted,.outcome.accepted { color:var(--signal); }
.captain-card footer { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); }
.captain-card footer span { color:var(--muted); font-size:.7rem; }
.captain-card footer button { font-size:.76rem; padding:.45rem .6rem; }
.history-panel { padding:1rem; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:.8rem; }
th,td { padding:.65rem; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; }
@media(max-width:900px){ .captain-grid{grid-template-columns:1fr;} }
@media(max-width:600px){ .hero,.section-heading{display:grid;} .control-bar button{margin-left:0;width:100%;} }

.memory-panel { border:1px solid var(--line); background:rgba(13,21,24,.9); padding:1rem 1.25rem; }
.memory-grid { margin-top:0; }
.memory-unavailable { color:var(--muted); font-size:.85rem; }
.trait-bars { display:grid; gap:.4rem; margin:.9rem 0; }
.trait-bar { display:grid; grid-template-columns:6.5rem 1fr 2.4rem; gap:.5rem; align-items:center; font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.trait-bar-track { height:5px; background:rgba(196,229,223,.15); position:relative; border-radius:3px; overflow:hidden; }
.trait-bar-fill { position:absolute; inset:0 auto 0 0; background:var(--signal); }
.fleet-narrative { border-top:1px solid var(--line); margin-top:1.2rem; padding-top:1rem; }
.narrative-pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.6rem 0 1.1rem; }
.narrative-pair > div { border-left:3px solid var(--signal); padding-left:.7rem; }
.narrative-pair > div.mythology { border-left-color:var(--amber); }
.narrative-pair small { display:block; color:var(--muted); font-size:.62rem; letter-spacing:.1em; margin-bottom:.25rem; }
.narrative-pair p { margin:0; font-size:.84rem; line-height:1.45; }
@media(max-width:700px){ .narrative-pair{grid-template-columns:1fr;} }