:root { color-scheme: light; --ink:#0f172a; --panel:#fff; --muted:#64748b; --line:#dbe4f0; --accent:#4f46e5; --accent2:#22d3ee; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--ink); background:linear-gradient(180deg,#eef2ff,#f8fafc 42%); }
.top, footer { max-width:1180px; margin:0 auto; padding:22px; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.brand { display:flex; align-items:center; gap:14px; } .logo{border-radius:14px} h1{margin:0;font-size:1.6rem}.tag{margin:.2rem 0 0;color:var(--muted)} .family{font-weight:700}.privacy{background:#ecfeff;color:#155e75;border:1px solid #bae6fd;border-radius:999px;padding:.55rem .8rem;font-weight:700}
main{max-width:1180px;margin:0 auto;padding:0 22px 22px}.drop{border:2px dashed #a5b4fc;border-radius:30px;background:rgba(255,255,255,.8);min-height:360px;display:grid;place-items:center;text-align:center;box-shadow:0 20px 60px #312e8120}.drop.over{background:#eef2ff}.drop-icon{font-size:4rem}.drop-title{font-size:1.45rem;font-weight:800}.drop-sub{color:var(--muted);max-width:720px}.examples{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:.65rem .9rem;font-weight:750;cursor:pointer}button:hover{border-color:#818cf8}.primary{background:linear-gradient(135deg,var(--accent),#0f172a);color:#fff;border:0}.ghost{background:transparent}.wide{width:100%}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}.viewer,.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 10px 30px #0f172a10}.toolbar,.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.status[data-kind=ok]{color:#15803d}.status[data-kind=warn]{color:#b45309}.status[data-kind=busy]{color:#4338ca}#waveform{width:100%;height:220px;border-radius:16px;background:#0f172a;display:block}audio{width:100%;margin:12px 0}.transcript{line-height:2.25;font-size:1.05rem;user-select:text}.word{margin:0 2px;padding:.18rem .28rem;border:0;background:transparent;border-radius:7px;font:inherit;font-weight:600}.word[data-cat]{box-shadow:inset 0 -3px var(--c);background:color-mix(in srgb, var(--c) 12%, white)}.word.on{background:var(--c);color:#fff}.side{display:flex;flex-direction:column;gap:14px}.detections{list-style:none;margin:0;padding:0;display:grid;gap:8px}.detections li label{display:grid;grid-template-columns:auto 12px 1fr;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:9px}.dot{width:10px;height:10px;border-radius:999px}.name{font-weight:800}.preview{grid-column:3;color:var(--muted);font-family:ui-monospace,Consolas,monospace}.styles,.field,.check{display:grid;gap:8px;margin:.5rem 0}.field input{padding:.6rem;border:1px solid var(--line);border-radius:10px}.muted{color:var(--muted)}footer{display:block;text-align:center}.engine[data-kind=ok]{color:#15803d;font-weight:800}.engine[data-kind=warn]{color:#b45309;font-weight:800}
@media (max-width:900px){.workspace{grid-template-columns:1fr}.top{display:block}.privacy{display:inline-block}.toolbar{align-items:flex-start;flex-direction:column}}