:root { --green: #2e9e44; --green-dark: #1d7a31; --green-light: #e8f7ec; --leaf: #8bc34a; --sun: #ffca28; --soil: #6d4c41; --ink: #243329; --bad: #e53935; --good: #2e7d32; --warn: #ef6c00; --card: #ffffff; --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; /* typography */ --font: "Nunito", "Noto Sans SC", "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", sans-serif; --text-sm: .85rem; --text-base: 1rem; --text-lg: 1.2rem; --text-xl: 1.5rem; --text-2xl: 2rem; /* spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* elevation */ --shadow-1: 0 1px 3px rgba(16,40,24,.08); --shadow-2: 0 4px 14px rgba(16,40,24,.12); /* per-section accent (overridden by body[data-group]) */ --accent: var(--green); --accent-dark: var(--green-dark); --accent-soft: var(--green-light); font-size: 16px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-weight: 600; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: linear-gradient(180deg, #f1fbf3 0%, #e3f4e7 100%); color: var(--ink); min-height: 100vh; } /* per-section accent — set on by the nav */ body[data-group="chinese"] { --accent:#c0392b; --accent-dark:#922b21; --accent-soft:#fdecea; } body[data-group="english"] { --accent:#2e7dd1; --accent-dark:#1c5aa0; --accent-soft:#e9f2fc; } body[data-group="practice"] { --accent:#159a8a; --accent-dark:#0e6f63; --accent-soft:#e3f6f3; } body[data-group="me"] { --accent:#8a63d2; --accent-dark:#5f3fa0; --accent-soft:#efeafc; } /* ---------- Header ---------- */ .topbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 22px; background: linear-gradient(90deg, var(--green-dark), var(--green)); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .brand { display: flex; align-items: center; gap: 12px; } .logo { font-size: 2.4rem; } .topbar h1 { margin: 0; font-size: 1.45rem; letter-spacing: .5px; } .tagline { margin: 2px 0 0; font-size: .85rem; opacity: .9; } .stats { display: flex; gap: 10px; } .stat { background: rgba(255,255,255,.16); border-radius: 12px; padding: 6px 14px; text-align: center; min-width: 78px; } .stat span { font-size: 1.25rem; font-weight: 700; display: block; } .stat label { font-size: .7rem; opacity: .9; } /* ---------- Tabs ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; position: sticky; top: 0; z-index: 5; background: #ffffffee; backdrop-filter: blur(4px); border-bottom: 2px solid var(--green-light); } .tab { border: 2px solid transparent; background: var(--green-light); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--green-dark); transition: all .15s; } .tab:hover { transform: translateY(-2px); background: #d6efdc; } .tab.active { background: var(--green); color: #fff; box-shadow: 0 3px 8px rgba(46,158,68,.4); } /* ---------- Panels & cards ---------- */ main { max-width: 1080px; margin: 0 auto; padding: 18px; } .panel { display: none; animation: pop .25s ease; } .panel.active { display: block; } @keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } } h2 { color: var(--green-dark); margin: 8px 0 4px; } .intro { margin-top: 4px; } .muted { color: #6b7d70; font-size: .9rem; } .card { background: var(--card); border-radius: var(--radius); padding: 18px; margin: 14px 0; box-shadow: 0 3px 14px rgba(36,51,41,.08); border: 1px solid #e2efe5; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } } .row { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; } .row.spaced { justify-content: space-between; } .row.wrap { flex-wrap: wrap; } /* ---------- Buttons & inputs ---------- */ .btn { border: none; border-radius: 12px; padding: 10px 16px; background: var(--green-light); color: var(--green-dark); font-weight: 700; font-size: .95rem; cursor: pointer; transition: transform .12s, box-shadow .12s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); } .btn.primary { background: var(--green); color: #fff; } .btn.small { padding: 6px 12px; font-size: .85rem; } .btn.hidden { display: none; } .btn:disabled { opacity: .5; cursor: not-allowed; } input[type="text"], textarea, select { border: 2px solid #cde7d3; border-radius: 12px; padding: 10px 12px; font-size: 1rem; font-family: inherit; flex: 1; min-width: 160px; background: #fbfffc; color: var(--ink); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); } textarea { width: 100%; resize: vertical; } .pill { background: var(--green-light); color: var(--green-dark); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; } .pill.big { font-size: 1.05rem; } .pill.alt { background: #fff3d6; color: #8a6d00; } /* ---------- Feedback ---------- */ .feedback { font-weight: 600; min-height: 1.2em; } .feedback .ok { color: var(--good); } .feedback .no { color: var(--bad); } .feedback .warn { color: var(--warn); } .feedback ul { margin: 6px 0; padding-left: 22px; font-weight: 500; } /* ---------- Daily Quest ---------- */ .quest-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; } .quest-item { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--radius); padding: 14px 18px; border: 2px solid #e2efe5; cursor: pointer; transition: all .15s; } .quest-item:hover { border-color: var(--green); transform: translateX(4px); } .quest-item.done { background: var(--green-light); border-color: var(--green); } .quest-item .check { font-size: 1.6rem; width: 36px; text-align: center; } .quest-item .info { flex: 1; } .quest-item .info b { display: block; } .quest-item .mins { background: var(--sun); border-radius: 999px; padding: 4px 10px; font-size: .8rem; font-weight: 700; } .sprout-box { text-align: center; margin: 22px 0; } .sprout { font-size: 4rem; transition: transform .3s; } .progressbar { height: 16px; background: #d9ecde; border-radius: 999px; max-width: 420px; margin: 10px auto; overflow: hidden; } .progressbar .fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--leaf), var(--green)); border-radius: 999px; transition: width .4s; } /* ---------- Word Weaver ---------- */ .word-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .word-big { font-size: 1.7rem; font-weight: 800; color: var(--green-dark); } .speak { border: none; background: var(--sun); border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; transition: transform .12s; flex-shrink: 0; } .speak:hover { transform: scale(1.12); } .match-options { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .match-options button { text-align: left; } .garden-row { display: flex; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px dashed #dcebe0; flex-wrap: wrap; } .garden-row .w { font-weight: 700; min-width: 130px; } .garden-row .m { flex: 1; font-size: .9rem; color: #4a5d50; min-width: 200px; } /* ---------- Punctuation Patrol ---------- */ .palette { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; } .ptool { border: 2px solid #cde7d3; background: #fff; border-radius: 12px; padding: 10px 16px; font-size: 1.05rem; font-weight: 800; cursor: pointer; } .ptool.active { background: var(--green); color: #fff; border-color: var(--green-dark); } .monster-text { font-size: 1.25rem; line-height: 2.3; background: #fffdf2; border: 2px dashed #e3d8a8; border-radius: var(--radius); padding: 18px; margin: 12px 0; user-select: none; } .monster-text .w { display: inline; } .monster-text .gap { display: inline-block; min-width: 14px; text-align: center; cursor: pointer; border-radius: 6px; color: transparent; margin: 0 1px; } .monster-text .gap:hover { background: var(--sun); color: var(--soil); } .monster-text .gap.marked { color: var(--green-dark); font-weight: 800; background: var(--green-light); min-width: 18px; } .monster-text .gap.right { background: #c8e6c9; color: var(--good); } .monster-text .gap.wrong { background: #ffcdd2; color: var(--bad); text-decoration: line-through; } .monster-text .gap.missed { background: #fff9c4; color: var(--warn); } /* ---------- Climax Coach ---------- */ .climax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; } @media (max-width: 860px) { .climax-grid { grid-template-columns: 1fr; } } .climax-step { background: #f6fbf7; border-radius: 12px; padding: 12px; border: 1px solid #dfeee3; } .climax-step h3 { margin: 0 0 4px; font-size: 1rem; } .hint { font-size: .82rem; color: #5d6f63; margin: 2px 0 8px; } .counter { font-size: .78rem; color: #889a8d; float: right; } /* ---------- Conclusion Crafter ---------- */ .idiom-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; } .idiom-chip { background: #fff3d6; border: 2px solid #ffd54f; border-radius: 999px; padding: 8px 16px; cursor: grab; font-weight: 600; font-size: .95rem; transition: transform .12s; } .idiom-chip:hover { transform: scale(1.05); background: #ffe9b0; } .formula-labels { display: flex; justify-content: space-between; max-width: 560px; font-size: .8rem; font-weight: 700; color: var(--green-dark); margin: 8px 0 4px; } /* ---------- Math / Science ---------- */ .question { font-size: 1.12rem; line-height: 1.65; background: #f6fbf7; border-radius: 12px; padding: 14px; white-space: pre-wrap; } #md-options { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } #md-options button { text-align: left; font-size: 1rem; } #md-options button.right { background: #c8e6c9; color: var(--good); } #md-options button.wrong { background: #ffcdd2; color: var(--bad); } .model-answer { margin-top: 10px; } .model-answer summary { cursor: pointer; font-weight: 600; color: var(--green-dark); } .kw-ok { color: var(--good); font-weight: 700; } .kw-no { color: var(--bad); font-weight: 700; text-decoration: underline wavy; } /* ---------- Library ---------- */ .sub-chip { border: 2px solid var(--green); background: #fff; color: var(--green-dark); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 700; } .sub-chip.active { background: var(--green); color: #fff; } .sub-chip .n { font-size: .78rem; opacity: .75; } .lib-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .lib-item { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 10px; padding: 9px 14px; border: 1px solid #e2efe5; text-decoration: none; color: var(--ink); transition: all .12s; } .lib-item:hover { border-color: var(--green); transform: translateX(4px); } .lib-item .icon { font-size: 1.2rem; } .lib-item .t { flex: 1; font-weight: 600; font-size: .93rem; } .lib-item .meta { font-size: .78rem; color: #6b7d70; white-space: nowrap; } /* ---------- Lessons (learn before you try) ---------- */ .lesson { background: #fffbe8; border: 2px solid #ffe082; border-radius: var(--radius); padding: 14px 18px; margin: 12px 0; } .lesson summary { cursor: pointer; font-weight: 800; color: #8a6d00; font-size: 1.02rem; list-style-position: outside; } .lesson ul, .lesson ol { margin: 8px 0; padding-left: 22px; } .lesson li { margin: 5px 0; line-height: 1.5; } .lesson p { line-height: 1.55; } .lesson .worked { background: #fff; border-radius: 10px; padding: 10px 12px; white-space: pre-line; } .hidden-block { display: none; } .hidden-block.show { display: block; } /* ---------- Library group headers ---------- */ .lib-group { margin: 16px 0 4px; font-weight: 800; color: var(--green-dark); border-bottom: 2px solid var(--green-light); padding-bottom: 4px; font-size: 1.02rem; } /* ---------- Review / mistake notebook ---------- */ .badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; } .badge.hidden { display: none; } .review-card { border-left: 6px solid var(--warn); } .review-card .src { font-size: .78rem; color: #6b7d70; } .review-card .your { color: var(--bad); } .review-card.beaten { border-left-color: var(--good); opacity: .65; } .review-card.beaten .q-text { text-decoration: line-through; } /* ---------- Science answering techniques ---------- */ .technique-box { background: #fff8e6; border: 2px solid var(--sun); border-radius: 12px; padding: 12px 14px; margin: 10px 0; } .technique-box h4 { margin: 0 0 6px; color: #8a6d00; font-size: .98rem; } .technique-box .tech { margin: 8px 0; } .technique-box .tech b { color: var(--green-dark); } .technique-box .ex { font-style: italic; color: #4a5d50; font-size: .9rem; } .tech-topic { border: 2px solid var(--green); background: #fff; color: var(--green-dark); border-radius: 999px; padding: 6px 13px; cursor: pointer; font-weight: 700; font-size: .85rem; } .tech-topic.active { background: var(--green); color: #fff; } .tech-card { background: #f6fbf7; border-left: 5px solid var(--green); border-radius: 10px; padding: 12px 14px; margin: 8px 0; } .tech-card h4 { margin: 0 0 4px; color: var(--green-dark); } .tech-card .ex { font-style: italic; color: #4a5d50; font-size: .9rem; margin-top: 6px; } /* ---------- Library topic groups ---------- */ .topic-group { margin: 14px 0; } .topic-group > h3 { margin: 0 0 6px; color: var(--green-dark); cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; } .topic-group > h3 .tcount { font-size: .8rem; font-weight: 600; color: #6b7d70; } .topic-group > h3 .caret { transition: transform .15s; } .topic-group.collapsed > h3 .caret { transform: rotate(-90deg); } .topic-group.collapsed .lib-list { display: none; } /* ---------- Model composition gallery ---------- */ .lang-btn.active { background: var(--green); color: #fff; } .compo-card { border-top: 5px solid var(--leaf); } .compo-card h3 { margin: 0 0 2px; color: var(--green-dark); } .compo-card .ctheme { font-size: .8rem; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: .5px; } .compo-card .csource { margin: 2px 0 6px; font-size: .8rem; color: #6b7d70; font-weight: 600; } .compo-card .csum { margin: 8px 0; } .climax-box { background: #fff1f0; border-left: 5px solid var(--bad); border-radius: 10px; padding: 10px 14px; margin: 10px 0; } .climax-box b { color: var(--bad); } .words-box { background: #f3fbf5; border-left: 5px solid var(--green); border-radius: 10px; padding: 10px 14px; margin: 10px 0; } .words-box .gw { padding: 5px 0; border-bottom: 1px dashed #d6ebdc; } .words-box .gw:last-child { border-bottom: none; } .words-box .gw b { color: var(--green-dark); } .words-box .gw .speak { width: 30px; height: 30px; font-size: .9rem; margin-right: 6px; vertical-align: middle; } .compo-full { white-space: pre-wrap; background: #fffdf7; border: 1px solid #ece5cf; border-radius: 10px; padding: 14px; margin-top: 8px; line-height: 1.7; font-size: .96rem; } .compo-card .theme-label { display: none; } .compo-full.hidden { display: none; } /* ---------- Question bank ---------- */ .qb-card .src { font-size: .78rem; color: #6b7d70; } .qb-card button.right { background: #c8e6c9; color: var(--good); } .qb-card button.wrong { background: #ffcdd2; color: var(--bad); } /* ---------- Voice bar ---------- */ .voice-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; } .voice-bar select { flex: 0 1 240px; min-width: 140px; } .voice-bar label { font-size: .85rem; color: #4a5d50; display: flex; align-items: center; gap: 6px; } .voice-bar input[type="range"] { width: 90px; } /* ---------- In-app PDF viewer ---------- */ .viewer { position: fixed; inset: 0; z-index: 60; background: rgba(20, 40, 25, .55); backdrop-filter: blur(3px); display: flex; flex-direction: column; padding: 2.5vh 2.5vw; } .viewer.hidden { display: none; } .viewer-bar { display: flex; align-items: center; gap: 10px; background: var(--green-dark); color: #fff; padding: 8px 14px; border-radius: 12px 12px 0 0; } .viewer-title { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .viewer iframe { flex: 1; width: 100%; border: none; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 10px 40px rgba(0,0,0,.4); } .viewer-fallback { background: #fff; border-radius: 0 0 12px 12px; padding: 24px; text-align: center; margin: 0; } .viewer-fallback.hidden { display: none; } /* ---------- Reward Shop ---------- */ .coin-banner { margin: 10px 0 4px; } .reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; } .reward-card { background: var(--card); border: 2px solid #e2efe5; border-radius: var(--radius); padding: 14px; text-align: center; position: relative; } .reward-card .rico { font-size: 2.2rem; } .reward-card .rname { font-weight: 700; margin: 6px 0; } .reward-card .rcost { color: var(--warn); font-weight: 800; } .reward-card .btn { margin-top: 8px; width: 100%; } .reward-card .del { position: absolute; top: 6px; right: 8px; cursor: pointer; color: #c0392b; font-weight: 700; background: none; border: none; font-size: 1rem; } .reward-card.locked { opacity: .6; } .coupon-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .coupon { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px dashed var(--green); border-radius: 12px; background: #f3fbf5; } .coupon .cemoji { font-size: 1.6rem; } .coupon .cinfo { flex: 1; } .coupon .cinfo b { color: var(--green-dark); } .coupon .ccode { font-family: monospace; font-size: .8rem; color: #6b7d70; } .coupon.claimed { opacity: .55; border-style: solid; border-color: #bbb; background: #f3f3f3; } .coupon.claimed .cinfo b { text-decoration: line-through; } /* ---------- Spelling list ---------- */ .sp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px dashed #dcebe0; flex-wrap: wrap; } .sp-row .w { font-weight: 800; color: var(--green-dark); min-width: 130px; font-size: 1.05rem; } .sp-row .m { flex: 1; font-size: .9rem; color: #4a5d50; min-width: 160px; } .sp-row .papers { font-size: .75rem; color: #6b7d70; } .sp-row .freq { background: var(--sun); color: var(--soil); border-radius: 999px; padding: 2px 9px; font-size: .75rem; font-weight: 800; } .sp-row .freq.hot { background: var(--bad); color: #fff; } .sp-row.tested .w::after { content: " ✅"; font-size: .8rem; } .sp-bee-word { font-size: 1.1rem; font-weight: 700; color: var(--green-dark); } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--green-dark); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 50; transition: opacity .3s; } .toast.hidden { opacity: 0; pointer-events: none; } footer { text-align: center; padding: 18px; } code { background: #e8f7ec; padding: 2px 6px; border-radius: 6px; } /* ---------- Spelling Trainer ---------- */ .st-hero { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; } .st-dash { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 8px; } .st-stat { flex:1; min-width:92px; background:var(--green-light); border-radius:14px; padding:10px 6px; text-align:center; border:2px solid #d6efdd; } .st-stat span { display:block; font-size:1.7rem; font-weight:800; color:var(--green-dark); line-height:1; } .st-stat label { font-size:.72rem; color:var(--soil); font-weight:700; } .st-progress-wrap { position:relative; height:26px; background:var(--green-light); border-radius:13px; overflow:hidden; border:2px solid #d6efdd; margin-bottom:16px; } .st-progress-bar { height:100%; width:0%; border-radius:13px 0 0 13px; background:linear-gradient(90deg, var(--leaf), var(--green)); transition:width .6s ease; } .st-progress-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:var(--ink); } .st-card { text-align:center; padding:28px 22px; } .st-step { font-size:.8rem; font-weight:700; color:var(--soil); letter-spacing:.04em; text-transform:uppercase; } /* SHOW → TRY → FIX → LOCK loop label, shown to the child in 听写 + Skills Labs */ .loop-step { display:inline-block; margin:0 auto 10px; padding:4px 14px; border-radius:999px; background:var(--green-light); color:var(--green-dark); font-size:.82rem; font-weight:800; letter-spacing:.03em; } .st-word-big { font-size:2.6rem; font-weight:800; color:var(--green-dark); letter-spacing:.06em; margin:10px 0; } .st-meaning { font-size:1.05rem; color:var(--ink); margin:6px 0; } .st-papers { font-size:.8rem; color:var(--soil); margin-bottom:8px; } .st-hide { font-size:2.4rem; letter-spacing:.5rem; color:var(--leaf); margin:10px 0; } .st-input-big { font-size:1.5rem !important; text-align:center; letter-spacing:.12em; max-width:360px; margin:8px auto; } .st-chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:14px 0; } .st-chip { background:#fff; border:2px solid #d6efdd; border-radius:20px; padding:6px 14px; font-weight:700; color:var(--soil); font-size:.9rem; } .st-chip.done { background:var(--green); color:#fff; border-color:var(--green); } .st-chip.now { border-color:var(--sun); box-shadow:0 0 0 3px rgba(255,202,40,.35); } .st-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; } .st-correct-letters b { color:var(--good); } .st-big-emoji { font-size:3rem; margin:6px 0; } .st-done-card { text-align:center; } .st-tip { font-size:.85rem; color:var(--soil); margin-top:10px; } /* ---------- Grammar Lab ---------- */ .gl-rules { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } .gl-rule { background:var(--card); border:2px solid #d6efdd; border-radius:14px; padding:12px 14px; cursor:pointer; transition:transform .12s, box-shadow .12s; } .gl-rule:hover { transform:translateY(-2px); box-shadow:0 5px 14px rgba(0,0,0,.1); } .gl-rule.mastered { border-color:var(--green); background:var(--green-light); } .gl-rule .gl-ico { font-size:1.5rem; } .gl-rule h4 { margin:6px 0 2px; color:var(--green-dark); font-size:1rem; } .gl-rule .gl-badge { font-size:.78rem; font-weight:700; color:var(--soil); } .gl-rule.mastered .gl-badge { color:var(--green-dark); } .gl-teach h3 { color:var(--green-dark); margin:2px 0 8px; } .gl-rule-text { font-size:1rem; line-height:1.5; margin:8px 0; text-align:left; } .gl-eg { text-align:left; background:var(--green-light); border-radius:12px; padding:10px 14px; margin:10px 0; } .gl-eg li { margin:4px 0; } .gl-trap { text-align:left; background:#fff5e6; border:1px solid #ffd699; border-radius:12px; padding:10px 14px; margin:10px 0; } .gl-q { font-size:1.25rem; font-weight:700; color:var(--ink); margin:8px 0 14px; line-height:1.5; } .gl-choices { display:flex; flex-direction:column; gap:8px; max-width:460px; margin:0 auto; } .gl-choice { text-align:left; font-size:1.05rem; } .gl-choice.right { background:var(--green); color:#fff; border-color:var(--green); } .gl-choice.wrong { background:#ffe2e0; border-color:var(--bad); color:var(--bad); } .gl-scoreline { font-weight:700; color:var(--soil); margin-bottom:6px; } /* ---------- Grouped two-level navigation ---------- */ .groupnav { display:flex; gap:var(--space-2); padding:var(--space-3) var(--space-4) var(--space-2); justify-content:center; flex-wrap:wrap; max-width:1080px; margin:0 auto; } .groupbtn { border:2px solid var(--green-light); background:#fff; color:var(--green-dark); padding:9px 18px; border-radius:14px; font-size:var(--text-base); font-weight:800; cursor:pointer; white-space:nowrap; transition:transform .12s, box-shadow .12s; } .groupbtn:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); } .groupbtn:active { transform:translateY(0) scale(.97); } #group-nav .groupbtn.active { background-color:var(--green); border-color:var(--green); color:#fff; box-shadow:var(--shadow-2); } body[data-group="chinese"] #group-nav .groupbtn.active { background-color:#c0392b; border-color:#c0392b; color:#fff; } body[data-group="english"] #group-nav .groupbtn.active { background-color:#2e7dd1; border-color:#2e7dd1; color:#fff; } body[data-group="practice"] #group-nav .groupbtn.active { background-color:#159a8a; border-color:#159a8a; color:#fff; } body[data-group="me"] #group-nav .groupbtn.active { background-color:#8a63d2; border-color:#8a63d2; color:#fff; } .subnav { display:flex; gap:var(--space-2); padding:2px var(--space-4) var(--space-3); border-bottom:2px solid var(--accent-soft); margin:0 auto var(--space-2); max-width:1080px; overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .subnav::-webkit-scrollbar { height:5px; } .subnav::-webkit-scrollbar-thumb { background:#cfe6d6; border-radius:3px; } .subnav .tab { white-space:nowrap; flex:0 0 auto; } .subnav .tab.active { background:var(--accent); color:#fff; box-shadow:var(--shadow-1); } .subnav.hidden { display:none; } /* tablet/phone: tighter chrome, scrollable group bar */ @media (max-width:640px) { .groupnav { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:6px; padding:8px 12px 6px; } .groupbtn { padding:8px 14px; font-size:.92rem; } .topbar { padding:10px 14px; } .topbar h1 { font-size:1.15rem; } .tagline { display:none; } .stat { min-width:62px; padding:4px 10px; } .stat span { font-size:1.05rem; } } /* ---------- Today (home) ---------- */ .today-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .today-streak { text-align:center; background:var(--green-light); border:2px solid #d6efdd; border-radius:16px; padding:8px 18px; } .today-streak-num { display:block; font-size:2.2rem; font-weight:800; color:var(--green-dark); line-height:1; } .today-streak label { font-size:.72rem; font-weight:700; color:var(--soil); } .today-h3 { color:var(--green-dark); margin:14px 0 8px; } .today-tip { margin-top:12px; } .quest-item .qbtn { white-space:nowrap; align-self:center; } /* ---------- Sync across devices ---------- */ .sync-l { display:block; font-weight:700; color:var(--green-dark); margin:12px 0 4px; font-size:.92rem; } #sync-config { width:100%; font-family:var(--font-mono,monospace); font-size:.85rem; } #sync-code { width:100%; max-width:380px; } .sync-help { margin-top:16px; } .sync-steps { line-height:1.6; padding-left:20px; } .sync-steps li { margin:6px 0; } .sync-pre { background:#0f2417; color:#d6efdd; border-radius:10px; padding:10px 12px; font-size:.78rem; overflow-x:auto; white-space:pre; } /* ---------- Google login + auth chip ---------- */ .google-btn { display:inline-flex; align-items:center; gap:10px; background:#fff; border:2px solid #dadce0; color:#3c4043; font-weight:700; } .google-btn .g-g { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; color:#4285F4; font-weight:800; font-family:Arial,sans-serif; border:1px solid #e0e0e0; } .google-btn:hover { box-shadow:0 2px 8px rgba(0,0,0,.18); } .auth-chip { background:rgba(255,255,255,.22); color:#fff; border-radius:999px; padding:6px 12px; font-weight:700; font-size:.85rem; align-self:center; } .auth-chip.hidden { display:none; } .sync-signed { display:flex; align-items:center; gap:12px; margin:8px 0; } .sync-avatar { width:46px; height:46px; border-radius:50%; object-fit:cover; } .sync-avatar-ph { display:flex; align-items:center; justify-content:center; background:var(--green); color:#fff; font-weight:800; font-size:1.3rem; } /* ---------- Add Material ---------- */ .am-card { margin:14px 0; text-align:left; } .am-card h3 { color:var(--green-dark); margin:2px 0 6px; } .am-card textarea, .am-card input, .am-card select { margin:4px 0; } .am-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .am-chip { background:var(--green-light); border:1px solid #d6efdd; border-radius:16px; padding:4px 8px 4px 12px; font-weight:700; color:var(--green-dark); display:inline-flex; align-items:center; gap:6px; } .am-x { background:none; border:none; color:var(--bad); cursor:pointer; font-size:.85rem; padding:0 2px; } .am-qlist { list-style:none; padding:0; } .am-qlist li { background:#fbfffc; border:1px solid #e2efe5; border-radius:10px; padding:8px 12px; margin:6px 0; } /* ---------- 听写 priority badge ---------- */ .tx-prio { display:inline-block; font-size:.8rem; font-weight:800; padding:3px 12px; border-radius:999px; margin:6px 0; } .tx-prio-1 { background:#fde8c4; color:#8a4b00; } .tx-prio-2 { background:var(--green-light); color:var(--green-dark); } .tx-prio-3 { background:#eee; color:#666; } /* ---------- Study-all-then-test ---------- */ .study-list { display:flex; flex-direction:column; gap:8px; margin:12px 0; } .study-row { display:flex; align-items:center; gap:12px; background:#fbfffc; border:2px solid #e2efe5; border-radius:12px; padding:8px 12px; text-align:left; } .study-hear { flex:0 0 auto; } .study-word { font-size:1.5rem; font-weight:800; color:var(--green-dark); min-width:120px; } .study-mean { color:var(--soil); font-size:.95rem; } /* ---------- 听写 study + handwriting ---------- */ .tx-study-list { display:flex; flex-direction:column; gap:10px; margin:12px 0; } .tx-study-row { display:flex; align-items:center; gap:14px; background:#fbfffc; border:2px solid #e2efe5; border-radius:14px; padding:8px 12px; text-align:left; } .tx-study-hz { display:flex; gap:4px; flex:0 0 auto; } .tx-hz-cell { width:64px; height:64px; border:1px dashed #cfe6d6; border-radius:8px; cursor:pointer; } .tx-bighz { font-size:2.4rem; font-weight:800; color:var(--green-dark); } .tx-study-info { flex:1; } .tx-study-pin { font-size:1rem; color:var(--ink); font-weight:700; } .tx-study-mean { color:var(--soil); font-size:.9rem; } .tx-write { margin:10px 0; } .tx-write-tip { font-size:.9rem; color:var(--soil); margin:4px 0 8px; } .tx-quiz-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .tx-quiz-cell { width:110px; height:110px; border:3px solid #d6efdd; border-radius:12px; background:#fff; touch-action:none; } .tx-quiz-cell.active { border-color:var(--sun); box-shadow:0 0 0 3px rgba(255,202,40,.35); } .tx-quiz-cell.doneq { border-color:var(--green); background:var(--green-light); } .tx-answer { text-align:center; margin:8px 0; } .tx-answer #tx-ans-hz { display:flex; gap:6px; justify-content:center; } .tx-ans-pin { font-size:1.1rem; font-weight:800; color:var(--green-dark); margin-top:6px; } /* ---------- Topics (parent) ---------- */ .tp-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .tp-row { display:flex; align-items:center; gap:10px; padding:6px 4px; cursor:pointer; font-weight:600; color:var(--ink); } .tp-row input { width:20px; height:20px; flex:0 0 auto; } /* ---------- Mark-scheme self-marking ---------- */ .ms-model { background:var(--green-light); border-radius:10px; padding:8px 12px; margin:8px 0; } .ms-check { background:#fff7e6; border:1px solid #ffd699; border-radius:10px; padding:8px 12px; margin:8px 0; text-align:left; } .ms-h { font-weight:800; color:#8a4b00; margin:0 0 6px; font-size:.9rem; } .ms-pt { display:flex; align-items:flex-start; gap:8px; margin:5px 0; cursor:pointer; line-height:1.4; } .ms-pt input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; } /* ---------- Design polish pass (tokens, focus, press, accents) ---------- */ h2 { color: var(--accent-dark); } h3 { color: var(--accent-dark); } .intro { color: var(--ink); } /* visible keyboard focus everywhere */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } button:focus:not(:focus-visible), .tab:focus:not(:focus-visible) { outline: none; } /* tactile press feedback (works on touch, unlike hover) */ .btn:active { transform: translateY(0) scale(.97); } .tab:active { transform: scale(.96); } .quest-item:active { transform: scale(.99); } /* softer, consistent card elevation */ .card { box-shadow: var(--shadow-1); } .card:hover { box-shadow: var(--shadow-2); } /* primary action keeps the brand green, but border-radius via token */ .btn { border-radius: var(--radius-sm); } .tab { border-radius: var(--radius-pill); } /* nicer scrollbars app-wide */ * { scrollbar-width: thin; scrollbar-color: #cfe6d6 transparent; }