@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-primary: #0f0a1e;--bg-secondary: #1a1333;--bg-card: rgba(30, 22, 56, .7);--bg-card-hover: rgba(40, 30, 70, .85);--bg-glass: rgba(255, 255, 255, .04);--accent-primary: #7c5cfc;--accent-secondary: #a78bfa;--accent-gradient: linear-gradient(135deg, #7c5cfc 0%, #c084fc 50%, #f472b6 100%);--accent-glow: 0 0 20px rgba(124, 92, 252, .35);--text-primary: #f1ecff;--text-secondary: #a89ec8;--text-muted: #6b5f8a;--border-color: rgba(124, 92, 252, .15);--border-hover: rgba(124, 92, 252, .4);--success: #34d399;--warning: #fbbf24;--danger: #f87171;--info: #60a5fa;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 20%,rgba(124,92,252,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(192,132,252,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(244,114,182,.04) 0%,transparent 50%);pointer-events:none;z-index:0}#root{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}a{color:var(--accent-secondary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.app-layout{display:flex;flex-direction:column;min-height:100dvh}.app-header{position:sticky;top:0;z-index:100;padding:calc(var(--safe-top) + 12px) 20px 12px;background:#0f0a1ed9;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--border-color)}.header-inner{max-width:600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.app-title{font-size:1.3rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.header-user{display:flex;align-items:center;gap:10px}.header-username{font-size:.85rem;color:var(--text-secondary)}.btn-logout{background:none;border:1px solid var(--border-color);color:var(--text-secondary);padding:5px 12px;border-radius:var(--radius-sm);font-size:.8rem;cursor:pointer;transition:all var(--transition-fast)}.btn-logout:hover{border-color:var(--danger);color:var(--danger)}.app-content{flex:1;max-width:600px;width:100%;margin:0 auto;padding:20px 16px calc(80px + var(--safe-bottom))}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:6px 8px calc(6px + var(--safe-bottom));background:#0f0a1ee6;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-top:1px solid var(--border-color)}.nav-inner{max-width:600px;margin:0 auto;display:flex;justify-content:space-around;align-items:center}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text-muted);font-size:.65rem;font-weight:500;padding:4px 8px;border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer;background:none;border:none}.nav-item:hover{color:var(--text-secondary)}.nav-item.active{color:var(--accent-primary)}.nav-icon{font-size:1.4rem;line-height:1}.page-header{margin-bottom:24px}.page-title{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}.page-subtitle{font-size:.9rem;color:var(--text-secondary)}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all var(--transition-base)}.card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--accent-glow)}.card+.card{margin-top:14px}.card-phrase{font-size:1.2rem;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}.card-meaning{color:var(--text-secondary);font-size:.95rem;margin-bottom:12px}.card-actions{display:flex;gap:10px;align-items:center}.card-link{font-size:.85rem;color:var(--accent-secondary);display:inline-flex;align-items:center;gap:4px;transition:color var(--transition-fast)}.card-link:hover{color:var(--accent-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-md);font-family:var(--font-family);font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);line-height:1;white-space:nowrap}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 15px #7c5cfc4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #7c5cfc66}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-glass);border:1px solid var(--border-color);color:var(--text-primary)}.btn-secondary:hover{border-color:var(--border-hover);background:#7c5cfc14}.btn-success{background:linear-gradient(135deg,#059669,#34d399);color:#fff;box-shadow:0 4px 15px #34d39940}.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 25px #34d39959}.btn-danger{background:linear-gradient(135deg,#dc2626,#f87171);color:#fff;box-shadow:0 4px 15px #f8717140}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 8px 25px #f8717159}.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:var(--radius-sm)}.btn-block{width:100%}.btn-ghost{background:#ffffff14;color:var(--text-secondary, #666);border:1px solid var(--border, #ddd)}.btn-ghost:hover{background:#0000000f}.login-divider{text-align:center;color:var(--text-secondary, #999);font-size:.85rem;margin:.25rem 0}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.form-group{margin-bottom:18px}.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.form-input{width:100%;padding:12px 16px;background:#ffffff0a;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:1rem;transition:all var(--transition-fast);outline:none}.form-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #7c5cfc26;background:#ffffff0f}.form-input::placeholder{color:var(--text-muted)}select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a89ec8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}.alert{padding:14px 18px;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:10px;margin-bottom:16px;animation:slideDown .3s var(--transition-base)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-success{background:#34d3991f;border:1px solid rgba(52,211,153,.25);color:var(--success)}.alert-error{background:#f871711f;border:1px solid rgba(248,113,113,.25);color:var(--danger)}.alert-info{background:#60a5fa1f;border:1px solid rgba(96,165,250,.25);color:var(--info)}.alert-warning{background:#fbbf241f;border:1px solid rgba(251,191,36,.25);color:var(--warning)}.tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border-color)}.tab{flex:1;text-align:center;padding:12px 16px;font-size:.95rem;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all var(--transition-fast);font-family:var(--font-family)}.tab:hover{color:var(--text-secondary)}.tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.table-wrapper{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border-color)}.data-table{width:100%;border-collapse:collapse;font-size:.85rem}.data-table th{background:#7c5cfc14;padding:12px 14px;text-align:left;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color);white-space:nowrap}.data-table td{padding:10px 14px;border-bottom:1px solid rgba(124,92,252,.06);color:var(--text-primary)}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#7c5cfc0a}.progress-bar{width:100%;height:6px;background:#7c5cfc1f;border-radius:3px;overflow:hidden;margin:12px 0}.progress-fill{height:100%;background:var(--accent-gradient);border-radius:3px;transition:width .3s ease}.radio-player{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:30px 24px;text-align:center}.radio-current{margin:24px 0}.radio-phrase{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;min-height:2em}.radio-meaning{font-size:1.1rem;color:var(--text-secondary);min-height:1.5em}.radio-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}.radio-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:all var(--transition-spring)}.radio-btn-play{width:72px;height:72px;background:var(--accent-gradient);color:#fff;font-size:1.8rem;box-shadow:0 8px 30px #7c5cfc66}.radio-btn-play:hover{transform:scale(1.08);box-shadow:0 12px 40px #7c5cfc80}.radio-btn-secondary{background:var(--bg-glass);border:1px solid var(--border-color);color:var(--text-secondary)}.radio-btn-secondary:hover{border-color:var(--border-hover);color:var(--text-primary)}.radio-counter{font-size:.85rem;color:var(--text-muted);margin-top:16px}.empty-state{text-align:center;padding:60px 20px}.empty-icon{font-size:3rem;margin-bottom:16px}.empty-title{font-size:1.2rem;font-weight:700;margin-bottom:8px}.empty-text{color:var(--text-secondary);font-size:.9rem}.danger-zone{border:1px solid rgba(248,113,113,.2);border-radius:var(--radius-lg);padding:20px;margin-top:24px}.danger-zone-title{color:var(--danger);font-size:1rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}.danger-item{padding:14px 0;border-bottom:1px solid rgba(248,113,113,.08)}.danger-item:last-child{border-bottom:none}.danger-item-title{font-weight:600;margin-bottom:4px}.danger-item-desc{font-size:.85rem;color:var(--text-muted);margin-bottom:10px}.checkbox-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;color:var(--text-secondary);margin-bottom:12px}.checkbox-input{width:18px;height:18px;accent-color:var(--accent-primary)}.slider-wrapper{margin:16px 0}.slider-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px}.slider-input{width:100%;accent-color:var(--accent-primary);height:6px}.install-prompt{position:fixed;bottom:80px;left:16px;right:16px;max-width:568px;margin:0 auto;z-index:200;background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:var(--radius-lg);padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:0 20px 50px #00000080;animation:slideUp .4s var(--transition-spring)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.install-prompt-text{flex:1}.install-prompt-text strong{display:block;margin-bottom:2px;font-size:.95rem}.install-prompt-text span{font-size:.8rem;color:var(--text-secondary)}.install-prompt-close{background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:4px}.login-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}.login-logo{font-size:3rem;margin-bottom:8px}.login-title{font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;letter-spacing:-.03em}.login-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:.95rem}.login-card{width:100%;max-width:400px}.spinner{width:24px;height:24px;border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-center{display:flex;justify-content:center;padding:40px}.stats-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#7c5cfc1a;border:1px solid var(--border-color);border-radius:100px;font-size:.85rem;color:var(--accent-secondary);font-weight:500;margin-bottom:16px}@media (min-width: 768px){.app-content{padding:30px 24px 100px}.page-title{font-size:2rem}.card{padding:24px}}.icon-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;color:var(--accent-primary);opacity:.8}.icon-btn:hover{background:#7c5cfc1f;transform:scale(1.1);opacity:1}.icon-btn:active{transform:scale(.95)}.mode-tabs{display:flex;background:#0003;padding:4px;border-radius:var(--radius-md);margin-top:10px}.mode-tab{flex:1;padding:8px 16px;border:none;background:none;color:var(--text-muted);font-size:.85rem;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.mode-tab.active{background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px #7c5cfc4d}.settings-panel{background:#ffffff08;padding:16px;border-radius:var(--radius-lg);border:1px solid var(--border-color);margin-bottom:20px}.quick-check-btn{position:absolute;top:10px;right:10px;background:#34d39926;border:1px solid rgba(52,211,153,.3);color:var(--success);padding:6px 12px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast);z-index:10}.quick-check-btn:hover{background:var(--success);color:#fff;transform:translateY(-2px)}.list-container{display:flex;flex-direction:column;gap:12px;margin-top:10px}.list-card{display:flex;align-items:center;justify-content:space-between;background:#ffffff0a;padding:14px 18px;border-radius:var(--radius-md);border:1px solid var(--border-color);transition:all var(--transition-fast)}.list-card:hover{background:#ffffff0f;border-color:var(--accent-primary)}.list-card-content{flex:1;margin-right:15px}.list-card-phrase{font-weight:700;color:var(--text-primary);font-size:1rem;margin-bottom:4px}.list-card-meaning{font-size:.85rem;color:var(--text-secondary)}.list-card-actions{display:flex;gap:8px}.icon-btn.check{color:var(--success)}.icon-btn.check:hover{background:#34d3991a}.debug-dashboard{margin-top:2rem;padding:1rem;background:#0006;border:1px solid var(--border-color);border-radius:1rem;font-size:.8rem;color:var(--text-primary)}.debug-title{font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.debug-grid{display:flex;flex-direction:column;gap:.5rem}.debug-item{display:flex;justify-content:space-between}.debug-error{color:#f87171;font-weight:700;padding:.5rem;background:#f871711a;border-radius:.5rem;margin-top:.5rem;word-break:break-all}.debug-hint{margin-top:.5rem;font-size:.75rem;color:var(--text-secondary)}.status-fetching{color:#facc15}.status-playing{color:#4ade80}.status-error,.status-key_missing{color:#f87171}.status-error-msg{background:#f871711a;color:#f87171;padding:1rem;border-radius:.5rem;margin:1rem 0;font-size:.9rem}.walk-container{max-width:480px;margin:0 auto;padding:1rem;min-height:100%;display:flex;flex-direction:column;gap:1.25rem}.walk-due-badge{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:.75rem;padding:.75rem 1rem;font-size:.95rem;color:var(--text-secondary);text-align:center}.walk-due-badge strong{color:var(--accent-secondary);font-size:1.1rem}.walk-section-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.walk-duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.walk-duration-btn{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1rem 0;font-size:1.5rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .18s ease;display:flex;flex-direction:column;align-items:center;gap:.1rem}.walk-duration-btn .walk-duration-unit{font-size:.75rem;font-weight:400;color:var(--text-muted)}.walk-duration-btn:hover{border-color:var(--border-hover);color:var(--text-primary)}.walk-duration-btn.active{background:#7c5cfc26;border-color:var(--accent-primary);color:var(--accent-secondary);box-shadow:var(--accent-glow)}.walk-estimate{text-align:center;color:var(--text-secondary);font-size:.95rem}.walk-estimate strong{color:var(--text-primary);font-size:1.2rem}.walk-start-btn{width:100%;padding:1.1rem;background:var(--accent-gradient);border:none;border-radius:1.25rem;font-size:1.15rem;font-weight:700;color:#fff;cursor:pointer;letter-spacing:.02em;box-shadow:var(--accent-glow);transition:opacity .18s;margin-top:auto}.walk-start-btn:hover{opacity:.9}.walk-start-btn:active{opacity:.75}.walk-playing{justify-content:flex-start}.walk-playing-header{display:flex;justify-content:space-between;align-items:center}.walk-stop-btn{background:#f871711f;border:1px solid rgba(248,113,113,.3);border-radius:.6rem;color:var(--danger);padding:.4rem .9rem;font-size:.85rem;cursor:pointer;transition:background .15s}.walk-stop-btn:hover{background:#f8717138}.walk-counter{font-size:.9rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.walk-progress-bar{height:4px;background:var(--bg-glass);border-radius:2px;overflow:hidden}.walk-progress-fill{height:100%;background:var(--accent-gradient);border-radius:2px;transition:width .4s ease}.walk-phrase-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;padding:2rem 0;min-height:200px}.walk-phrase{font-size:clamp(1.4rem,5vw,2rem);font-weight:700;color:var(--text-primary);text-align:center;line-height:1.3}.walk-meaning{font-size:1.1rem;color:var(--accent-secondary);text-align:center;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}.walk-meaning.visible{opacity:1;transform:translateY(0)}.walk-grade-area{display:flex;flex-direction:column;gap:.75rem}.walk-grade-label{text-align:center;font-size:.85rem;color:var(--text-muted)}.walk-grade-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.walk-grade-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .5rem;border-radius:1rem;border:1px solid transparent;cursor:pointer;font-size:1rem;font-weight:600;transition:transform .12s,opacity .12s;color:var(--text-primary)}.walk-grade-btn span{font-size:1rem}.walk-grade-btn small{font-size:.7rem;color:var(--text-muted)}.walk-grade-btn:active{transform:scale(.94);opacity:.8}.walk-grade-btn.hard{background:#f871711f;border-color:#f871714d}.walk-grade-btn.ok{background:#fbbf241f;border-color:#fbbf244d}.walk-grade-btn.easy{background:#34d3991f;border-color:#34d3994d}.walk-playing-indicator{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-bottom:1rem}.walk-playing-text{font-size:.8rem;color:var(--text-muted)}.walk-sound-wave{display:flex;align-items:center;gap:3px;height:24px}.walk-sound-wave span{display:block;width:4px;border-radius:2px;background:var(--accent-primary);animation:walkWave 1.2s ease-in-out infinite}.walk-sound-wave span:nth-child(1){height:8px;animation-delay:0s}.walk-sound-wave span:nth-child(2){height:16px;animation-delay:.15s}.walk-sound-wave span:nth-child(3){height:22px;animation-delay:.3s}.walk-sound-wave span:nth-child(4){height:16px;animation-delay:.45s}.walk-sound-wave span:nth-child(5){height:8px;animation-delay:.6s}@keyframes walkWave{0%,to{transform:scaleY(.5);opacity:.6}50%{transform:scaleY(1);opacity:1}}.walk-summary{align-items:center;text-align:center;justify-content:center}.walk-summary-icon{font-size:4rem}.walk-summary-title{font-size:1.8rem;font-weight:800;color:var(--text-primary);margin:0}.walk-summary-sub{color:var(--text-secondary);font-size:1rem;margin:0}.walk-summary-grades{display:flex;gap:1rem;justify-content:center;width:100%}.walk-summary-grade{flex:1;background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.3rem}.walk-summary-grade .grade-emoji{font-size:1.4rem}.walk-summary-grade .grade-label{font-size:.75rem;color:var(--text-muted)}.walk-summary-grade .grade-count{font-size:1.6rem;font-weight:700;color:var(--text-primary)}.walk-summary-next{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:.75rem;padding:.75rem 1rem;font-size:.85rem;color:var(--text-secondary);width:100%}.walk-summary-next-label{font-weight:600;color:var(--text-primary);margin-bottom:.25rem;font-size:.9rem}