@keyframes pulse-pomodoro{0%{opacity:1;transform:scale(1)}to{opacity:.7;transform:scale(1.02)}}@keyframes pulse-pomodoro-fullscreen{0%{opacity:1;transform:scale(1)}to{opacity:.7;transform:scale(1.01)}}.pomodoro-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px}.state-tabs{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap;justify-content:center}.state-tab-button{font-family:inherit;font-size:.85rem;font-weight:500;padding:6px 15px;border-radius:18px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .3s ease}.state-tab-button:hover:not(.active):not(:disabled){background-color:var(--color-button-secondary-bg);color:var(--color-text-primary);border-color:var(--color-button-secondary-bg)}[data-theme=dark] .state-tab-button:hover:not(.active):not(:disabled){border-color:var(--color-button-secondary-bg)}.state-tab-button.active{color:var(--color-accent-contrast);border-color:transparent;pointer-events:none}.state-tab-button.active.work{background-color:var(--color-pomodoro-work-bg, var(--color-accent))}.state-tab-button.active.short-break{background-color:var(--color-pomodoro-break-bg, #30d158)}.state-tab-button.active.long-break{background-color:var(--color-pomodoro-long-break-bg, #5e5ce6)}.current-state-display,.status-indicators{margin-bottom:10px;color:var(--color-text-secondary);text-align:center}.current-state-display{font-size:1.1rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px;min-height:1.5em;transition:color .3s ease}.status-indicators{display:flex;justify-content:center;gap:15px;font-size:.85rem;flex-wrap:wrap;min-height:1.2em}.status-indicators span{white-space:nowrap}.time-display-container{position:relative;width:clamp(240px,65vmin,320px);height:clamp(240px,65vmin,320px);margin:10px 0 25px;display:flex;align-items:center;justify-content:center}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}.progress-ring__circle{transition:stroke-dashoffset .2s linear,stroke .3s ease;stroke-linecap:round}.progress-ring__track{stroke:var(--color-progress-track, var(--color-border));transition:stroke .3s ease}.progress-ring__progress{transition:stroke .3s ease,stroke-dashoffset .2s linear}.time-display-content{z-index:1;text-align:center}.timer-display{font-size:clamp(3.5rem,15vw,5.5rem);font-weight:300;color:var(--color-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-1px;transition:color .3s ease;cursor:default}.timer-display.finished{color:var(--color-accent);animation:pulse-pomodoro 1s infinite alternate}.pomodoro-controls{display:flex;justify-content:center;gap:15px;margin-bottom:25px;flex-wrap:wrap}.control-button{font-family:inherit;font-size:.9rem;font-weight:500;padding:10px 20px;border-radius:20px;border:0;cursor:pointer;transition:background-color .2s ease,opacity .2s ease,transform .1s ease;display:inline-flex;align-items:center;min-width:100px;justify-content:center;user-select:none}.control-button .material-symbols-outlined{font-size:18px;margin-right:6px}.control-button.start{background-color:var(--color-accent);color:var(--color-accent-contrast)}.control-button.start:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-accent),black 10%)}.control-button.pause{background-color:var(--color-delete);color:var(--color-accent-contrast)}.control-button.pause:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-delete),black 10%)}.control-button.reset,.control-button.skip{background-color:var(--color-button-secondary-bg);color:var(--color-text-primary)}.control-button.reset:hover:not(:disabled),.control-button.skip:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-button-secondary-bg),black 8%)}.control-button:active:not(:disabled){transform:scale(.95)}.control-button:disabled{opacity:.5;cursor:not-allowed}.settings-section{width:100%;max-width:500px;margin-top:20px;padding:20px;background-color:var(--color-surface);border-radius:12px;transition:background-color .3s ease,filter .3s ease,opacity .3s ease;border:1px solid var(--color-border);position:relative}.settings-section h2{font-size:1rem;font-weight:500;color:var(--color-text-secondary);margin-bottom:20px;text-align:center;transition:color .3s ease}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;margin-bottom:25px}.settings-section .form-group label{margin-bottom:8px}.settings-section .form-group input[type=number]{text-align:center}.sound-settings-group{display:flex;justify-content:space-between;align-items:center;gap:15px}.sound-select{flex-grow:1;font-family:inherit;font-size:.9rem;border:1px solid var(--color-border);border-radius:6px;background-color:var(--color-background);color:var(--color-text-primary);cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%236e6e73'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding:8px 30px 8px 10px}[data-theme=dark] .sound-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%238e8e93'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E")}.sound-select:focus{outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}.sound-test-button{padding:6px;border-radius:50%;background-color:transparent;border:1px solid var(--color-border);color:var(--color-icon-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,color .2s ease,border-color .3s ease;width:36px;height:36px}.sound-test-button:hover{background-color:var(--color-button-secondary-bg);color:var(--color-icon-primary)}.sound-test-button .material-symbols-outlined{font-size:20px;margin-right:0}body.pomodoro-running .settings-section{filter:blur(3px);opacity:.7;pointer-events:none}body.pomodoro-running .state-tab-button:not(.active){opacity:.6;pointer-events:none}body{transition:background-color .5s ease-in-out,color .3s ease}:root{--color-pomodoro-work-bg:var(--color-accent);--color-pomodoro-work-bg-light:#eaf5ff;--color-pomodoro-work-bg-dark:#0a3d62;--color-pomodoro-break-bg:#30d158;--color-pomodoro-break-bg-light:#eaf9ee;--color-pomodoro-break-bg-dark:#1c4a25;--color-pomodoro-long-break-bg:#5e5ce6;--color-pomodoro-long-break-bg-light:#efeffb;--color-pomodoro-long-break-bg-dark:#2c2c6f}body[data-pomodoro-state=work]{background-color:var(--color-pomodoro-work-bg-light)}body[data-pomodoro-state=short-break]{background-color:var(--color-pomodoro-break-bg-light)}body[data-pomodoro-state=long-break]{background-color:var(--color-pomodoro-long-break-bg-light)}[data-theme=dark] body[data-pomodoro-state=work]{background-color:var(--color-pomodoro-work-bg-dark)}[data-theme=dark] body[data-pomodoro-state=short-break]{background-color:var(--color-pomodoro-break-bg-dark)}[data-theme=dark] body[data-pomodoro-state=long-break]{background-color:var(--color-pomodoro-long-break-bg-dark)}body[data-pomodoro-state=work] .progress-ring__progress{stroke:var(--color-pomodoro-work-bg)}body[data-pomodoro-state=short-break] .progress-ring__progress{stroke:var(--color-pomodoro-break-bg)}body[data-pomodoro-state=long-break] .progress-ring__progress{stroke:var(--color-pomodoro-long-break-bg)}:fullscreen .main-content>:not(.pomodoro-container):not(.modal-overlay),:fullscreen .seo-content{display:none!important}:fullscreen .pomodoro-container{background-color:transparent!important;padding:10px!important;max-width:95%!important;width:100%!important;justify-content:center;height:100%}:fullscreen .settings-section,:fullscreen .state-tabs{display:none!important}:fullscreen .current-state-display{font-size:clamp(1.2rem,4vw,1.8rem)!important;color:#8e8e93!important;margin-bottom:2vh!important}:fullscreen .status-indicators{font-size:clamp(.8rem,2.5vw,1rem);color:#8e8e93!important;margin-bottom:2vh}:fullscreen .time-display-container{width:clamp(300px,80vmin,550px)!important;height:clamp(300px,80vmin,550px)!important;margin-bottom:4vh!important}:fullscreen .timer-display{font-size:clamp(5.5rem,28vw,10rem)!important;color:#fff!important;font-weight:200!important}:fullscreen .timer-display.finished{color:var(--pomodoro-state-color, #ffffff)!important;animation-name:pulse-pomodoro-fullscreen!important}:fullscreen body[data-pomodoro-state=work]{--pomodoro-state-color:var(--color-pomodoro-work-bg)}:fullscreen body[data-pomodoro-state=short-break]{--pomodoro-state-color:var(--color-pomodoro-break-bg)}:fullscreen body[data-pomodoro-state=long-break]{--pomodoro-state-color:var(--color-pomodoro-long-break-bg)}:fullscreen .progress-ring__track{stroke:#38383a!important;stroke-width:5!important}:fullscreen .progress-ring__progress{stroke-width:5!important}:fullscreen .pomodoro-controls{gap:20px!important}:fullscreen .pomodoro-controls button{padding:12px 25px!important;font-size:1rem!important;min-width:120px!important;border-radius:25px!important}:fullscreen .modal-overlay{background-color:rgba(0,0,0,.8)!important}:fullscreen .alarm-modal{background-color:#1c1c1e!important;border:1px solid #38383a!important}:fullscreen .alarm-modal h3{color:#fff!important}:fullscreen .modal-button.ok{background-color:var(--color-accent)!important}:fullscreen .modal-close-button{color:#8e8e93!important}.material-symbols-outlined { text-transform: none !important; }