:root { --bg:#161826; --card:#232532; --line:#292b3d; --acc:#dda36a; --ok:#6fc397; --bad:#d9848c;
        --txt:#e9e9ed; --dim:#8b8fa3; --dim2:#595d6c; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:Inter,system-ui,-apple-system,sans-serif;
       -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
button { font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer; }
.hidden { display:none !important; }
.view { max-width:430px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; gap:20px;
        padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
.top { display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:26px; font-weight:700; letter-spacing:-.5px; }
.brand span { color:var(--acc); }
.card { background:var(--card); border-radius:14px; padding:18px; }
.card.bordered { border:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.hero { padding:22px 20px; display:flex; flex-direction:column; gap:16px; }
.label { font-size:13px; color:var(--dim); font-weight:500; text-transform:uppercase; letter-spacing:.6px; }
.label.small { font-size:12px; }
.label.pad { padding:4px 2px; }
.big { font-size:44px; font-weight:700; letter-spacing:-1px; line-height:1; }
.big small { font-size:17px; font-weight:400; letter-spacing:0; }
.dim { font-size:14px; color:var(--dim); }
.txt { color:var(--txt); }
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.btn-p { display:flex; align-items:center; justify-content:center; gap:10px; height:60px; border-radius:999px;
         background:var(--acc); color:var(--bg); font-size:17px; font-weight:600; width:100%; }
.btn-p .ic { stroke-width:2; width:22px; height:22px; }
.btn-s { display:flex; align-items:center; justify-content:center; gap:8px; height:52px; border-radius:999px;
         background:var(--card); color:var(--txt); font-size:15px; font-weight:500; width:100%; }
.btn-s:disabled { opacity:.45; cursor:default; }
#decks { display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.deck { display:flex; flex-direction:column; gap:12px; }
.deck .h { display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; }
.deck .h .ic { color:var(--dim2); width:18px; height:18px; }
.bar { height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.bar > div { height:100%; background:var(--acc); border-radius:999px; width:0; transition:width .4s; }
.bar.ok > div { background:var(--ok); }

.topbar { display:flex; align-items:center; gap:14px; }
.prog { flex-grow:1; display:flex; flex-direction:column; gap:8px; }
.prog .dim { font-size:13px; }
.round { width:44px; height:44px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; flex:none; }
.center { flex-grow:1; display:flex; flex-direction:column; justify-content:center; gap:24px; padding:0 4px; }
.phrase { font-size:30px; font-weight:600; line-height:1.25; letter-spacing:-.4px; text-wrap:pretty; }
.row { display:flex; align-items:center; gap:14px; }
.state { font-size:15px; color:var(--acc); font-weight:500; }
.state.txt { color:var(--txt); }
.wave { display:flex; align-items:center; gap:5px; height:32px; }
.wave i { display:block; width:4px; border-radius:2px; background:var(--acc); height:10px; transition:height .2s; }
.wave.bad i { background:var(--bad); }
.wave i:nth-child(1){height:10px} .wave i:nth-child(2){height:22px} .wave i:nth-child(3){height:14px}
.wave i:nth-child(4){height:30px} .wave i:nth-child(5){height:18px} .wave i:nth-child(6){height:26px} .wave i:nth-child(7){height:12px}
.wave.live i { animation:wv .9s ease-in-out infinite alternate; }
.wave.live i:nth-child(2n){ animation-delay:.15s } .wave.live i:nth-child(3n){ animation-delay:.3s }
.wave.idle i { height:6px !important; opacity:.5; }
@keyframes wv { from { transform:scaleY(.35) } to { transform:scaleY(1) } }
.pill { padding:8px 16px; border-radius:999px; background:var(--bad); color:var(--bg); font-size:15px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:6px; }
.pill.regular { background:var(--acc); }
.pill.bien { background:var(--ok); }
.feedback { font-size:17px; line-height:1.45; }
.feedback:empty { display:none; }
.en { font-size:26px; font-weight:600; line-height:1.25; letter-spacing:-.3px; }
.dots { display:flex; gap:6px; margin-left:auto; }
.dots i { width:10px; height:10px; border-radius:50%; background:var(--line); display:block; }
.dots i.on { background:var(--ok); }
.controls { display:flex; flex-direction:column; gap:12px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hint { font-size:13px; color:var(--dim2); text-align:center; padding-top:6px; min-height:18px; }
.btn-s .ic { width:18px; height:18px; }

.pad-top { display:flex; flex-direction:column; gap:6px; padding-top:12px; }
.title { font-size:30px; font-weight:700; letter-spacing:-.6px; }
.stat { display:flex; flex-direction:column; gap:6px; align-items:center; padding:16px 8px; }
.stat .n { font-size:30px; font-weight:700; line-height:1; }
.stat .dim { font-size:12px; }
.ok { color:var(--ok); } .reg { color:var(--acc); } .bad { color:var(--bad); }
.grow { flex-grow:1; display:flex; flex-direction:column; gap:6px; }
.frow { display:flex; flex-direction:column; gap:4px; padding:12px 0; border-bottom:1px solid var(--line); }
.frow b { font-size:15px; font-weight:500; }
.frow span { font-size:13px; color:var(--dim); }
.summary-note { font-size:13px; color:var(--dim2); padding:12px 2px; }

.h2 { font-size:20px; font-weight:600; }
.col { display:flex; flex-direction:column; gap:10px; }
.row.between { justify-content:space-between; }
.row.pad { padding:4px 2px; }
.dim.small { font-size:13px; }
textarea, .title-input { width:100%; background:transparent; border:0; color:var(--txt); font:inherit; font-size:15px; line-height:1.5; resize:vertical; outline:none; padding:0; }
.title-input { font-size:18px; font-weight:600; padding:6px 2px; border-bottom:1px solid var(--line); }
.link { color:var(--acc); font-size:14px; font-weight:500; }
.link:disabled { opacity:.5; }
.pair { padding:14px 16px; display:flex; gap:12px; align-items:flex-start; }
.pair .t { flex-grow:1; display:flex; flex-direction:column; gap:6px; }
.pair .t b { font-size:15px; font-weight:500; line-height:1.35; }
.pair .t span { font-size:14px; color:var(--dim); line-height:1.35; }
.pair .rm { color:var(--dim2); padding:2px; }
.pair .rm .ic { width:16px; height:16px; }
.deck .acts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.deck .acts button { height:40px; border-radius:999px; background:var(--bg); font-size:13px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.deck .acts button:disabled { opacity:.4; }
.btn-p:disabled { opacity:.45; cursor:default; }

.seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--bg); border-radius:999px; padding:4px; gap:4px; }
.seg button { height:40px; border-radius:999px; font-size:14px; font-weight:500; color:var(--dim); display:flex; align-items:center; justify-content:center; gap:6px; }
.seg button.on { background:var(--card); color:var(--txt); }
.seg .ic { width:18px; height:18px; }
.typebox { display:flex; gap:10px; align-items:center; background:var(--card); border-radius:999px; padding:6px 6px 6px 18px; }
.typebox input { flex-grow:1; background:transparent; border:0; outline:none; color:var(--txt); font:inherit; font-size:16px; min-width:0; }
.round.acc { background:var(--acc); color:var(--bg); }
.round.acc .ic { stroke-width:2.2; }
.center.compact { justify-content:flex-start; padding-top:8px; }
body.typed .wave { display:none; }
body.typed .grid2 { grid-template-columns:1fr; }