:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#f8fafd;--paper:#fffdf7;--white:#fff;--ink:#24324b;--muted:#6e7a8f;--line:#d9e3ef;
  --blue:#4a90e2;--blue2:#eaf4ff;--pink:#d98fa3;--pink2:#fff0f4;
  --green:#5ca479;--green2:#eef9f1;--orange:#d39131;--orange2:#fff5e6;
}
*{box-sizing:border-box} body{margin:0;background:#eef3fa;color:var(--ink)}
button,input{font:inherit}
.shell{width:min(100%,430px);min-height:100dvh;margin:auto;background:var(--bg);position:relative}
.screen{padding:26px 18px 100px;min-height:100dvh}
.header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.header h1{margin:0;background:var(--blue2);padding:8px 16px;border-radius:18px;font-size:24px}
.header p{margin:8px 0 0;color:var(--muted);font-size:13px}
.badge{background:var(--pink2);padding:8px 11px;border-radius:16px;font-weight:800;font-size:12px}
.search{height:50px;background:#fff;border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;gap:10px;padding:0 15px;margin-bottom:18px}
.search input{border:0;outline:0;background:transparent;width:100%;color:var(--ink)}
.search span{color:var(--muted);font-size:21px}
h2{font-size:18px;margin:14px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile,.row,.continue,.study,.premium{border:1px solid var(--line);background:#fff;border-radius:22px}
.tile{padding:12px;text-align:left;min-height:128px;color:var(--ink)}
.tile strong{display:block;margin-top:10px}
.tile small{display:block;margin-top:6px;color:var(--muted);line-height:1.35}
.icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:18px}
.blue{background:var(--blue2);color:var(--blue)} .pink{background:var(--pink2);color:var(--pink)}
.green{background:var(--green2);color:var(--green)} .orange{background:var(--orange2);color:var(--orange)}
.continue{margin-top:10px;padding:15px;display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;background:var(--paper)}
.continue .num{width:70px;height:70px;border-radius:20px;background:var(--green2);color:var(--green);display:grid;place-items:center;font-size:28px;font-weight:900}
.continue p{font-size:12px;color:var(--muted);margin:7px 0}
.bar{height:7px;background:#e8eef6;border-radius:9px;overflow:hidden}.bar i{display:block;width:28%;height:100%;background:var(--blue)}
.rows{display:grid;gap:10px}
.row{display:grid;grid-template-columns:56px 1fr 18px;gap:12px;align-items:center;padding:12px;text-align:left;color:var(--ink)}
.row .icon{width:56px;height:56px}.row strong{display:block}.row small{display:block;color:var(--muted);margin-top:5px;line-height:1.35}.chev{font-size:24px;color:#9aa5b6}
.reader-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.reader-head p{margin:0;color:var(--muted);font-size:12px}.reader-head strong{font-size:18px}
.star{width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:16px;font-size:22px;color:var(--orange)}
.study{min-height:590px;background:var(--paper);padding:22px}
.kicker{display:inline-block;background:var(--green2);color:var(--green);font-size:11px;font-weight:900;padding:8px 12px;border-radius:999px}
.study h2{font-size:27px;margin:18px 0}.body{font-size:22px;font-weight:800;line-height:1.4;white-space:pre-line}
.example,.note{margin-top:20px;padding:17px;border-radius:20px}.example{background:#fff;border:1px solid var(--line)}.note{background:#fffbe6}
.example small,.note small{display:block;color:var(--muted);font-weight:800;margin-bottom:9px}.note small{color:var(--orange)}
.controls{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:10px;margin-top:12px}.controls button{width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:16px;font-size:26px}
.dots{display:flex;justify-content:center;gap:7px}.dots i{width:8px;height:8px;border-radius:999px;background:#d9e3ef}.dots i.active{width:22px;background:var(--blue)}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.premium{padding:18px;background:#f5f1ff}.premium b{display:block;color:#8f73c9;margin-bottom:7px}
.bottom{position:fixed;z-index:10;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),406px);height:64px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 12px 30px rgba(36,50,75,.12)}
.bottom button{border:0;background:transparent;color:var(--muted);display:grid;place-content:center;justify-items:center;gap:2px}.bottom button.active{background:var(--blue2);color:var(--blue)}.bottom span{font-size:19px}.bottom small{font-size:9px}
@media(min-width:700px){.shell{margin-top:24px;margin-bottom:24px;border-radius:30px;overflow:hidden}.bottom{bottom:34px}}