:root { color-scheme: dark; --bg:#070b10; --card:#0e151d; --line:#23303d; --text:#eef4f8; --muted:#8ea0af; --accent:#60d8ff; --glow:rgba(96,216,255,.18); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:radial-gradient(circle at 50% -20%,#153247 0,transparent 42%),var(--bg); color:var(--text); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(920px,100%); min-height:100vh; margin:auto; padding:22px clamp(16px,4vw,42px) 32px; }
header { display:flex; justify-content:space-between; align-items:center; padding-bottom:32px; }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:.16em; }
.brand div { display:grid; gap:3px; }.brand small { color:var(--muted); letter-spacing:.04em; font-size:.68rem; }
.orb { width:27px; height:27px; border:1px solid var(--accent); border-radius:50%; box-shadow:0 0 22px var(--accent),inset 0 0 12px var(--glow); position:relative; }
.orb:after { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.ghost,.tabs button { border:1px solid var(--line); background:rgba(14,21,29,.7); color:var(--muted); border-radius:10px; padding:9px 14px; }
.hero { padding:22px 0 28px; }.eyebrow { color:var(--accent)!important; letter-spacing:.2em; font-size:.72rem; font-weight:700; }
h1 { font-size:clamp(2rem,7vw,4.6rem); line-height:1; letter-spacing:-.055em; margin:.25em 0; max-width:720px; }
.hero p { color:var(--muted); max-width:650px; line-height:1.6; }
.tabs { display:flex; gap:8px; border-bottom:1px solid var(--line); padding-bottom:12px; }.tabs button.active { color:var(--text); border-color:#416176; box-shadow:0 0 20px var(--glow); }
.panel { display:none; padding-top:22px; }.panel.active { display:block; }
.messages { min-height:320px; max-height:48vh; overflow:auto; display:flex; flex-direction:column; gap:14px; padding:4px 2px 20px; }
.message { display:flex; gap:12px; max-width:78%; }.message span { flex:0 0 30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent); }
.message p { margin:0; padding:12px 15px; background:var(--card); border:1px solid var(--line); border-radius:4px 16px 16px 16px; line-height:1.55; white-space:pre-wrap; }
.message.user { align-self:flex-end; flex-direction:row-reverse; }.message.user p { background:#132735; border-radius:16px 4px 16px 16px; }
.composer { display:flex; align-items:end; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:9px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.composer textarea { flex:1; resize:none; max-height:150px; border:0; outline:0; background:transparent; color:var(--text); padding:10px; }
.composer button,.task-form button,#saveToken { border:0; background:var(--accent); color:#031017; font-weight:800; border-radius:10px; padding:11px 16px; }
.task-form { display:flex; gap:10px; }.task-form input,dialog input { flex:1; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:10px; padding:12px; }
.task-list { display:grid; gap:10px; margin-top:18px; }.task { display:flex; justify-content:space-between; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:12px; }.task small { color:var(--muted); }
.status-grid { grid-template-columns:repeat(2,1fr); gap:12px; }.status-grid.active { display:grid; }.status-grid article { padding:20px; background:var(--card); border:1px solid var(--line); border-radius:14px; display:grid; gap:8px; }.status-grid small { color:var(--muted); letter-spacing:.12em; }.status-grid strong { color:var(--accent); }
dialog { width:min(420px,calc(100% - 28px)); background:#0d151d; color:var(--text); border:1px solid var(--line); border-radius:16px; padding:24px; }dialog::backdrop { background:rgba(0,0,0,.7); }.close { float:right; border:0; color:var(--muted); background:none; font-size:1.6rem; }dialog p { color:var(--muted); }dialog input { width:100%; margin:10px 0 14px; }
@media(max-width:600px){ .shell{padding-top:16px}.brand small{display:none}.hero{padding-top:8px}.message{max-width:92%}.status-grid.active{grid-template-columns:1fr}.messages{min-height:300px}.task-form{align-items:stretch;flex-direction:column} }