:root{--blue:#0b3d91;--blue-d:#082b66;--bg:#f4f6fb;--card:#fff;--ink:#14213d;--mut:#5b6785;--line:#dde3f0;--ok:#0f7b4b;--warn:#a15c00;--spons:#7a4b00}
@media (prefers-color-scheme:dark){:root{--bg:#0e1424;--card:#172038;--ink:#e8ecf7;--mut:#9aa6c4;--line:#2a3558;--blue:#4c82e6;--blue-d:#6c9aef}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.brand{display:flex;gap:.6rem;align-items:center}.brand small{display:block;color:var(--mut);font-size:.75rem}
.mark{background:var(--blue);color:#fff;border-radius:10px;padding:.35rem .5rem;font-weight:700}
.btn{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:.7rem 1.1rem;font:inherit;cursor:pointer}
.btn:hover{background:var(--blue-d)}.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--line)}
.link{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;text-decoration:none;padding:.3rem}
input,textarea{width:100%;font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.disclaimer,.hint{color:var(--mut);font-size:.78rem}
/* auth */
.auth{display:grid;place-items:center;min-height:100vh;padding:16px}
.auth-card{background:var(--card);padding:1.6rem;border-radius:16px;width:100%;max-width:400px;border:1px solid var(--line)}
.auth-card label{display:block;margin:.8rem 0;font-size:.85rem;color:var(--mut)}.auth-card label input{margin-top:.25rem}
.auth-card .btn{width:100%;margin-top:.5rem}.alert{background:#fde8e8;color:#8a1c1c;padding:.6rem .8rem;border-radius:8px}.alt{text-align:center}
/* app */
.app{display:flex;flex-direction:column;height:100dvh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 16px;background:var(--card);border-bottom:1px solid var(--line);gap:.5rem;flex-wrap:wrap}
.topbar-right{display:flex;align-items:center;gap:.4rem}
.pill{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.15rem .6rem;font-size:.75rem;color:var(--mut)}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto;padding:16px}
#onboarding h2{margin:.2rem 0}#onboarding p{color:var(--mut);margin:0 0 1rem}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.chip{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem;cursor:pointer;color:var(--ink);font:inherit}
.chip:hover{border-color:var(--blue)}.chip strong{display:block}.chip span{font-size:.78rem;color:var(--mut)}
.log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;padding-bottom:.5rem}
.msg{max-width:88%;padding:.7rem .9rem;border-radius:14px;background:var(--card);border:1px solid var(--line);white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-color:var(--blue)}
.msg.err{border-color:#d97a7a}.msg .meta{margin-top:.5rem;font-size:.78rem;color:var(--mut);white-space:normal}
.msg .src{display:block}.tag{display:inline-block;font-size:.7rem;border-radius:6px;padding:0 .4rem;margin-right:.3rem;background:var(--bg);border:1px solid var(--line)}
.msg .actions{margin-top:.5rem}.msg .actions button{margin-right:.4rem;padding:.35rem .7rem;font-size:.85rem}
.composer{display:flex;gap:.5rem;padding-top:.4rem}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:16px;z-index:10}
.modal[hidden]{display:none}.modal-box{background:var(--card);border-radius:16px;padding:1.2rem;width:100%;max-width:520px;max-height:90vh;overflow:auto}
.pro{display:flex;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.pro .info{flex:1}.pro small{color:var(--mut);display:block}.spons{color:var(--spons);font-weight:600}
.stack{display:block;margin:.8rem 0 .2rem}.row{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.8rem}
[hidden]{display:none!important}