:root { --bg:#0d1526; --panel:#141f36; --line:#243352; --text:#e8edf7; --muted:#8fa0bf; --accent:#4f8ef7; }
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--text); font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; height:100vh; }
.hidden { display:none !important; }
.center { display:flex; align-items:center; justify-content:center; height:100vh; }
.center-text { text-align:center; padding-top:20vh; }
.accent { color:var(--accent); }
.muted { color:var(--muted); }
.small { font-size:13px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; width:min(420px,92vw); display:flex; flex-direction:column; gap:12px; }
.card.wide { width:min(680px,95vw); max-height:90vh; overflow:auto; }
input, textarea { background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:10px; font:inherit; width:100%; }
button { background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:10px 14px; cursor:pointer; font:inherit; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:#7a2030; border-color:#7a2030; }
.small-btn { padding:4px 10px; font-size:13px; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; }
.layout { display:flex; height:calc(100vh - 55px); }
aside { width:240px; border-right:1px solid var(--line); padding:12px; overflow:auto; }
.side-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.proj { padding:8px 10px; border-radius:8px; cursor:pointer; }
.proj:hover { background:var(--panel); }
.proj.active { background:var(--accent); color:#fff; }
main { flex:1; display:flex; flex-direction:column; }
#chat-wrap { display:flex; flex-direction:column; height:100%; }
#chat-head { padding:10px 16px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; }
#messages { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:72ch; padding:10px 14px; border-radius:12px; white-space:pre-wrap; }
.msg.user { align-self:flex-end; background:var(--accent); color:#fff; }
.msg.assistant { align-self:flex-start; background:var(--panel); border:1px solid var(--line); }
#composer { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
#composer textarea { resize:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10; }
.user-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.user-row span:first-child { flex:1; }
.status.approved { color:#5dd39e; } .status.pending { color:#f0c05a; } .status.blocked { color:#e06070; }
.row { display:flex; gap:8px; align-items:center; }
.row input[type=checkbox] { width:auto; }
.row-end { display:flex; gap:8px; justify-content:flex-end; }

.brand-logo { width: 84px; height: 84px; display: block; margin: 0 auto 10px; }
.brand-mini { width: 22px; height: 22px; vertical-align: -4px; margin-right: 6px; }
#meter { margin-right: 12px; }
.tool-line { padding: 2px 0; opacity: .75; font-family: monospace; }