:root { --bg:#0e1117; --fg:#e6e6e6; --accent:#4f8ef7; --card:#1a1f29; --muted:#8a93a5; }
* { box-sizing: border-box; }
/* .overlay/main set display:flex, which outranks the UA's [hidden]{display:none}
   — without this guard the login overlay never visually hides (2026-06-12). */
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.5 system-ui, "Segoe UI", sans-serif; }
.overlay { position:fixed; inset:0; display:flex; align-items:center;
           justify-content:center; background:var(--bg); z-index:10; }
.card { background:var(--card); padding:2rem 2.5rem; border-radius:12px;
        text-align:center; max-width:380px; }
.card input { width:100%; padding:.6rem; margin:.8rem 0 .5rem; border-radius:8px;
              border:1px solid #333; background:#10141c; color:var(--fg); }
button { padding:.6rem 1.2rem; border:0; border-radius:8px;
         background:var(--accent); color:#fff; cursor:pointer; font-size:15px; }
.err { color:#f66; min-height:1.2em; }
main { max-width:860px; margin:0 auto; padding:0 1rem 1rem;
       display:flex; flex-direction:column; height:100vh; }
header { padding:.8rem 0; display:flex; gap:.8rem; align-items:baseline; }
.logo { font-weight:700; font-size:1.3rem; color:var(--accent); }
.tagline, footer { color:var(--muted); font-size:.85rem; }
#chat { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.8rem; }
.bubble { padding:.7rem 1rem; border-radius:12px; max-width:85%;
          white-space:pre-wrap; word-wrap:break-word; }
.user { background:var(--accent); color:#fff; align-self:flex-end; }
.bot  { background:var(--card); align-self:flex-start; }
.tool { color:var(--muted); font-size:.8rem; align-self:flex-start; }
.typing { display:flex; gap:5px; padding:.9rem 1rem; background:var(--card);
          border-radius:12px; align-self:flex-start; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--muted);
               animation: typing-bounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay:.15s; }
.typing span:nth-child(3) { animation-delay:.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform:translateY(0); opacity:.4; }
  30% { transform:translateY(-5px); opacity:1; }
}
.result { background:var(--card); border:1px solid #2a3040; border-radius:12px;
          padding:1rem; align-self:stretch; }
.result .exp { color:#f5a623; font-size:.8rem; font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
         gap:.5rem; margin-top:.8rem; }
.stat { background:#10141c; padding:.5rem .7rem; border-radius:8px; }
.stat .k { color:var(--muted); font-size:.75rem; }
.stat .v { font-size:1.05rem; font-weight:600; }
#composer { display:flex; gap:.5rem; padding:.8rem 0 .4rem; }
#composer input { flex:1; padding:.7rem 1rem; border-radius:10px;
                  border:1px solid #333; background:var(--card); color:var(--fg); }
#mic { background:var(--card); border:1px solid #333; padding:.5rem .7rem; }
#mic.rec { background:#f5616f; animation: mic-pulse 1s infinite; }
#voice-lang { background:var(--card); color:var(--fg); border:1px solid #333;
              border-radius:8px; padding:0 .4rem; }
@keyframes mic-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.csv-dl { display:inline-block; margin-top:.6rem; color:var(--accent);
          font-size:.85rem; text-decoration:none; cursor:pointer; }
.csv-dl:hover { text-decoration:underline; }
footer { text-align:center; padding:.3rem 0; }