:root{color-scheme:light;--ink:#162d2a;--ink2:#58726c;--bg:#f6f8f5;--paper:#fff;--line:#e4ebe6;--green:#246c56;--mint:#cbe9d9;--gold:#e7b76b;--red:#9b4946;--shadow:0 16px 45px rgba(17,60,43,.055);font-family:system-ui,-apple-system,'Segoe UI',Arial,'Noto Sans TC',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:15px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #94cbb5;outline-offset:2px}a{color:var(--green)}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#142b27;color:white;display:flex;flex-direction:column;padding:32px 16px;gap:45px}.brand{display:flex;align-items:center;gap:11px;padding:0 9px}.brand-icon{background:#d4f0dc;color:#153e2e;width:47px;height:47px;display:grid;place-items:center;border-radius:14px;font-family:serif;font-size:30px}.brand strong{display:block;font-size:19px}.brand span{font-size:11px;opacity:.63}.nav{display:grid;gap:7px}.nav-btn{border:0;background:transparent;color:#afc7bc;padding:13px 15px;text-align:left;display:flex;gap:12px;align-items:center;border-radius:11px;font-size:14px}.nav-btn span{font-size:23px;line-height:1}.nav-btn:hover,.nav-btn.active{background:#2a4a3d;color:#f6fff8}.side-note{margin-top:auto;color:#bdd2ca;font-size:12px;padding:16px;line-height:1.8;border:1px solid #345146;border-radius:15px}.side-note small{opacity:.75}.pulse-dot{display:inline-block;width:7px;height:7px;background:#79deb0;border-radius:50%;margin-right:6px}.main-area{padding:35px min(4vw,60px) 18px;max-width:1600px;min-width:0;width:100%;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.17em;color:#67887b}.topbar h1{margin:4px 0 0;font-size:clamp(23px,2.8vw,32px);letter-spacing:-.045em}.top-actions{display:flex;gap:10px;align-items:center}.net-status{font-size:12px;color:var(--ink2);white-space:nowrap}.btn{border:1px solid transparent;background:var(--green);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .1s,background .1s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn.secondary{background:#eef5f0;color:var(--green);border-color:#dcece1}.btn.ghost{background:white;color:var(--ink);border-color:var(--line)}.btn.danger{background:#9e514d}.btn.mini{padding:9px 12px;font-size:12px}.btn.small{padding:9px 12px;font-size:13px}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.card{background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:23px;box-shadow:var(--shadow)}.soft{background:#eef4ef}.hero{background:linear-gradient(110deg,#173b30,#285b49);color:white;border:0;display:grid;grid-template-columns:minmax(0,1fr) 185px;gap:16px;align-items:center;overflow:hidden}.hero .eyebrow{color:#a9dabb}.hero h2{font-size:clamp(24px,3vw,35px);margin:9px 0;max-width:560px;letter-spacing:-.025em}.hero p{color:#dbede3;margin:0 0 21px;line-height:1.65}.hero .btn{background:#e6f5e7;color:#1d5540}.hero-symbol{font-size:125px;font-family:'Noto Serif TC',serif;line-height:1;text-align:center;color:#7eb99b;opacity:.35;transform:rotate(-10deg)}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.stack{display:grid;gap:16px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:25px 0 13px}.section-head h2{margin:0;font-size:20px}.muted{color:var(--ink2)}.tiny{font-size:12px}.metric{display:flex;align-items:center;justify-content:space-between;gap:10px}.metric b{display:block;font-size:clamp(22px,3vw,32px);line-height:1.3}.metric small{color:var(--ink2);display:block;margin-top:3px}.metric .symbol{background:#eaf5ed;color:var(--green);border-radius:13px;padding:12px;font-size:24px}.head-and-desc{display:flex;align-items:center;justify-content:space-between;gap:12px}.head-and-desc h3{margin:0 0 4px}.head-and-desc p{margin:0;color:var(--ink2);font-size:13px}.progress-track{height:11px;border-radius:20px;background:#e7eee8;overflow:hidden}.progress-fill{height:100%;background:#379577;border-radius:20px;transition:width .3s}.bar-chart{display:flex;align-items:end;gap:14px;height:150px;padding-top:18px;justify-content:space-around}.bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:end;flex:1;height:100%;font-size:11px;color:var(--ink2)}.bar{width:min(100%,35px);min-height:4px;background:#9dd4b5;border-radius:9px 9px 4px 4px}.bar.today{background:var(--green)}.empty{text-align:center;padding:45px 20px;color:var(--ink2)}.empty .big{font-size:44px;display:block;margin-bottom:10px}.empty h3{color:var(--ink);margin:6px 0}.empty p{line-height:1.65}.pill{border:1px solid #d9e9df;color:#34725d;background:#f5fbf7;border-radius:30px;padding:5px 10px;font-size:11px;font-weight:700;display:inline-block}.list{display:grid;gap:9px}.word-line{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:white}.word-line .hanzi{font-size:22px;font-weight:700}.word-line small{display:block;color:var(--ink2);margin-top:4px}.word-line .actions{display:flex;gap:7px}.word-line .meaning{color:var(--ink2);min-width:80px}.icon-btn{border:1px solid var(--line);border-radius:10px;padding:9px 11px;color:var(--ink);background:#fff}.icon-btn:hover{background:#edf5ef}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:15px 0}.toolbar .search{flex:1;min-width:180px}.input,select,textarea{border:1px solid #d9e6dd;background:white;border-radius:11px;padding:12px 13px;min-width:0;color:var(--ink);width:100%}textarea{min-height:82px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field{display:grid;gap:7px}.field label{font-size:12px;color:#4e6a60;font-weight:700}.field.span2{grid-column:1/-1}.hint{font-size:12px;color:var(--ink2);line-height:1.6}.alert{padding:14px 17px;border-radius:13px;margin-bottom:17px;background:#fff6df;border:1px solid #f2e1b5;color:#6c5727;line-height:1.5}.alert.error{background:#fff0ee;border-color:#f0ceca;color:#85423b}.alert.success{background:#edf9ef;border-color:#c9e7d0;color:#245c3b}.study-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:17px}.tab{border:1px solid #dce9e0;color:#426b5b;background:white;padding:11px 13px;border-radius:12px;font-weight:650}.tab.active{background:#225f4d;color:white;border-color:#225f4d}.flashcard{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:29px;text-align:center;background:radial-gradient(circle at 50% 20%,#f0f7f0,#fff 75%);border:1px solid var(--line);border-radius:19px}.flashcard .chinese{font-family:'Noto Serif TC',serif;font-size:clamp(50px,8vw,82px);font-weight:600;line-height:1.25}.flashcard .phonetic{font-size:23px;color:#487967}.flashcard .definition{font-size:21px;font-weight:650}.flashcard .examples{font-size:15px;line-height:1.8;max-width:530px;color:var(--ink2)}.flashcard .examples strong{display:block;color:var(--ink)}.rating-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:15px}.rate-btn{padding:13px 5px;border:1px solid var(--line);border-radius:12px;background:white;font-weight:700}.rate-btn small{display:block;font-weight:500;color:var(--ink2);margin-top:3px}.rate-btn.again{color:#ac504d}.rate-btn.hard{color:#b78031}.rate-btn.good{color:#238264}.rate-btn.easy{color:#3968a0}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.choice{border:1px solid #dce9e0;background:white;color:var(--ink);padding:17px 12px;border-radius:13px;font-weight:650;min-height:70px;text-align:center}.choice:hover:not(:disabled){border-color:#539579;background:#f0f9f2}.choice.correct{background:#e2f6e9;border-color:#71b894}.choice.wrong{background:#fce9e7;border-color:#d79a94}.study-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.study-tools .count{font-size:12px;color:var(--ink2)}.report{font-size:13px;line-height:1.6;padding:12px;border-radius:12px;background:#f3f8f4;margin-top:12px}.toast{position:fixed;z-index:1000;right:22px;bottom:24px;max-width:420px;background:#19392e;color:#fff;padding:12px 18px;border-radius:13px;box-shadow:0 15px 25px #123a2e44;opacity:0;pointer-events:none;transform:translateY(12px);transition:.2s}.toast.visible{opacity:1;transform:none}.footer{color:#859a90;font-size:11px;margin-top:40px;text-align:center}.mobile-nav{display:none}dialog{width:min(610px,calc(100vw - 25px));max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:23px;box-shadow:0 23px 90px #071f1877}dialog::backdrop{background:#0b2922aa}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-head h2{margin:0}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.settings-row:last-child{border-bottom:0}.settings-row p{margin:4px 0 0;color:var(--ink2);font-size:13px;line-height:1.5}.settings-row strong{display:block}.settings-row .input{max-width:195px}.badge-small{font-size:11px;color:#59806b}.quiz-input{max-width:420px;margin:8px auto}.divider{height:1px;background:var(--line);margin:16px 0}.loading{padding:50px;text-align:center}.offline-banner{background:#fff4dc;color:#735d2c;border-radius:9px;padding:10px 14px;margin-bottom:14px}.badge-complete{background:#ecf9f0;color:#29694c;border-radius:10px;padding:12px;margin-top:16px}#view{min-height:260px}
@media(max-width:1050px){.shell{grid-template-columns:212px minmax(0,1fr)}.sidebar{padding:24px 10px}.main-area{padding:30px 24px}.brand{padding:0 8px}.nav-btn{padding:12px}.grid3{gap:10px}.card{padding:18px}}
@media(max-width:760px){.shell{display:block}.sidebar{display:none}.main-area{padding:20px 15px 95px}.topbar{align-items:flex-start;gap:8px;margin-bottom:21px}.topbar h1{font-size:25px}.top-actions{flex-direction:column;align-items:flex-end}.net-status{font-size:10px}.btn.mini{font-size:11px;padding:7px 9px}.hero{grid-template-columns:1fr}.hero-symbol{display:none}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid2{grid-template-columns:1fr}.metric{display:block}.metric .symbol{display:none}.metric b{font-size:24px}.metric small{font-size:11px}.card{padding:17px;border-radius:16px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;justify-content:space-around;background:white;border-top:1px solid var(--line);padding:7px 5px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -8px 35px #204c3012}.mobile-nav button{flex:1;min-width:0;border:0;background:transparent;color:#759085;font-size:10px;display:flex;align-items:center;flex-direction:column;gap:3px;padding:5px 2px;border-radius:8px}.mobile-nav button span{font-size:23px;line-height:1}.mobile-nav button.active{color:var(--green);background:#e9f5ed;font-weight:700}.footer{margin-bottom:8px}.rating-row{grid-template-columns:repeat(2,minmax(0,1fr))}.flashcard{min-height:330px}.word-line{flex-wrap:wrap}.word-line .meaning{flex:1}.word-line .actions{margin-left:auto}.settings-row{align-items:flex-start;flex-wrap:wrap}.settings-row .input{max-width:none}.form-grid{grid-template-columns:1fr}.field.span2{grid-column:auto}}
@media(max-width:380px){.topbar h1{font-size:21px}.grid3{grid-template-columns:1fr 1fr}.grid3>.card:nth-child(3){grid-column:1/-1}.choice-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}