:root { --ink:#1d2735; --muted:#687483; --paper:#fffdf8; --cream:#f5f0e5; --line:#e7dfd0; --navy:#1c314a; --orange:#f39a45; --yellow:#ffe69b; --green:#2d8c72; --red:#c85c52; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 85% 8%,#fff3d8 0,transparent 26rem),var(--cream); font-family:"Noto Sans SC",system-ui,sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(1110px,calc(100% - 40px)); margin:0 auto; padding:26px 0 56px; }
.topbar { display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); padding-bottom:21px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; font:700 18px Outfit,sans-serif; letter-spacing:.04em; }
.brand em { color:var(--orange); font-style:normal; font-size:11px; letter-spacing:.14em; display:block; margin-top:1px; }
.brand-mark { display:grid; place-items:center; width:33px; height:33px; border-radius:10px; background:var(--navy); color:#fff; font-size:20px; }
.streak { margin-left:auto; color:var(--muted); font-size:13px; } .streak strong { color:var(--ink); font:700 17px Outfit,sans-serif; } .fire { color:var(--orange); font-size:18px; }.browse-button,.close-library { border:1px solid #d8d0c0; border-radius:8px; background:#fffaf0; color:var(--navy); padding:8px 12px; font-size:12px; font-weight:600; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 230px 230px; gap:22px; padding:60px 0 36px; align-items:end; }.hero-copy-block { min-width:0; }
.eyebrow { margin:0 0 11px; color:#c17a34; font:600 11px Outfit,sans-serif; letter-spacing:.18em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:14px; color:var(--navy); font:700 clamp(28px,4vw,47px)/1.15 Outfit,"Noto Sans SC",sans-serif; letter-spacing:-.025em; } h1 span { color:var(--orange); }
.hero-copy { max-width:570px; margin-bottom:0; color:var(--muted); line-height:1.8; font-size:14px; }
.daily-card,.encouragement-card { box-sizing:border-box; width:230px; min-height:168px; color:#fff; padding:20px; border-radius:15px; box-shadow:8px 9px 0 #decfb7; }.daily-card { background:var(--navy); }.encouragement-card { background:#a85f28; box-shadow:8px 9px 0 #e4c29b; }.daily-card p,.encouragement-card p { margin-bottom:6px; color:#b8c7d6; font-size:12px; }.encouragement-card p { color:#ffdfb8; }.daily-numbers strong,.probability-numbers strong { font:700 29px Outfit,sans-serif; }.daily-numbers span,.probability-numbers span { color:#c9d2dc; font-size:13px; }.probability-numbers { display:flex; align-items:baseline; gap:7px; }.probability-numbers span { color:#ffe3c1; font-size:11px; }.progress-track { height:6px; overflow:hidden; background:#52657a; border-radius:5px; margin:15px 0 9px; }.progress-track i { display:block; width:0%; height:100%; background:var(--orange); border-radius:inherit; transition:width .35s ease; }.probability-track { background:rgba(89,40,11,.34); }.probability-track i { background:#ffe19d; }.daily-card small,.encouragement-card small { color:#d5e0eb; font-size:11px; }.encouragement-card small { color:#fff0da; }.encouragement-card em { display:block; margin-top:10px; color:#f7d7b0; font-size:10px; font-style:normal; }
.plan-panel { margin:0 0 25px; padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.78); }.plan-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; }.plan-heading .eyebrow { margin-bottom:5px; }.plan-heading h2 { margin:0; color:var(--navy); font:600 19px Outfit,"Noto Sans SC",sans-serif; }.plan-heading > span { color:#bf7431; font:12px "DM Mono",monospace; white-space:nowrap; }.day-buttons { display:flex; gap:8px; margin-top:16px; width:100%; overflow-x:auto; padding:2px 4px 8px 1px; scrollbar-width:thin; }.day-button { position:relative; display:flex; flex:0 0 48px; flex-direction:column; justify-content:center; width:48px; height:50px; border:1px solid #ded6c7; border-radius:9px; background:#fffefa; color:#75808c; transition:.18s; }.day-button:hover:not(:disabled) { border-color:#e0a365; }.day-button small { font:9px "DM Mono",monospace; }.day-button strong { margin-top:2px; font:700 17px Outfit,sans-serif; }.day-button.active { border-color:var(--navy); background:var(--navy); color:#fff; box-shadow:3px 4px 0 #d9c5a7; }.day-button.locked { cursor:not-allowed; opacity:.56; background:#f0eee8; color:#8a8d90; }.day-lock { position:absolute; right:4px; top:3px; font-size:10px; line-height:1; }.day-button.completed:not(.active)::after { content:""; position:absolute; right:5px; bottom:5px; width:5px; height:5px; border-radius:50%; background:#3e9b75; }.word-count { display:flex; align-items:center; gap:12px; width:max-content; margin-top:16px; color:#65717e; font-size:13px; }.word-count select { appearance:auto; min-width:160px; border:1px solid #dcd3c4; border-radius:8px; background:#fffaf0; color:var(--navy); padding:10px 11px; font:600 13px "Noto Sans SC",sans-serif; }.word-count select:disabled { cursor:not-allowed; border-color:#ddd7cd; background:#eeeae1; color:#9b9b96; }
.library { margin-bottom:25px; padding:29px; border:1px solid var(--line); border-radius:17px; background:var(--paper); }.library.hidden { display:none; }.library-header,.library-tools { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.library-header h2 { margin:0 0 7px; color:var(--navy); font:700 29px Outfit,"Noto Sans SC",sans-serif; }.library-description { margin:0; color:#77818b; font-size:13px; }.close-library { white-space:nowrap; }.library-tools { align-items:center; margin:27px 0 18px; }.library-filters { display:flex; gap:7px; }.filter-button { border:1px solid #ded6c7; border-radius:99px; background:#fffefa; color:#65717e; padding:7px 12px; font-size:12px; }.filter-button.active { border-color:var(--navy); background:var(--navy); color:#fff; }.search-box { display:flex; align-items:center; gap:7px; width:235px; border:1px solid #ded6c7; border-radius:8px; background:#fffefa; padding:8px 10px; color:#a67d52; }.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:13px "Noto Sans SC",sans-serif; }.library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }.word-entry { min-height:117px; border:1px solid #e7dfd1; border-radius:10px; background:#fffefa; overflow:hidden; }.word-entry summary { min-height:117px; box-sizing:border-box; padding:14px; cursor:pointer; list-style:none; }.word-entry summary::-webkit-details-marker { display:none; }.word-entry summary:hover { background:#fff8e9; }.entry-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.entry-word { margin:0; color:var(--navy); font:600 20px Outfit,sans-serif; }.entry-phonetic { margin:3px 0 0; color:#84909b; font:11px "DM Mono",monospace; }.entry-meaning { margin:12px 0 0; color:#596674; font-size:13px; line-height:1.55; }.example-hint { display:block; margin-top:11px; color:#b47740; font-size:11px; }.word-entry[open] .example-hint::after { content:' · 已展开'; }.entry-examples { border-top:1px dashed #e7dac6; padding:0 14px 14px; }.entry-example { padding-top:13px; }.entry-example + .entry-example { margin-top:12px; border-top:1px solid #f0e8dc; }.entry-example > span { color:#b47b45; font-size:11px; }.entry-example p { margin:6px 0; color:#314255; font:500 14px/1.65 Outfit,"Noto Sans SC",sans-serif; }.entry-example small { display:block; color:#71808a; font-size:12px; line-height:1.65; }.master-button { flex:none; border:1px solid #d8d0c1; border-radius:6px; background:#fff; color:#79848e; padding:5px 7px; font-size:11px; }.master-button.mastered { border-color:#71ad99; background:#edf8f3; color:#28745f; }.library-pagination { display:flex; justify-content:center; align-items:center; gap:17px; margin-top:22px; color:#76818d; font-size:12px; }.library-pagination button { border:0; background:none; color:#a56830; font-size:12px; }.library-pagination button:disabled { color:#bcb5aa; cursor:not-allowed; }
.quiz-layout { display:grid; grid-template-columns:1fr 260px; gap:25px; align-items:start; }.quiz-card,.side-panel,.feedback,.result { background:var(--paper); border:1px solid var(--line); border-radius:17px; box-shadow:0 10px 30px rgba(61,45,23,.04); }.quiz-card { padding:26px 30px 30px; }.quiz-meta { display:flex; align-items:center; gap:9px; color:#85909b; font:12px "DM Mono",monospace; }.meta-line { width:23px; border-top:1px solid #bdc3c8; }.spacer { flex:1; }
.word-block { display:flex; justify-content:space-between; align-items:center; padding:31px 0 16px; border-bottom:1px dashed #ddd4c3; }.word-label { margin-bottom:5px; color:#8e98a1; font:11px "DM Mono",monospace; letter-spacing:.12em; }.word-block h2 { margin-bottom:4px; color:var(--navy); font:700 39px Outfit,sans-serif; letter-spacing:-.03em; }.phonetic { margin:0; color:#7a8792; font:14px "DM Mono",monospace; }.sound-button { display:grid; place-items:center; width:43px; height:43px; border:1px solid #d9d1c1; border-radius:50%; background:#fffaf0; color:var(--orange); font-size:22px; }.prompt { margin:23px 0 15px; color:#586572; font-size:14px; }.options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.option { position:relative; min-height:58px; border:1px solid #dfd8ca; border-radius:10px; background:#fffefa; text-align:left; padding:15px 15px 15px 48px; color:#354151; transition:.18s; }.option:hover:not(:disabled) { border-color:#d09558; background:#fff8e9; transform:translateY(-1px); }.option:disabled { cursor:default; }.option-key { position:absolute; left:14px; color:#b78657; font:12px "DM Mono",monospace; }.option.selected-wrong { border-color:#d67970; background:#fff0ee; color:#a13f37; }.option.correct { border-color:#6aaf99; background:#edf9f4; color:#24755f; }.option.correct::after { content:"✓"; float:right; font-weight:bold; }
.side-panel { padding:22px; }.panel-title { color:var(--navy); font:600 15px Outfit,sans-serif; }.stat-row { display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-bottom:1px solid #eee8dc; color:#737f8a; font-size:13px; }.stat-row strong { color:var(--navy); font:700 22px Outfit,sans-serif; }.stat-row small { font:12px "Noto Sans SC"; }.gentle-tip { margin:18px 0 0; color:#8c7d69; font-size:12px; line-height:1.75; }
.feedback { margin-top:25px; padding:23px 30px 26px; border-top:4px solid var(--orange); }.feedback.hidden,.result.hidden { display:none; }.feedback-badge { display:inline-flex; padding:5px 9px; border-radius:99px; background:#fff4d8; color:#a9651c; font-size:12px; }.feedback-badge.wrong { background:#fff0ee; color:#b04e46; }.feedback-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; padding:12px 0 18px; }.feedback-title { margin-bottom:4px; color:var(--navy); font:700 21px Outfit,"Noto Sans SC",sans-serif; }.feedback-summary { margin:0; color:#66727e; font-size:13px; }.review-hint { color:#bd7132; font-size:12px; }
.context-card { border:1px solid #eadfc9; border-radius:12px; background:#fffcf4; padding:19px 21px; }.context-top { display:flex; justify-content:space-between; color:#778390; font-size:12px; }.source-tag { color:#b47b45; }.sentence-list { display:grid; gap:15px; margin-top:17px; }.sentence-example + .sentence-example { padding-top:15px; border-top:1px dashed #eadfc9; }.sentence-example > span { color:#b47b45; font-size:11px; }.sentence-example p { margin:6px 0 8px; color:#26384c; font:500 18px/1.7 Outfit,"Noto Sans SC",sans-serif; }.sentence-example small { display:block; color:#626b74; line-height:1.8; font-size:14px; }.missing-sense { margin:0; padding:11px 12px; border-radius:8px; background:#fff5e8; color:#9b6b3d; font-size:12px; line-height:1.65; }.target, mark { background:var(--yellow); color:#58410d; border-radius:3px; padding:1px 3px; font-weight:700; }.context-actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:#9a8c75; font-size:12px; }.audio-link { border:0; background:none; color:#b96e29; padding:0; font-size:12px; }.context-next { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:21px; color:#8c7d69; font-size:12px; }.next-button { margin-left:auto; border:0; border-radius:8px; background:var(--navy); color:#fff; padding:10px 15px; font-weight:600; font-size:13px; }.next-button:disabled { opacity:.42; cursor:not-allowed; }.next-button span { margin-left:7px; color:#ffc277; font-size:17px; }
.result { margin-top:25px; padding:39px; text-align:center; }.result h2 { margin-bottom:9px; color:var(--navy); font:700 30px Outfit,"Noto Sans SC",sans-serif; }.result > p:not(.eyebrow) { color:#67737e; }.result-stats { display:flex; justify-content:center; gap:1px; margin:26px auto; max-width:540px; background:#eae1d2; }.result-stats div { flex:1; padding:17px; background:#fffdf8; }.result-stats strong { display:block; color:var(--navy); font:700 28px Outfit,sans-serif; }.result-stats span { color:#77828b; font-size:12px; }.result .next-button { margin-left:0; }
.source-note { margin:20px 0 0; color:#9a8e7b; text-align:center; font-size:11px; }.source-note a { color:#a97039; }
.study-days { margin-left:auto; color:var(--muted); font-size:13px; }.study-days strong { color:var(--navy); font:700 18px Outfit,sans-serif; }.entry-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }.mastered-badge,.wrong-badge { flex:none; border-radius:99px; padding:5px 8px; font-size:11px; }.mastered-badge { background:#edf8f3; color:#28745f; }.wrong-badge { background:#fff1e7; color:#ad6630; }
.current-user { color:#7b858e; font-size:12px; }.logout-button { border:1px solid #d8d0c0; border-radius:8px; background:#fffaf0; color:#8b7060; padding:8px 12px; font-size:12px; font-weight:600; }.hidden { display:none !important; }.auth-screen { display:grid; min-height:100vh; place-items:center; padding:25px; }.auth-card { width:min(100%,500px); padding:34px; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:0 18px 48px rgba(65,47,20,.1); }.auth-brand { margin-bottom:34px; }.auth-copy h1 { margin:0 0 10px; color:var(--navy); font:700 34px/1.15 Outfit,"Noto Sans SC",sans-serif; }.auth-copy h1 span { color:var(--orange); }.auth-copy > p:last-child { margin:0; color:var(--muted); line-height:1.7; font-size:13px; }.auth-tabs { display:flex; gap:18px; margin:30px 0 18px; border-bottom:1px solid var(--line); }.auth-tab { padding:0 2px 10px; border:0; border-bottom:2px solid transparent; background:none; color:#7a858f; font-weight:600; }.auth-tab.active { border-color:var(--orange); color:var(--navy); }.auth-form { display:grid; gap:14px; }.auth-form label { display:grid; gap:7px; color:#64707d; font-size:13px; }.auth-form input { border:1px solid #ded6c7; border-radius:8px; outline:0; background:#fffefa; padding:11px 12px; color:var(--ink); font:14px "Noto Sans SC",sans-serif; }.auth-form input:focus { border-color:var(--orange); }.auth-submit { margin-top:4px; border:0; border-radius:8px; background:var(--navy); color:#fff; padding:12px 15px; font-weight:600; }.auth-message { min-height:19px; margin:14px 0 0; color:#b04942; font-size:12px; }.auth-message.success { color:var(--green); }.auth-note { margin:8px 0 0; color:#a29480; text-align:center; font-size:11px; }.confirm-dialog { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:22px; background:rgba(23,39,60,.42); }.confirm-dialog-card { width:min(100%,430px); padding:28px; border-radius:16px; background:#fffdf8; box-shadow:0 20px 55px rgba(20,31,44,.25); }.confirm-dialog-card h2 { margin-bottom:10px; color:var(--navy); font:700 26px Outfit,"Noto Sans SC",sans-serif; }.confirm-dialog-card > p:not(.eyebrow) { color:#687583; font-size:13px; line-height:1.7; }.confirm-dialog-card label { display:grid; gap:7px; margin-top:20px; color:#64707d; font-size:13px; }.confirm-dialog-card input { border:1px solid #ded6c7; border-radius:8px; outline:0; background:#fffefa; padding:11px 12px; color:var(--ink); font:14px "Noto Sans SC",sans-serif; }.confirm-message { min-height:18px; margin:10px 0 0; color:#b04942; font-size:12px; }.confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.admin-panel { margin-bottom:25px; padding:29px; border:1px solid var(--line); border-radius:17px; background:var(--paper); }.admin-user-list { display:grid; gap:10px; margin-top:24px; }.admin-user-card { display:grid; gap:15px; padding:17px; border:1px solid #e6decf; border-radius:11px; background:#fffefa; }.admin-user-info { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.admin-user-card h3 { margin:0 0 4px; color:var(--navy); font:600 17px Outfit,"Noto Sans SC",sans-serif; }.admin-user-card p { margin:0; color:#79838d; font-size:12px; }.delete-user-button { border:0; border-radius:8px; background:#a94b42; color:#fff; padding:9px 12px; font-size:12px; font-weight:600; }.today-progress-row { display:grid; grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) auto; align-items:center; gap:16px; border-top:1px dashed #e5dccd; border-bottom:1px dashed #e5dccd; padding:14px 0; }.today-date,.today-task-count { display:flex; align-items:baseline; gap:9px; }.today-date span,.today-task-count span { color:#7b858e; font-size:12px; }.today-date strong { color:var(--navy); font:600 17px Outfit,sans-serif; }.today-task-count strong { color:var(--navy); font:700 25px Outfit,sans-serif; }.today-completion { justify-self:end; flex:none; border-radius:99px; background:#f4eee5; color:#8c7d69; padding:7px 10px; font-size:12px; }.today-completion.done { background:#eaf7f1; color:#25745f; }.admin-metrics { display:flex; justify-content:flex-end; gap:22px; }.admin-metric { text-align:right; }.admin-metric strong { display:block; color:var(--navy); font:700 20px Outfit,sans-serif; }.admin-metric span { color:#7b858e; font-size:11px; }.completion-history { display:flex; align-items:center; gap:15px; }.history-label { flex:none; color:#8b7864; font-size:11px; }.completion-dates { display:flex; flex-wrap:wrap; gap:6px; }.completion-date { display:inline-flex; align-items:center; gap:5px; border:1px solid #e3d7c5; border-radius:6px; background:#fff; color:#7b858e; padding:4px 6px; font:11px "DM Mono",monospace; }.completion-date b { color:#a5672d; font:700 11px Outfit,sans-serif; }.completion-date.today { border-color:#72ad98; background:#edf8f3; color:#28745f; }.no-completion-history { color:#9a9389; font-size:11px; }.empty-admin { margin:24px 0 0; color:#87919a; text-align:center; font-size:13px; }
@media(max-width:980px) { .hero { grid-template-columns:minmax(0,1fr) 230px; }.encouragement-card { grid-column:2; } }
@media(max-width:760px) { .app-shell { width:min(100% - 28px,560px); }.topbar { gap:12px; }.streak { margin-left:auto; }.browse-button { padding:7px 9px; }.hero { display:block; padding:40px 0 31px; }.daily-card,.encouragement-card { width:100%; margin-top:18px; }.plan-panel { display:block; padding:19px; }.word-count { margin-top:19px; }.day-buttons { overflow-x:auto; padding-bottom:5px; }.library { padding:20px; }.library-header,.library-tools { flex-direction:column; }.close-library { align-self:flex-start; }.library-tools { align-items:stretch; }.library-filters { overflow-x:auto; padding-bottom:3px; }.search-box { width:100%; }.library-grid { grid-template-columns:1fr; }.quiz-layout { grid-template-columns:1fr; }.side-panel { display:none; }.quiz-card,.feedback { padding:21px; }.options { grid-template-columns:1fr; }.feedback-heading,.context-next { align-items:flex-start; flex-direction:column; }.next-button { margin-left:0; }.context-actions { align-items:flex-start; gap:8px; flex-direction:column; }.result { padding:28px 17px; }.result-stats { gap:1px; }.result-stats div { padding:12px 6px; } }
@media(max-width:760px) { .today-progress-row { grid-template-columns:1fr; gap:8px; }.today-completion { justify-self:start; }.admin-metrics { justify-content:flex-start; } }