:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}html{height:100%;overflow-x:hidden}:root[data-theme=dark],:root{--bg-primary: #1a1a1a;--bg-secondary: #2d3748;--bg-tertiary: #1a202c;--bg-hover: #2d4839;--bg-active: #2c5282;--bg-modal: #2d3748;--text-primary: #e2e8f0;--text-secondary: #374151;--border-primary: #2d3748;--border-secondary: #4a5568;--border-active: #63b3ed;--shadow-color: rgba(0, 0, 0, .2);--audio-bg: #1a202c;--audio-control: #2d3748;--sentence-active-bg: #5f9ea0;--sentence-active-shadow: rgba(49, 130, 206, .4);--accent-color: #3b82f6;--accent-hover: #2563eb;--accent-bg: rgba(59, 130, 246, .1);--border-color: #4a5568;--success-text: #10b981;--error-text: #ef4444;--error-bg: rgba(239, 68, 68, .1)}:root[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f7fafc;--bg-tertiary: #ffffff;--bg-hover: #e2e8f0;--bg-active: #3182ce;--bg-modal: #ffffff;--text-primary: #2d3748;--text-secondary: #718096;--border-primary: #e2e8f0;--border-secondary: #cbd5e0;--border-active: #3182ce;--shadow-color: rgba(0, 0, 0, .1);--audio-bg: #ffffff;--audio-control: #f7fafc;--sentence-active-bg: #a8c6a2b6;--sentence-active-shadow: rgba(56, 178, 172, .3);--accent-color: #3b82f6;--accent-hover: #2563eb;--accent-bg: rgba(59, 130, 246, .1);--border-color: #e2e8f0;--success-text: #059669;--error-text: #dc2626;--error-bg: rgba(239, 68, 68, .1)}#root{width:100%;height:100vh;display:flex;background-color:var(--bg-primary);overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}.btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s;outline:none;border-radius:4px}.btn:hover{color:var(--text-primary);background-color:var(--bg-hover)}.btn:focus{outline:none;box-shadow:none;background:none;border:none}.btn:active{outline:none;box-shadow:none;background:none;border:none;transform:none}.btn-primary{background-color:var(--bg-active);color:var(--text-primary)}.btn-primary:hover{background-color:var(--bg-hover);transform:scale(1.05)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.modal-content{background-color:var(--bg-modal);padding:2rem;border-radius:8px;box-shadow:0 4px 6px var(--shadow-color);width:90%;max-width:500px;color:var(--text-primary)}.modal-content h3{margin-top:0;margin-bottom:1rem;color:var(--text-primary)}.modal-content input{width:100%;padding:.5rem;margin-bottom:1rem;border:1px solid var(--border-secondary);border-radius:4px;background-color:var(--bg-tertiary);color:var(--text-primary)}.modal-content input:focus{outline:none;border-color:var(--border-active);box-shadow:0 0 0 2px #63b3ed33}.modal-buttons{display:flex;gap:1rem;justify-content:flex-end}.modal-buttons button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;background-color:var(--bg-active);color:var(--text-primary)}.modal-buttons button:hover{background-color:var(--bg-hover);transform:translateY(-1px)}.modal-buttons button:last-child{background-color:var(--border-secondary)}.modal-buttons button:last-child:hover{background-color:var(--text-secondary)}.sentence{cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .2s ease;color:var(--text-primary);display:inline-block;margin:2px}.sentence:hover{background-color:var(--bg-hover)}.sentence.active{background-color:var(--sentence-active-bg);box-shadow:0 0 4px var(--sentence-active-shadow)}.sentence.sentence-source{opacity:.9;color:var(--text-secondary)}.sentence.sentence-target{opacity:1;color:var(--text-primary)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:90%;max-width:500px;color:#ef4444;font-size:.95rem;padding:1.5rem;background-color:#ef44441a;border-radius:12px;border:1px solid rgba(239,68,68,.3);margin:0 1rem;transition:all .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 12px #ef444426}.error:hover{background-color:#ef444426;border-color:#ef444466;transform:translate(-50%,-50%) translateY(-2px);box-shadow:0 6px 20px #ef444433}.empty-state{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center;width:90%;max-width:500px;min-width:300px}.empty-message{color:var(--text-secondary);font-size:.9rem;padding:1.5rem 2rem;background-color:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-secondary);margin:0 1rem;transition:all .2s ease}.empty-message:hover{background-color:var(--bg-hover);border-color:var(--border-active);transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow-color)}@media (max-width: 768px){.error{position:relative;top:40%;left:auto;transform:none;margin:2rem 1rem;width:100%;max-width:none}.empty-state{position:relative;top:40%;left:auto;transform:none;width:100%;margin:2rem 0;padding:0 3rem}.empty-message{margin:0;padding:1rem 1.5rem}}.audio-player-container{display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:0;width:100%;height:58px;position:relative}.top-audio-player .audio-player-container{height:40px;background:transparent}.top-audio-player .audio-player-button,.top-audio-player .audio-player-play-button{background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s ease}.top-audio-player .audio-player-button:hover,.top-audio-player .audio-player-play-button:hover{background-color:#fff3;border-color:#ffffff4d}.top-audio-player .audio-player-speed-display{color:var(--text-primary);font-weight:600;right:-20%}.audio-player-controls{display:flex;align-items:center;gap:16px}.audio-player-button{padding:8px 12px;background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-primary);transition:all .2s ease;min-width:60px;height:32px;display:flex;align-items:center;justify-content:center}.audio-player-button:hover{background-color:var(--bg-hover);border-color:var(--border-active)}.audio-player-button:focus{outline:none;box-shadow:none;background:none}.audio-player-button:active{box-shadow:none;background:none;transform:none}.audio-player-play-button{padding:8px;border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;color:var(--text-primary);min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;background-color:var(--bg-secondary);border:1px solid var(--border-primary)}.audio-player-play-button.playing{background-color:var(--sentence-active-bg);border-color:var(--sentence-active-bg);color:#fff}.audio-player-play-button:hover{background-color:var(--bg-hover);border-color:var(--border-active)}.audio-player-play-button.playing:hover{background-color:var(--sentence-active-bg);border-color:var(--sentence-active-bg);opacity:.9}.audio-player-play-button:focus{outline:none;box-shadow:none;background:none}.audio-player-play-button:active{box-shadow:none;background:none;transform:none}.audio-player-speed-display{position:absolute;right:30%;font-size:12px;color:var(--text-secondary);font-weight:500}@media (max-width: 768px){.audio-player-speed-display{right:16%}.audio-player-container{margin-bottom:4px}}.user-menu{position:absolute;right:0;top:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px #0000001f;min-width:280px;z-index:1000;overflow:hidden;animation:userMenuSlideIn .2s ease-out}@keyframes userMenuSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.user-menu-header{padding:16px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary, var(--bg-secondary)) 100%)}.user-menu-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px #0000001a}.user-menu-avatar-fallback{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent-color, #4F46E5) 0%,var(--accent-hover, #3730A3) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;text-transform:uppercase;box-shadow:0 2px 8px #0000001a}.user-menu-info{flex:1;min-width:0}.user-menu-name{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-email{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-plan{margin-top:4px;display:flex;flex-direction:column;gap:2px}.plan-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:12px;display:inline-block;text-transform:uppercase;letter-spacing:.5px;width:fit-content}.plan-badge.pro{color:#fff;background:linear-gradient(135deg,gold,orange);box-shadow:0 2px 8px #ffd7004d}.plan-badge.free{color:var(--text-secondary);background:var(--bg-tertiary, var(--bg-secondary));border:1px solid var(--border-color)}.plan-expiry{font-size:10px;color:var(--text-secondary);font-weight:400;margin-top:2px}.user-menu-divider{height:1px;background:var(--border-color);margin:0}.user-menu-upgrade{padding:16px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.user-menu-upgrade-button{width:100%;background:var(--accent-color);color:#fff;border:1px solid var(--accent-color);padding:12px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease;box-shadow:0 2px 4px var(--shadow-color)}.user-menu-upgrade-button:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow-color)}.user-menu-upgrade-button:active{transform:translateY(0);box-shadow:0 1px 2px var(--shadow-color)}.upgrade-icon{font-size:16px}.user-menu-upgrade-button span:last-child{font-weight:600}.user-menu-actions{padding:8px}.user-menu-item{width:100%;padding:12px 16px;border:none;background:transparent;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;border-radius:8px;display:flex;align-items:center;gap:12px;transition:all .2s ease}.user-menu-item:hover{background:var(--bg-secondary);transform:translate(2px)}.user-menu-item:active{transform:translate(1px)}.logout-item:hover{background:var(--error-bg, rgba(239, 68, 68, .1));color:var(--error-text, #dc2626)}.user-menu-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}[data-theme=dark] .user-menu{box-shadow:0 8px 32px #0000004d}[data-theme=dark] .user-menu-avatar{box-shadow:0 2px 8px #0000004d}[data-theme=dark] .user-menu-upgrade{background:var(--accent-bg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}[data-theme=dark] .user-menu-upgrade-button{background:var(--accent-color);color:#fff;box-shadow:0 2px 4px var(--shadow-color)}[data-theme=dark] .user-menu-upgrade-button:hover{background:var(--accent-hover);box-shadow:0 4px 8px var(--shadow-color)}[data-theme=dark] .user-menu-upgrade-button:active{box-shadow:0 1px 2px var(--shadow-color)}@media (max-width: 768px){.user-menu{min-width:260px;right:-8px}.user-menu-header{padding:14px}.user-menu-avatar{width:42px;height:42px}.user-menu-name{font-size:15px}.user-menu-email{font-size:12px}.user-menu-item{padding:14px 16px;font-size:15px}.user-menu-upgrade{padding:18px}.user-menu-upgrade-button{padding:14px 18px;font-size:15px;border-radius:8px;gap:10px}.upgrade-icon{font-size:18px}.user-menu-upgrade-button:hover{transform:translateY(-1px)}.user-menu-upgrade-button:active{transform:translateY(0)}}@media (prefers-contrast: high){.user-menu{border-width:2px}.user-menu-avatar{border-width:3px}.user-menu-upgrade-button{border:2px solid var(--accent-color);font-weight:700}.user-menu-upgrade-button:hover{border-color:var(--accent-hover)}}@media (prefers-reduced-motion: reduce){.user-menu{animation:none}.user-menu-item{transition:none}.user-menu-item:hover,.user-menu-item:active{transform:none}.user-menu-upgrade-button{transition:none}.upgrade-icon{animation:none}.user-menu-upgrade-button:hover,.user-menu-upgrade-button:active{transform:none}}.top-toolbar{position:fixed;top:0;left:0;right:0;height:48px;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);display:flex;align-items:center;padding:0 16px;z-index:1000;color:var(--text-primary)}.toolbar-left{display:flex;align-items:center;gap:16px}.toolbar-right{display:flex;align-items:center;gap:16px;margin-left:auto}.toolbar-button{background:none;border:none;padding:8px;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s;outline:none;border-radius:4px}.toolbar-button:hover{color:var(--text-primary);background-color:var(--bg-active);transform:scale(1.05)}.toolbar-button:focus{outline:none;box-shadow:none;background:none;border:none}.toolbar-button:active{outline:none;box-shadow:none;background:none;border:none;transform:none}.toolbar-button.timer-button{font-size:14px;font-weight:500}.timer-countdown{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:12px;font-weight:600;color:#ff4757;background:#ff47571a;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,71,87,.3)}.toolbar-button.timer-button:hover .timer-countdown{background:#ff475733;border-color:#ff475780}.language-selector{background:none;border:none;padding:4px 8px;color:var(--text-secondary);font-size:14px;outline:none;border:1px solid var(--border-secondary);border-radius:4px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:all .2s ease;margin-left:.5rem;display:flex;align-items:center;justify-content:center}.audio-language-buttons{display:flex;gap:.5rem}.audio-language-btn{padding:.4rem .8rem;border:1px solid var(--border-secondary);border-radius:4px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:all .2s ease}.audio-language-btn:hover{background-color:var(--bg-active)}.audio-language-btn.active{background-color:var(--bg-active);border-color:var(--border-active)}.top-audio-player{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;padding:0;background:transparent;border-radius:0;box-shadow:none;z-index:1}.login-button{font-size:18px}.login-button:hover{transform:scale(1.1)}.user-button-container{position:relative;display:inline-block}.user-button{padding:4px;border-radius:50%;overflow:hidden;font-size:18px}.user-button:hover{background-color:var(--bg-secondary)}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;transition:all .2s ease}.user-avatar-fallback{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent-color, #4F46E5) 0%,var(--accent-hover, #3730A3) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;text-transform:uppercase;transition:all .2s ease}.user-button:hover .user-avatar,.user-button:hover .user-avatar-fallback{transform:scale(1.05);box-shadow:0 2px 8px #00000026}@media (max-width: 768px){.top-toolbar{height:48px}.toolbar-left{gap:8px}.toolbar-right{gap:6px}.toolbar-button{padding:6px;font-size:16px}.shortcut-button{display:none}.timer-countdown{font-size:10px;padding:1px 4px}.user-avatar{width:28px;height:28px}.top-audio-player{transform:translate(-50%,-50%) scale(.9)}}@media (max-width: 480px){.toolbar-left,.toolbar-right{gap:4px}.toolbar-button{padding:4px;font-size:14px}.user-avatar{width:24px;height:24px}.top-audio-player{transform:translate(-50%,-50%) scale(.8)}}@media (min-width: 769px){.top-toolbar{height:60px}.user-avatar{width:32px;height:32px}}:root{--modal-header-padding: 20px 24px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1010}.modal-content{background-color:var(--bg-tertiary);color:var(--text-primary);border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #0003;border:1px solid var(--border-primary);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;padding:var(--modal-header-padding);border-bottom:1px solid var(--border-primary);flex-shrink:0;position:relative}.modal-title{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.modal-close:hover{background-color:var(--bg-hover);color:var(--text-primary)}.modal-body{padding:24px;overflow-y:auto;flex:1}.modal-footer{padding:var(--modal-header-padding);border-top:1px solid var(--border-primary);display:flex;gap:12px;justify-content:flex-end;flex-shrink:0}.modal-button{padding:8px 16px;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease}.modal-button-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary)}.modal-button-secondary:hover{background-color:var(--bg-hover);border-color:var(--border-active)}.modal-button-primary{background-color:var(--bg-active);color:#fff;border:1px solid var(--bg-active)}.modal-button-primary:hover{background-color:var(--bg-active);border-color:var(--bg-active);opacity:.9}.modal-button-danger{background-color:#ef4444;color:#fff;border:1px solid #ef4444}.modal-button-danger:hover{background-color:#dc2626;border-color:#dc2626}.modal-button:disabled{opacity:.6;cursor:not-allowed}.modal-content.delete-confirm-modal{max-width:450px;width:100%}@media (max-width: 768px){.modal-content{margin:10px;max-width:calc(100vw - 20px);width:calc(100vw - 20px);max-height:calc(100vh - 200px)}.modal-content.delete-confirm-modal{max-width:min(450px,calc(100vw - 20px));width:min(450px,calc(100vw - 20px))}.modal-content.theme-modal,.modal-content.timer-modal,.modal-content.playmode-modal,.modal-content.shortcut-modal,.modal-content.language-modal,.modal-content.target-language-modal,.modal-content.feedback-modal,.modal-content.voice-modal{width:calc(100vw - 20px);max-width:calc(100vw - 20px)}.modal-header{padding:16px 20px}.modal-body{padding:20px}.modal-footer{padding:16px 20px;flex-direction:row}.modal-button{flex:1}}.config-modal{width:500px;max-width:90vw}.config-modal-input{width:100%;padding:12px;border:1px solid var(--border-primary);border-radius:6px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:16px;box-sizing:border-box;outline:none;transition:border-color .2s ease}.config-modal-input:focus{border-color:var(--accent-primary)}.config-modal-input::placeholder{color:var(--text-secondary)}@media (max-width: 768px){.config-modal{width:95vw;margin:20px auto}.config-modal-input{font-size:16px}}.sidebar{position:fixed;left:-400px;width:300px;height:100vh;background-color:var(--bg-secondary);border-right:1px solid var(--border-secondary);padding:1rem 1.5rem 1.5rem;overflow-y:auto;transition:all .3s ease;z-index:1005;box-shadow:0 0 10px var(--shadow-color);color:var(--text-primary)}.sidebar.open{left:0}.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1003;transition:opacity .3s ease;opacity:0}.sidebar-overlay.show{display:block;opacity:1}.sidebar-toggle{position:fixed;left:10px;top:10px;z-index:1002;width:40px;height:40px;padding:0;background-color:var(--bg-active);color:var(--text-primary);border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px var(--shadow-color)}.sidebar-toggle:hover{background-color:var(--bg-hover);transform:scale(1.05);box-shadow:0 3px 6px var(--shadow-color)}.article-list{display:flex;flex-direction:column;gap:.75rem;padding-bottom:calc(1.5rem + 20px)}.article-item{padding:.75rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s ease;background-color:var(--bg-tertiary);border:1px solid var(--border-secondary);color:var(--text-primary);display:flex;justify-content:space-between;align-items:center;position:relative}.article-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{background:none;border:none;color:#ff4757;font-size:18px;font-weight:700;cursor:pointer;padding:2px 6px;border-radius:3px;transition:all .2s ease;opacity:.7;margin-left:8px;flex-shrink:0}.delete-button:hover{opacity:1;background-color:#ff47571a;transform:scale(1.1)}.article-item.keyboard-focused{background-color:var(--bg-hover);border-color:var(--border-active);outline:2px solid var(--border-active);outline-offset:2px}.article-item:hover{background-color:var(--bg-hover);transform:translate(2px);border-color:var(--border-active)}.article-item.selected{background-color:var(--bg-active);border-color:var(--border-active);color:var(--text-primary)}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:2000}.delete-confirm-dialog{background-color:var(--bg-primary);border-radius:8px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 20px #0000004d;border:1px solid var(--border-secondary)}.delete-confirm-dialog h3{margin:0 0 1rem;color:var(--text-primary);font-size:1.2rem}.delete-confirm-dialog p{margin:0 0 1.5rem;color:var(--text-secondary);line-height:1.5}.delete-confirm-buttons{display:flex;gap:.75rem;justify-content:flex-end}.cancel-button,.confirm-button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.cancel-button{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-secondary)}.cancel-button:hover{background-color:var(--bg-hover)}.confirm-button{background-color:#ff4757;color:#fff}.confirm-button:hover{background-color:#ff3838}@media (max-width: 768px){.sidebar{width:calc(100vw - 60px);max-width:320px}.sidebar-overlay.show{display:block;opacity:1}}.main-content{position:fixed;top:48px;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;background-color:var(--bg-secondary);color:var(--text-primary);display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box;-webkit-overflow-scrolling:touch;padding-bottom:60px}.article-content{background-color:var(--bg-tertiary);padding:1rem;overflow:visible;color:var(--text-primary);width:100%;max-width:800px;margin:20px auto;box-sizing:border-box}.audio-notice{background-color:var(--bg-secondary);color:var(--text-secondary);padding:.75rem 1rem;margin:1rem 0;border-radius:8px;border-left:4px solid var(--border-active);font-size:.9rem;text-align:center;opacity:.8}.welcome-content{background-color:var(--bg-secondary);color:var(--text-primary);padding:1.5rem;margin:1rem 0;border-radius:12px;border:1px solid var(--border-primary);font-size:1rem;line-height:1.6;text-align:center}.welcome-content p{margin:0;color:var(--text-primary)}.article-view .audio-player{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:10;margin:0;padding:0 1rem;background:#2d3748;border-bottom:1px solid #4a5568;box-shadow:0 2px 8px #0003;width:100%;max-width:770px;border-radius:8px;color:#e2e8f0}.back-button{position:fixed;right:10px;top:10px;z-index:1002;padding:.4rem .8rem;background-color:#fff;border:1px solid #e2e8f0;border-radius:4px;color:#2c5282;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;font-size:.9rem;box-shadow:0 2px 4px #0000000d}.back-button:hover{background-color:#f8f9fa;transform:translateY(-1px);box-shadow:0 3px 6px #0000001a}.language-controls{position:fixed;top:4px;right:4px;z-index:1002;display:flex;gap:1rem;align-items:center;height:40px}@media (min-width: 769px){.main-content{top:60px;padding-bottom:80px}.article-content{border-radius:12px;box-shadow:0 4px 12px var(--shadow-color)}}@media (max-width: 768px){.main-content{bottom:60px;padding-bottom:0}.article-content{border-radius:0;box-shadow:none;margin:0;padding:1rem;min-height:calc(100vh - 108px);box-sizing:border-box}.article-view{padding:0}}.config-button{position:fixed;right:10px;top:10px;z-index:1001;width:40px;height:40px;padding:0;background-color:var(--bg-active);color:var(--text-primary);border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px var(--shadow-color)}.config-button:hover{background-color:var(--bg-hover);transform:scale(1.05);box-shadow:0 3px 6px var(--shadow-color)}.bottom-toolbar{position:fixed;bottom:0;left:0;width:100%;background-color:var(--bg-tertiary);box-shadow:0 -2px 10px #0000001a;z-index:1000}.audio-player-bottom>audio{width:100%;background-color:var(--audio-bg)!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0!important}.voice-modal{width:100%;max-width:500px}.voice-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;color:var(--text-secondary)}.loading-spinner{width:2rem;height:2rem;border:2px solid var(--border-secondary);border-top:2px solid var(--border-active);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.voice-error,.voice-empty{text-align:center;padding:2rem;color:var(--text-secondary)}.voice-empty p{margin:0;font-size:.9rem}.retry-button{background-color:var(--bg-active);color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;margin-top:1rem;transition:opacity .2s ease}.retry-button:hover{opacity:.8}.voice-engine-info{margin-bottom:1.5rem;padding:1rem;background-color:var(--bg-secondary);border-radius:6px;border:1px solid var(--border-secondary)}.voice-engine-info p{margin:0;color:var(--text-primary);font-size:.9rem}.voice-list{display:flex;flex-direction:column;gap:.75rem;overflow-x:hidden;width:100%;box-sizing:border-box}.voice-option{border:1px solid var(--border-primary);border-radius:8px;transition:all .2s ease;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between}.voice-option:hover{border-color:var(--primary-color);background-color:var(--bg-hover)}.voice-option:has(input:checked){border-color:var(--primary-color);background-color:var(--primary-bg)}.voice-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;padding-right:.75rem}.voice-recommend-badge{background-color:#ffc107;color:#212529;font-size:.7rem;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.voice-preview-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px}.voice-preview-btn:hover{background-color:var(--bg-hover);transform:scale(1.1)}.voice-preview-btn:active{transform:scale(.95)}.voice-option label{display:flex;align-items:center;padding:.75rem 1rem;cursor:pointer;flex:1;gap:.75rem;box-sizing:border-box;overflow:hidden;min-width:0}.voice-option input[type=radio]{margin:0;flex-shrink:0;width:20px;height:20px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--border-secondary);border-radius:50%;background-color:#fff;position:relative}.voice-option input[type=radio]:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background-color:var(--border-active)}.voice-option input[type=radio]:focus{outline:none;box-shadow:0 0 0 2px #007bff40}.voice-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.voice-info strong{color:var(--text-primary, #212529);font-size:1rem;font-weight:500;word-wrap:break-word;overflow-wrap:break-word}.voice-info small{color:var(--text-secondary, #6c757d);font-size:.85rem;line-height:1.3;word-wrap:break-word;overflow-wrap:break-word}[data-theme=dark] .voice-option{border-color:var(--border-secondary)}[data-theme=dark] .voice-option:hover{border-color:var(--primary-color)}@media (max-width: 768px){.voice-modal{max-height:calc(100vh - 120px)}.voice-option label{padding:.75rem}.voice-list{max-height:calc(100vh - 320px);overflow-y:auto}}.target-language-modal{width:100%;max-width:400px}.limit-error-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}.limit-error-modal{max-width:600px;width:90vw;background:var(--bg-primary);border-radius:16px;box-shadow:0 20px 60px #0000004d;position:relative;max-height:90vh;overflow-y:auto;padding:32px}.limit-error-modal-header{position:relative;margin-bottom:24px}.limit-error-modal-close{position:absolute;top:-8px;right:-8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-secondary);transition:all .2s ease}.limit-error-modal-close:hover{background:var(--error-bg, rgba(239, 68, 68, .1));color:var(--error-text, #dc2626);border-color:var(--error-text, #dc2626)}.limit-error-modal-content{margin-bottom:24px}.limit-error-content{text-align:center;margin-bottom:32px}.error-icon{font-size:64px;margin-bottom:20px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.error-title{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 16px;line-height:1.3}.error-details{margin-bottom:24px}.error-message{color:var(--text-secondary);font-size:16px;line-height:1.5;margin:0 0 16px}.limit-details{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-top:16px}.limit-details p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.4}.upgrade-section{background:linear-gradient(135deg,#3b82f614,#2563eb1f);border:1px solid rgba(59,130,246,.2);border-radius:12px;padding:20px;margin-top:20px;text-align:center;transition:all .2s ease}.upgrade-text{margin:0 0 16px;font-size:14px;line-height:1.4;font-weight:500;color:var(--text-color, #374151)}.upgrade-button{background:var(--accent-color, #3b82f6);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #3b82f640;min-width:160px}.upgrade-button:hover{background:var(--accent-hover, #2563eb);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f659}.limit-error-modal-footer{text-align:center;padding-top:24px;border-top:1px solid var(--border-color)}.close-button{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:12px 32px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:120px}.close-button:hover{background:var(--bg-hover, var(--bg-secondary));border-color:var(--border-hover, var(--accent-color));transform:translateY(-1px)}[data-theme=dark] .limit-error-modal{box-shadow:0 20px 60px #00000080}[data-theme=dark] .upgrade-section{box-shadow:0 8px 24px #3b82f64d}@media (max-width: 768px){.limit-error-modal{width:90vw;max-width:none;padding:24px}.error-icon{font-size:48px;margin-bottom:16px}.error-title{font-size:20px}.error-message{font-size:14px}.upgrade-section{padding:24px 20px}.upgrade-text{font-size:14px}.upgrade-button{padding:10px 20px;font-size:14px;min-width:140px}.close-button{padding:10px 24px;font-size:13px;min-width:100px}}@media (max-width: 480px){.limit-error-modal{width:95vw;padding:20px}.error-icon{font-size:40px}.error-title{font-size:18px}.upgrade-section{padding:20px 16px}.upgrade-button,.close-button{width:100%;padding:12px}}@media (prefers-contrast: high){.limit-error-modal{border:3px solid var(--border-color)}.upgrade-button{border-width:3px}.close-button{border-width:2px}}@media (prefers-reduced-motion: reduce){.upgrade-button{transition:none}.upgrade-button:hover{transform:none}.close-button{transition:none}.close-button:hover{transform:none}.limit-error-modal-close{transition:none}}.upload-page{position:fixed;top:48px;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem;background-color:var(--bg-tertiary);color:var(--text-primary);overflow-y:auto;box-sizing:border-box}@media (max-width: 768px){.upload-page{bottom:70px}}.upload-container{width:100%;max-width:800px;background-color:var(--bg-tertiary);border-radius:12px;box-shadow:0 4px 12px var(--shadow-color);padding:2rem}.upload-header{text-align:center;margin-bottom:2rem}.upload-header h2{margin:0 0 .5rem;color:var(--text-primary);font-size:1.8rem}.upload-header p{margin:0;color:var(--text-secondary);font-size:1rem}.upload-content{display:flex;flex-direction:column}.upload-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding:.75rem 0;margin-top:.5rem}.toolbar-left{display:flex;align-items:center;gap:.75rem;justify-self:start}.target-lang-btn{padding:.5rem 1rem;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-width:120px}.target-lang-btn:hover:not(:disabled){background-color:var(--bg-hover);border-color:var(--border-active)}.target-lang-btn:disabled{opacity:.6;cursor:not-allowed}.voice-modal-btn{padding:.5rem 1rem;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.voice-modal-btn:hover:not(:disabled){background-color:var(--bg-hover);border-color:var(--border-active)}.voice-modal-btn:disabled{opacity:.6;cursor:not-allowed}.toolbar-right{display:flex;align-items:center;gap:16px;margin-left:auto;-webkit-tap-highlight-color:transparent}.settings-toggle{padding:.5rem;background-color:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-secondary);border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.settings-toggle:hover:not(:disabled){background-color:var(--bg-hover);border-color:var(--border-active)}.settings-toggle.active{transform:rotate(180deg);background-color:var(--bg-hover)}.settings-toggle:disabled{opacity:.6;cursor:not-allowed}.settings-panel{padding:1rem;background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-top:none;border-radius:0 0 8px 8px;display:flex;flex-direction:column;gap:1rem}.source-lang-section{display:flex;align-items:center;gap:.75rem}.source-lang-section label{font-size:.9rem;color:var(--text-primary);white-space:nowrap}.source-lang-section select{padding:.5rem .75rem;border:1px solid var(--border-secondary);border-radius:6px;background-color:var(--bg-primary);color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:border-color .2s ease;min-width:120px}.source-lang-section select:focus{outline:none;border-color:var(--border-active);box-shadow:0 0 0 2px #63b3ed33}.voice-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.voice-modal{background-color:var(--bg-primary);border-radius:12px;box-shadow:0 10px 30px #0000004d;max-width:500px;width:90%;max-height:80vh;overflow:hidden}.voice-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border-primary)}.voice-modal-header h3{margin:0;color:var(--text-primary);font-size:1.2rem}.close-btn{background:none;border:none;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.close-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.voice-modal-content{padding:1rem;max-height:400px;overflow-y:auto}.voice-list{display:flex;flex-direction:column;gap:.5rem}.voice-item{padding:1rem;border:1px solid var(--border-secondary);border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:var(--bg-secondary)}.voice-item:hover{border-color:var(--border-active);background-color:var(--bg-hover)}.voice-item.selected{border-color:var(--sentence-active-bg);background-color:#63b3ed1a}.voice-name{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.voice-desc{font-size:.9rem;color:var(--text-secondary)}.loading-text{padding:2rem;text-align:center;color:var(--text-secondary);font-style:italic}@media (max-width: 768px){.upload-toolbar{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:.75rem;text-align:center}.upload-toolbar .toolbar-right{justify-self:center;display:flex;justify-content:center;width:100%}.toolbar-left{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:center}.upload-button-center{justify-self:stretch;min-width:auto;padding:.75rem 1rem;font-size:1rem}.target-lang-select,.voice-modal-btn{padding:.75rem .5rem;font-size:.9rem}.voice-modal{width:95%;max-height:80vh}.settings-panel{gap:.75rem}.source-lang-section{flex-direction:column;align-items:stretch;gap:.5rem}.settings-toggle{padding:.5rem;font-size:1.2rem}}.text-input-section{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.text-input-section label{font-weight:500;color:var(--text-primary);font-size:1rem}.text-input-label{display:block;font-weight:600;color:var(--text-primary);font-size:1rem;margin-bottom:.75rem;padding:.5rem .75rem;background:linear-gradient(135deg,var(--bg-secondary) 0%,rgba(168,85,247,.05) 100%);border:1px solid var(--border-primary);border-radius:8px;display:flex;align-items:center;gap:.5rem}.textarea-container{position:relative}.text-input-section textarea{min-height:200px;padding:1rem;border:1px solid var(--border-secondary);border-radius:8px;background-color:var(--bg-primary);color:var(--text-primary);font-size:1rem;line-height:1.5;resize:vertical;font-family:inherit;transition:border-color .2s ease;width:100%;box-sizing:border-box}.character-count{position:absolute;bottom:8px;right:12px;font-size:.85rem;color:var(--text-secondary);background-color:var(--bg-primary);padding:2px 6px;border-radius:4px;border:1px solid var(--border-secondary);pointer-events:none;-webkit-user-select:none;user-select:none;transition:color .2s ease,border-color .2s ease}.character-count.over-limit{color:#ef4444;border-color:#ef44444d;background-color:#ef44440d}.text-input-section textarea:focus{outline:none;border-color:var(--border-active);box-shadow:0 0 0 2px #63b3ed33}.text-input-section textarea:disabled{opacity:.6;cursor:not-allowed}.text-input-section textarea::placeholder{color:var(--text-secondary);opacity:.7}.upload-section{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;justify-self:center}.upload-options{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.checkbox-text{white-space:nowrap}.translation-checkbox{display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;pointer-events:none}.translation-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--text-secondary);opacity:.7;transition:opacity .2s ease;pointer-events:auto}.translation-checkbox input[type=checkbox]:hover{opacity:1}.translation-checkbox input[type=checkbox]:checked{accent-color:var(--border-active);opacity:.8}.translation-checkbox .checkbox-text{font-size:14px;color:var(--text-primary);font-weight:500;cursor:pointer;pointer-events:auto}.translation-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:var(--text-secondary);color:var(--bg-primary);font-size:12px;font-weight:700;cursor:help;margin-left:.25rem;transition:all .2s ease}.tooltip-icon:hover{background-color:var(--border-active);transform:scale(1.1)}.translation-tip{text-align:center;padding:.75rem 1rem;background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;color:var(--text-secondary);font-size:.9rem;margin-top:.5rem}.upload-button-center{padding:.75rem .2rem;background-color:var(--bg-active);color:var(--text-primary);border:1px solid var(--border-active);border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s ease;min-width:160px;width:160px;text-align:center;box-shadow:0 2px 4px var(--shadow-color);justify-self:center}.upload-button-center:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px var(--shadow-color)}.upload-button-center:disabled{opacity:.6;cursor:not-allowed;transform:none}.upload-button-center.uploading{background-color:var(--bg-secondary);cursor:wait;opacity:.8}.upload-button{padding:.5rem 1.5rem;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-secondary);border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:100px}.upload-button:disabled{opacity:.6;cursor:not-allowed}.upload-button.uploading{background-color:var(--bg-secondary);cursor:wait;opacity:.8}.upload-button:hover:not(:disabled){background-color:var(--bg-hover);border-color:var(--border-active)}.upload-button-act:hover:not(:disabled){background-color:var(--sentence-active-bg);opacity:.9}.upload-button:disabled,.upload-button-act:disabled{opacity:.6;cursor:not-allowed}.upload-button-act.uploading{background-color:var(--text-secondary);cursor:wait}.message{padding:1rem;border-radius:8px;font-size:1rem;text-align:center;margin-top:1rem}.error-message{background-color:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444}.success-message{background-color:#22c55e1a;border:1px solid rgba(34,197,94,.3);color:#22c55e}@media (min-width: 769px){.upload-page{top:60px}}@media (max-width: 768px){.upload-page{padding:1rem .5rem}.upload-container{padding:1.5rem;border-radius:0;box-shadow:none}.upload-header h2{font-size:1.5rem}.text-input-section textarea{min-height:150px;padding:.75rem}.character-count{bottom:6px;right:10px;font-size:.8rem}.upload-section{flex-direction:column;gap:15px}.upload-toolbar .toolbar-right .translation-checkbox{justify-content:center;align-items:center;width:auto;display:flex}}@media (max-width: 480px){.upload-page{padding:.5rem .25rem}.upload-container{padding:1rem}.upload-header h2{font-size:1.25rem}.toolbar-left{grid-template-columns:1fr 1fr auto;gap:.4rem}.target-lang-select,.voice-modal-btn{padding:.5rem;font-size:.85rem}.upload-button-center{margin-top:10px;padding:.8rem .75rem;font-size:1rem}.text-input-section textarea{min-height:120px;padding:.5rem;font-size:.9rem}.character-count{bottom:4px;right:8px;font-size:.75rem;padding:1px 4px}.settings-toggle{padding:.4rem;font-size:1rem}}.global-notification{position:fixed;top:80px;right:20px;z-index:2000;min-width:280px;max-width:350px;border-radius:6px;box-shadow:0 2px 8px var(--shadow-color);animation:slideIn .3s ease-out;font-size:.85rem}.global-notification.success{background-color:#22c55ef2;border:1px solid rgba(34,197,94,.3);color:#fff}.global-notification.error{background-color:#ef4444f2;border:1px solid rgba(239,68,68,.3);color:#fff}.notification-content{display:flex;align-items:center;padding:.75rem;gap:.6rem}.notification-icon{font-size:1rem;flex-shrink:0}.notification-message{flex:1;line-height:1.4}.notification-close{background:none;border:none;color:inherit;font-size:1.2rem;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;flex-shrink:0}.notification-close:hover{background-color:#fff3}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.global-notification{top:60px;right:10px;left:10px;min-width:auto;max-width:none}.notification-content{padding:.75rem}}.timer-display{text-align:center;margin-bottom:24px}.timer-time{font-size:32px;font-weight:600;color:var(--text-primary);font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace}.timer-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.timer-option{padding:12px;border:2px solid var(--border-primary);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease}.timer-option:hover{border-color:var(--border-active);background:var(--bg-hover)}.timer-option.selected{border-color:var(--bg-active);background:var(--bg-active);color:#fff}.timer-custom{margin-bottom:24px}.timer-custom-btn{width:100%;padding:12px;border:2px solid var(--border-primary);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.timer-custom-btn:hover{border-color:var(--border-active);background:var(--bg-hover)}.timer-custom-btn.selected{border-color:var(--bg-active);background:var(--bg-active);color:#fff}.timer-custom-input{display:flex;align-items:center;gap:8px;justify-content:center}.timer-custom-input input{width:80px;padding:8px 12px;border:2px solid var(--border-primary);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:16px;text-align:center}.timer-custom-input input:focus{outline:none;border-color:var(--border-active)}.timer-custom-input span{color:var(--text-primary);font-size:14px}.timer-actions{display:flex;gap:12px}@media (max-width: 480px){.timer-options{grid-template-columns:repeat(2,1fr);gap:8px}.timer-option,.timer-custom-btn{padding:10px;font-size:14px}.timer-time{font-size:28px}}.shortcut-modal{max-width:600px;width:90%}.shortcut-table{width:100%;border-collapse:collapse;font-size:14px}.shortcut-table thead{background-color:var(--bg-secondary)}.shortcut-table th{padding:12px 24px;text-align:left;font-weight:600;color:var(--text-primary);border-bottom:2px solid var(--border-primary)}.shortcut-table td{padding:12px 24px;border-bottom:1px solid rgba(0,0,0,.05);color:var(--text-primary)}.shortcut-table tbody tr:hover{background-color:var(--bg-hover)}.shortcut-table tbody tr:last-child td{border-bottom:none}[data-theme=dark] .shortcut-table td{border-bottom:1px solid rgba(255,255,255,.08)}.shortcut-key{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:600;padding:4px 8px!important;border-radius:4px;font-size:13px;color:var(--code-color, #333);min-width:60px;text-align:center}.shortcut-description{color:var(--text-secondary)}[data-theme=dark] .shortcut-key{color:var(--code-color, #e6e6e6)}@media (max-width: 600px){.shortcut-modal{max-height:85vh}.shortcut-modal-header{padding:16px 20px 12px}.shortcut-modal-header h3{font-size:16px}.shortcut-table th,.shortcut-table td{padding:10px 20px}.shortcut-table{font-size:13px}.shortcut-key{font-size:12px;padding:3px 6px!important}}.language-modal{width:100%;max-width:400px}.language-list{display:flex;flex-direction:column;gap:12px;padding:8px 0;overflow-x:hidden;width:100%;box-sizing:border-box}.language-option{border:1px solid var(--border-primary);border-radius:8px;transition:all .2s ease;cursor:pointer}.language-option:hover{border-color:var(--primary-color);background-color:var(--bg-hover)}.language-option label{display:flex;align-items:center;padding:16px;cursor:pointer;width:100%;box-sizing:border-box;overflow:hidden}.language-option input[type=radio]{margin-right:12px;width:16px;height:16px;accent-color:var(--primary-color)}.language-info{display:flex;flex-direction:column;gap:4px}.language-info strong{color:var(--text-primary);font-size:14px;font-weight:600}.language-info small{color:var(--text-secondary);font-size:12px}.language-option:has(input:checked){border-color:var(--primary-color);background-color:var(--primary-bg)}[data-theme=dark] .language-option{border-color:var(--border-secondary)}[data-theme=dark] .language-option:hover{border-color:var(--primary-color)}@media (max-width: 480px){.language-option label{padding:12px}.language-info strong{font-size:13px}.language-info small{font-size:11px}}.theme-modal{width:100%;max-width:450px}.theme-list{display:flex;flex-direction:column;gap:12px;padding:8px 0;overflow-x:hidden;width:100%;box-sizing:border-box}.theme-option{border:1px solid var(--border-primary);border-radius:8px;transition:all .2s ease;cursor:pointer}.theme-option:hover{border-color:var(--primary-color);background-color:var(--bg-hover)}.theme-option label{display:flex;align-items:center;padding:16px;cursor:pointer;width:100%;box-sizing:border-box;overflow:hidden}.theme-option input[type=radio]{margin-right:12px;width:16px;height:16px;accent-color:var(--primary-color)}.theme-info{display:flex;flex-direction:column;gap:6px;flex:1}.theme-header{display:flex;align-items:center;gap:8px}.theme-icon{font-size:18px}.theme-info strong{color:var(--text-primary);font-size:14px;font-weight:600}.theme-info small{color:var(--text-secondary);font-size:12px;line-height:1.4}.theme-option:has(input:checked){border-color:var(--primary-color);background-color:var(--primary-bg)}[data-theme=dark] .theme-option{border-color:var(--border-secondary)}[data-theme=dark] .theme-option:hover{border-color:var(--primary-color)}@media (max-width: 480px){.theme-option label{padding:12px}.theme-icon{font-size:16px}.theme-info strong{font-size:13px}.theme-info small{font-size:11px}}.login-modal{width:400px;max-width:90vw}.login-content{padding:20px 0;text-align:center}.login-description{margin-bottom:24px}.login-description p{margin:8px 0;color:var(--text-primary);line-height:1.5}.login-description p:first-child{font-size:18px;font-weight:600;margin-bottom:12px}.login-error{background-color:var(--error-bg, #fee);color:var(--error-text, #c53030);padding:12px;border-radius:6px;margin-bottom:20px;border:1px solid var(--error-border, #feb2b2);font-size:14px}.google-login-container{margin:24px 0;display:flex;justify-content:center;align-items:center;min-height:50px}.login-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 24px;color:var(--text-primary);font-size:16px;gap:12px}.login-loading-spinner{width:24px;height:24px;border:3px solid var(--border-secondary);border-top:3px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}.login-loading-text{font-weight:500;color:var(--text-primary);letter-spacing:.5px}.login-loading-dots{display:inline-block;animation:dots 1.5s infinite}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.login-footer{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-secondary)}.login-terms{font-size:12px;color:var(--text-secondary);line-height:1.4;max-width:280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:4px}.login-terms a{color:var(--primary-color, #4a90e2);text-decoration:none;transition:color .2s ease,text-decoration .2s ease}.login-terms a:hover,.login-terms a:focus{color:var(--primary-color-hover, #2a6fc9);text-decoration:underline}#google-signin-button{display:flex;justify-content:center;width:100%}#google-signin-button>div{width:100%!important;max-width:280px}@media (max-width: 768px){.login-modal{width:95vw;margin:20px auto}.login-content{padding:16px 0}.login-description p:first-child{font-size:16px}.google-login-container{margin:20px 0}#google-signin-button>div{max-width:100%}}[data-theme=dark] .login-error{background-color:var(--error-bg, #2d1b1b);color:var(--error-text, #fc8181);border-color:var(--error-border, #4a2c2c)}.login-features{margin:16px 0;padding:16px;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary, var(--bg-secondary)) 100%);border-radius:12px;border:1px solid var(--border-color)}.login-features h4{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--text-primary)}.login-features ul{margin:0;padding:0;list-style:none}.login-features li{margin:8px 0;padding:4px 0;font-size:14px;color:var(--text-secondary);line-height:1.5;display:flex;align-items:center}.login-help{margin-top:16px;padding:16px;background-color:var(--warning-bg, #fef3cd);border-radius:8px;border-left:4px solid var(--warning-color, #f59e0b);border:1px solid var(--warning-border, #fde68a)}[data-theme=dark] .login-help{background-color:var(--warning-bg-dark, #451a03);border-color:var(--warning-border-dark, #92400e)}.login-help p{margin:0 0 8px;font-size:14px;color:var(--warning-text, #92400e);font-weight:500}[data-theme=dark] .login-help p{color:var(--warning-text-dark, #fbbf24)}.login-help ul{margin:8px 0 0;padding-left:20px}.login-help li{margin:6px 0;font-size:13px;color:var(--warning-text-secondary, #78350f);line-height:1.4}[data-theme=dark] .login-help li{color:var(--warning-text-secondary-dark, #fcd34d)}.login-help code{background-color:var(--code-bg, #f3f4f6);color:var(--code-text, #1f2937);padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px}[data-theme=dark] .login-help code{background-color:var(--code-bg-dark, #374151);color:var(--code-text-dark, #f9fafb)}.feedback-modal{max-width:500px;width:90vw}.feedback-modal-content{padding:0}.feedback-status{padding:12px;border-radius:6px;margin-bottom:16px;font-size:14px;text-align:center}.feedback-success{background-color:var(--success-bg, #d4edda);color:var(--success-text, #155724);border:1px solid var(--success-border, #c3e6cb)}.feedback-error{background-color:var(--error-bg, #f8d7da);color:var(--error-text, #721c24);border:1px solid var(--error-border, #f5c6cb)}.feedback-form{display:flex;flex-direction:column;gap:16px}.feedback-field{display:flex;flex-direction:column;gap:6px}.feedback-label{font-size:14px;font-weight:500;color:var(--text-primary)}.feedback-textarea{width:100%;padding:12px;border:1px solid var(--border-secondary);border-radius:6px;font-size:14px;font-family:inherit;resize:vertical;min-height:120px;background-color:var(--bg-primary);color:var(--text-primary);transition:border-color .2s ease;box-sizing:border-box}.feedback-textarea:focus{outline:none;border-color:var(--border-active);box-shadow:0 0 0 2px #63b3ed4d}.feedback-textarea:disabled{opacity:.6;cursor:not-allowed}.feedback-char-count{font-size:12px;color:var(--text-secondary);text-align:right}.feedback-email-input{width:100%;padding:10px 12px;border:1px solid var(--border-secondary);border-radius:6px;font-size:14px;background-color:var(--bg-primary);color:var(--text-primary);transition:border-color .2s ease;box-sizing:border-box}.feedback-email-input:focus{outline:none;border-color:var(--border-active);box-shadow:0 0 0 2px #63b3ed4d}.feedback-email-input:disabled{opacity:.6;cursor:not-allowed}@media (prefers-color-scheme: dark){.feedback-success{background-color:#28a74533;color:#90ee90;border-color:#28a74566}.feedback-error{background-color:#dc354533;color:#ff6b6b;border-color:#dc354566}}.subscription-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.subscription-modal{max-width:800px;width:90vw;background:var(--bg-primary);border-radius:16px;box-shadow:0 20px 60px #0000004d;position:relative;max-height:90vh;overflow-y:auto;padding:32px}.subscription-modal-header{text-align:center;margin-bottom:32px;position:relative}.subscription-modal-close{position:absolute;top:-8px;right:-8px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-secondary);transition:all .2s ease}.subscription-modal-close:hover{background:var(--error-bg, rgba(239, 68, 68, .1));color:var(--error-text, #dc2626);border-color:var(--error-text, #dc2626)}.subscription-modal-title{font-size:28px;font-weight:700;color:var(--text-primary);margin:0 0 12px;display:flex;align-items:center;justify-content:center;gap:12px}.subscription-icon{font-size:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.subscription-modal-subtitle{font-size:16px;color:var(--text-secondary);margin:0;line-height:1.5}.subscription-modal-content{margin-bottom:24px}.subscription-loading{text-align:center;padding:48px 24px}.loading-spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top:3px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}.subscription-loading p{color:var(--text-secondary);margin:0}.subscription-error{text-align:center;padding:48px 24px}.error-icon{font-size:48px;margin-bottom:16px;display:block}.subscription-error p{color:var(--error-text, #dc2626);margin:0 0 16px;font-size:16px}.retry-button{background:var(--accent-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.retry-button:hover{background:var(--accent-hover, #2563eb);transform:translateY(-1px)}.comparison-section{margin-bottom:40px}.comparison-title{font-size:20px;font-weight:600;color:var(--text-primary);text-align:center;margin:0 0 24px}.comparison-table{background:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border-color)}.comparison-header{display:grid;grid-template-columns:2fr 1fr 1fr;background:var(--accent-color);color:#fff;font-weight:600;font-size:14px}.comparison-header>div{padding:16px;text-align:center;display:flex;align-items:center;justify-content:center}.feature-column{text-align:center!important;justify-content:center!important}.comparison-row{display:grid;grid-template-columns:2fr 1fr 1fr;border-bottom:1px solid var(--border-color)}.comparison-row:last-child{border-bottom:none}.comparison-row>div{padding:12px 16px;display:flex;align-items:center;justify-content:center}.feature-name{justify-content:center!important;font-weight:500;color:var(--text-primary)}.feature-value{font-size:16px;font-weight:600}.feature-value:contains("✓"){color:var(--success-text, #059669)}.feature-value:contains("✗"){color:var(--error-text, #dc2626)}.plans-section{margin-bottom:32px}.plans-title{font-size:20px;font-weight:600;color:var(--text-primary);text-align:center;margin:0 0 24px}.subscription-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0;margin-bottom:32px}.subscription-plan{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:24px;position:relative;transition:all .3s ease;cursor:pointer}.subscription-plan.selected{border-color:var(--accent-color);background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--accent-bg, rgba(59, 130, 246, .05)) 100%);box-shadow:0 8px 24px #3b82f626}.subscription-plan:hover{transform:translateY(-4px);box-shadow:0 12px 32px #00000026;border-color:var(--accent-color)}.plan-discount-info{position:absolute;top:-8px;right:12px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:4px 8px;border-radius:12px;font-size:10px;font-weight:600;box-shadow:0 2px 8px #f59e0b4d;z-index:1}.plan-header{text-align:center;margin-bottom:20px}.plan-name{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 12px;text-transform:capitalize}.plan-price{display:flex;align-items:baseline;justify-content:center;gap:2px;flex-wrap:wrap}.price-amount{font-size:32px;font-weight:700;color:var(--accent-color);line-height:1}.price-period{font-size:14px;color:var(--text-secondary);font-weight:500}.plan-description{text-align:center;color:var(--text-secondary);font-size:14px;margin:0 0 20px;line-height:1.4}.feature-icon{width:20px;height:20px;background:var(--success-bg, rgba(34, 197, 94, .1));color:var(--success-text, #059669);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}.plan-selection{display:flex;justify-content:center;margin-top:16px}.selection-indicator{width:24px;height:24px;border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;transition:all .2s ease}.selection-indicator.selected{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.subscription-actions{text-align:center;margin:32px 0}.subscribe-button{background:var(--accent-color, #3b82f6);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:280px;box-shadow:0 4px 12px #3b82f64d}.subscribe-button.enabled:hover{background:var(--accent-hover, #2563eb);transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.subscribe-button.disabled{background:var(--bg-secondary);color:var(--text-secondary);border:2px solid var(--border-color);cursor:not-allowed;box-shadow:none}.subscribe-button.disabled:hover{transform:none;box-shadow:none}.subscription-empty{text-align:center;padding:48px 24px}.empty-icon{font-size:48px;margin-bottom:16px;display:block;opacity:.6}.subscription-empty p{color:var(--text-secondary);margin:0;font-size:16px}.subscription-modal-footer{text-align:center;padding-top:24px;border-top:1px solid var(--border-color)}.subscription-note{color:var(--text-secondary);font-size:13px;margin:0;line-height:1.4}[data-theme=dark] .subscription-plan{box-shadow:0 4px 16px #0003}[data-theme=dark] .subscription-plan:hover{box-shadow:0 12px 32px #0000004d}@media (max-width: 768px){.subscription-modal{width:95vw;max-width:none;padding:16px}.subscription-modal-title{font-size:20px}.subscription-icon{font-size:24px}.comparison-table{font-size:12px}.comparison-header,.comparison-row{grid-template-columns:1.8fr 1fr 1fr}.comparison-header>div,.comparison-row>div{padding:8px 6px}.comparison-title,.plans-title{font-size:16px}.subscription-plans{grid-template-columns:repeat(3,1fr);gap:8px}.subscription-plan{padding:12px 8px}.plan-header{margin-bottom:16px;margin-top:8px}.plan-name{font-size:14px}.price-amount{font-size:18px}.price-period{font-size:11px}.plan-description{font-size:12px;margin:0 0 12px}.plan-discount-info{top:-6px;right:8px;font-size:9px;padding:3px 6px}.selection-indicator{width:20px;height:20px;font-size:12px}.subscribe-button{min-width:auto;width:100%;font-size:14px;padding:12px 20px}}@media (max-width: 480px){.subscription-modal{width:95vw;padding:16px}.subscription-modal-title{font-size:18px}.subscription-modal-subtitle{font-size:14px}.comparison-table{font-size:11px}.comparison-header>div,.comparison-row>div{padding:6px 4px}.comparison-title,.plans-title{font-size:14px}.subscription-plans{grid-template-columns:repeat(3,1fr);gap:6px}.subscription-plan{padding:10px 6px}.plan-header{margin-bottom:14px;margin-top:6px}.plan-name{font-size:13px}.price-amount{font-size:16px}.price-period{font-size:10px}.plan-description{font-size:11px;margin:0 0 10px}.plan-discount-info{top:-4px;right:6px;font-size:8px;padding:2px 5px}.selection-indicator{width:18px;height:18px;font-size:10px}.subscribe-button{font-size:13px;padding:10px 16px}}@media (prefers-contrast: high){.subscription-plan,.plan-button{border-width:3px}}@media (prefers-reduced-motion: reduce){.loading-spinner{animation:none}.subscription-plan{transition:none}.subscription-plan:hover{transform:none}.plan-button{transition:none}.plan-button:hover{transform:none}.retry-button{transition:none}.retry-button:hover{transform:none}}.success-icon{margin-bottom:16px;display:flex;justify-content:center}.success-icon svg{animation:successPulse .6s ease-out}@keyframes successPulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.order-info{background-color:var(--bg-secondary);border-radius:8px;padding:24px;margin-bottom:32px;text-align:left}.order-value.amount{color:#10b981;font-size:16px}.payment-actions{margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn-primary{background-color:var(--bg-active);color:#fff;border:1px solid var(--bg-active);padding:12px 24px;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:120px}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary);padding:12px 24px;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:120px}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.signature-status{margin-top:1rem;padding:.75rem 1rem;border-radius:6px;font-size:14px;font-weight:500}.signature-status.valid{background-color:#d1fae5;border:1px solid #10b981}.signature-status.invalid{background-color:#fee2e2;border:1px solid #ef4444}.signature-valid{color:#065f46}.signature-invalid{color:#991b1b}@media (max-width: 768px){.payment-page{padding:16px 16px 40px;align-items:center}.payment-container{padding:20px;max-width:100%;margin:0}.payment-header{margin-bottom:20px}.payment-title{font-size:20px;margin-bottom:6px}.payment-subtitle{font-size:14px}.order-info{padding:16px;margin-bottom:20px}.order-info-title{font-size:16px;margin-bottom:12px}.order-details{gap:8px}.order-item{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 0}.order-label{font-size:12px;flex-shrink:0}.order-value{font-size:13px;text-align:right;flex-shrink:1;margin-left:8px}.payment-actions{flex-direction:column;margin-top:20px;gap:12px}.btn-primary,.btn-secondary{width:100%;padding:14px 24px}.loading-spinner{padding:2rem 1rem}.signature-status{margin-top:12px;padding:12px}}.payment-page{min-height:100vh;background-color:var(--bg-primary);display:flex;align-items:center;justify-content:center;padding:20px;position:fixed;top:0;left:0;right:0;bottom:0}.payment-container{background-color:var(--bg-tertiary);border-radius:12px;padding:40px;max-width:500px;width:100%;box-shadow:0 8px 32px #0003;border:1px solid var(--border-primary);text-align:center;position:relative;z-index:1}.payment-header{margin-bottom:32px}.cancel-icon{margin-bottom:16px;display:flex;justify-content:center}.cancel-icon svg{animation:cancelShake .6s ease-out}@keyframes cancelShake{0%{transform:scale(.8) rotate(-5deg);opacity:0}25%{transform:scale(1.1) rotate(5deg)}50%{transform:scale(1) rotate(-3deg)}75%{transform:scale(1) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}.payment-title{font-size:24px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.payment-subtitle{font-size:16px;color:var(--text-secondary);margin:0}.order-info{background-color:var(--bg-secondary);border-radius:8px;padding:24px;margin-bottom:24px;text-align:left}.order-info-title{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 16px;text-align:center}.order-details{display:flex;flex-direction:column;gap:12px}.order-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-primary)}.order-item:last-child{border-bottom:none}.order-label{font-size:14px;color:var(--text-primary);font-weight:500;opacity:.8}.order-value{font-size:14px;color:var(--text-primary);font-weight:600;word-break:break-all}.order-value.amount{color:#f59e0b;font-size:16px}.order-value.reason{color:#ef4444}.payment-message{color:var(--text-primary);background-color:var(--bg-secondary);border-radius:8px;padding:16px;margin-bottom:32px;border-left:4px solid #F59E0B}.payment-message p{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.5}.payment-actions{display:flex;gap:12px;justify-content:center}.btn-primary{background-color:var(--bg-active);color:#fff;border:1px solid var(--bg-active);border-radius:6px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:120px}.btn-primary:hover{background-color:var(--bg-active);border-color:var(--bg-active);opacity:.9}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-primary);border-radius:6px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:120px}.btn-secondary:hover{background-color:var(--bg-hover);border-color:var(--border-active)}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.spinner{width:40px;height:40px;border:4px solid #f3f4f6;border-top:4px solid #3B82F6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.signature-status{margin-top:16px;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500}.signature-status.valid{background-color:#f0fdf4;border:1px solid #BBF7D0}.signature-status.invalid{background-color:#fef2f2;border:1px solid #FECACA}.signature-valid{color:#16a34a}.signature-invalid{color:#dc2626}.error-code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;background-color:#fef2f2;color:#dc2626;padding:2px 6px;border-radius:4px;font-size:14px}@media (max-width: 768px){.payment-page{padding:16px 16px 40px;align-items:center}.payment-container{padding:20px;max-width:100%;margin:0}.payment-header{margin-bottom:20px}.payment-title{font-size:20px;margin-bottom:6px}.payment-subtitle{font-size:14px}.order-info{padding:16px;margin-bottom:16px}.order-info-title{font-size:16px;margin-bottom:12px}.order-details{gap:8px}.order-item{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 0}.order-label{font-size:12px;flex-shrink:0}.order-value{font-size:13px;text-align:right;flex-shrink:1;margin-left:8px}.payment-message{padding:12px;margin-bottom:20px}.payment-message p{font-size:13px}.payment-actions{flex-direction:column;gap:12px}.btn-primary,.btn-secondary{width:100%;padding:14px 24px}.loading-spinner{padding:2rem 1rem}.signature-status{margin-top:12px;padding:12px}}