*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0b0f17;--bg2:#121826;--card:#161d2e;--line:#253049;--fg:#f2f4f9;--mut:#93a0bd;--acc:#4fd1a5;--acc2:#3bb3e8;--red:#ff6b7a}
html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 50% -10%,#1b2a44 0%,var(--bg) 60%);color:var(--fg);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
.wrap{max-width:560px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom))}
.wrap.wide{max-width:760px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:16px}
h1{font-size:24px;margin:0;letter-spacing:-.01em} h2{font-size:18px;margin:0 0 12px}
.mut{color:var(--mut);font-size:14px} .center{text-align:center}
.brand{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0 18px}
.brand .logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;font-size:20px}
button{font:inherit;border:0;border-radius:14px;padding:11px 16px;background:#24304a;color:var(--fg);cursor:pointer}
button:active{transform:scale(.98)} button.acc{background:var(--acc);color:#05261b;font-weight:600} button.red{background:var(--red);color:#fff}
button:disabled{opacity:.45;cursor:default}
input{font:inherit;font-size:17px;width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:#0e1422;color:var(--fg);margin:6px 0 12px;outline:none}
input:focus{border-color:var(--acc)}
.play{width:150px;height:150px;border-radius:50%;margin:10px auto 18px;display:grid;place-items:center;font-size:54px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#05261b;box-shadow:0 12px 40px #4fd1a540;transition:box-shadow .3s}
.play.on{box-shadow:0 0 0 10px #4fd1a522,0 12px 50px #4fd1a560}
.label{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.title{font-size:21px;font-weight:650;margin:6px 0 4px;word-break:break-word;min-height:1.4em}
.bar{height:8px;border-radius:8px;background:#0e1422;border:1px solid var(--line);overflow:hidden;margin:14px 0 6px}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .9s linear}
.times{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--mut);font-size:14px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.dot{width:9px;height:9px;border-radius:50%;background:#556}
.dot.on{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.hints{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hints li{display:flex;gap:12px;align-items:flex-start;color:var(--mut);font-size:15px}
.hints li b{font-size:20px;line-height:1}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.err{color:var(--red);min-height:1.3em;font-size:15px}
.hidden{display:none!important}
ul.pl{list-style:none;padding:0;margin:0}
ul.pl li{display:flex;gap:8px;align-items:center;padding:9px 10px;border-radius:12px;margin-bottom:5px;background:#10172a}
ul.pl li.cur{outline:2px solid var(--acc)}
ul.pl li .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
ul.pl li button{padding:6px 10px;font-size:14px;border-radius:10px}
.drop{border:2px dashed var(--line);border-radius:16px;padding:20px;text-align:center;color:var(--mut)}
.drop.over{border-color:var(--acc);color:var(--fg)}
a{color:var(--acc2)}
.small{font-size:13px}