:root{ --bg:#0B1A0E; --bg2:#0f2014; --gold:#C8A428; --cream:#F0E4C0; --muted:#8A7A58; --line:rgba(200,164,40,0.20); --ok:#3FB27F; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--muted); font-family:'Jost',sans-serif; font-weight:300; }
body{ display:flex; flex-direction:column; min-height:100vh; }
#topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); }
.brand{ color:var(--cream); font-family:'Cormorant Garamond',serif; font-size:20px; letter-spacing:3px; }
.brand .mark{ color:var(--gold); }
.status{ display:flex; align-items:center; gap:8px; font-size:12px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.dot.ok{ background:var(--ok); } .dot.fail{ background:#c0504a; }
.gear{ background:none; border:1px solid var(--line); color:var(--gold); border-radius:8px; padding:4px 10px; cursor:pointer; font-size:14px; }
#layout{ display:flex; flex:1; min-height:0; }
#rail{ width:172px; border-right:1px solid var(--line); padding:12px 10px; }
.rail-label,.canvas-label,.dock-label{ font-size:10px; letter-spacing:2px; color:#5f6b55; margin:4px 6px 10px; }
.rail-item{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; font-size:14px; color:var(--muted); cursor:pointer; text-decoration:none; }
.rail-item .ri{ color:var(--gold); font-size:12px; }
.rail-item.active{ background:rgba(200,164,40,0.10); color:var(--cream); }
.rail-item.dim{ opacity:0.5; }
.rail-item .ct{ margin-left:auto; font-size:11px; color:#5f6b55; }
#canvas{ flex:1; padding:18px 22px; overflow:auto; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.card{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.card-l{ font-size:12px; color:var(--muted); }
.card-v{ font-size:28px; color:var(--cream); font-family:'Cormorant Garamond',serif; margin-top:4px; }
.card-v.gold{ color:var(--gold); }
.muted{ color:var(--muted); font-size:13px; }
#dock{ border-top:1px solid var(--line); background:rgba(0,0,0,0.20); padding:12px 18px; }
#transcript{ max-height:200px; overflow:auto; margin-bottom:10px; }
.msg{ font-size:13px; line-height:1.6; padding:3px 0; }
.msg .who-l{ color:var(--gold); }
.msg.producer .who-l{ color:var(--cream); }
.msg.sys{ color:#6b7560; font-style:italic; }
.dock-input{ display:flex; align-items:center; gap:10px; }
.who{ font-size:12px; color:var(--muted); white-space:nowrap; }
.who select{ background:var(--bg2); color:var(--cream); border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-family:inherit; }
#ask{ flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:9px; padding:10px 14px; color:var(--cream); font-family:inherit; font-size:14px; }
#ask:focus{ outline:none; border-color:var(--gold); }
#send{ background:var(--gold); color:var(--bg); border:none; border-radius:9px; padding:9px 18px; font-family:inherit; font-size:14px; cursor:pointer; }
@media(max-width:640px){ #rail{ width:120px; } .brand{ font-size:16px; letter-spacing:2px; } }