/* learning.css — v8.2b */
:root{
  --bg:#0b0b0b; --panel:#121212; --muted:#9aa0a6; --gold:#e2c96b; --gold-2:#f1d98a; --card:#151515;
  --ok:#2ea043; --warn:#d29922; --err:#f85149; --extra:#9aa0a6; --line:#262626; --chip:#1c1c1c; --chip-border:#333;
  --text:#eee; --text-soft:#bbb;
}
html[data-theme="light"]{
  --bg:#faf8f2; --panel:#ffffff; --muted:#6b7280; --gold:#b48600; --gold-2:#d1a63d; --card:#ffffff; --line:#e6e2d9;
  --ok:#1f7a34; --warn:#b0760d; --err:#d0342c; --extra:#6b7280; --chip:#fff4f4; --chip-border:#f1cccc; --text:#1f1f1f; --text-soft:#555;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
button{font-family:inherit}

/* HEADER */
.app-header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(12,12,12,.98),rgba(12,12,12,.9));border-bottom:1px solid #1a1a1a;padding:10px 14px;display:flex;align-items:center;justify-content:space-between}
html[data-theme="light"] .app-header{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94));border-bottom-color:#e6e2d9}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:10px;color:var(--gold);font-weight:700}
.titles h1{font-size:16px;margin:0;color:var(--gold-2)}
.subtitle{font-size:12px;color:var(--text-soft)}
.icon-btn{background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:8px 10px}

/* TOPBAR */
.topbar{position:sticky;top:56px;z-index:19;display:grid;grid-template-columns:1fr;row-gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.select-wrap{display:flex;align-items:center;gap:8px}
.select-wrap select{flex:1;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.toggles{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.toggles::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--text);padding:8px 12px;font-size:14px;line-height:1}

/* SPEAK NOW */
.speak-now{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;background:var(--chip);border:1px solid var(--chip-border);color:var(--text);padding:8px 12px;border-radius:999px;display:flex;gap:10px;align-items:center;z-index:30}
.speak-now .dot{width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.5);animation:pulse 1.3s infinite}
.speak-now .label{font-weight:800;color:#ff3b30}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.5)}70%{box-shadow:0 0 0 12px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.hidden{display:none}
.btn{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--text)}
.btn.danger{background:#2b0000;border-color:#5a0000;color:#ffdede}
html[data-theme="light"] .btn.danger{background:#fff0f0;border-color:#f1cccc;color:#a30000}

/* CONTENT */
.content{max-width:860px;margin:10px auto;padding:0 10px}
.stats{display:grid;grid-template-columns:1fr;gap:8px;margin:6px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.stat .stat-title{font-size:12px;color:var(--muted)}
.stat .stat-value{font-size:16px;line-height:1.35;white-space:normal}
.small{font-size:14px}
.panel h2{margin:6px 6px 10px;color:var(--gold)}

/* LINES */
.lines{display:grid;gap:10px}
.line{display:grid;gap:10px;grid-template-columns:1fr}
.line-left{display:grid;gap:6px;min-width:0}
.latin{font-size:18px;line-height:1.35}
.phon{font-size:13px;color:#c5b077}
.trad{font-size:13px;color:#96b0ff}
.correction{font-size:15px;background:rgba(19,15,0,.7);border:1px solid #2a2200;border-radius:10px;padding:8px}
html[data-theme="light"] .correction{background:#fff9e6;border-color:#f0e1aa}
.correction .ok{color:#2ea043}.correction .near{color:#d29922}.correction .miss{color:#f85149}.correction .extra{color:#6b7280}
.heard{font-size:12px;color:var(--muted)}

/* RIGHT SIDE OF LINE */
.line-right{display:grid;gap:8px;width:100%;grid-template-columns:repeat(3, minmax(0,1fr)) 64px;align-items:center}
.cta{background:linear-gradient(180deg,var(--card),#1a1a1a);border:1px solid var(--line);border-radius:14px;color:var(--text);padding:12px 0;font-size:18px;min-height:44px}
html[data-theme="light"] .cta{background:linear-gradient(180deg,#f8f8f8,#ffffff)}
.cta:active{transform:translateY(1px)}
.score{display:grid;place-items:center;min-width:56px;height:44px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px}
.score.ok{border-color:rgba(46,160,67,.5)}.score.warn{border-color:rgba(210,153,34,.5)}.score.err{border-color:rgba(248,81,73,.5)}

/* FOOTER */
.app-footer{border-top:1px solid var(--line);margin:8px auto 18px;padding:8px 12px;max-width:860px;color:var(--muted);display:flex;justify-content:center}
.legend-inline{font-size:12px}
.legend-inline .lg-ok{color:#2ea043}.legend-inline .lg-near{color:#d29922}.legend-inline .lg-miss{color:#f85149}.legend-inline .lg-extra{color:#6b7280}

/* SHEETS & MODALS */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;align-items:end;z-index:25}
.sheet.hidden{display:none}
.sheet-content{background:var(--panel);border-top-left-radius:16px;border-top-right-radius:16px;border:1px solid var(--line);padding:12px 14px}
.sheet-content header{display:flex;justify-content:space-between;align-items:center}
.sheet .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.sheet .hint{font-size:12px;color:var(--muted);margin-top:8px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;z-index:26}
.modal.hidden{display:none}
.modal-content{max-width:740px}
.correction-block{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.correction-block .ok{color:#2ea043}.correction-block .near{color:#d29922}.correction-block .miss{color:#f85149}.correction-block .extra{color:#6b7280}

/* RESPONSIVE */
@media (min-width:641px){
  .stats{grid-template-columns:1fr 1fr}
  .line{grid-template-columns:1fr auto;align-items:center}
  .line-right{grid-template-columns:repeat(3, 48px) 64px;width:auto}
  .cta{min-width:48px;padding:10px 0}
}