:root,[data-theme=dark]{--bg-page: #121220;--text-primary: #e0e0e8;--text-secondary: #9a9ab0;--text-muted: #b0b0c0;--color-primary: #3d8af0;--color-primary-hover: #2d7ae0;--color-on-primary: #fff;--bg-surface: #1e1e32;--border-color: #2e2e45;--border-input: #3a3a55;--bg-nav-hover: #252540;--color-skip: #7a7a90;--color-skip-hover: #9a9ab0;--bg-success: #1a3a1e;--color-success: #66bb6a;--bg-error: #3a1a1a;--color-error: #ef5350;--bg-stripe: #1a1a2e;--shadow-hover: rgba(0,0,0,.25);--mastery-bg-L: 35%;--mastery-bg-C: 0.14;--mastery-fg-L: 80%;--mastery-fg-C: 0.16}[data-theme=light]{--bg-page: #f5f5f8;--text-primary: #1a1a2e;--text-secondary: #555570;--text-muted: #6a6a80;--color-primary: #2a6bc4;--color-primary-hover: #1f5aad;--color-on-primary: #fff;--bg-surface: #ffffff;--border-color: #d0d0dc;--border-input: #b8b8c8;--bg-nav-hover: #e8e8f0;--color-skip: #8888a0;--color-skip-hover: #6a6a80;--bg-success: #e6f4ea;--color-success: #2e7d32;--bg-error: #fde8e8;--color-error: #c62828;--bg-stripe: #ececf2;--shadow-hover: rgba(0,0,0,.1);--mastery-bg-L: 80%;--mastery-bg-C: 0.10;--mastery-fg-L: 28%;--mastery-fg-C: 0.16}[data-theme=oled]{--bg-page: #000;--text-primary: #fff;--text-secondary: #aaa;--text-muted: #888;--color-primary: #4a9af5;--color-primary-hover: #3a8ae5;--color-on-primary: #000;--bg-surface: #0a0a0a;--border-color: #1a1a1a;--border-input: #2a2a2a;--bg-nav-hover: #111;--color-skip: #666;--color-skip-hover: #999;--bg-success: #001a00;--color-success: #66bb6a;--bg-error: #1a0000;--color-error: #ef5350;--bg-stripe: #060606;--shadow-hover: rgba(255,255,255,.05);--mastery-bg-L: 35%;--mastery-bg-C: 0.14;--mastery-fg-L: 80%;--mastery-fg-C: 0.16}[data-theme=high-contrast]{--bg-page: #000;--text-primary: #ffff00;--text-secondary: #fff;--text-muted: #fff;--color-primary: #00ffff;--color-primary-hover: #00cccc;--color-on-primary: #000;--bg-surface: #111;--border-color: #fff;--border-input: #fff;--bg-nav-hover: #222;--color-skip: #ccc;--color-skip-hover: #fff;--bg-success: #001a00;--color-success: #00ff00;--bg-error: #1a0000;--color-error: #ff6b6b;--bg-stripe: #0a0a0a;--shadow-hover: rgba(255,255,255,.15);--mastery-bg-L: 22%;--mastery-bg-C: 0.18;--mastery-fg-L: 92%;--mastery-fg-C: 0.20}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg-page);color:var(--text-primary);min-height:100vh}body.dyslexia-font,body.dyslexia-font *{font-family:"OpenDyslexic",system-ui,sans-serif}select{appearance:none;-webkit-appearance:none;background:var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;color:var(--text-primary);border:1px solid var(--border-color);border-radius:4px;padding:4px 24px 4px 8px;font-family:inherit;font-size:.85em;cursor:pointer}select:focus{outline:none;border-color:var(--color-primary)}select option{background:var(--bg-surface);color:var(--text-primary)}.container{max-width:1100px;margin:0 auto;padding:20px}.section{opacity:0;max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;transition:opacity 150ms ease,visibility 0s 150ms}.section.active{opacity:1;max-height:none;overflow:visible;pointer-events:auto;visibility:visible;transition:opacity 150ms ease,visibility 0s 0s}.sync-indicator{display:none;align-items:center;justify-content:center}.sync-indicator.dirty{display:flex}.sync-indicator.syncing svg{animation:spin .8s linear infinite}.sync-indicator svg{width:16px;height:16px;fill:var(--text-secondary)}@keyframes spin{to{transform:rotate(360deg)}}.arrow-pill{display:inline-flex;align-items:center;padding:6px 20px;font-weight:600;font-size:.88em;border:none;cursor:pointer;transition:all .15s;position:relative;background:var(--bg-page);color:var(--text-secondary)}.arrow-pill:hover{background:var(--bg-nav-hover);color:var(--text-primary)}.arrow-pill-right{clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);padding-right:24px}.arrow-pill-left{clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);padding-left:24px}.arrow-pill-center{clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);padding:6px 24px}.topbar{display:flex;align-items:center;gap:4px;padding:8px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border-color);flex-wrap:wrap}.topbar-title{font-size:1.1em;font-weight:700;color:var(--text-primary);background:var(--bg-page);padding:6px 24px 6px 14px;clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%)}.topbar-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}.topbar-nav button{font-family:inherit}.topbar-nav button.active{background:var(--bg-nav-hover);color:var(--color-primary)}.topbar-right{display:flex;align-items:center;gap:4px;margin-left:auto}.theme-toggle{width:34px;height:34px;border:none;background:var(--bg-page);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);padding-left:12px}.theme-toggle:hover{background:var(--bg-nav-hover)}.theme-toggle svg{width:18px;height:18px;fill:var(--text-primary)}#auth-status{font-size:1em}#auth-status span{font-weight:700;color:var(--text-primary);margin-right:6px}.auth-link{color:var(--text-secondary);text-decoration:none;background:var(--bg-page);border:none;cursor:pointer;font-size:.88em;font-weight:600;font-family:inherit;padding:6px 24px;clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%)}.auth-link:hover{background:var(--bg-nav-hover);color:var(--text-primary)}.subnav{display:none;gap:8px;justify-content:center;margin:12px 0 18px;flex-wrap:wrap}.subnav.visible{display:flex}.subnav button{padding:7px 18px;border:1px solid var(--border-color);background:var(--bg-page);color:var(--text-secondary);cursor:pointer;border-radius:6px;font-size:.88em;font-weight:600;transition:all .15s}.subnav button:hover{background:var(--bg-nav-hover);color:var(--text-primary)}.subnav button.active{background:var(--bg-nav-hover);color:var(--color-primary);border-color:var(--color-primary)}.grid-controls{display:flex;justify-content:flex-end;margin-bottom:8px}.grid{display:grid;grid-template-columns:repeat(10, 1fr);gap:4px}.grid-separator{grid-column:1/-1;height:6px}.grid-cell{position:relative;text-align:center;padding:10px 2px;background:var(--bg-surface);border-radius:6px;border:1px solid var(--border-color);transition:transform .1s,box-shadow .1s,border-color .15s;cursor:text}.grid-cell:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-hover)}.grid-cell:focus-within{border-color:var(--color-primary)}.grid-cell .number{font-weight:700;color:var(--color-primary);font-size:1.1em}.grid-cell .word{font-size:.82em;color:var(--text-muted);margin-top:2px}.grid-cell .word-input{background:rgba(0,0,0,0);color:var(--text-muted);border:none;outline:none;font-size:.82em;text-align:center;width:100%;margin-top:2px;font-family:inherit}.ac-dropdown{position:absolute;left:0;right:0;top:100%;z-index:100;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:0 0 6px 6px;max-height:150px;overflow-y:auto;box-shadow:0 4px 12px var(--shadow-hover)}.ac-option{padding:4px 8px;font-size:.8em;color:var(--text-muted);cursor:pointer;text-align:left}.ac-option:hover,.ac-option.ac-highlight{background:var(--bg-nav-hover);color:var(--text-primary)}.custom-marker{color:var(--color-primary);font-size:.7em;vertical-align:super}.gq-correct{border-color:var(--color-success) !important}.gq-correct .word-input{color:var(--color-success)}.gq-wrong{border-color:var(--color-error) !important}.gq-wrong .word-input{color:var(--color-error)}.gq-wrong .gq-answer{font-size:.7em;color:var(--color-error);margin-top:2px}.gq-skipped{border-color:var(--border-input) !important;opacity:.6}.gq-skipped .gq-answer{font-size:.7em;color:var(--text-muted);margin-top:2px}.gridquiz-controls{display:flex;align-items:center;gap:12px;margin-bottom:12px}.gridquiz-timer{color:var(--text-muted);font-size:1.1em;font-variant-numeric:tabular-nums}.gridquiz-result{text-align:center;font-size:1.2em;font-weight:600;margin-top:16px;color:var(--text-primary)}.quiz-area{max-width:480px;margin:0 auto;text-align:center;padding:20px;transition:opacity 200ms ease}.quiz-area.quiz-fade-out{opacity:0}.quiz-prompt{font-size:3.2em;font-weight:700;color:var(--color-primary);margin:30px 0 20px;letter-spacing:2px;user-select:none}.quiz-countdown{font-size:1.3em;font-weight:700;color:var(--text-muted);min-height:1.6em;font-variant-numeric:tabular-nums}.quiz-countdown.urgent{color:var(--color-error)}.quiz-input{font-size:1.4em;padding:10px 16px;width:220px;text-align:center;border:2px solid var(--border-input);border-radius:8px;outline:none;transition:border .15s;background:var(--bg-surface);color:var(--text-primary)}.quiz-input:focus{border-color:var(--color-primary)}.quiz-btn{padding:10px 28px;font-size:1.1em;background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:8px;cursor:pointer;margin:12px 6px;font-weight:600;transition:background .15s}.quiz-btn:hover{background:var(--color-primary-hover)}.quiz-btn.skip{background:var(--color-skip)}.quiz-btn.skip:hover{background:var(--color-skip-hover)}.feedback{font-size:1.15em;margin:18px 0;padding:14px 20px;border-radius:8px;font-weight:600;min-height:52px;transition:opacity 200ms ease,background 200ms ease,color 200ms ease;opacity:1}.feedback.correct{background:var(--bg-success);color:var(--color-success)}.feedback.incorrect{background:var(--bg-error);color:var(--color-error)}.feedback.empty{background:rgba(0,0,0,0);opacity:0}.quiz-accuracy{font-size:.95em;color:var(--text-muted);margin-top:8px;min-height:1.4em}.ref-wrap{max-width:520px;margin:0 auto}.ref-table{width:100%;border-collapse:collapse;margin-top:10px}.ref-table th,.ref-table td{padding:10px 14px;border:1px solid var(--border-color);text-align:center}.ref-table th{background:var(--color-primary);color:var(--color-on-primary);font-weight:600}.ref-table tr:nth-child(even){background:var(--bg-stripe)}.translate-area{max-width:600px;margin:0 auto;text-align:center;padding:20px}.translate-output{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.translate-chip{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:12px 16px;text-align:center;min-width:70px}.translate-chip .number{font-weight:700;color:var(--color-primary);font-size:1.1em}.translate-chip .word{font-size:.88em;color:var(--text-muted);margin-top:4px}.translate-chip.odd{color:var(--text-secondary);font-style:italic;font-size:.9em;display:flex;align-items:center;padding:8px 12px;min-width:auto}.translate-chip.no-encode{opacity:.5}.translate-chip.no-encode .number{color:var(--text-muted)}.translate-heading{margin:0 0 12px;font-size:1em;font-weight:600;color:var(--text-secondary)}.constant-btn-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}.constant-btn{padding:6px 10px;font-size:.9em;font-weight:600;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .15s;min-width:36px;text-align:center}.constant-btn:hover{background:var(--bg-nav-hover);color:var(--text-primary);border-color:var(--color-primary)}.profile-area{max-width:700px;margin:0 auto}.profile-area .card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:18px 20px;margin-bottom:14px}.profile-area .card h2{font-size:1.05em;color:var(--color-primary);margin-bottom:10px}.profile-area .stat-row{display:flex;justify-content:space-between;padding:4px 0;font-size:.95em}.profile-area .stat-row .label{color:var(--text-secondary)}.profile-area .stat-row .value{font-weight:600}.profile-area .bar-row{display:flex;align-items:center;gap:10px;margin:4px 0;font-size:.9em}.profile-area .bar-label{width:80px;text-align:right;color:var(--text-secondary);flex-shrink:0}.profile-area .bar-track{flex:1;height:22px;background:var(--bg-page);border-radius:4px;overflow:hidden}.profile-area .bar-fill{height:100%;border-radius:4px;min-width:2px}.profile-area .bar-count{width:30px;text-align:right;font-weight:600;flex-shrink:0}.profile-area .m0 .bar-fill{background:#ef5350}.profile-area .m1 .bar-fill{background:#e0a050}.profile-area .m2 .bar-fill{background:var(--color-primary)}.profile-area .m3 .bar-fill{background:#8cbf60}.profile-area .m4 .bar-fill{background:#4cda6a}.profile-area .cov-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}.profile-area .cov-item{text-align:center;padding:12px;background:var(--bg-page);border-radius:6px}.profile-area .cov-pct{font-size:1.6em;font-weight:700;color:var(--color-primary)}.profile-area .cov-label{font-size:.85em;color:var(--text-secondary);margin-top:2px}.heatmap-container{overflow-x:auto}.hm-table{border-spacing:2px;border-collapse:separate}.hm-month{font-size:.7em;color:var(--text-secondary);text-align:left;padding:0 0 2px}.hm-day{font-size:.65em;color:var(--text-secondary);text-align:right;padding-right:4px;line-height:1}.hm-gap{width:4px;padding:0}.hm-cell{width:11px;height:11px;border-radius:2px}.activity-0{background:var(--border-color)}:root .activity-1,[data-theme=dark] .activity-1{background:rgba(102,187,106,.25)}:root .activity-2,[data-theme=dark] .activity-2{background:rgba(102,187,106,.5)}:root .activity-3,[data-theme=dark] .activity-3{background:rgba(102,187,106,.75)}:root .activity-4,[data-theme=dark] .activity-4{background:#66bb6a}[data-theme=light] .activity-1{background:rgba(46,125,50,.2)}[data-theme=light] .activity-2{background:rgba(46,125,50,.4)}[data-theme=light] .activity-3{background:rgba(46,125,50,.65)}[data-theme=light] .activity-4{background:rgba(46,125,50,.9)}[data-theme=oled] .activity-1{background:rgba(102,187,106,.2)}[data-theme=oled] .activity-2{background:rgba(102,187,106,.45)}[data-theme=oled] .activity-3{background:rgba(102,187,106,.7)}[data-theme=oled] .activity-4{background:#66bb6a}[data-theme=high-contrast] .activity-1{background:rgba(0,255,0,.25)}[data-theme=high-contrast] .activity-2{background:rgba(0,255,0,.5)}[data-theme=high-contrast] .activity-3{background:rgba(0,255,0,.75)}[data-theme=high-contrast] .activity-4{background:lime}.wiki-area{max-width:700px;margin:0 auto;padding:10px 20px}.wiki-title{color:var(--text-primary);margin:0 0 16px;font-size:1.3em}.wiki-breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:14px;font-size:.9em;flex-wrap:wrap}.wiki-breadcrumb button{background:none;border:none;color:var(--color-primary);cursor:pointer;padding:0;font:inherit;font-size:inherit}.wiki-breadcrumb button:hover{text-decoration:underline}.wiki-breadcrumb .wiki-sep{color:var(--text-muted)}.wiki-breadcrumb span:last-child{color:var(--text-secondary)}.wiki-cards{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}.wiki-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:background .15s,box-shadow .15s;text-align:center;font:inherit;color:inherit}.wiki-card:hover{background:var(--bg-nav-hover);box-shadow:0 2px 8px var(--shadow-hover)}.wiki-card-icon{font-size:1.8em}.wiki-card-name{font-weight:600;color:var(--text-primary);font-size:.95em}.wiki-card-count{font-size:.8em;color:var(--text-muted)}.wiki-article-list{display:flex;flex-direction:column;gap:4px}.wiki-article-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:background .15s;font:inherit;color:inherit;text-align:left;width:100%}.wiki-article-item:hover{background:var(--bg-nav-hover)}.wiki-article-title{font-weight:500;color:var(--text-primary)}.wiki-article-arrow{color:var(--text-muted);font-size:1.3em}.wiki-article{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:20px 24px}.wiki-article h2{font-size:1.15em;color:var(--color-primary);margin:0 0 12px}.wiki-article p{line-height:1.6;margin:0 0 12px;color:var(--text-primary)}.wiki-article p:last-child{margin-bottom:0}.wiki-article ul{margin:0 0 12px;padding-left:20px;color:var(--text-primary)}.wiki-article ul li{line-height:1.6;margin-bottom:4px}.wiki-article code{background:var(--bg-page);padding:2px 6px;border-radius:3px;font-size:.9em}.wiki-article .ref-table{margin:12px 0;width:100%}.wiki-article-nav{display:flex;justify-content:space-between;margin-top:16px;gap:12px}.wiki-nav-btn{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:6px;padding:10px 14px;color:var(--color-primary);cursor:pointer;font:inherit;font-size:.9em;transition:background .15s;max-width:50%;text-align:left}.wiki-nav-btn:hover{background:var(--bg-nav-hover)}.wiki-nav-btn:last-child{text-align:right}@media(max-width: 700px){.wiki-cards{grid-template-columns:1fr}.wiki-article{padding:16px}.wiki-area{padding:10px 12px}}.settings-area{max-width:480px;margin:0 auto;padding:20px}.settings-area h2{margin:0 0 20px;color:var(--text-primary)}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;cursor:pointer}.setting-row span{font-weight:600;color:var(--text-primary)}.setting-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.setting-hint{margin:8px 0 0;font-size:.85em;color:var(--text-muted)}.export-row{display:flex;gap:12px;margin-top:20px}.export-row .quiz-btn{flex:1}.settings-subheading{margin:24px 0 12px;color:var(--text-primary);font-size:1.1em}.import-row{display:flex;gap:12px}.import-row .import-btn{flex:1}.settings-btn{width:34px;height:34px;border:none;background:var(--bg-page);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);padding-left:12px}.settings-btn:hover{background:var(--bg-nav-hover)}.settings-btn svg{width:18px;height:18px;fill:var(--text-primary)}.tutorial-area{max-width:560px;margin:0 auto;padding:20px}.tutorial-steps{position:relative}.tutorial-step{display:none;opacity:0;transition:opacity 200ms ease}.tutorial-step.active{display:block}.tutorial-step.visible{opacity:1}.tutorial-step h2{color:var(--color-primary);margin:0 0 16px;font-size:1.6em}.tutorial-step p{color:var(--text-primary);line-height:1.6;margin:0 0 12px}.tutorial-ref{margin:12px 0;width:100%}.tutorial-ref td,.tutorial-ref th{padding:6px 12px}.tutorial-ref td:first-child{text-align:center;width:60px}.tutorial-ref em{color:var(--color-primary)}.tutorial-example{margin:16px 0;display:flex;flex-direction:column;gap:10px}.tutorial-example-row{display:flex;align-items:center;gap:10px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;flex-wrap:wrap}.tutorial-word{font-weight:700;font-size:1.15em;color:var(--text-primary);min-width:50px}.tutorial-arrow{color:var(--text-muted)}.tutorial-breakdown{color:var(--text-secondary)}.tutorial-result{font-weight:700;font-size:1.15em;color:var(--color-primary)}.tutorial-progress{text-align:center;margin:20px 0 12px}.tutorial-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--border-color);margin:0 4px;transition:background .15s}.tutorial-dot.active{background:var(--color-primary)}.tutorial-nav{display:flex;justify-content:center;gap:10px}.tutorial-quiz-item{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:12px 16px;margin:10px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.tutorial-quiz-item .tutorial-quiz-word{font-weight:700;font-size:1.15em;color:var(--text-primary);min-width:60px}.tutorial-quiz-item input{font-size:1.1em;padding:6px 10px;width:70px;text-align:center;border:2px solid var(--border-input);border-radius:6px;background:var(--bg-page);color:var(--text-primary);outline:none}.tutorial-quiz-item input:focus{border-color:var(--color-primary)}.tutorial-quiz-item .tutorial-quiz-result{font-weight:600;font-size:.95em}.tutorial-quiz-item .tutorial-quiz-result.correct{color:var(--color-success)}.tutorial-quiz-item .tutorial-quiz-result.incorrect{color:var(--color-error)}@media(max-width: 700px){.tutorial-area{padding:12px}.tutorial-step h2{font-size:1.3em}.tutorial-example-row{padding:8px 10px;gap:6px}}@media(max-width: 700px){.grid{grid-template-columns:repeat(5, 1fr)}.quiz-prompt{font-size:2.4em}.topbar{padding:6px 10px;gap:2px}.topbar-title{font-size:.95em;padding:5px 18px 5px 10px}.arrow-pill{padding:5px 16px;font-size:.8em}.arrow-pill-center{padding:5px 18px}}
