:root {
  --ink: #19332e;
  --muted: #7d8983;
  --paper: #f8f5ed;
  --card: #fffdf8;
  --line: #e8e5dc;
  --lime: #c9f274;
  --lime-dark: #a9dc4d;
  --coral: #ff8468;
  --blue: #85b9e5;
  --yellow: #ffd66b;
  --shadow: 0 18px 50px rgba(33, 61, 51, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #dfe9e4;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.network-banner { position:fixed; z-index:120; top:max(10px, env(safe-area-inset-top)); left:50%; display:flex; align-items:center; gap:7px; max-width:calc(100% - 28px); padding:9px 13px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(25,51,46,.96); color:white; font-size:10px; font-weight:700; box-shadow:0 10px 28px rgba(25,51,46,.24); opacity:0; pointer-events:none; transform:translate(-50%,-18px); transition:opacity .25s, transform .25s; }
.network-banner.show { opacity:1; transform:translate(-50%,0); }
.network-banner span { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 3px rgba(255,132,104,.18); }

.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); opacity: .38; pointer-events: none; }
.ambient-one { background: #d3fa83; top: -180px; left: -100px; }
.ambient-two { background: #93caef; right: -130px; bottom: -180px; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.status-bar { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.status-icons { display: flex; gap: 5px; align-items: center; }
.status-icons svg { width: 17px; height: 14px; stroke-width: 1.5; }
.status-icons svg:last-child { width: 23px; }
.status-icons .battery-fill { fill: currentColor; stroke: none; }
.app-content { padding-bottom: 90px; }
.page { display: none; padding: 20px 20px 30px; animation: pageIn .35s ease; }
.page.active { display: block; }
@keyframes pageIn { from { transform: translateY(5px); } to { transform: none; } }

.top-header, .simple-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.top-header h1, .simple-header h1 { margin: 3px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -.6px; }
.eyebrow, .tiny-label { margin: 0; color: #8a938d; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: 1.25px; }
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.6s infinite; }
@keyframes wave { 0%,55%,100% { transform: rotate(0) } 10% { transform: rotate(18deg) } 20% { transform: rotate(-8deg) } 30% { transform: rotate(14deg) } 40% { transform: rotate(-4deg) } }
.icon-button, .round-button { width: 42px; height: 42px; border: 1px solid var(--line); background: rgba(255,255,255,.72); border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
.icon-button svg, .round-button svg { width: 21px; height: 21px; }
.notification-button { position: relative; }
.notification-dot { position: absolute; right: 7px; top: 6px; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); }

.morning-hero { position: relative; min-height: 274px; padding: 25px 22px; border-radius: 26px; background: var(--lime); overflow: hidden; isolation: isolate; box-shadow: 0 12px 35px rgba(158, 197, 76, .21); }
.hero-copy { position: relative; z-index: 4; max-width: 76%; }
.hero-label { display: flex; gap: 7px; align-items: center; font-size: 8px; letter-spacing: 1.25px; font-weight: 900; opacity: .66; }
.hero-label span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }
.morning-hero h2 { margin: 20px 0 10px; font-size: 28px; line-height: 1.22; letter-spacing: -1.3px; }
.morning-hero p { max-width: 220px; margin: 0; font-size: 12px; line-height: 1.7; color: #4f6a49; }
.morning-hero p strong { padding: 1px 5px; background: rgba(255,255,255,.52); border-radius: 5px; color: var(--ink); }
.primary-button { margin-top: 20px; padding: 12px 15px 12px 17px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; gap: 13px; background: var(--ink); color: white; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 7px 18px rgba(25, 51, 46, .2); transition: transform .2s ease; }
.primary-button:active { transform: scale(.97); }
.primary-button svg { width: 16px; }
.hero-orbit { position: absolute; border: 1px solid rgba(25,51,46,.09); border-radius: 50%; z-index: -1; }
.orbit-one { width: 270px; height: 270px; right: -130px; top: -105px; }
.orbit-two { width: 170px; height: 170px; right: -65px; top: -54px; }
.sun-illustration { position: absolute; right: -20px; bottom: -14px; width: 162px; height: 150px; }
.sun-face { position: absolute; width: 100px; height: 100px; right: 18px; top: 8px; border-radius: 50%; background: #ffd864; border: 3px solid rgba(25,51,46,.82); box-shadow: inset -10px -8px 0 rgba(255,177,60,.18); }
.sun-face:before, .sun-face:after { content: ""; position: absolute; width: 2px; height: 16px; top: -23px; left: 49px; background: var(--ink); border-radius: 2px; transform-origin: center 72px; }
.sun-face:after { transform: rotate(47deg); }
.eye { position: absolute; top: 41px; width: 6px; height: 9px; border-radius: 50%; background: var(--ink); }
.eye.left { left: 28px; }.eye.right { right: 28px; }
.smile { position: absolute; width: 28px; height: 15px; left: 34px; top: 58px; border-bottom: 3px solid var(--ink); border-radius: 0 0 30px 30px; }
.cloud { position: absolute; height: 28px; background: rgba(255,255,255,.92); border: 2px solid var(--ink); border-radius: 18px; }
.cloud:before, .cloud:after { content: ""; position: absolute; background: inherit; border: 2px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0; }
.cloud-a { width: 102px; bottom: 20px; left: 4px; z-index: 2; }.cloud-a:before { width: 36px; height: 28px; left: 16px; top: -19px; }.cloud-a:after { width: 26px; height: 20px; right: 15px; top: -13px; }
.cloud-b { width: 74px; bottom: 4px; right: -4px; }.cloud-b:before { width: 27px; height: 20px; left: 12px; top: -14px; }.cloud-b:after { width: 18px; height: 14px; right: 10px; top: -8px; }

.progress-strip { margin: 14px 0 25px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.64); border: 1px solid rgba(222,222,213,.8); border-radius: 18px; }
.ring { --progress: 0deg; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: conic-gradient(var(--coral) var(--progress), #e8e9e3 0); display: grid; place-items: center; position: relative; }
.ring:before { content:""; position:absolute; inset:5px; background:var(--card); border-radius:50%; }
.ring span { position:relative; z-index:1; font-size:10px; font-weight:900; }
.progress-copy { min-width: 0; display: flex; flex-direction: column; flex: 1; gap: 3px; }
.progress-copy strong { font-size: 12px; }.progress-copy span { color: var(--muted); font-size: 10px; }
.streak-pill { padding: 7px 9px; background: #fff1e5; border-radius: 10px; font-size: 10px; color: #a75c42; white-space: nowrap; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.section-heading h2 { margin: 5px 0 0; font-size: 21px; }.tiny-label { color: #9caaa1; font-size: 8px; }
.text-button { border: 0; background: none; color: #65766e; font-size: 11px; cursor: pointer; }

.article-list { display: grid; gap: 12px; }
.article-card { position: relative; min-height: 147px; padding: 17px 15px 15px 146px; border-radius: 21px; background: var(--card); border: 1px solid #ebe8df; overflow: hidden; cursor: pointer; box-shadow: 0 8px 22px rgba(44,64,56,.055); transition: transform .2s ease, box-shadow .2s ease; }
.article-card:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(44,64,56,.09); }
.article-cover { position: absolute; inset: 9px auto 9px 9px; width: 121px; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: var(--cover); }
.article-cover:before { content:""; position:absolute; width:105px; height:105px; border:1px solid rgba(25,51,46,.12); border-radius:50%; left:-45px; top:-55px; box-shadow: 0 0 0 20px rgba(255,255,255,.08), 0 0 0 40px rgba(255,255,255,.06); }
.cover-emoji { position: relative; z-index: 1; font-size: 46px; filter: drop-shadow(0 8px 5px rgba(25,51,46,.13)); transform: rotate(-3deg); }
.cover-index { position: absolute; top: 10px; left: 11px; font-size: 9px; font-weight: 900; opacity: .62; }
.article-category { display: inline-flex; align-items: center; gap: 5px; color: #687b71; font-size: 8px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
.article-category:before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent, var(--coral)); }
.article-card h3 { margin: 8px 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.08; letter-spacing: -.25px; }
.article-card p { min-height: 31px; margin: 0; color: #819087; font-size: 10px; line-height: 1.5; }
.article-meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: #869188; font-size: 9px; }
.level-tag { padding: 3px 6px; color: #486254; background: #ecf1ea; border-radius: 6px; font-weight: 800; }
.completed-badge { position:absolute; top:12px; right:12px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; font-size:12px; box-shadow:0 3px 7px rgba(25,51,46,.2); }
.ai-coach-card { display:flex; gap:12px; align-items:center; margin-top:18px; padding:15px; background:#eaf2ee; border-radius:18px; }
.ai-avatar { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:14px; background:var(--ink); color:var(--lime); }
.ai-avatar svg { width:27px; }.ai-coach-card span { font-size:10px; font-weight:900; }.ai-coach-card p { margin:4px 0 0; color:#687970; font-size:10px; line-height:1.55; }

.simple-header { margin: 3px 0 22px; }.profile-mini { width: 42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); font-weight:900; border:2px solid var(--ink); }
.search-box { height: 48px; padding: 0 15px; display:flex; align-items:center; gap:10px; background:white; border:1px solid var(--line); border-radius:15px; }
.search-box svg { width:18px; color:#8b958f; }.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; }.search-box input::placeholder { color:#a2aaa5; }
.filter-chips { display:flex; gap:8px; margin:14px -20px 0; padding:0 20px 4px; overflow-x:auto; scrollbar-width:none; }.filter-chips::-webkit-scrollbar { display:none; }
.filter-chips button { padding:8px 14px; white-space:nowrap; border:1px solid var(--line); background:transparent; border-radius:12px; font-size:10px; cursor:pointer; }.filter-chips button.active { background:var(--ink); color:white; border-color:var(--ink); }
.library-summary { display:flex; justify-content:space-between; margin:20px 2px 11px; color:#87928c; font-size:10px; }.library-summary span:first-child { color:var(--ink); font-weight:800; }
.library-list { display:grid; gap:10px; }
.library-item { display:grid; grid-template-columns:75px 1fr auto; gap:12px; align-items:center; padding:9px; background:var(--card); border:1px solid var(--line); border-radius:17px; cursor:pointer; }
.library-thumb { width:75px; height:72px; display:grid; place-items:center; border-radius:12px; background:var(--cover); font-size:30px; }
.library-item h3 { margin:0 0 5px; font:700 15px/1.15 Georgia,serif; }.library-item p { margin:0; color:var(--muted); font-size:9px; }.library-item .arrow { padding-right:8px; font-size:22px; color:#9aa39e; }.empty-state { padding:50px 20px; text-align:center; color:var(--muted); font-size:12px; }

.growth-hero { padding:24px; text-align:center; color:white; background:var(--ink); border-radius:24px; overflow:hidden; position:relative; }
.growth-hero:before, .growth-hero:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.1); border-radius:50%; }.growth-hero:before { width:140px;height:140px;left:-70px;top:-75px; }.growth-hero:after { width:180px;height:180px;right:-80px;bottom:-130px; }
.growth-hero > span { font-size:10px; color:#b9c9c1; }.big-number { margin:4px 0 0; line-height:1; }.big-number b { font-size:56px; letter-spacing:-3px; }.big-number em { margin-left:5px; font-size:13px; font-style:normal; color:var(--lime); }.growth-hero p { margin:9px 0 0; color:#c0cec7; font-size:10px; }
.week-card { margin-top:13px; padding:17px 16px; background:var(--card); border:1px solid var(--line); border-radius:20px; }.card-title-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; }.card-title-row span { color:var(--muted); font-size:9px; }
.week-bars { height:105px; margin-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }.day-bar { flex:1; display:flex; height:100%; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; }.day-bar i { width:100%; max-width:20px; min-height:8px; border-radius:7px 7px 4px 4px; background:#e4e8e3; transition:height .5s ease; }.day-bar.done i { background:var(--lime-dark); }.day-bar.today i { background:var(--coral); }.day-bar span { font-size:8px; color:#8a968f; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }.metric-grid section { padding:15px; min-height:108px; display:grid; grid-template-columns:38px 1fr; grid-template-rows:1fr 1fr; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; }.metric-icon { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; font-size:10px; font-weight:900; }.metric-icon.coral { background:#ffe2db; color:#bf5d47; }.metric-icon.blue { background:#dcedfa; color:#4c83aa; }.metric-icon.yellow { background:#fff0c4; color:#a77d14; }.metric-icon.green { background:#dff1e2; color:#4d875a; }.metric-grid b { align-self:end; font-size:22px; }.metric-grid span { align-self:start; color:var(--muted); font-size:9px; }
.achievement-card { position:relative; display:grid; grid-template-columns:48px 1fr; gap:12px; margin-top:10px; padding:15px 15px 21px; background:#fff4d8; border:1px solid #f0dfb4; border-radius:18px; overflow:hidden; }.medal { width:45px;height:45px;display:grid;place-items:center;background:white;border-radius:15px;font-size:24px; }.achievement-card span { display:block;color:#a98a43;font-size:8px;font-weight:900;letter-spacing:.7px; }.achievement-card strong { display:block;margin-top:3px;font-size:12px; }.achievement-card p { margin:2px 0 0;color:#8e825f;font-size:9px; }.achievement-progress { position:absolute;bottom:0;left:0;right:0;height:5px;background:#f0e5c6; }.achievement-progress i { display:block;height:100%;background:#e9bb49;width:40%; }

.profile-card { display:flex; align-items:center; gap:13px; padding:16px; background:var(--ink); color:white; border-radius:22px; }.profile-avatar { position:relative; width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:20px;font-weight:900;border:2px solid white; }.profile-avatar span { position:absolute;right:-1px;bottom:0;width:13px;height:13px;border:2px solid var(--ink);border-radius:50%;background:#70d386; }.profile-card div:nth-child(2) { flex:1; }.profile-card strong { display:block;font-size:14px; }.profile-card div > span { display:block;margin-top:5px;color:#b6c6be;font-size:9px; }.profile-card button { border:0;background:transparent;color:#c5d1cb;font-size:25px;cursor:pointer; }
.settings-title { margin:23px 3px 9px;font-size:11px; }.settings-card { padding:0 14px;background:var(--card);border:1px solid var(--line);border-radius:20px; }.setting-row { min-height:67px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edebe4; }.setting-row:last-child { border-bottom:0; }.setting-row > div:first-child { display:flex;align-items:center;gap:10px; }.setting-icon { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;font-size:11px;font-weight:900; }.setting-icon.purple { background:#ebe3fa;color:#765ba4; }.setting-icon.orange { background:#ffe8d5;color:#b26b36; }.setting-icon.green { background:#dfeee3;color:#4a7f57; }.setting-row strong { display:block;font-size:11px; }.setting-row small { display:block;margin-top:4px;color:var(--muted);font-size:8px; }.setting-value { border:0;background:transparent;font-size:11px;font-weight:800;cursor:pointer; }
.column-row { padding:13px 0;display:block; }.level-selector { display:flex!important;margin-top:12px;gap:7px; }.level-selector button { flex:1;padding:7px;border:1px solid var(--line);border-radius:9px;background:transparent;font-size:9px;cursor:pointer; }.level-selector button.active { background:var(--ink);border-color:var(--ink);color:white; }
.switch input { display:none; }.switch span { display:block;position:relative;width:40px;height:23px;border-radius:20px;background:#d9ddd8;cursor:pointer;transition:.2s; }.switch span:after { content:"";position:absolute;width:17px;height:17px;top:3px;left:3px;border-radius:50%;background:white;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.2s; }.switch input:checked + span { background:var(--lime-dark); }.switch input:checked + span:after { transform:translateX(17px); }
.settings-card.compact { padding:0 12px; }.menu-row { width:100%;height:54px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;text-align:left;border:0;border-bottom:1px solid #edebe4;background:transparent;cursor:pointer; }.menu-row:last-child { border:0; }.menu-row span { font-size:15px; }.menu-row strong { font-size:10px; }.menu-row b { color:#9ca49f;font-size:18px;font-weight:400; }.menu-row.danger strong { color:#bb5e52; }.version { margin:23px 0 5px;text-align:center;color:#a3aba6;font-size:8px; }

.bottom-nav { position:absolute;z-index:20;left:0;right:0;bottom:0;height:77px;padding:9px 14px max(9px, env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:rgba(255,253,248,.92);border-top:1px solid rgba(222,222,213,.82);backdrop-filter:blur(18px); }.bottom-nav button { flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;color:#99a19d;font-size:8px;font-weight:700;cursor:pointer; }.bottom-nav svg { width:20px;height:20px;stroke-width:1.7; }.bottom-nav button.active { color:var(--ink); }.bottom-nav button.active svg { fill:var(--lime);stroke:var(--ink); }.bottom-nav button.active span:after { content:"";display:block;width:4px;height:4px;margin:3px auto 0;border-radius:50%;background:var(--coral); }

.reader { position:fixed;z-index:50;inset:0;max-width:480px;margin:0 auto;background:var(--paper);transform:translateX(105%);transition:transform .38s cubic-bezier(.22,.8,.25,1);box-shadow:var(--shadow); }.reader.open { transform:translateX(0); }.reader-header { height:70px;padding:14px 18px;display:flex;align-items:center;gap:14px;background:rgba(248,245,237,.95);backdrop-filter:blur(14px); }.round-button { width:39px;height:39px;border-radius:50%;background:white; }.reader-progress { flex:1;height:5px;border-radius:5px;background:#e0e4df;overflow:hidden; }.reader-progress i { display:block;height:100%;width:0;background:var(--coral);border-radius:5px;transition:width .2s; }.reader-scroll { height:calc(100vh - 136px);padding:0 22px 35px;overflow-y:auto; }.reader-hero { margin:6px 0 25px;padding:25px 22px;min-height:205px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:24px;background:var(--cover);position:relative;overflow:hidden; }.reader-hero:before { content:attr(data-emoji);position:absolute;right:18px;top:17px;font-size:70px;filter:drop-shadow(0 9px 8px rgba(20,40,35,.15)); }.reader-hero:after { content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(25,51,46,.12);border-radius:50%;right:-80px;top:-90px;box-shadow:0 0 0 25px rgba(255,255,255,.08); }.reader-hero .article-category { position:relative;z-index:2; }.reader-hero h1 { position:relative;z-index:2;max-width:270px;margin:10px 0 9px;font:700 31px/1.02 Georgia,serif;letter-spacing:-1px; }.reader-hero p { position:relative;z-index:2;max-width:290px;margin:0;color:#53675e;font-size:10px; }.reader-meta { display:flex;gap:9px;align-items:center;margin:0 2px 22px;color:#7f8b85;font-size:10px; }.reader-meta span { padding:5px 8px;background:white;border-radius:8px; }.reader-body { color:#33463e;font:400 17px/1.95 Georgia,"Times New Roman",serif; }.reader-body p { margin:0 0 23px; }.vocab-word { padding:1px 2px;border-bottom:2px dotted var(--coral);background:linear-gradient(transparent 69%,#ffe5dc 0);cursor:pointer; }.translation-block { display:none;margin:-8px 0 23px;padding:13px 14px;border-left:3px solid var(--lime-dark);background:#eef3e9;color:#607168;font:400 11px/1.7 ui-rounded,"PingFang SC",sans-serif;border-radius:0 10px 10px 0; }.reader.show-translation .translation-block { display:block; }.quiz-card { margin:30px 0 10px;padding:19px;background:white;border:1px solid var(--line);border-radius:19px; }.quiz-card .tiny-label { color:#b17363; }.quiz-card h3 { margin:8px 0 15px;font:700 16px/1.45 Georgia,serif; }.quiz-option { width:100%;margin-top:8px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fafaf6;text-align:left;font-size:10px;cursor:pointer;transition:.2s; }.quiz-option:hover { border-color:#a8b6ae; }.quiz-option.selected { border-color:var(--ink);background:#edf3ef; }.quiz-option.correct { border-color:#72aa7f;background:#e3f4e6;color:#387346; }.quiz-option.wrong { border-color:#dd826e;background:#ffebe6;color:#a85442; }.finish-button { width:100%;margin-top:12px;padding:13px;border:0;border-radius:13px;background:var(--ink);color:white;font-size:11px;font-weight:800;cursor:pointer; }.finish-button:disabled { opacity:.4;cursor:not-allowed; }.reader-toolbar { position:absolute;bottom:0;left:0;right:0;height:66px;padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:space-around;background:rgba(255,253,248,.95);border-top:1px solid var(--line);backdrop-filter:blur(15px); }.reader-toolbar button { width:30%;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#718079;font-size:8px;cursor:pointer; }.reader-toolbar svg { width:19px;height:19px; }.reader-toolbar button.active { color:var(--coral); }.toolbar-character { font-size:15px;font-weight:900;line-height:19px; }

.modal-backdrop { position:fixed;z-index:80;inset:0;background:rgba(16,33,28,.42);opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px); }.modal-backdrop.open { opacity:1;pointer-events:auto; }.bottom-sheet { position:absolute;left:50%;bottom:0;width:min(480px,100%);max-height:78vh;padding:11px 22px 28px;overflow-y:auto;background:var(--card);border-radius:25px 25px 0 0;transform:translate(-50%,100%);transition:transform .3s ease; }.modal-backdrop.open .bottom-sheet { transform:translate(-50%,0); }.sheet-handle { width:38px;height:4px;margin:0 auto 14px;border-radius:4px;background:#d6d9d4; }.sheet-close { position:absolute;right:18px;top:17px;width:30px;height:30px;border:0;border-radius:50%;background:#eef0ec;color:#65736c;font-size:18px;cursor:pointer; }.sheet-title { margin:4px 36px 4px 0;font-size:19px; }.sheet-subtitle { margin:0 0 17px;color:var(--muted);font-size:10px;line-height:1.6; }.word-list { display:grid;gap:9px; }.word-card { padding:13px 14px;background:#f3f4ee;border-radius:13px; }.word-head { display:flex;align-items:center;justify-content:space-between; }.word-head strong { font:700 16px Georgia,serif; }.word-head span { color:#8a958f;font-size:9px; }.word-card p { margin:7px 0 0;color:#5e6e66;font-size:10px;line-height:1.5; }.single-word { text-align:center;padding:12px 4px 2px; }.single-word .word-phonetic { color:#89958e;font:400 12px Georgia,serif; }.single-word h2 { margin:6px 0;font:700 31px Georgia,serif; }.single-word .word-meaning { display:inline-block;padding:5px 11px;border-radius:8px;background:#edf2e8;font-size:11px;font-weight:800; }.single-word p { margin:17px 0;padding:14px;background:#f5f4ee;border-radius:13px;color:#607069;font:italic 13px/1.6 Georgia,serif;text-align:left; }.single-word button { padding:10px 16px;border:0;border-radius:11px;background:var(--ink);color:white;font-size:10px;cursor:pointer; }.time-picker { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0; }.time-picker label { color:var(--muted);font-size:9px; }.time-picker select { width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:11px;background:white;font-size:12px; }.sheet-action { width:100%;padding:13px;border:0;border-radius:12px;background:var(--ink);color:white;font-size:11px;font-weight:800;cursor:pointer; }.about-list { margin:15px 0;padding-left:18px;color:#5f7067;font-size:10px;line-height:1.9; }
.toast { position:fixed;z-index:100;left:50%;bottom:94px;max-width:360px;padding:10px 16px;border-radius:12px;background:rgba(25,51,46,.94);color:white;font-size:10px;box-shadow:0 8px 25px rgba(20,40,34,.24);opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.25s; }.toast.show { opacity:1;transform:translate(-50%,0); }

.daily-schedule { display:grid; gap:10px; }
.schedule-item { display:grid; grid-template-columns:48px 1fr; gap:8px; position:relative; }
.schedule-rail { display:flex; flex-direction:column; align-items:center; }
.schedule-time { padding-top:17px; color:#61736a; font-size:10px; font-weight:900; font-variant-numeric:tabular-nums; }
.schedule-line { width:1px; flex:1; min-height:15px; margin-top:7px; background:#d7dcd6; position:relative; }
.schedule-line:before { content:""; position:absolute; width:7px; height:7px; top:-4px; left:-3px; border-radius:50%; background:var(--task-color); box-shadow:0 0 0 4px var(--paper); }
.schedule-item:last-child .schedule-line { background:transparent; }
.schedule-card { position:relative; min-height:120px; padding:16px 15px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--card); cursor:pointer; box-shadow:0 8px 22px rgba(44,64,56,.05); transition:transform .2s, box-shadow .2s; }
.schedule-card:hover { transform:translateY(-2px); box-shadow:0 13px 28px rgba(44,64,56,.09); }
.schedule-card:after { content:""; position:absolute; width:90px; height:90px; right:-48px; top:-48px; border-radius:50%; background:var(--task-color); opacity:.14; }
.schedule-card-head { display:flex; align-items:center; gap:9px; position:relative; z-index:1; }
.task-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#eef1e9; font-size:18px; }
.task-label { flex:1; }
.task-label span { display:block; color:#85928b; font-size:8px; font-weight:900; letter-spacing:.9px; }
.task-label strong { display:block; margin-top:3px; font-size:12px; }
.task-status { padding:5px 7px; border-radius:8px; background:#f0f1ec; color:#7c8982; font-size:8px; font-weight:800; }
.task-status.ready { background:#e9f4dc; color:#557b37; }.task-status.done { background:var(--ink); color:white; }
.schedule-card h3 { margin:12px 0 5px; font:700 17px/1.15 Georgia,"Times New Roman",serif; }
.schedule-card p { margin:0; color:#7e8c84; font-size:9px; line-height:1.5; }
.task-meta { display:flex; gap:8px; margin-top:9px; color:#7c8982; font-size:8px; }
.song-dots { display:flex; gap:0; margin-top:10px; }.song-dots span { width:25px; height:25px; margin-right:-4px; display:grid; place-items:center; border:2px solid var(--card); border-radius:50%; background:var(--dot); font-size:11px; }
.song-list { display:grid; gap:10px; margin:16px 0; }
.song-card { display:grid; grid-template-columns:50px 1fr auto; gap:11px; align-items:center; padding:11px; background:#f4f3ed; border-radius:15px; }
.song-cover { width:50px; height:50px; display:grid; place-items:center; border-radius:13px; background:var(--song-color); font-size:24px; }
.song-card strong { display:block; font:700 14px/1.2 Georgia,serif; }.song-card small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }.song-card p { margin:5px 0 0; color:#596b62; font-size:8px; }
.song-card button { width:30px; height:30px; border:0; border-radius:50%; background:var(--ink); color:white; cursor:pointer; }
.show-feature { margin:15px 0; padding:19px; min-height:145px; border-radius:18px; color:white; background:linear-gradient(135deg,#426b7b,#19332e); position:relative; overflow:hidden; }
.show-feature:after { content:attr(data-emoji); position:absolute; right:17px; top:24px; font-size:58px; transform:rotate(4deg); }.show-feature span { font-size:8px; letter-spacing:1px; color:#c4d9d2; }.show-feature h3 { max-width:230px; margin:12px 0 5px; font:700 25px/1.05 Georgia,serif; }.show-feature p { max-width:230px; margin:0; color:#c4d2cd; font-size:9px; }
.expression-list { display:grid; gap:8px; margin:12px 0 17px; }.expression-list div { padding:11px 12px; background:#f3f4ee; border-radius:12px; }.expression-list strong { display:block; font:700 13px Georgia,serif; }.expression-list span { display:block; margin-top:4px; color:#6f7f77; font-size:9px; }
.word-trainer { text-align:center; }.word-progress-row { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }.word-progress-track { height:5px; margin:8px 0 18px; background:#e5e7e1; border-radius:5px; overflow:hidden; }.word-progress-track i { display:block; height:100%; background:var(--lime-dark); border-radius:5px; }
.flash-card { min-height:225px; padding:28px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#eef5e7,#fffaf0); border:1px solid var(--line); border-radius:20px; }.flash-card .phonetic { color:#87938c; font:400 11px Georgia,serif; }.flash-card h2 { margin:7px 0; font:700 33px Georgia,serif; }.flash-card .meaning { padding:5px 11px; border-radius:8px; background:white; font-size:11px; font-weight:800; }.flash-card p { margin:17px 0 0; color:#607168; font:italic 12px/1.6 Georgia,serif; }
.word-controls { display:grid; grid-template-columns:1fr 1.4fr; gap:9px; margin:11px 0; }.word-controls button { padding:11px; border:1px solid var(--line); border-radius:11px; background:white; font-size:9px; font-weight:800; cursor:pointer; }.word-controls button:last-child { border-color:var(--ink); background:var(--ink); color:white; }.word-extra { display:flex; justify-content:space-between; margin:8px 2px 14px; }.word-extra button { border:0; background:transparent; color:#687970; font-size:9px; cursor:pointer; }
.push-list { display:grid; gap:9px; margin:16px 0; }.push-row { display:grid; grid-template-columns:45px 36px 1fr auto; gap:9px; align-items:center; padding:11px; border-radius:14px; background:#f3f4ee; }.push-row time { font-size:10px; font-weight:900; }.push-row .push-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:white; }.push-row strong { display:block; font-size:10px; }.push-row small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }.push-row button { padding:7px 9px; border:0; border-radius:9px; background:var(--ink); color:white; font-size:8px; cursor:pointer; }
.push-note { margin:12px 0 0; padding:11px; border-radius:11px; background:#fff3d6; color:#7f6a36; font-size:8px; line-height:1.6; }

.reader:not(.open) { transform: translateX(110vw); }

@media (min-width: 760px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100vh - 48px); max-height: 920px; border-radius: 32px; }
  .app-content { height: calc(100vh - 78px); max-height: 842px; overflow-y:auto; scrollbar-width:none; }
  .app-content::-webkit-scrollbar { display:none; }
  .bottom-nav { position:sticky; margin-top:-77px; }
  .reader { top:24px; bottom:24px; border-radius:32px; overflow:hidden; }
  .reader-scroll { height:calc(100vh - 184px); max-height:790px; }
  .modal-backdrop { display:grid;place-items:center; }
  .bottom-sheet { position:relative;left:auto;bottom:auto;width:420px;border-radius:24px;transform:translateY(30px); }
  .modal-backdrop.open .bottom-sheet { transform:none; }
}

@media (max-width: 360px) {
  .page { padding-left:15px;padding-right:15px; }
  .morning-hero { padding-left:18px; }.morning-hero h2 { font-size:25px; }
  .article-card { padding-left:126px; }.article-cover { width:103px; }.article-card h3 { font-size:17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
}