:root{
  --ink:#0f1c2e; --muted:#5b6b82; --line:#e3e8ef; --bg:#f5f7fa; --card:#fff;
  --brand:#13518a; --brand2:#0e3d68; --amber:#f0a013; --green:#15924f; --red:#c23b22;
  --shadow:0 6px 22px rgba(15,28,46,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font:16px/1.55 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
  background:var(--bg);padding-bottom:74px;max-width:680px;margin:0 auto}
h1,h2,h3{margin:0}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* header */
header{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:16px 18px;
  position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px}
header .logo{font-weight:800;font-size:18px;letter-spacing:-.01em}
header .logo b{color:var(--amber)}
header .state{margin-left:auto;font-size:12px;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px}

.wrap{padding:16px 16px 0}
.disclaimer{font-size:11.5px;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;margin:12px 16px 0}

/* home cards */
.mode{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:18px;margin-bottom:12px;box-shadow:var(--shadow);width:100%;text-align:left}
.mode .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:none;
  background:#eef3f9;color:var(--brand)}
.mode>span:nth-child(2){display:block}
.mode .t{display:block;font-weight:700;font-size:17px}
.mode .d{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.mode .arw{margin-left:auto;color:#b6c2d2;font-size:22px}
.mode.amber .ico{background:#fdf2db;color:#a9710a}
.mode.green .ico{background:#e6f5ec;color:var(--green)}

.stats{display:flex;gap:10px;margin:4px 0 14px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stat .n{font-size:24px;font-weight:800}.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* subpage header */
.pagehead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.back{background:none;border:0;color:var(--brand);font-weight:700;font-size:15px;padding:6px 2px}
.pagehead h2{font-size:19px}
.subtle{color:var(--muted);font-size:13px;margin:2px 0 14px}
.src{font-size:11px;color:var(--muted);background:#eef3f9;border-radius:6px;padding:2px 7px;display:inline-block}

/* recitation card */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);margin-bottom:14px}
.step-name{font-size:13px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.05em}
.prompt{font-size:21px;font-weight:700;margin:8px 0 4px;line-height:1.25}
.hint{color:var(--muted);font-size:13.5px}
.reveal{margin-top:16px;background:#f3f7fb;border:1px solid #dce6f0;border-radius:12px;padding:16px;font-size:17px;line-height:1.5}
.reveal .num{background:#fdf2db;color:#8a5c06;font-weight:700;border-radius:5px;padding:1px 6px}
.why{color:var(--muted);font-size:13px;margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.blankline{border-bottom:2px solid var(--amber);min-width:42px;display:inline-block;text-align:center;color:transparent}
.blankline.show{color:#8a5c06;font-weight:700;border-bottom-color:#dce6f0}

.btn{display:block;width:100%;border:0;border-radius:12px;padding:15px;font-size:16px;font-weight:700;background:var(--brand);color:#fff}
.btn.amber{background:var(--amber);color:#3a2700}
.btn.ghost{background:#eef3f9;color:var(--brand)}
.btn.green{background:var(--green)}
.btn.red{background:var(--red)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;gap:10px}.btn-row .btn{flex:1}
.mt{margin-top:10px}

.mic{display:flex;align-items:center;gap:10px;justify-content:center;background:#fff;border:1px dashed #cbd6e2;
  border-radius:12px;padding:12px;color:var(--muted);font-size:13.5px;margin-top:12px}
.mic.live{border-color:var(--red);color:var(--red)}
.mic .dot{width:10px;height:10px;border-radius:50%;background:#cbd6e2}
.mic.live .dot{background:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.heard{font-size:13px;color:var(--ink);margin-top:8px;min-height:18px}
.heard .ok{background:#e6f5ec;color:#0c6b39;border-radius:4px;padding:0 4px}

.progress{height:6px;background:#e7edf4;border-radius:999px;overflow:hidden;margin:0 0 14px}
.progress>i{display:block;height:100%;background:var(--brand);width:0}

/* quiz */
.choice{display:block;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;font-size:15.5px}
.choice.correct{border-color:var(--green);background:#e9f7ef}
.choice.wrong{border-color:var(--red);background:#fbeae6}
.explain{background:#f3f7fb;border:1px solid #dce6f0;border-radius:12px;padding:14px;font-size:14.5px;margin-top:4px}

.report{display:block;width:100%;background:none;border:0;color:var(--muted);font-size:12.5px;text-decoration:underline;margin-top:6px;text-align:center}

/* bottom nav */
.nav{position:fixed;bottom:0;left:0;right:0;max-width:680px;margin:0 auto;background:#fff;border-top:1px solid var(--line);
  display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.nav button{background:none;border:0;color:var(--muted);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
.nav button .i{font-size:20px}
.nav button.on{color:var(--brand)}
.empty{text-align:center;color:var(--muted);padding:36px 16px}
.empty .big{font-size:40px}
.install{background:#fdf2db;border:1px solid #f0d89a;color:#7a5208;border-radius:12px;padding:12px 14px;margin:0 16px 12px;font-size:13.5px;display:flex;gap:10px;align-items:center}
.install button{margin-left:auto;background:var(--amber);color:#3a2700;border:0;border-radius:8px;padding:7px 12px;font-weight:700;font-size:13px}