:root{
  --bg:#0b1020;--panel:#111827;--card:#020617;--text:#e5e7eb;--muted:#94a3b8;
  --line:#334155;--blue:#60a5fa;--green:#86efac;--yellow:#fde68a;--purple:#c4b5fd;--red:#fca5a5;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:linear-gradient(180deg,#0f172a,#020617);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding-bottom:78px}
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px;background:rgba(15,23,42,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
h1{font-size:20px;margin:0 0 3px}.app-header p{margin:0;color:var(--muted);font-size:12px}
button{border:1px solid #1d4ed8;background:#172554;color:var(--text);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:700}
button.secondary{background:#1f2937;border-color:#475569}button.danger{background:#3b1d1d;border-color:#991b1b}button.ghost{background:#020617;border-color:#475569}.hidden{display:none!important}
.player{position:sticky;top:58px;z-index:15;margin:10px;padding:12px;background:rgba(17,24,39,.96);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.now-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px}.label{color:var(--muted);font-size:12px}#nowPlaying{color:var(--green);font-weight:800;margin:4px 0}#voiceLine{color:var(--muted);font-size:11px}
.controls{display:flex;gap:10px;align-items:center;margin-top:10px;overflow-x:auto}.controls label{white-space:nowrap;color:var(--muted);font-size:12px}.controls input[type=number]{width:54px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px}.controls input[type=range]{width:110px;vertical-align:middle}
.button-row{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px}.button-row button{white-space:nowrap}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:0 10px 8px}.tabs button{white-space:nowrap;background:#020617;border-color:#1f2937}.tabs button.active{background:#0b2146;border-color:var(--blue)}
main{padding:0 10px}.section{background:rgba(17,24,39,.94);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px}
.section h2{font-size:19px;margin:0 0 6px}.note{color:var(--muted);font-size:14px;line-height:1.55}.strategy{color:var(--yellow);font-size:13px;line-height:1.5}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0}
.q{color:#bfdbfe;font-weight:800;line-height:1.5}.qko{color:var(--purple);font-size:14px;line-height:1.45;margin-top:6px}
.seg{margin:10px 0}.en{font-size:16px;line-height:1.58}.ko{color:var(--yellow);font-size:14px;line-height:1.5;margin-top:2px}.hide-ko .ko,.hide-ko .qko{display:none}
.chip{display:inline-block;border:1px solid #2563eb;background:#1e3a8a;color:#dbeafe;padding:4px 8px;border-radius:999px;font-size:12px;margin:3px}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.quick-actions button{width:100%}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(15,23,42,.97);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
.bottom-nav button{font-size:12px;padding:9px 4px;background:#020617;border-color:#1f2937}
@media(min-width:820px){
  body{padding-bottom:20px}.app-header{padding:16px 24px}.player{max-width:1060px;margin:14px auto}.tabs{max-width:1060px;margin:0 auto}.bottom-nav{display:none}main{max-width:1060px;margin:0 auto}
  .quick-actions{grid-template-columns:repeat(4,1fr)}
}