:root{
  --ink:#1a1a1f; --black:#141417; --muted:#6e6e78; --line:#e8e6ea; --bg:#ffffff; --card:#ffffff;
  --accent:#ff3131; --accent-ink:#d41f1f; --accent-soft:#ffe9e9; --ok:#15a06b; --warn:#c9821a; --blue:#2f5bd1;
  --radius:18px; --shadow:0 16px 44px -24px rgba(20,20,23,.5); --shadow-red:0 14px 34px -18px rgba(255,49,49,.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); background:
    radial-gradient(1100px 560px at 86% -14%, #ffdede 0%, transparent 58%),
    radial-gradient(900px 520px at -8% 4%, #f3f3f6 0%, transparent 55%), var(--bg);
  background-color:#fff; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,5vw,60px);max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-link{cursor:pointer;-webkit-tap-highlight-color:transparent}
.logo-svg{height:56px;width:auto;display:block;overflow:visible;transform-origin:left center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.logo-link:hover .logo-svg{transform:scale(1.05)}
.logo-link:active .logo-svg{transform:scale(.98)}
.lg-tassel{transform-box:view-box;transform-origin:178px 94px}
.lg-must{transform-box:view-box;transform-origin:180px 266px}
.logo-link:hover .lg-tassel{animation:lg-swing 1.1s ease-in-out}
.logo-link:hover .lg-must{animation:lg-wiggle .65s ease-in-out}
@keyframes lg-swing{0%{transform:rotate(0)}18%{transform:rotate(12deg)}42%{transform:rotate(-9deg)}63%{transform:rotate(6deg)}82%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes lg-wiggle{0%,100%{transform:rotate(0)}22%{transform:rotate(-5deg) scaleX(1.06)}48%{transform:rotate(5deg)}74%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.logo-link:hover .lg-tassel,.logo-link:hover .lg-must{animation:none}}
.ghost-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;border:1.5px solid var(--line);padding:8px 15px;border-radius:999px;background:#fff;transition:.18s}
.wa-link{color:#fff;background:#25d366;border-color:#25d366}
.wa-link:hover{background:#1ebe59;border-color:#1ebe59;transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(37,211,102,.8)}
.wa-icon{width:18px;height:18px;display:block}
main{max-width:1100px;margin:0 auto;padding:0 clamp(18px,5vw,60px) 60px}

.hero{padding:34px 0 26px;max-width:740px}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--accent);margin:0 0 14px;font-weight:600}
h1{font-size:clamp(34px,6vw,60px);line-height:1.01;letter-spacing:-.038em;margin:0 0 18px;font-weight:850;color:var(--black)}
h1 .hl{color:var(--accent)}
.lede{font-size:18px;color:#3a3a44;margin:0}

.uploads{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.card{position:relative;background:var(--card);border:1.5px dashed #cfc9d6;border-radius:var(--radius);padding:24px 22px 22px;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s,background .18s;min-height:158px}
.card:hover{border-color:var(--accent);border-style:solid;transform:translateY(-3px);box-shadow:var(--shadow-red);background:linear-gradient(180deg,#fff, #fff7f7)}
.card:active{transform:translateY(-1px) scale(.995)}
.card.drag{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}
.drop-cue{display:flex;justify-content:center;margin-top:18px;color:var(--accent);transition:transform .18s,color .18s}
.drop-cue svg{width:46px;height:46px}
.card:hover .drop-cue{color:var(--accent-ink);transform:scale(1.12)}
.card:hover .drop-cue svg{animation:cue-bounce .6s ease}
@keyframes cue-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}70%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.card:hover .drop-cue svg{animation:none}}
.card .step{position:absolute;top:-13px;left:22px;width:32px;height:32px;border-radius:9px;background:var(--black);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:var(--shadow);transform:rotate(-6deg)}
.card:nth-child(3) .step{background:var(--accent);box-shadow:var(--shadow-red)}
.card h3{margin:6px 0 6px;font-size:18px;letter-spacing:-.01em;color:var(--black)}
.card h3 em{font-style:normal;color:var(--muted);font-weight:500;font-size:13px}
.card p{margin:0;color:var(--muted);font-size:14px}
.card code{font-family:var(--mono);font-size:12px;background:var(--accent-soft);color:var(--accent-ink);padding:1px 6px;border-radius:6px}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.note{font-size:12px;color:var(--accent-ink);margin:8px 0 0;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;background:#f4f4f6;border:1px solid var(--line);color:var(--ink);padding:5px 8px 5px 11px;border-radius:999px;max-width:100%}
.chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.chip-x{flex:none;width:18px;height:18px;border:none;border-radius:50%;background:rgba(0,0,0,.08);color:var(--ink);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;transition:.15s}
.chip-x:hover{background:var(--accent);color:#fff}
.card.filled{cursor:default;border-style:solid;border-color:var(--ok);background:linear-gradient(180deg,#fff,#f2fbf6)}
.card.filled:hover{transform:none;box-shadow:var(--shadow)}
.card.filled .drop-cue{display:none}

.controls{margin-top:30px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.toggle{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3a3a44;cursor:pointer;max-width:760px}
.toggle input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent)}
button,.download{font-family:inherit}
.primary{margin-top:8px;background:var(--accent);color:#fff;border:none;padding:14px 28px;border-radius:12px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:var(--shadow-red);transition:.15s;letter-spacing:.01em}
.primary:hover:not(:disabled){background:var(--accent-ink);transform:translateY(-1px)}
.primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.link{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px}
.link:hover{color:var(--accent)}

.panel{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px clamp(18px,3vw,28px);box-shadow:var(--shadow)}
.hidden{display:none}
.stage{font-weight:600;margin-bottom:12px;color:var(--black)}
.bar{height:9px;background:#f0eef0;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff7a5a);transition:width .3s}
.log{margin:14px 0 0;max-height:160px;overflow:auto;font-family:var(--mono);font-size:12px;color:#555;background:#fafafa;border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap}

.review-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.review-head h2{margin:0;font-size:24px;letter-spacing:-.02em;color:var(--black)}
.summary{font-family:var(--mono);font-size:13px;color:var(--accent-ink)}
.hint{color:var(--muted);font-size:14px;margin:6px 0 16px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
.review-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.review-table th{text-align:left;background:#faf7f7;padding:11px 14px;font-weight:600;color:#52525c;border-bottom:1px solid var(--line);position:sticky;top:0}
.review-table td{padding:12px 14px;border-bottom:1px solid #f3f1f3;vertical-align:middle}
.review-table tr:last-child td{border-bottom:none}
.review-table .fname{font-weight:600;margin-bottom:6px;word-break:break-all;color:var(--black)}
.review-table audio{height:32px;width:200px;max-width:100%}
.trans{color:#444;max-width:360px}
.muted{color:var(--muted)}
.slide-pick{font-family:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;max-width:260px}
.slide-pick:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.badge{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.badge.filename{background:#e4f7ee;color:var(--ok)}
.badge.content{background:#e9eefb;color:var(--blue)}
.badge.order{background:#fdf0dd;color:var(--warn)}
.badge.manual{background:var(--accent-soft);color:var(--accent-ink)}
.badge.unplaced{background:#fde7e7;color:#c0392b}
.actions{display:flex;align-items:center;gap:18px;margin-top:20px;flex-wrap:wrap}

.result{text-align:center}
.result h2{margin:0 0 6px;color:var(--black)}
.download{display:inline-block;text-decoration:none;margin:14px 0 6px}
.tip{color:var(--muted);font-size:14px}
kbd{font-family:var(--mono);background:#f4f4f6;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:12px}

footer{max-width:1100px;margin:0 auto;padding:24px clamp(18px,5vw,60px) 50px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
footer strong{color:var(--ink)}

@media(max-width:760px){.uploads{grid-template-columns:1fr}.logo-img{height:46px}}

/* ================= DARK theme (Narrator) ================= */
body.dark{
  --ink:#e8edf4; --black:#ffffff; --muted:#8b97a8; --line:#222a37;
  --bg:#0b0e14; --card:#12161f; --accent:#ff3131; --accent-ink:#ff6a4d;
  --accent-soft:#2a1517; --ok:#3fb950; --warn:#d8a234; --blue:#5b8cff;
  background:
    radial-gradient(1100px 560px at 86% -14%, rgba(255,49,49,.10) 0%, transparent 58%),
    radial-gradient(900px 520px at -8% 4%, rgba(255,106,77,.06) 0%, transparent 55%),
    var(--bg);
  background-color:#0b0e14;
}
body.dark .lg-cap,body.dark .lg-must,body.dark .lg-word{fill:#e8edf4}
body.dark .card{border-color:#2c3645}
body.dark .card:hover{background:linear-gradient(180deg,#161b26,#12161f)}
body.dark .card.filled{background:linear-gradient(180deg,#12161f,#0e1218);border-color:#2bbf6a}
body.dark .chip{background:#161b26;border-color:#2c3645;color:#e8edf4}
body.dark .chip-x{background:rgba(255,255,255,.1);color:#e8edf4}
body.dark .ghost-link{background:#161b26;color:#e8edf4;border-color:#2c3645}
body.dark .panel{background:#12161f;border-color:#222a37}
body.dark .review-table th{background:#161b26;color:#8b97a8;border-color:#222a37}
body.dark .review-table td{border-color:#1c2533}
body.dark .trans{color:#aab4c2}
body.dark .slide-pick{background:#161b26;color:#e8edf4;border-color:#2c3645}
body.dark .log{background:#0d1119;color:#aab4c2;border-color:#222a37}
body.dark .bar{background:#1c2533}
body.dark kbd{background:#161b26;border-color:#2c3645;color:#e8edf4}
body.dark footer{border-color:#222a37}