:root{--color-blue: #0071e3;--color-blue-hover: #0077ed;--color-green: #34c759;--color-teal: #64d2ff;--color-label: #1d1d1f;--color-label-secondary: #6e6e73;--color-label-tertiary: #8e8e93;--color-bg-primary: #f5f5f7;--color-bg-secondary: #ffffff;--color-bg-elevated: #ffffff;--color-separator: #d2d2d7;--color-fill: #f0f0f5;--color-fill-hover: #e8e8ed;--font-large-title: 32px;--font-title1: 28px;--font-title2: 22px;--font-title3: 20px;--font-body: 16px;--font-subheadline: 15px;--font-footnote: 13px;--font-caption: 11px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--touch-target: 44px;--shadow-card: 0 2px 12px rgba(0, 0, 0, .08);--shadow-elevated: 0 4px 16px rgba(0, 0, 0, .2);--duration-fast: .2s;--duration-normal: .3s;--duration-slow: .5s}@media(prefers-color-scheme:dark){:root{--color-blue: #0A84FF;--color-blue-hover: #409CFF;--color-green: #30D158;--color-teal: #70D7FF;--color-label: #FFFFFF;--color-label-secondary: rgba(235, 235, 245, .6);--color-label-tertiary: rgba(235, 235, 245, .3);--color-bg-primary: #000000;--color-bg-secondary: #1C1C1E;--color-bg-elevated: #2C2C2E;--color-separator: rgba(84, 84, 88, .65);--color-fill: rgba(118, 118, 128, .18);--color-fill-hover: rgba(118, 118, 128, .24);--shadow-card: 0 2px 12px rgba(0, 0, 0, .3);--shadow-elevated: 0 4px 16px rgba(0, 0, 0, .5)}}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg-primary);color:var(--color-label);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{width:100%;max-width:480px;margin:0 auto;padding:var(--space-5) var(--space-4);height:100%;display:flex;flex-direction:column}.hidden{display:none!important}#auth-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--space-4);text-align:center;padding:0 var(--space-2)}#auth-screen h1{font-family:Space Grotesk,sans-serif;font-size:var(--font-large-title);font-weight:700;letter-spacing:-.5px}#auth-screen p{color:var(--color-label-secondary);font-size:14px;line-height:1.5}#auth-form{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:320px}#auth-form input{padding:14px var(--space-4);border:1px solid var(--color-separator);border-radius:var(--radius-md);font-size:var(--font-body);outline:none;transition:border-color var(--duration-fast);background:var(--color-bg-secondary);color:var(--color-label)}#auth-form input:focus{border-color:var(--color-blue)}#auth-form button{padding:14px;background:var(--color-blue);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-body);font-weight:600;cursor:pointer;transition:background var(--duration-fast)}#auth-form button:hover{background:var(--color-blue-hover)}.google-login-btn{padding:14px 32px;background:var(--color-blue);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-body);font-weight:600;cursor:pointer;transition:background var(--duration-fast)}.google-login-btn:hover{background:var(--color-blue-hover)}#cards-screen{display:flex;flex-direction:column;flex:1;min-height:0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5);flex-shrink:0}header h1{font-family:Space Grotesk,sans-serif;font-size:var(--font-title3);font-weight:700;letter-spacing:-.3px}.header-controls{display:flex;align-items:center;gap:var(--space-2)}.header-icon-btn,.header-mode-btn,#logout-btn{background:none;border:1px solid var(--color-separator);border-radius:var(--radius-md);padding:var(--space-2);cursor:pointer;color:var(--color-label-secondary);display:flex;align-items:center;justify-content:center}.header-mode-btn{font-size:11px;font-weight:600;padding:var(--space-2) var(--space-3);white-space:nowrap}.header-mode-btn.active{background:var(--color-blue);border-color:var(--color-blue);color:#fff}#logout-btn svg{width:18px;height:18px;stroke:var(--color-label-secondary)}#progress-text{text-align:center;font-size:var(--font-footnote);color:var(--color-label-secondary);margin-bottom:var(--space-3);flex-shrink:0}.stage-segments{position:absolute;bottom:0;left:0;right:0;height:var(--space-1);display:flex;gap:var(--space-1);padding:0 2px}.stage-segment{flex:1;height:100%;background:#00000014;transition:background var(--duration-normal)}.stage-segment:first-child{border-radius:0 0 0 var(--radius-lg)}.stage-segment:last-child{border-radius:0 0 var(--radius-lg) 0}.stage-segment.filled{background:var(--color-green)}#card-container{display:flex;flex-direction:column;flex:1;min-height:0}.flashcard{perspective:800px;cursor:pointer;flex:1;min-height:0;max-height:50vh;margin-bottom:var(--space-3);position:relative;touch-action:pan-y}.flashcard-inner{position:relative;width:100%;height:100%;transition:transform var(--duration-slow);transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard.slide-out{animation:slideOut .25s ease-in forwards}.flashcard.slide-in{animation:slideIn .2s ease-out}@keyframes slideOut{to{opacity:0;transform:translate(60px) scale(.95)}}@keyframes slideIn{0%{opacity:0;transform:translate(-30px) scale(.98)}}.sparkle{position:fixed;width:6px;height:6px;border-radius:50%;background:#fbbf24;pointer-events:none;z-index:1000;animation:sparkleAnim .5s ease-out forwards}.sparkle:nth-child(2n){background:#f59e0b;width:4px;height:4px}@keyframes sparkleAnim{0%{opacity:1;transform:scale(0) translate(0)}50%{opacity:1;transform:scale(1.2) translate(var(--sx, 10px),var(--sy, -20px))}to{opacity:0;transform:scale(.5) translate(var(--sx, 10px),var(--sy, -30px))}}.flashcard-front,.flashcard-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg-secondary);box-shadow:var(--shadow-card);overflow-y:auto}.flashcard-front p{font-size:var(--font-title2);font-weight:600;text-align:center;line-height:1.5;word-break:break-word;overflow-wrap:break-word}.flashcard-back{transform:rotateY(180deg);gap:var(--space-3)}.flashcard-back p{font-size:var(--font-title3);font-weight:600;text-align:center;line-height:1.5;word-break:break-word;overflow-wrap:break-word}.flashcard-back .context{font-size:var(--font-footnote);font-weight:400;color:var(--color-label-secondary);font-style:italic}.back-tabs{display:flex;width:100%;border-top:1px solid var(--color-separator);margin-top:var(--space-3);flex-shrink:0}.back-tab{flex:1;padding:8px 4px;background:none;border:none;font-size:var(--font-footnote);font-weight:600;color:var(--color-label-tertiary);cursor:pointer;border-top:2px solid transparent;margin-top:-1px;transition:color .15s,border-color .15s}.back-tab.active{color:var(--color-blue);border-top-color:var(--color-blue)}.back-tab-content{width:100%;flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.back-tab-content#tab-origin,.back-tab-content#tab-examples{justify-content:flex-start}.card-no-data{font-size:var(--font-footnote);color:var(--color-label-tertiary);text-align:center;padding:var(--space-4)}.card-etymology{font-size:14px;color:var(--color-label-secondary);line-height:1.7;padding:var(--space-3) var(--space-2);text-align:left}.card-examples{padding:var(--space-2);text-align:left}.card-example{display:flex;flex-direction:column;gap:1px;padding:4px 0;border-bottom:1px solid var(--color-separator)}.card-example:last-child{border-bottom:none}.card-example-en{font-size:12px;color:var(--color-label-primary);line-height:1.4}.card-example-ja{font-size:11px;color:var(--color-label-tertiary);line-height:1.3}.push-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center}.push-btn svg{width:20px;height:20px;stroke:var(--color-label-secondary)}.back-top-actions{position:absolute;top:8px;right:8px;display:flex;gap:2px}.back-icon-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:4px;opacity:.35;transition:opacity .15s;line-height:1}.back-icon-btn:hover{opacity:.8}.back-ja{font-size:var(--font-footnote);color:var(--color-text-secondary);margin:0;min-height:1.2em}.edit-ja-input{font-size:16px;border:1px solid var(--color-blue);border-radius:4px;padding:4px 8px;width:100%;text-align:center;outline:none;font-family:inherit}.card-actions{display:flex;justify-content:center;gap:10px;flex-shrink:0;padding-bottom:var(--space-2);padding-left:var(--space-2);padding-right:var(--space-2)}.action-btn{padding:14px var(--space-5);border:none;border-radius:var(--radius-md);font-size:var(--font-subheadline);font-weight:600;cursor:pointer;transition:background var(--duration-fast),transform .1s;min-height:48px}.action-btn:active{transform:scale(.96)}.action-btn:disabled{opacity:.5;cursor:not-allowed}.card-speak-btn{position:absolute;bottom:var(--space-3);left:var(--space-3);z-index:1;background:#0000000d;border:none;border-radius:50%;width:var(--touch-target);height:var(--touch-target);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--duration-fast)}.card-speak-btn:hover{background:#0000001a}.card-speak-btn:active{transform:scale(.92)}.flashcard.flipped .card-speak-btn{display:none}.card-speak-btn svg{width:var(--space-5);height:var(--space-5);stroke:var(--color-label-secondary)}.action-btn.mastered{background:var(--color-blue);color:#fff;font-size:var(--font-footnote);padding:10px 16px;min-height:44px}.action-btn.mastered:hover{background:var(--color-blue-hover)}.action-btn.nav-btn{background:var(--color-bg-primary);padding:14px 24px;flex:1;display:flex;align-items:center;justify-content:center}.action-btn.nav-btn:hover{background:var(--color-fill-hover)}.action-btn.nav-btn svg{width:24px;height:24px;stroke:var(--color-label)}#empty-state,#complete-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:300px;gap:var(--space-3);text-align:center;color:var(--color-label-secondary)}#complete-state h2{font-size:var(--font-title1);color:var(--color-label)}#reset-btn{margin-top:var(--space-2);padding:14px var(--space-6);background:var(--color-blue);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-subheadline);font-weight:600;cursor:pointer;min-height:48px}#reset-btn:hover{background:var(--color-blue-hover)}.complete-stats{font-size:18px;font-weight:700;color:var(--color-label);margin-top:var(--space-1)}#mastered-list{display:flex;flex-direction:column;flex:1;min-height:0}.mastered-list-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-shrink:0}.mastered-list-header h2{font-size:var(--font-title3);font-weight:700;color:var(--color-label)}.mastered-items{list-style:none;overflow-y:auto;flex:1;min-height:0}.mastered-item{display:flex;align-items:center;gap:10px;padding:var(--space-3) 0;border-bottom:1px solid var(--color-fill)}.mastered-item-text{font-size:var(--font-subheadline);font-weight:600;color:var(--color-label)}.mastered-item-ja{font-size:var(--font-footnote);color:var(--color-label-secondary);margin-left:auto;text-align:right;flex-shrink:0}#mastered-list-btn{background:none;border:1px solid var(--color-separator);border-radius:var(--radius-md);padding:var(--space-2);cursor:pointer;display:flex;align-items:center;justify-content:center}.production-challenge-btn{flex-shrink:0;margin-left:auto;margin-right:4px;font-size:11px;padding:3px 8px;border:1px solid var(--color-separator);border-radius:var(--radius-sm);background:none;color:var(--color-secondary);cursor:pointer}.production-challenge-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.production-badge{flex-shrink:0;margin-left:auto;margin-right:4px;font-size:11px;color:var(--color-green);font-weight:500}.production-content{padding:0 var(--space-4)}.production-word{text-align:center;margin-bottom:var(--space-4)}.production-word-en{display:block;font-size:22px;font-weight:700;color:var(--color-primary-text)}.production-word-ja{display:block;font-size:14px;color:var(--color-secondary);margin-top:2px}.production-instruction{font-size:13px;color:var(--color-secondary);text-align:center;margin-bottom:var(--space-4)}.production-inputs{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-4)}.ja-candidates{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.ja-candidates-loading{text-align:center;color:var(--color-secondary);font-size:14px;padding:var(--space-4) 0}.ja-candidate{border:1px solid var(--color-separator);border-radius:var(--radius-md);padding:10px 12px;background:var(--color-card-bg);display:flex;flex-direction:column;gap:8px;transition:border-color .15s ease}.ja-candidate.picked{border-color:var(--color-primary);background:#007aff0a}.ja-candidate-row{display:flex;align-items:center;gap:10px}.ja-candidate-text{flex:1;font-size:15px;line-height:1.5}.ja-candidate-pick{flex-shrink:0;padding:6px 12px;border:1px solid var(--color-primary);border-radius:var(--radius-md);background:#fff;color:var(--color-primary);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}.ja-candidate.picked .ja-candidate-pick{background:var(--color-primary);color:#fff}.ja-candidates-regen{padding:8px 12px;border:1px solid var(--color-separator);border-radius:var(--radius-md);background:#fff;color:var(--color-secondary);font-size:13px;cursor:pointer}.ja-candidates-regen:disabled{opacity:.4;cursor:not-allowed}.production-input-group{display:flex;gap:var(--space-2)}.production-input-pair{flex:1;display:flex;flex-direction:column;gap:4px}.production-input-ja{font-size:14px!important;padding:8px 12px!important;background:#f9f9f7!important}.production-input-en{font-size:15px!important}.production-num{font-size:14px;font-weight:600;color:var(--color-secondary);width:20px;flex-shrink:0}.production-input{flex:1;padding:10px 12px;border:1px solid var(--color-separator);border-radius:var(--radius-md);font-size:15px;font-family:inherit;background:var(--color-card-bg)}.production-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007aff26}.production-actions{display:flex;gap:var(--space-2)}.production-submit-btn{flex:1;padding:12px;border:1px solid var(--color-primary);border-radius:var(--radius-md);background:#fff;color:var(--color-primary);font-size:15px;font-weight:600;cursor:pointer}.production-submit-btn:disabled{opacity:.4;cursor:not-allowed}.production-complete-btn{background:var(--color-primary);color:#fff}.production-results{margin-top:var(--space-4)}.production-result{display:flex;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--color-separator)}.production-result:last-child{border-bottom:none}.production-result-num{font-size:14px;font-weight:600;color:var(--color-secondary);width:20px;flex-shrink:0}.production-result-body{flex:1}.production-result.valid .production-feedback{color:var(--color-green, #34c759)}.production-result.invalid .production-feedback{color:var(--color-secondary)}.production-corrected{font-size:14px;font-weight:500;color:var(--color-primary);margin-bottom:2px}.production-feedback{font-size:13px}#mastered-list-btn svg{width:18px;height:18px;stroke:var(--color-label-secondary)}.toast{position:fixed;bottom:var(--space-5);left:50%;transform:translate(-50%);background:var(--color-label);color:var(--color-bg-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-footnote);box-shadow:var(--shadow-elevated);z-index:100;animation:toast-in var(--duration-normal) ease}.toast.hidden{display:none!important}#toast-text{white-space:nowrap}#toast-undo{background:none;border:none;color:var(--color-teal);font-size:var(--font-footnote);font-weight:600;cursor:pointer;padding:0;white-space:nowrap}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-height:700px){.flashcard{margin-bottom:var(--space-3)}header{margin-bottom:var(--space-3)}}