/* Unmute — Your English isn't gone. It's muted. */ :root{ /* 深色是设计基准：这个 App 主要在早晚用 */ --bg:#0b0d10; --surface:#14171c; --surface-2:#1c2027; --seg-on:#2b313a; --line:#262b33; --text:#e9ecef; --muted:#868f9b; --dim:#5b6470; --accent:#35d0a5; /* 通了 */ --on-accent:#05130f; --warn:#f0b429; /* 迟疑池 */ --warn-bg:#f0b429; --on-warn:#1a1200; --danger:#f4726f; /* 没想起来 */ --accent-soft:rgba(53,208,165,.12); --warn-soft:rgba(240,180,41,.12); --danger-soft:rgba(244,114,111,.12); --nav-bg:rgba(11,13,16,.92); --shadow:rgba(0,0,0,.45); --toggle-off:#262b33; --ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif; --en:"Charter","Georgia","Times New Roman",serif; /* 英文内容一律衬线，一眼区分"这是要学的" */ --r:14px; --tabh:calc(58px + env(safe-area-inset-bottom,0px)); } /* 浅色。data-theme 由 里的内联脚本在首帧前写死成 light/dark， 所以这里不需要 prefers-color-scheme —— 也就不会有刷新时的闪白。 */ :root[data-theme="light"]{ --bg:#f4f6f7; --surface:#ffffff; --surface-2:#eaeef1; --seg-on:#ffffff; --line:#dfe5ea; --text:#14181d; --muted:#59636f; --dim:#8a949f; --accent:#0d9c78; --on-accent:#ffffff; --warn:#8a6000; --warn-bg:#f5b921; --on-warn:#2a1d00; --danger:#c9403d; --accent-soft:rgba(13,156,120,.10); --warn-soft:rgba(240,180,41,.16); --danger-soft:rgba(201,64,61,.10); --nav-bg:rgba(244,246,247,.9); --shadow:rgba(20,30,40,.13); --toggle-off:#c7d0d8; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--text);font-family:var(--ui); font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } button{font-family:inherit;font-size:inherit;color:inherit;border:0;background:none;cursor:pointer} input,textarea{font-family:inherit;font-size:16px;color:inherit} /* 16px 防 iOS 聚焦缩放 */ /* ── 布局 ─────────────────────────────── */ #app{max-width:640px;margin:0 auto;padding:0 16px calc(var(--tabh) + 72px);min-height:100vh} header.top{ display:flex;align-items:baseline;gap:10px; padding:calc(14px + env(safe-area-inset-top,0px)) 0 10px; } .logo{font-family:var(--en);font-size:21px;font-weight:600;letter-spacing:-.01em} .logo .on{color:var(--accent)} .slogan{font-size:11.5px;color:var(--dim);letter-spacing:.01em} @media(max-width:400px){.slogan{display:none}} section.view{display:none;animation:fade .18s ease} section.view.on{display:block} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ── 底部 tab ─────────────────────────── */ nav.tabs{ position:fixed;left:0;right:0;bottom:0;z-index:50; display:flex;background:var(--nav-bg); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); } nav.tabs button{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:8px 0 7px;color:var(--dim);font-size:10.5px;transition:color .15s; } nav.tabs button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} nav.tabs button.on{color:var(--accent)} nav.tabs button .badge{ position:absolute;transform:translate(13px,-4px); background:var(--warn-bg);color:var(--on-warn);font-size:9px;font-weight:700; min-width:15px;height:15px;line-height:15px;border-radius:8px;padding:0 4px; } /* ── 通用件 ───────────────────────────── */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px} .card + .card{margin-top:10px} h2.sec{font-size:12px;font-weight:600;color:var(--dim);letter-spacing:.06em; text-transform:uppercase;margin:22px 0 10px} h2.sec:first-child{margin-top:6px} .en{font-family:var(--en);font-size:20px;line-height:1.5} .zh{color:var(--muted);font-size:14px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--surface-2);border:1px solid var(--line); border-radius:10px;padding:11px 16px;font-size:15px;transition:.13s; } .btn:active{transform:scale(.97)} .btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600} .btn.ghost{background:none} .btn.full{display:flex;width:100%} .btn:disabled{opacity:.4} .row{display:flex;gap:8px} .row>*{flex:1} .chip{ display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:999px; background:var(--surface-2);color:var(--muted);border:1px solid var(--line); } .chip.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent} .chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} /* ── 今天：四个动作 ───────────────────── */ .slot{ display:flex;align-items:center;gap:13px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:14px 15px; width:100%;text-align:left;margin-bottom:9px;transition:.13s; } .slot:active{transform:scale(.985)} .slot.done{opacity:.5} .slot .ico{ flex:none;width:38px;height:38px;border-radius:11px;background:var(--surface-2); display:grid;place-items:center;color:var(--muted); } .slot .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .slot.now .ico svg{stroke-width:1.8} .slot .body{flex:1;min-width:0} .slot .ttl{font-size:15.5px;font-weight:500} .slot .sub{font-size:12.5px;color:var(--dim);margin-top:1px} .slot .meta{flex:none;font-size:12px;color:var(--dim);text-align:right} .slot.now{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .slot.now .ico{background:var(--accent-soft);color:var(--accent)} .hero{ background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px; } .hero .n{font-family:var(--en);font-size:34px;font-weight:600;line-height:1.1} .hero .n small{font-size:14px;color:var(--dim);font-weight:400} .stats{display:flex;gap:20px;margin-top:12px} .stats div{font-size:12px;color:var(--dim)} .stats b{display:block;font-family:var(--en);font-size:19px;color:var(--text);font-weight:600} /* ── 闪回卡 ───────────────────────────── */ .flash-wrap{display:flex;flex-direction:column;min-height:calc(100vh - var(--tabh) - 90px)} .flash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .flash-card{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px;text-align:center;padding:26px 18px; background:var(--surface);border:1px solid var(--line);border-radius:20px; } .flash-zh{font-size:31px;font-weight:500;line-height:1.35} .flash-en{ font-family:var(--en);font-size:29px;color:var(--accent);line-height:1.35; word-break:break-word;cursor:pointer;user-select:none; display:inline-flex;align-items:center;gap:.3em;justify-content:center;flex-wrap:wrap; padding:6px 12px;border-radius:12px;transition:background .15s; } .flash-en:active{background:var(--accent-soft)} .flash-en .sp{ width:.62em;height:.62em;flex:none;opacity:.5; stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; } .flash-hint{font-size:13px;color:var(--dim)} .timer{position:relative;width:56px;height:56px} .timer svg{transform:rotate(-90deg);width:56px;height:56px} .timer circle{fill:none;stroke-width:3.5;stroke-linecap:round} .timer .bgc{stroke:var(--line)} .timer .fg{stroke:var(--accent);transition:stroke-dashoffset .1s linear,stroke .2s} .timer.late .fg{stroke:var(--warn)} .timer.over .fg{stroke:var(--danger)} .timer .num{ position:absolute;inset:0;display:grid;place-items:center; font-family:var(--en);font-size:17px;font-weight:600; } .judge{display:flex;gap:8px;margin-top:12px} .judge button{flex:1;padding:14px 6px;border-radius:12px;font-size:14px;border:1px solid var(--line);background:var(--surface)} .judge .g,.judge .y,.judge .r{border-color:color-mix(in srgb, currentColor 32%, transparent)} .judge .g{color:var(--accent)} .judge .y{color:var(--warn)} .judge .r{color:var(--danger)} .judge b{display:block;font-size:11px;color:var(--dim);font-weight:400;margin-top:2px} .progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:12px} .progress i{display:block;height:100%;background:var(--accent);transition:width .25s} /* ── 骨架填空 ─────────────────────────── */ .skel-en{font-family:var(--en);font-size:22px;line-height:1.6;margin:8px 0 4px} .skel-en .slot-mark{color:var(--accent);border-bottom:2px solid var(--accent);padding:0 4px} .opts{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0} .opts button{padding:7px 13px;border-radius:999px;border:1px solid var(--line); background:var(--surface-2);font-size:14px;font-family:var(--en)} .opts button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .fill{ width:100%;background:var(--surface-2);border:1px solid var(--line); border-radius:10px;padding:12px 13px;font-family:var(--en);font-size:17px;outline:none; } .fill:focus{border-color:var(--accent)} .result{margin-top:12px;padding:13px;border-radius:11px;background:var(--surface-2); border-left:2px solid var(--accent);font-size:14.5px;line-height:1.7;white-space:pre-wrap} .result.thinking{border-left-color:var(--dim);color:var(--muted)} /* ── 术语 / 听力 列表 ─────────────────── */ .pair{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .pair:last-child{border-bottom:0} .pair .l{flex:1;min-width:0} .pair .p-en{font-family:var(--en);font-size:17px} .pair .p-zh{font-size:13px;color:var(--muted)} .pair .play{flex:none;width:36px;height:36px;border-radius:50%;background:var(--surface-2); display:grid;place-items:center;color:var(--muted)} .pair .play:active{background:var(--accent-soft);color:var(--accent)} .pair.playing .play{background:var(--accent);color:var(--on-accent)} /* ── 句子库 ───────────────────────────── */ .sent{padding:13px 0;border-bottom:1px solid var(--line)} .sent:last-child{border-bottom:0} .sent .s-en{font-family:var(--en);font-size:17.5px;line-height:1.5} .sent .s-meta{display:flex;align-items:center;gap:8px;margin-top:6px} .sent .s-act{margin-left:auto;display:flex;gap:4px} .sent .s-act button{width:30px;height:30px;border-radius:8px;color:var(--dim);display:grid;place-items:center} .sent .s-act button:active{background:var(--surface-2)} .empty{text-align:center;padding:48px 20px;color:var(--dim);font-size:14px} .empty .big{font-size:34px;margin-bottom:10px;opacity:.5} /* ── 口述 ─────────────────────────────── */ .mic{ width:88px;height:88px;border-radius:50%;margin:22px auto;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);color:var(--muted); transition:.2s; } .mic.rec{background:var(--danger);color:#fff;border-color:var(--danger); animation:pulse 1.4s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(244,114,111,.4)}50%{box-shadow:0 0 0 16px rgba(244,114,111,0)}} .mic svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .transcript{font-family:var(--en);font-size:18px;min-height:60px;padding:13px; background:var(--surface-2);border-radius:11px;line-height:1.55} .transcript:empty::before{content:"…";color:var(--dim)} /* ── 卡壳求助（全局浮钮 + 弹层）───────── */ .fab{ position:fixed;right:16px;bottom:calc(var(--tabh) + 14px);z-index:60; height:46px;padding:0 17px;border-radius:23px;background:var(--warn-bg);color:var(--on-warn); font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px; box-shadow:0 6px 20px var(--shadow); } .fab:active{transform:scale(.95)} .sheet-bg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6); backdrop-filter:blur(3px);display:none} .sheet-bg.on{display:block} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:90;max-width:640px;margin:0 auto; background:var(--surface);border-radius:20px 20px 0 0;border-top:1px solid var(--line); padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); transform:translateY(102%);transition:transform .24s cubic-bezier(.32,.72,0,1); max-height:86vh;overflow-y:auto; } .sheet.on{transform:none} .sheet .grab{width:34px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px} .sheet h3{margin:0 0 4px;font-size:17px} .sheet .sub{font-size:13px;color:var(--dim);margin-bottom:14px} /* ── 设置 ─────────────────────────────── */ .field{margin-bottom:14px} .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px} .field input,.field select{ width:100%;background:var(--surface-2);border:1px solid var(--line); border-radius:10px;padding:11px 13px;outline:none; } .field input:focus{border-color:var(--accent)} .field .note{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.5} .sw{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)} .sw:last-child{border-bottom:0} .sw .t{font-size:15px} .sw .d{font-size:12px;color:var(--dim);margin-top:2px} .toggle{width:46px;height:27px;border-radius:14px;background:var(--toggle-off);position:relative;flex:none;transition:.2s} .toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px; border-radius:50%;background:#fff;transition:.2s} .toggle.on{background:var(--accent)} .toggle.on::after{transform:translateX(19px)} .range{width:100%;accent-color:var(--accent)} .toast{ position:fixed;left:50%;bottom:calc(var(--tabh) + 76px);transform:translateX(-50%) translateY(12px); background:var(--surface-2);border:1px solid var(--line);border-radius:11px; padding:11px 17px;font-size:14px;z-index:100;opacity:0;pointer-events:none;transition:.22s; box-shadow:0 8px 24px var(--shadow);max-width:88vw;text-align:center; } .toast.on{opacity:1;transform:translateX(-50%)} /* 分段控件：跟随系统 / 浅色 / 深色 */ .seg{display:flex;background:var(--surface-2);border-radius:11px;padding:3px;gap:2px} .seg button{flex:1;padding:9px 4px;border-radius:9px;font-size:14px;color:var(--muted);transition:.15s} .seg button.on{background:var(--seg-on);color:var(--text);box-shadow:0 1px 3px var(--shadow);font-weight:500} .seg button:active{transform:scale(.97)} /* ── 日期条：闪回 / 造句都用 ────────────── */ .daybar{display:flex;align-items:center;gap:8px;margin-bottom:10px} .daybar .d-arrow{ flex:none;width:38px;height:38px;border-radius:10px;background:var(--surface); border:1px solid var(--line);font-size:19px;color:var(--muted);line-height:1; } .daybar .d-arrow:active{transform:scale(.94)} .daybar .d-arrow:disabled{opacity:.28} .daybar .d-title{ flex:1;display:flex;flex-direction:column;align-items:center;gap:1px; background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px; } .daybar .d-title:active{transform:scale(.99)} .daybar .d-title b{font-size:15px;font-weight:600} .daybar .d-title span{font-size:11.5px;color:var(--dim)} .daybar .d-title.past b{color:var(--muted)} .daybar .d-title.future b{color:var(--warn)} /* ── 30 天目录 ─────────────────────────── */ .cal-day{ display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:11px 12px;border-radius:11px;border:1px solid transparent;margin-bottom:5px; background:var(--surface-2); } .cal-day:active{transform:scale(.99)} .cal-day.today{border-color:var(--accent);background:var(--accent-soft)} .cal-day.done .n{color:var(--accent)} .cal-day.future{opacity:.62} .cal-day .n{flex:none;width:40px;font-family:var(--en);font-size:15px;font-weight:600} .cal-day .body{flex:1;min-width:0} .cal-day .ttl{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal-day .sub{font-size:11.5px;color:var(--dim);margin-top:1px} .cal-day .mark{flex:none;font-size:11.5px;color:var(--dim)} /* ── 单词池 ────────────────────────────── */ .filters{display:flex;gap:6px;overflow-x:auto;margin:10px 0 12px;padding-bottom:2px;-webkit-overflow-scrolling:touch} .filters::-webkit-scrollbar{display:none} .filters button{ flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line); background:var(--surface);font-size:13.5px;color:var(--muted);white-space:nowrap; } .filters button b{font-weight:600;margin-left:3px;font-family:var(--en)} .filters button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .word{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:left} .word:last-child{border-bottom:0} .word .w-l{flex:1;min-width:0} .word .w-zh{font-size:15px} .word .w-en{font-family:var(--en);font-size:14.5px;color:var(--accent);margin-top:1px} .word .w-r{flex:none;display:flex;align-items:center;gap:7px} .word.hid .w-en{filter:blur(5px);transition:filter .15s} .word.hid:active .w-en{filter:none} /* ── 词条详情 ──────────────────────────── */ .det-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px} .det-h .w{font-family:var(--en);font-size:27px;font-weight:600} .det-h .ipa{font-family:var(--en);font-size:15px;color:var(--muted)} .det-h .pos{font-size:12px;color:var(--dim)} .det-core{font-size:14.5px;line-height:1.7;color:var(--text);margin:8px 0 4px} .det-sec{font-size:11.5px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin:18px 0 7px} .det-ex{padding:9px 0;border-bottom:1px solid var(--line)} .det-ex:last-child{border-bottom:0} .det-ex .e{font-family:var(--en);font-size:16px;line-height:1.5} .det-ex .z{font-size:12.5px;color:var(--muted);margin-top:2px} .det-add{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)} .det-add:last-child{border-bottom:0} .det-add .l{flex:1;min-width:0} .det-add .l .e{font-family:var(--en);font-size:15.5px} .det-add .l .z{font-size:12.5px;color:var(--muted)} .det-add .plus{ flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line); background:var(--surface-2);color:var(--accent);font-size:17px;line-height:1; } .det-add .plus.done{color:var(--dim);border-color:transparent;background:none} .skel{background:var(--surface-2);border-radius:7px;height:13px;margin:7px 0;animation:sk 1.3s ease-in-out infinite} @keyframes sk{0%,100%{opacity:.45}50%{opacity:.9}} .stats button{background:none;text-align:left;padding:0;font-size:12px;color:var(--dim)} .stats button:active{opacity:.6} .gear{flex:none;width:34px;height:34px;border-radius:9px;color:var(--dim);display:grid;place-items:center;margin-left:auto} .gear svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .gear:active{background:var(--surface-2)} header.top .slogan{flex:1} /* ── 造句：一天一组 ─────────────────────── */ .grouphead{display:flex;align-items:center;gap:12px;margin-bottom:9px;padding:0 2px} .grouphead .g-l{flex:1;min-width:0} .grouphead .g-name{font-size:16px;font-weight:600} .grouphead .g-sub{font-size:11.5px;color:var(--dim);margin-top:1px} .dots{flex:none;display:flex;gap:6px} .dots button{ width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line); background:none;padding:0;transition:.15s; } .dots button.done{background:var(--accent);border-color:var(--accent)} .dots button.on{border-color:var(--accent);transform:scale(1.35)} .dots button.on.done{transform:scale(1.35)} /* ── 闪回准备态 ────────────────────────── */ #fl-ready{text-align:center} #fl-ready .ready-n{font-family:var(--en);font-size:64px;font-weight:600;line-height:1;color:var(--accent)} #fl-ready .ready-t{font-size:14px;color:var(--muted);margin-top:6px} #fl-ready .ready-tip{font-size:13.5px;color:var(--dim);line-height:1.8;margin-top:22px;max-width:270px} #fl-ready .ready-tip b{color:var(--warn);font-weight:600} #fl-live{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%} /* ── 同步 ──────────────────────────────── */ .sync-on{display:flex;align-items:center;gap:11px;margin-bottom:12px} .sync-on .av{ flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent-soft); color:var(--accent);display:grid;place-items:center;font-family:var(--en);font-size:17px;font-weight:600; } .sync-on .l{flex:1;min-width:0} .sync-on .u{font-size:15.5px;font-weight:500} .sync-on .s{font-size:12px;color:var(--dim);margin-top:1px} .sync-off{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:12px} .sync-tabs{display:flex;gap:2px;background:var(--surface-2);border-radius:10px;padding:3px;margin-bottom:12px} .sync-tabs button{flex:1;padding:8px;border-radius:8px;font-size:14px;color:var(--muted)} .sync-tabs button.on{background:var(--seg-on);color:var(--text);font-weight:500;box-shadow:0 1px 3px var(--shadow)} .sync-err{font-size:13px;color:var(--danger);margin-top:9px;line-height:1.5} .spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line); border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px} @keyframes sp{to{transform:rotate(360deg)}}