:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--primary-color: #667eea;--primary-dark: #5a6fd8;--primary-light: #8b9df0;--secondary-color: #764ba2;--accent-color: #f093fb;--success-color: #4ade80;--warning-color: #fbbf24;--danger-color: #f87171;--error-color: #f87171;--text-primary: #1f2937;--text-secondary: #6b7280;--text-light: #9ca3af;--text-white: #ffffff;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-overlay: rgba(0, 0, 0, .5);--border-color: #e5e7eb;--border-radius: 12px;--border-radius-sm: 6px;--border-radius-lg: 20px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-xxl: 1.375rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--container-sm: 400px;--container-md: 500px;--container-lg: 600px;--container-xl: 800px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=light]{--text-primary: #1f2937;--text-secondary: #6b7280;--text-light: #9ca3af;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-overlay: rgba(0, 0, 0, .3);--border-color: #e5e7eb;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}[data-theme=dark]{--text-primary: #f9fafb;--text-secondary: #d1d5db;--text-light: #9ca3af;--bg-primary: #1f2937;--bg-secondary: #374151;--bg-overlay: rgba(0, 0, 0, .5);--border-color: #4b5563;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .2);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3)}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}#app{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);width:100%;max-width:100vw;box-sizing:border-box}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fade-in{animation:fadeIn var(--transition-normal) ease-in-out}.fade-out{animation:fadeOut var(--transition-normal) ease-in-out}.slide-up{animation:slideUp var(--transition-normal) ease-out}.bounce{animation:bounce .6s ease-in-out}.pulse{animation:pulse 2s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-8px,0)}70%{transform:translate3d(0,-4px,0)}90%{transform:translate3d(0,-2px,0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container{width:100%;max-width:500px;background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);padding:var(--spacing-xl) var(--spacing-2xl);text-align:center;position:relative}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border-color)}.header-buttons{display:flex;gap:var(--spacing-sm);align-items:center}.now-playing{position:fixed;top:20px;right:20px;width:500px;overflow:hidden;white-space:nowrap;font-size:var(--font-size-sm);color:var(--text-secondary);z-index:1000;background:var(--bg-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);border:1px solid var(--border-color);opacity:.95}.now-playing-content{display:inline-flex;font-weight:500;white-space:nowrap;animation:seamless-scroll 20s linear infinite}.now-playing-text{display:inline-block;white-space:nowrap;margin-right:100px}@keyframes seamless-scroll{0%{transform:translate(0)}25%{transform:translate(0)}to{transform:translate(-50%)}}.app-title{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.settings-btn,.report-btn{background:none;border:none;cursor:pointer;padding:var(--spacing-sm);border-radius:var(--border-radius);transition:all var(--transition-fast);color:var(--primary-color);width:40px;height:40px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;aspect-ratio:1}.settings-btn svg,.report-btn svg{width:24px;height:24px;transition:all var(--transition-fast)}.settings-btn:hover{background:var(--bg-secondary)}.settings-btn:hover svg{transform:rotate(90deg)}.settings-btn:active{transform:scale(.95)}.settings-btn:active svg{transform:rotate(90deg) scale(.95)}.report-btn:hover{background:var(--bg-secondary)}.report-btn:hover svg{transform:scale(1.1)}.report-btn:active{transform:scale(.95)}.main-content{display:flex;flex-direction:column;gap:var(--spacing-xl)}.timer-display{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.session-info{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;max-width:704px;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.session-type{font-size:var(--font-size-2xl);font-weight:600;color:var(--primary-color);text-transform:uppercase;letter-spacing:1px}.session-counter{font-size:var(--font-size-lg);color:var(--text-secondary);font-weight:500}.timer-circle{position:relative;width:min(320px,80vw);height:min(320px,80vw);max-width:400px;max-height:400px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin:var(--spacing-lg) auto;border-radius:50%;background:transparent;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);will-change:transform;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.timer-circle:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:8px solid var(--border-color);box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;stroke-linecap:round;stroke-linejoin:round}.timer-circle:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:conic-gradient(from var(--progress-start-angle, 0deg),var(--primary-color) 0deg,var(--primary-color) var(--progress-degrees, 0deg),transparent var(--progress-degrees, 0deg),transparent 360deg);mask:radial-gradient(circle,transparent 149px,rgba(0,0,0,.1) 151px,black 153px,black 159px,rgba(0,0,0,.9) 161px,transparent 163px);-webkit-mask:radial-gradient(circle,transparent 149px,rgba(0,0,0,.1) 151px,black 153px,black 159px,rgba(0,0,0,.9) 161px,transparent 163px);transition:background var(--transition-normal) ease-in-out;transform:var(--progress-direction, scaleX(1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;will-change:background;transform-style:preserve-3d;backface-visibility:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);-webkit-perspective:1000;perspective:1000;-webkit-backface-visibility:hidden;filter:blur(.5px)}.timer-circle{position:relative}.timer-circle:before,.timer-circle:after{border-radius:50%}.timer-circle .progress-cap-start,.timer-circle .progress-cap-end{position:absolute;width:8px;height:8px;background:var(--primary-color);border-radius:50%;top:50%;left:50%;transform-origin:center;opacity:var(--cap-opacity, 0);transition:opacity var(--transition-normal) ease-in-out;z-index:2}.timer-circle .progress-cap-start{transform:translate(-50%,-50%) translateY(-156px)}.timer-circle .progress-cap-end{transform:translate(-50%,-50%) translateY(-156px) rotate(var(--progress-degrees, 0deg))}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.timer-time{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.timer-minutes,.timer-seconds{font-size:3.5rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1;min-width:1.2em;text-align:center}.timer-separator{font-size:3rem;font-weight:700;color:var(--text-secondary);animation:pulse 1s infinite}.session-dots{display:none}.session-dot{width:16px;height:16px;border-radius:50%;background:var(--border-color);transition:all var(--transition-normal);position:relative}.session-dot.completed{background:var(--success-color);transform:scale(1.2)}.session-dot.current{background:var(--primary-color);transform:scale(1.3);box-shadow:0 0 0 4px #667eea4d}.timer-controls{display:flex;justify-content:center;gap:var(--spacing-md);margin:var(--spacing-xl) 0}.control-btn{padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--border-radius);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-width:120px;position:relative;overflow:hidden}.control-btn.primary{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:var(--text-white);box-shadow:var(--shadow-md)}.control-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.control-btn.primary:active{transform:translateY(0)}.control-btn.secondary{background:var(--bg-secondary);color:var(--text-secondary);border:2px solid var(--border-color)}.control-btn.secondary:hover{background:var(--border-color);color:var(--text-primary)}.control-btn.danger{background:#ef4444;color:#fff;border:2px solid #dc2626}.control-btn.danger:hover{background:#dc2626;transform:translateY(-1px)}.control-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:2px solid var(--border-color)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.stat-label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.stat-item{text-align:center;padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--border-radius);transition:all var(--transition-normal)}.stat-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-label{display:block;font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs)}.stat-value{display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color);font-variant-numeric:tabular-nums}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}.modal.hidden{display:none}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:800px;width:90%;max-height:90vh;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0;font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:var(--font-size-2xl);cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--transition-fast)}.close-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.modal-body{padding:var(--spacing-lg);max-height:calc(90vh - 80px);overflow-y:auto}.report-section{margin-bottom:var(--spacing-xl)}.report-section h3{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);border-bottom:2px solid var(--border-color);padding-bottom:var(--spacing-xs)}.report-section h4{margin:var(--spacing-md) 0 var(--spacing-sm) 0;font-size:var(--font-size-base);font-weight:600;color:var(--text-primary)}.date-selector-container{margin-bottom:var(--spacing-lg)}.date-selector-container label{display:block;margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500}.date-selector-container select{width:100%;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-primary);font-size:var(--font-size-base)}.report-stats-horizontal,.daily-stats-horizontal{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.report-stats-horizontal .stat-item,.daily-stats-horizontal .stat-item{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.report-stats-horizontal .stat-label,.daily-stats-horizontal .stat-label{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0 0 var(--spacing-xs) 0;font-weight:500}.report-stats-horizontal .stat-value,.daily-stats-horizontal .stat-value{font-size:var(--font-size-xxl);font-weight:700;color:var(--primary-color);margin:0}.report-stats,.daily-stats{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.report-stats .stat-item,.daily-stats .stat-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.report-stats .stat-label,.daily-stats .stat-label{font-size:var(--font-size-base);color:var(--text-secondary);margin:0}.report-stats .stat-value,.daily-stats .stat-value{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.weekly-chart-container{border-top:1px solid var(--border-color);padding-top:var(--spacing-lg);margin-top:var(--spacing-lg)}.weekly-chart-container h4{margin-bottom:var(--spacing-lg)}.weekly-chart{display:flex;align-items:end;justify-content:space-between;height:200px;padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);gap:var(--spacing-sm)}.chart-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.chart-bar-container{width:100%;height:150px;display:flex;align-items:end;justify-content:center}.chart-bar-fill{width:60%;background:linear-gradient(to top,var(--primary-color),var(--primary-light));border-radius:var(--border-radius-sm) var(--border-radius-sm) 0 0;min-height:4px;transition:all .3s ease;position:relative}.chart-bar-fill:hover{background:linear-gradient(to top,var(--primary-dark),var(--primary-color));transform:scaleY(1.05)}.chart-bar-value{position:absolute;top:-25px;left:50%;transform:translate(-50%);font-size:var(--font-size-xs);font-weight:600;color:var(--text-primary);background:var(--bg-primary);padding:2px 6px;border-radius:var(--border-radius-sm);border:1px solid var(--border-color);white-space:nowrap;opacity:0;transition:opacity .3s ease}.chart-bar-fill:hover .chart-bar-value{opacity:1}.chart-bar-label{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500;text-align:center}.chart-bar-day{font-size:var(--font-size-sm);color:var(--text-primary);font-weight:600;margin-bottom:var(--spacing-xs)}.chart-empty{display:flex;align-items:center;justify-content:center;height:150px;color:var(--text-secondary);font-style:italic;text-align:center}.sessions-container{border-top:1px solid var(--border-color);padding-top:var(--spacing-md)}.sessions-list{max-height:300px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-sm);background:var(--bg-secondary)}.session-item{margin-bottom:var(--spacing-xs)}.session-item:last-child{margin-bottom:0}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.session-type{font-weight:600;font-size:var(--font-size-sm)}.session-time{font-size:var(--font-size-sm);color:var(--text-secondary);font-family:monospace}.session-details{font-size:var(--font-size-sm);color:var(--text-secondary)}.development-note{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:var(--border-radius);text-align:center}.development-note p{margin:0;font-size:var(--font-size-sm);color:#4338ca;line-height:1.5}.development-note strong{font-weight:600}.music-controls{position:fixed;top:80px;right:20px;background:transparent;z-index:10;pointer-events:auto;transition:all .3s ease}.music-controls.hidden{display:none}.music-controls-content{display:flex;flex-direction:row;align-items:center;gap:12px}.music-control-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-size:0;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.music-control-btn:hover{background:var(--bg-secondary);color:var(--text-primary);transform:scale(1.05);box-shadow:var(--shadow-lg)}.music-control-btn:active{transform:scale(.95)}.music-control-btn.primary{background:var(--primary-color);color:#fff;width:48px;height:48px;box-shadow:0 4px 12px #00000026}.music-control-btn.primary:hover{background:var(--primary-hover);box-shadow:0 6px 16px #0003}.music-volume-control{display:flex;align-items:center;gap:8px;background:var(--bg-primary);padding:8px 12px;border-radius:20px;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.volume-slider{width:80px;height:4px;border-radius:2px;background:var(--border-color);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary-color);cursor:pointer;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:none;transition:all .2s ease}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.volume-display{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500;min-width:35px;text-align:center}.break-content{text-align:center;padding:var(--spacing-xl)}.break-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--primary-color);margin:0 0 var(--spacing-lg) 0;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.break-message{font-size:var(--font-size-xl);color:var(--text-secondary);margin:0 0 var(--spacing-xl) 0;line-height:1.6}.break-info{display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--border-radius);margin:var(--spacing-xl) 0;border:2px solid var(--border-color)}.break-duration{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.break-duration-label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.break-duration-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color)}.bonus-time{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.bonus-time-label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.bonus-time-value{font-size:var(--font-size-xl);font-weight:600;color:var(--warning-color)}.break-controls{display:flex;justify-content:center;gap:var(--spacing-lg);margin-top:var(--spacing-xl)}.break-btn{padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--border-radius);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-width:140px}.break-btn.primary{background:linear-gradient(135deg,var(--success-color),#22c55e);color:var(--text-white);box-shadow:var(--shadow-md)}.break-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.break-btn.secondary{background:var(--bg-secondary);color:var(--text-secondary);border:2px solid var(--border-color)}.break-btn.secondary:hover{background:var(--border-color);color:var(--text-primary)}.grace-period{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);background:var(--warning-color);color:var(--text-white);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);font-size:var(--font-size-sm);font-weight:600;animation:pulse 1s infinite}.break-content.entering{animation:slideUp var(--transition-slow) ease-out}.break-content.leaving{animation:fadeOut var(--transition-normal) ease-in}.settings-panel{position:fixed;top:0;right:0;width:100%;height:100%;background:transparent;z-index:1000;pointer-events:none;transition:background-color .3s ease-out,backdrop-filter .3s ease-out}.settings-panel:not(.hidden){background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:all}.settings-panel.hidden{pointer-events:none}.settings-content{background:var(--bg-primary);box-shadow:var(--shadow-xl);width:400px;height:100vh;overflow-y:auto;margin-left:auto;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:all;will-change:transform}.settings-panel:not(.hidden) .settings-content{transform:translate(0)}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);border-bottom:2px solid var(--border-color);position:sticky;top:0;background:var(--bg-primary);z-index:10}.settings-header h2{margin:0;font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{background:none;border:none;font-size:var(--font-size-2xl);color:var(--text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--border-radius);transition:all var(--transition-fast);width:40px;height:40px;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:var(--bg-secondary);color:var(--text-primary);transform:scale(1.1)}.close-btn:active{transform:scale(.95)}.settings-sections{padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xl)}.settings-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.settings-section h3{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.setting-item{display:flex;flex-direction:column;gap:var(--spacing-sm)}.setting-item.horizontal{flex-direction:row;align-items:center;justify-content:space-between}.setting-item label{font-weight:500;color:var(--text-primary);font-size:var(--font-size-sm)}.setting-item input[type=number],.setting-item input[type=color],.setting-item input[type=file],.setting-item select{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--border-radius);font-size:max(16px,var(--font-size-sm));background:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast)}.setting-item input[type=number]:focus,.setting-item input[type=color]:focus,.setting-item input[type=file]:focus,.setting-item select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.setting-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary-color);cursor:pointer}.volume-control{flex-direction:row;align-items:center;gap:var(--spacing-md)}.volume-control label{min-width:60px}.volume-control input[type=range]{flex:1;height:6px;background:var(--border-color);border-radius:3px;outline:none;-webkit-appearance:none}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--primary-color);border-radius:50%;cursor:pointer;transition:all var(--transition-fast)}.volume-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px #667eea33}.volume-control input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none;transition:all var(--transition-fast)}#volume-display{min-width:40px;font-weight:600;color:var(--primary-color);font-size:var(--font-size-sm)}.track-selection select{flex:1}.control-btn.secondary.small{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-xs);background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.control-btn.secondary.small:hover{background:var(--primary-color);color:var(--text-white);border-color:var(--primary-color)}.control-btn.secondary.small:active{transform:scale(.95)}.save-btn{background:var(--primary-color);color:var(--text-white);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);width:100%;margin-top:var(--spacing-sm)}.save-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.control-btn.danger{background:var(--danger-color);color:#fff}.control-btn.danger:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 8px #f871714d}.control-btn.small{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);min-width:auto}.save-btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.setting-item input.changed,.setting-item select.changed{border-color:var(--success-color);box-shadow:0 0 0 3px #4ade801a;animation:highlightChange .5s ease-in-out}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes highlightChange{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@media (max-width: 768px){.settings-content{width:350px}.settings-header{padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-md)}.settings-sections{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);gap:var(--spacing-lg)}.volume-control{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.volume-control label{min-width:auto}}@media (max-width: 480px){.settings-content{width:100%}.settings-header h2{font-size:var(--font-size-lg)}.settings-sections{padding:var(--spacing-sm) var(--spacing-md) var(--spacing-md)}.setting-item.horizontal{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.gradient-color-controls{flex-direction:column;gap:var(--spacing-sm)}}.gradient-color-controls{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.color-input-group{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1}.color-input-group label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500}.color-input-group input[type=color]{width:100%;height:40px;border:2px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:border-color var(--transition-fast)}.color-input-group input[type=color]:hover{border-color:var(--primary-color)}.theme-toggle{display:flex;gap:var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--border-radius-lg);padding:4px;border:2px solid var(--border-color)}.theme-toggle input[type=radio]{display:none}.theme-option{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);font-weight:500;color:var(--text-secondary);background:transparent;border:none;min-width:80px;justify-content:center}.theme-option:hover{color:var(--text-primary);background:var(--bg-primary)}.theme-toggle input[type=radio]:checked+.theme-option{background:var(--primary-color);color:#fff;box-shadow:0 2px 4px #0000001a}.theme-option svg{width:16px;height:16px;flex-shrink:0}@media (max-width: 768px){.settings-content{width:100%}}.task-list-panel{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;overflow:hidden!important}.task-list-panel.hidden{transform:translate(-550px)}.task-list-panel:not(.hidden){transform:translate(0)}.task-list-content{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(229,231,235,.3);box-shadow:0 10px 25px #0000001a;width:100%;height:100vh;overflow-y:auto;border-radius:0 var(--border-radius) var(--border-radius) 0}.task-list-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-md);position:sticky;top:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid rgba(229,231,235,.3)}.task-list-header h2{margin:0;font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary)}.task-list-sections{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg)}.task-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.task-section h3{margin:0;font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);padding:var(--spacing-md) 0;border-bottom:2px solid var(--primary-color);margin-bottom:var(--spacing-md)}.add-task-form{margin-bottom:var(--spacing-md);padding:var(--spacing-lg);background:#ffffffb3;border-radius:var(--border-radius);border:1px solid rgba(229,231,235,.4);box-shadow:0 2px 8px #0000000d}.task-input-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.task-input-group input{padding:var(--spacing-md);border:1px solid rgba(229,231,235,.5);border-radius:var(--border-radius);background:#ffffffe6;color:var(--text-primary);font-size:var(--font-size-base);transition:all var(--transition-fast);width:100%}.task-input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a;background:#fff}.task-input-group input::placeholder{color:var(--text-secondary)}.add-task-btn{padding:var(--spacing-md) var(--spacing-lg);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-xs)}.add-task-btn:hover{background:var(--primary-color-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--primary-color-rgb),.3)}.add-task-btn:active{transform:translateY(0)}.add-task-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.task-list{display:flex;flex-direction:column;gap:var(--spacing-md);min-height:60px;padding:var(--spacing-sm);transition:all var(--transition-fast)}.task-list.drag-over{background:rgba(var(--primary-color-rgb),.05);border-radius:var(--border-radius)}.task-list:empty:before{content:"No tasks yet";color:var(--text-secondary);font-style:italic;text-align:center;padding:var(--spacing-lg);display:block;background:rgba(var(--primary-color-rgb),.03);border-radius:var(--border-radius)}#progress-task-list:empty:before{content:"Add new tasks above"}#archived-task-list:empty:before{content:"Completed tasks will appear here"}.task-item{background:#ffffffe6;border:1px solid rgba(229,231,235,.4);border-radius:var(--border-radius);padding:var(--spacing-lg);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--spacing-md);box-shadow:0 1px 3px #0000000d}.task-item:hover{background:#fffffff2;border-color:#667eea4d;box-shadow:0 2px 8px #0000001a}.task-content{flex:1;min-width:0}.task-drag-handle{width:30px;height:100%;display:flex;align-items:center;justify-content:center;cursor:grab;color:var(--text-secondary);opacity:0;transition:all var(--transition-fast);order:-1;margin-right:var(--spacing-sm);border-right:1px solid rgba(229,231,235,.3);padding-right:var(--spacing-sm);border-radius:var(--border-radius-sm);background:transparent}.task-drag-handle:hover{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.task-drag-handle:active{cursor:grabbing;background:rgba(var(--primary-color-rgb),.2)}.task-item:hover .task-drag-handle{opacity:1}#progress-task-list .task-item .task-drag-handle{display:flex}#archived-task-list .task-item .task-drag-handle{display:none}#archived-task-list .task-item{opacity:.9}.task-item:hover{border-color:var(--primary-color);box-shadow:0 2px 8px #0000001a}.task-item.dragging{opacity:.5;transform:rotate(5deg);cursor:grabbing;z-index:1000}.task-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-sm)}.task-item-name{font-weight:600;color:var(--text-primary);font-size:var(--font-size-xl);line-height:1.4;margin-bottom:var(--spacing-xs)}.task-item-category{background:#6366f126;color:#4338ca;padding:var(--spacing-xs) var(--spacing-sm);border-radius:12px;font-size:var(--font-size-sm);font-weight:600;white-space:nowrap;border:1px solid rgba(99,102,241,.2)}.task-item-actions{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.task-action-btn{padding:var(--spacing-sm) var(--spacing-md);border:1px solid rgba(229,231,235,.6);border-radius:var(--border-radius);background:#f8fafce6;color:#475569;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.task-action-btn:hover{background:#fff;color:#334155;border-color:#cbd5e1cc}.task-action-btn.complete{background:#22c55e1a;border-color:#22c55e4d;color:#15803d}.task-action-btn.complete:hover{background:#22c55e26;border-color:#22c55e66;color:#0f766e}.task-action-btn.cancel{background:#ef44441a;border-color:#ef44444d;color:#b91c1c}.task-action-btn.cancel:hover{background:#ef444426;border-color:#ef444466;color:#991b1b}.task-action-btn.restore{background:#6366f11a;border-color:#6366f14d;color:#4338ca}.task-action-btn.restore:hover{background:#6366f126;border-color:#6366f166;color:#3730a3}.task-action-btn.delete{background:#ef44441a;border-color:#ef44444d;color:#b91c1c}.task-action-btn.delete:hover{background:#ef444426;border-color:#ef444466;color:#991b1b}.task-status-tag{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.task-status-tag.completed{background:var(--success-color);color:#fff}.task-status-tag.cancelled{background:var(--error-color);color:#fff}.task-list-toggle-tab{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:absolute!important;left:-9999px!important;top:-9999px!important}.task-list-panel.hidden .task-list-toggle-tab{left:50px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border-color:transparent;box-shadow:0 4px 16px #00000026}.task-list-toggle-tab:hover{background:#fff;color:var(--text-primary);box-shadow:0 6px 20px #00000026;transform:translateY(-50%) translate(2px)}.task-list-panel.hidden .task-list-toggle-tab:hover{background:linear-gradient(135deg,var(--primary-dark),var(--secondary-color));transform:translateY(-50%) translate(8px);box-shadow:0 6px 24px #0003}.task-list-toggle-tab span{display:none}.task-list-toggle-tab svg{flex-shrink:0;transition:transform var(--transition-fast)}.task-list-panel.hidden .task-list-toggle-tab svg{transform:rotate(180deg)}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@media (max-width: 1024px){.task-list-panel{width:500px}.task-list-panel.hidden{transform:translate(-450px)}.task-list-toggle-tab{left:450px}.task-list-panel.hidden .task-list-toggle-tab{left:50px}}@media (max-width: 768px){.task-list-panel{width:400px}.task-list-panel.hidden{transform:translate(-350px)}.task-list-toggle-tab{left:350px}.task-list-header{padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm)}.task-list-sections{padding:var(--spacing-sm) var(--spacing-md) var(--spacing-md);gap:var(--spacing-md)}.task-item{padding:var(--spacing-sm)}.task-item-actions{flex-wrap:wrap}}@media (max-width: 480px){.task-list-panel{width:320px}.task-list-panel.hidden{transform:translate(-270px)}.task-list-toggle-tab{left:270px}}@media (min-width: 1200px){.container{max-width:var(--container-xl);padding:var(--spacing-2xl) var(--spacing-2xl)}.timer-minutes,.timer-seconds{font-size:var(--font-size-5xl)}.timer-separator{font-size:var(--font-size-4xl)}.progress-ring{width:400px;height:400px}.progress-ring circle{r:180;cx:200;cy:200}}@media (max-width: 1024px){.container{max-width:var(--container-md);padding:var(--spacing-xl)}}@media (max-width: 770px) and (min-width: 481px){.settings-btn,.report-btn{width:32px;height:32px;min-width:32px;min-height:32px}.settings-btn svg,.report-btn svg{width:18px;height:18px}}@media (max-width: 768px){.container{max-width:100%;padding:var(--spacing-xl) var(--spacing-lg);margin:var(--spacing-md)}.app-title{font-size:var(--font-size-2xl)}.settings-btn,.report-btn{width:36px;height:36px;min-width:36px;min-height:36px}.settings-btn svg,.report-btn svg{width:20px;height:20px}.timer-minutes,.timer-seconds{font-size:var(--font-size-4xl)}.timer-separator{font-size:var(--font-size-3xl)}.progress-ring{width:280px;height:280px}.progress-ring circle{r:130;cx:140;cy:140}.timer-controls{flex-direction:column;gap:var(--spacing-sm)}.control-btn{width:100%;min-width:auto}.break-controls{flex-direction:column;gap:var(--spacing-md)}.break-btn{width:100%;min-width:auto}.break-info{flex-direction:column;gap:var(--spacing-md);text-align:center}.settings-content{margin:var(--spacing-sm);max-width:none}.settings-actions{flex-direction:column}.settings-btn{width:100%}}@media (max-width: 480px){#app{padding:var(--spacing-sm)}.container{padding:var(--spacing-lg) var(--spacing-md);margin:0;border-radius:var(--border-radius);max-width:350px}.header{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md)}.app-title{font-size:var(--font-size-xl)}.settings-btn,.report-btn{width:36px;height:36px;min-width:36px;min-height:36px}.settings-btn svg,.report-btn svg{width:20px;height:20px}.timer-circle,.timer-ring{width:280px;height:280px}.timer-ring-circle{cx:140;cy:140;r:120}.timer-minutes,.timer-seconds{font-size:2.2rem}.timer-separator{font-size:1.8rem}.session-type{font-size:var(--font-size-xl)}.session-counter{font-size:var(--font-size-base)}.session-info{max-width:280px}.stats{grid-template-columns:repeat(2,1fr)}.progress-ring circle{r:110;cx:120;cy:120}.main-content{gap:var(--spacing-lg)}.break-title{font-size:var(--font-size-3xl)}.break-message{font-size:var(--font-size-lg)}.color-picker-group{grid-template-columns:repeat(4,1fr)}.color-option{width:50px;height:50px}}@media (max-width: 320px){.container{padding:var(--spacing-md) var(--spacing-sm);max-width:300px}.settings-btn,.report-btn{width:32px;height:32px;min-width:32px;min-height:32px}.settings-btn svg,.report-btn svg{width:18px;height:18px}.timer-circle,.timer-ring{width:240px;height:240px}.timer-ring-circle{cx:120;cy:120;r:100}.timer-minutes,.timer-seconds{font-size:1.8rem}.timer-separator{font-size:1.4rem}.session-type{font-size:var(--font-size-lg)}.session-counter{font-size:var(--font-size-sm)}.session-info{max-width:240px}.stats{grid-template-columns:1fr;gap:var(--spacing-md)}.control-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base)}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.progress-ring{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}}@media (max-width: 768px) and (orientation: landscape){.container{max-height:90vh;overflow-y:auto}.progress-ring{width:200px;height:200px}.progress-ring circle{r:90;cx:100;cy:100}.timer-minutes,.timer-seconds{font-size:var(--font-size-2xl)}.timer-separator{font-size:var(--font-size-xl)}.main-content{gap:var(--spacing-md)}}@media print{.settings-btn,.timer-controls,.break-controls{display:none}.container{box-shadow:none;border:1px solid #000}.progress-ring{filter:none}}.progress-gradient{--gradient-start: var(--primary-color);--gradient-end: var(--secondary-color)}