:root { --ink:#101522; --muted:#657086; --line:#e4e8f0; --paper:#fff; --wash:#f6f7fb; --accent:#6d4aff; --mint:#00a882; }
* { box-sizing:border-box; }
body { margin:0; background:var(--wash); color:var(--ink); font-family:ui-rounded, "SF Pro Rounded", "Noto Sans Thai", system-ui, sans-serif; }
.shell { max-width:1120px; margin:auto; padding:0 32px 60px; }
nav { height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-weight:800; font-size:18px; text-decoration:none; letter-spacing:-.4px; }.brand span { display:inline-grid; place-items:center; width:28px; height:28px; color:#fff; background:var(--accent); border-radius:9px; margin-right:7px; }.brand + p { color:var(--muted); font-size:13px; }
.hero { padding:70px 0 52px; max-width:810px; }.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:1.4px; margin:0 0 11px; }.hero h1 { font-size:clamp(40px,6vw,72px); line-height:1.02; letter-spacing:-3.5px; margin:0; }.hero h1 em { color:var(--accent); font-style:normal; }.lead { max-width:650px; color:var(--muted); font-size:18px; line-height:1.7; margin-top:25px; }
.workspace { background:var(--paper); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 16px 40px #11182a0a; }.upload-card { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-bottom:1px solid var(--line); transition:.2s; padding:35px; }.upload-card.dragging { background:#f4f1ff; border-color:var(--accent); }.upload-icon { display:grid; place-items:center; border-radius:50%; height:48px; width:48px; font-size:29px; line-height:1; background:#ede9ff; color:var(--accent); }.upload-card h2 { margin:14px 0 5px; font-size:21px; }.upload-card p { color:var(--muted); margin:0 0 18px; }
.controls { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:16px; padding:22px; } label { color:var(--muted); font-size:13px; font-weight:700; display:grid; gap:6px; } select { appearance:none; border:1px solid var(--line); padding:11px 14px; color:var(--ink); border-radius:10px; background:#fff; font:inherit; }.button { border:0; border-radius:10px; padding:12px 16px; font:700 14px inherit; cursor:pointer; transition:transform .15s,opacity .15s; }.button:hover { transform:translateY(-1px); }.button:disabled { opacity:.42; cursor:not-allowed; transform:none; }.primary { color:#fff; background:var(--accent); }.wide { min-width:140px; }.quiet { color:var(--ink); background:#eef0f6; }
.progress-card { display:flex; justify-content:space-between; gap:40px; align-items:center; padding:18px 22px; background:#151a29; color:#fff; margin-top:20px; border-radius:16px; }.progress-card span { display:block; color:#c2c7d4; font-size:13px; margin-top:4px; }.progress { width:230px; height:8px; border-radius:99px; background:#3a4052; overflow:hidden; }.progress i { display:block; height:100%; width:4%; border-radius:99px; background:#ad9cff; transition:width .2s; }.hidden { display:none!important; }
.results { margin-top:50px; }.result-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; }.result-head h2 { margin:0; font-size:32px; letter-spacing:-1px; }.actions { display:flex; gap:8px; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.metric { border:1px solid var(--line); border-radius:16px; background:#fff; padding:18px; }.metric b { display:block; font-size:28px; letter-spacing:-1px; }.metric span { color:var(--muted); font-size:13px; }
.insights { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:22px 0; }.insight { background:#fff; border-radius:16px; padding:22px; border:1px solid var(--line); }.insight h3 { margin:0 0 10px; font-size:16px; }.insight ul { color:#434c5c; margin:0; padding-left:19px; line-height:1.7; font-size:14px; }
.transcript { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }.section-title { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:13px; }.section-title h3 { margin:0; }.section-title span { color:var(--muted); font-size:13px; }.segment { display:grid; grid-template-columns:70px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid #f0f1f4; line-height:1.6; }.segment:last-child { border:0; }.time { font-family:ui-monospace,monospace; color:var(--accent); font-size:13px; padding-top:2px; }
footer { color:var(--muted); text-align:center; padding:25px; font-size:12px; }
@media (max-width:700px) { .shell { padding:0 16px 45px; } nav p { display:none; }.hero { padding:44px 0 36px; }.hero h1 { letter-spacing:-2px; }.controls,.metrics,.insights { grid-template-columns:1fr; }.progress-card { align-items:stretch; flex-direction:column; gap:15px; }.progress { width:100%; }.result-head { align-items:start; gap:15px; flex-direction:column; }.actions { flex-wrap:wrap; } }