:root{--bg:#f3f5f2;--card:#fff;--ink:#172019;--muted:#68716b;--line:#dfe5df;--accent:#244f3a;--accent2:#d9e8de;--warm:#f4efe3;--danger:#8f3535}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.app-shell{max-width:1240px;margin:auto;padding:32px}.topbar{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:26px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--accent);text-transform:uppercase}.topbar h1{font-size:40px;margin:8px 0 4px}.topbar h1 span{font-size:24px;color:var(--muted);font-weight:500;margin-left:8px}.topbar p{margin:0;color:var(--muted)}
.progress-box{width:280px}.progress-label,.progress-text{font-size:13px;color:var(--muted)}.progress-track{height:8px;background:#e4e8e4;border-radius:99px;overflow:hidden;margin:7px 0}.progress-fill{height:100%;width:0;background:var(--accent);transition:.25s}.workspace{display:grid;grid-template-columns:260px 1fr;gap:22px}.sessions-panel,.player-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 26px rgba(22,32,25,.05)}.sessions-panel{padding:18px;height:max-content}.panel-title{font-weight:800;margin:3px 0 13px}.session-item{width:100%;border:0;background:transparent;padding:11px 12px;border-radius:12px;text-align:left;display:flex;justify-content:space-between;cursor:pointer;color:var(--ink);margin-bottom:4px}.session-item:hover{background:#f4f7f4}.session-item.active{background:var(--accent2);font-weight:700}.session-item.done .session-num:after{content:' ✓';color:var(--accent)}.session-meta{color:var(--muted);font-size:12px}.player-card{padding:30px}.session-heading{display:flex;justify-content:space-between;align-items:flex-start}.session-heading h2{margin:5px 0 0;font-size:27px}.badge{background:var(--warm);padding:8px 13px;border-radius:99px;font-size:12px;font-weight:800}.chunk-strip{display:flex;gap:8px;margin:26px 0 32px}.chunk-pill{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;background:#fff}.chunk-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}.chunk-pill.done:not(.active){background:var(--accent2);border-color:transparent}.chunk-pill small{display:block;opacity:.7;margin-top:2px}.now-playing{text-align:center}.np-label{font-size:11px;letter-spacing:.15em;color:var(--muted);font-weight:800}.chunk-number{font-size:30px;font-weight:800;margin-top:7px}.ayah-label{font-size:18px;margin-top:4px}.part-label{color:var(--muted);height:22px;margin-top:2px}.counter-wrap{display:flex;justify-content:center;align-items:center;gap:18px;margin:22px auto}.counter-ring{width:98px;height:98px;border:8px solid var(--accent2);border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:28px}.rep-count{font-size:28px;font-weight:900}.rep-target{font-size:13px;color:var(--muted)}.mode-title{font-weight:800;font-size:18px}.mode-hint{color:var(--muted);font-size:13px;margin-top:4px;max-width:360px}.controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.controls button,.review-button,.complete,.ghost{border:0;border-radius:11px;padding:12px 16px;font-size:14px;font-weight:700;cursor:pointer}.play{background:var(--accent);color:#fff;min-width:120px}.ghost{background:#eef2ee;color:var(--ink)}.danger{color:var(--danger);width:100%;margin-top:13px}.mini-status{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin:14px 5px 0}.review-card{margin-top:30px;background:#f6f8f5;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;justify-content:space-between;gap:20px;align-items:center}.review-card h3{margin:5px 0}.review-card p{margin:0;color:var(--muted);font-size:13px}.review-button{background:#203f31;color:#fff;white-space:nowrap}.review-progress{margin:15px 3px;color:var(--muted);font-size:13px}.review-progress strong{color:var(--ink);margin-right:10px}.hidden{display:none}.finish-row{margin-top:26px;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:18px}.complete{background:#172019;color:#fff;padding:13px 19px}.complete.completed{background:var(--accent)}#saveNotice{font-size:12px;color:var(--muted)}
@media(max-width:800px){.app-shell{padding:16px}.topbar{display:block}.progress-box{width:100%;margin-top:18px}.workspace{grid-template-columns:1fr}.sessions-panel{order:2}.player-card{padding:20px}.review-card,.finish-row{display:block}.review-button,.complete{width:100%;margin-top:14px}}

.revision-card{margin-top:26px;border-top:1px solid var(--line);padding-top:26px}.revision-heading h3{margin:5px 0 6px;font-size:21px}.revision-heading p{margin:0;color:var(--muted);font-size:13px;max-width:760px}.revision-locked{margin-top:16px;background:#f6f8f5;border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--muted);font-size:13px}.revision-controls{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;margin-top:17px}.revision-controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--muted)}.revision-controls select{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 12px;color:var(--ink);font:inherit}.revision-status{font-size:12px;color:var(--muted);margin-top:12px}.revision-playback{margin-top:15px;background:#f6f8f5;border:1px solid var(--line);border-radius:14px;padding:16px}.revision-live{display:flex;justify-content:space-between;gap:15px;margin-bottom:6px}.revision-live span,.revision-location{font-size:13px;color:var(--muted)}.revision-location{margin-bottom:10px}.finish-revision{margin-top:12px;border:0;border-radius:10px;padding:11px 14px;font-weight:800;cursor:pointer;background:#eef2ee;color:var(--ink)}
@media(max-width:800px){.revision-controls{grid-template-columns:1fr}.revision-controls .review-button{width:100%;margin:0}.revision-live{display:block}.revision-live span{display:block;margin-top:4px}}

.surah-heading{min-width:0;flex:1}
.surah-picker-row{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.surah-picker-row h1{margin-right:auto}
.surah-picker-label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.surah-select{min-width:190px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;font-weight:700}
@media(max-width:800px){.surah-picker-row{display:block}.surah-picker-label{margin:14px 0 8px}.surah-select{width:100%}}


/* v0.6.0 family-test mobile readiness pass.
   Layout only: memorization/revision/progress behavior is unchanged. */
html{-webkit-text-size-adjust:100%}
button,select{touch-action:manipulation}
button{min-height:44px}
.session-item{min-height:44px}
.chunk-pill{min-height:52px}
.surah-select{min-height:44px}

@media(max-width:800px){
  body{overflow-x:hidden}
  .app-shell{width:100%;padding:14px 12px 28px}
  .topbar{margin-bottom:16px}
  .topbar h1{font-size:30px;line-height:1.08;margin-top:6px}
  .topbar h1 span{display:block;font-size:18px;margin:5px 0 0}
  .topbar p{font-size:13px;line-height:1.45}
  .progress-box{margin-top:14px}
  .workspace{gap:14px}
  .player-card{padding:18px 14px;border-radius:16px}
  .sessions-panel{padding:14px;border-radius:16px}
  .session-heading{gap:10px;align-items:center}
  .session-heading h2{font-size:22px;line-height:1.2}
  .badge{flex:none;padding:7px 10px}
  .chunk-strip{
    gap:7px;margin:18px -2px 22px;padding:2px;
    overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch
  }
  .chunk-pill{flex:1 0 58px;padding:9px 5px}
  .chunk-pill small{font-size:11px;white-space:nowrap}
  .chunk-number{font-size:27px}
  .ayah-label{font-size:18px;font-weight:700}
  .part-label{height:auto;min-height:22px}
  .counter-wrap{margin:17px auto;gap:12px}
  .counter-ring{width:88px;height:88px;padding-top:24px}
  .controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .controls button{width:100%;padding:12px 10px}
  .controls .play{grid-column:1/-1}
  .mini-status{gap:10px;line-height:1.35}
  .review-card{padding:16px;margin-top:22px}
  .review-button,.complete{min-height:46px}
  .finish-row{margin-top:22px;padding-top:17px}
  #saveNotice{display:block;margin-top:10px;text-align:center}
  .revision-card{margin-top:22px;padding-top:22px}
  .revision-controls select{min-height:44px}
  .surah-picker-row h1{overflow-wrap:anywhere}
}

@media(max-width:420px){
  .app-shell{padding-left:9px;padding-right:9px}
  .player-card{padding-left:11px;padding-right:11px}
  .topbar h1{font-size:27px}
  .session-heading{align-items:flex-start}
  .badge{font-size:11px}
  .controls{grid-template-columns:1fr}
  .controls .play{grid-column:auto}
  .chunk-pill{flex-basis:54px}
  .mini-status{display:block;text-align:center}
  .mini-status span{display:block;margin-top:4px}
}