@import"https://fonts.googleapis.com/css2?family=Michroma&display=swap";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #1a1a1a;--text-color: #fff;--border-color: #333;--button-bg: #333;--button-hover: #444;--primary-color: #6366f1}html[data-theme=light]{--bg-color: #fff;--text-color: #1a1a1a;--border-color: #e0e0e0;--button-bg: #f0f0f0;--button-hover: #e0e0e0;--primary-color: #4f46e5}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.app-wrapper{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-color)}@media(max-width:600px){.app-header{display:none}}@media(max-height:500px){.app-header{display:none}}.app-header h1{font-size:1.5rem;font-weight:600}.theme-toggle{background-color:var(--button-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:.375rem;padding:.5rem 1rem;font-size:1.25rem;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.theme-toggle:hover{background-color:var(--button-hover);border-color:var(--primary-color)}.theme-toggle:active{transform:scale(.95)}main{flex:1;display:flex;justify-content:center;align-items:center;padding:0}:root{--primary-color: #64b5f6;--primary-hover: #42a5f5;--primary-light: #2196f3;--warning-color: #ff9800;--warning-hover: #f57c00;--success-color: #4CAF50;--success-hover: #45a049;--text-color: #e0e0e0;--text-secondary: rgb(224 224 224 / 70%);--cog-icon-color: #444;--background-overlay: rgb(255 255 255 / 5%);--background-glass: rgb(255 255 255 / 10%);--background-modal: rgb(0 0 0 / 70%);--background-modal-content: rgb(20 20 20 / 95%);--border-color: rgb(255 255 255 / 10%);--border-primary: rgb(100 181 246 / 50%);--border-radius: 16px;--border-radius-small: 12px;--border-radius-xs: 8px;--progress-size: 330px;--progress-size-mobile: 240px;--progress-size-tablet: 260px;--button-size: 40px;--button-size-mobile: 35px;--font-size-title: 2.5rem;--font-size-title-tablet: 1.7rem;--font-size-title-mobile: 1.8rem;--font-size-large: 3rem;--font-size-countdown: 5rem;--font-size-regular: 1rem;--font-size-small: .9rem;--font-size-xs: .85rem;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 15px;--spacing-lg: 20px;--spacing-xl: 30px;--spacing-xxl: 40px;--shadow-primary: 0 4px 16px rgb(0 0 0 / 30%);--shadow-hover: 0 6px 24px rgb(76 175 80 / 40%);--shadow-modal: 0 8px 32px rgb(0 0 0 / 40%);--shadow-progress: 0 0 8px rgb(100 181 246 / 30%);--shadow-text: 0 2px 8px rgb(100 181 246 / 30%);--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: 1s linear;--animation-duration: .5s;--animation-timing: ease-in-out;--opacity-disabled: .5;--opacity-secondary: .7;--schedule-disabled: rgb(48 48 48 / 100%)}html[data-theme=light]{--primary-color: #1e40af;--primary-hover: #1e3a8a;--primary-light: #1e3a8a;--warning-color: #ea580c;--warning-hover: #c2410c;--success-color: #16a34a;--success-hover: #15803d;--text-color: #1f2937;--text-secondary: rgb(31 41 55 / 70%);--cog-icon-color: #ccc;--schedule-disabled: rgb(31 41 55 / 75%);--background-overlay: rgb(0 0 0 / 5%);--background-glass: rgb(0 0 0 / 5%);--background-modal: rgb(0 0 0 / 50%);--background-modal-content: rgb(255 255 255 / 98%);--border-color: rgb(0 0 0 / 10%);--border-primary: rgb(30 64 175 / 30%);--shadow-primary: 0 4px 16px rgb(0 0 0 / 15%);--shadow-hover: 0 6px 24px rgb(22 163 74 / 30%);--shadow-modal: 0 8px 32px rgb(0 0 0 / 20%);--shadow-progress: 0 0 8px rgb(30 64 175 / 20%);--shadow-text: 0 2px 8px rgb(30 64 175 / 20%)}.timer-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;gap:20px;margin-left:var(--spacing-xxl);margin-right:var(--spacing-xxl)}.timer-container h1{color:var(--text-color);font-size:var(--font-size-title);margin:0;text-shadow:var(--shadow-text);font-weight:300;letter-spacing:1px;position:relative;z-index:10}@media(max-width:600px){.timer-container h1{display:none!important}}@media(max-height:500px){.timer-container h1{display:none!important}}.date-display{color:var(--primary-color);font-size:var(--font-size-regular);opacity:var(--opacity-secondary);letter-spacing:.5px;position:relative;top:auto;left:auto;font-family:Outfit,sans-serif}@media(min-width:800px){.timer-container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:30px;place-items:center center;margin-left:var(--spacing-xxl);margin-right:var(--spacing-xxl)}.date-display{grid-column:1;grid-row:1}.timer-container h1{grid-column:2;grid-row:1;font-size:var(--font-size-title-tablet);margin:0}.timer-mode{grid-column:1 / -1;grid-row:2}}.circular-progress{position:relative;width:var(--progress-size);height:var(--progress-size);margin-left:var(--spacing-xxl);margin-right:var(--spacing-xxl)}.progress-svg{width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(var(--shadow-progress))}.progress-background{fill:none;stroke:var(--border-color);stroke-width:15}.progress-circle{fill:none;stroke:var(--primary-color);stroke-width:15;stroke-linecap:round;transition:stroke-dashoffset var(--transition-slow),stroke var(--transition-normal)}.circular-progress.warning .progress-circle{stroke:var(--warning-color)}.circular-progress.critical .progress-circle{stroke:#f33;animation:critical-fill 1s linear infinite}.circular-progress.achieved .progress-circle{stroke:#f33;animation:achieved-flash var(--animation-duration) var(--animation-timing) infinite}@keyframes critical-fill{0%{stroke-dashoffset:565.48}to{stroke-dashoffset:0}}.circular-progress.achieved{animation:achieved-flash var(--animation-duration) var(--animation-timing) infinite}@keyframes achieved-flash{0%{opacity:1}50%{opacity:0}to{opacity:1}}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.4rem;font-weight:700;color:var(--primary-color);font-family:Michroma,Courier New,monospace;text-shadow:var(--shadow-text)}.progress-text.countdown{font-size:var(--font-size-countdown)}.progress-cog-icon{position:absolute;bottom:50px;left:50%;transform:translate(-50%);background:none;border:none;color:var(--cog-icon-color);cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s}.progress-cog-icon:hover{background:#ffffff1a}@media(max-width:768px){.progress-cog-icon{bottom:35px}}@media(max-width:600px){.progress-cog-icon{bottom:25px}}.timer-input{display:flex;justify-content:center;align-items:center;gap:var(--spacing-xs);background:var(--background-overlay);padding:8px;border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);margin-bottom:0}.timer-input-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.time-display{font-size:1.2rem;font-weight:700;color:var(--primary-color);width:60px;text-align:center;font-family:Michroma,Courier New,monospace;min-height:50px;display:flex;align-items:center;justify-content:center}.time-adjust-btn{width:var(--button-size);height:var(--button-size);border:2px solid var(--primary-color);background:#64b5f61a;color:var(--primary-color);font-size:1.5rem;font-weight:700;border-radius:var(--border-radius-small);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.time-adjust-btn svg{width:22px;height:22px;display:block;color:inherit;stroke:currentcolor;fill:none}.time-adjust-btn:focus,.time-adjust-btn:focus-visible,.time-adjust-btn:hover,.time-adjust-btn:active{outline:none;box-shadow:none;background:#64b5f61a;transform:none;border-color:var(--primary-color)}.time-separator{color:var(--primary-color);font-weight:700;font-size:2rem;margin:0 6px;display:flex;align-items:center;justify-content:center;line-height:1}.time-select{font-size:1.6rem;font-weight:700;color:var(--primary-color);background:transparent;border:none;appearance:none;padding:2px 8px 2px 5px;min-width:56px;text-align:center;text-align-last:center;font-family:Michroma,Courier New,monospace}.time-input-group{display:flex;align-items:center;justify-content:center}.select-wrapper{position:relative;display:inline-block}.alarm-selector .select-wrapper:before{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:calc(100% - 4px);background:transparent;border-left:none;border-radius:4px;pointer-events:none;z-index:1}.timer-edit-modal .alarm-selector .select-wrapper:before{background:var(--background-modal-content)}.alarm-selector .select-wrapper:after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:14px;height:8px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M1 1l6 6 6-6" fill="none" stroke="%2364b5f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-size:14px 8px;pointer-events:none;z-index:2}.timer-controls{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);justify-content:center}.btn{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-regular);font-weight:700;border:none;border-radius:var(--border-radius-small);cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-primary);min-width:100px}.btn-start{background:linear-gradient(135deg,var(--success-color) 0%,var(--success-hover) 100%);color:#fff}.btn-start:hover:not(:disabled){background:linear-gradient(135deg,var(--success-hover) 0%,#3d8b40 100%);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn-pause{background:linear-gradient(135deg,var(--warning-color) 0%,var(--warning-hover) 100%);color:#fff}.btn-pause:hover:not(:disabled){background:linear-gradient(135deg,var(--warning-hover) 0%,#e65100 100%);box-shadow:0 6px 24px #ff980066;transform:translateY(-2px)}.btn:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none}.timer-mode{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);animation:fadeIn var(--transition-normal)}.timer-header{position:relative;display:flex;justify-content:center;align-items:center;width:100%}.circular-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.theme-toggle-mobile{display:none;position:fixed;top:1rem;right:1rem;background:var(--background-overlay);border:1px solid var(--border-color);border-radius:var(--border-radius-xs);padding:var(--spacing-xs) var(--spacing-sm);font-size:1.2rem;cursor:pointer;transition:all var(--transition-normal);z-index:100}.theme-toggle-mobile:hover{background:#64b5f61a;border-color:var(--primary-color)}@media(max-width:600px){.theme-toggle-mobile{display:block}}@media(max-height:500px){.theme-toggle-mobile{display:block}}@media(min-width:800px){.timer-mode{flex-direction:row;align-items:center;gap:var(--spacing-xxl);justify-content:center}.timer-input-container{display:flex;flex-direction:column;gap:var(--spacing-md)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:600px){.timer-container h1{font-size:var(--font-size-title-mobile);margin-left:var(--spacing-lg)}.timer-display,.scheduled-display{min-width:250px;padding:30px 20px}}html[data-theme=light] .schedule-btn .schedule-text{color:#111827f2}html[data-theme=light] .schedule-btn.disabled .schedule-text{color:#0f172a4d}html[data-theme=light] .schedule-btn.disabled{border-color:#00000014}html[data-theme=dark] .schedule-btn{border-color:#ffffff1f}html[data-theme=dark] .schedule-btn.enabled{border-color:#ffffff2e}html[data-theme=dark] .schedule-btn.disabled{border-color:#ffffff14}.timer-display .time,.scheduled-display .time{font-size:2.5rem}@media(max-width:600px){.circular-progress{width:var(--progress-size-mobile);height:var(--progress-size-mobile)}}.timer-input-container{flex-direction:column;gap:15px}.time-display{font-size:1.2rem;width:50px;min-height:var(--spacing-xxl)}.time-adjust-btn{width:var(--button-size-mobile);height:var(--button-size-mobile);font-size:1.2rem}.time-separator{font-size:1.2rem;margin:0 2px;line-height:1}.timer-controls{gap:var(--spacing-sm);flex-wrap:wrap}.btn{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-small)}.mode-selector{width:100%}.notifications-status{min-width:100%}.alarm-selector{margin-top:0;display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-color);font-size:var(--font-size-small);flex-wrap:wrap;justify-content:center}.alarm-selector .select-wrapper{position:relative;color:var(--primary-color)}.alarm-select{font-size:var(--font-size-small);font-weight:600;color:var(--primary-color);background:transparent;border:1px solid var(--border-primary);border-radius:var(--border-radius-xs);padding:4px 28px 4px 8px;text-align:center;text-align-last:center;appearance:none}.alarm-select:hover:not(:disabled){background:#64b5f61a;border-color:var(--primary-color);box-shadow:var(--shadow-progress)}.alarm-select:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.alarm-select option{background:var(--background-modal-content);color:var(--text-color)}html[data-theme=light] .alarm-select option{background:#fff;color:#1f2937}html[data-theme=dark] .alarm-select option{background:#1a1a2e;color:#e0e0e0}.btn-play{padding:var(--spacing-xs) var(--spacing-lg);background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);border:none;border-radius:var(--border-radius-xs);color:#0f0f1e;font-size:var(--font-size-regular);font-weight:700;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;min-width:44px}.btn-play:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary-light) 100%);box-shadow:var(--shadow-progress);transform:scale(1.05)}.btn-play:active:not(:disabled){transform:scale(.95)}.btn-play:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}@media(orientation:landscape)and (max-width:900px){.circular-progress{width:var(--progress-size-tablet);height:var(--progress-size-tablet);margin:18px auto 0}}.modal-overlay{position:fixed;inset:0;background:var(--background-modal);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:var(--background-modal-content);border-radius:var(--border-radius);padding:var(--spacing-xl);text-align:center;border:1px solid var(--border-color);box-shadow:var(--shadow-modal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:300px;width:90%;color:var(--text-color)}.modal-content p{color:var(--text-color);font-size:1.2rem;margin-bottom:var(--spacing-lg);font-weight:500}.modal-content .btn{min-width:80px}.timer-display-mode{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-xl)}.time-display-large{font-size:1.8rem;font-weight:700;color:var(--primary-color);font-family:Michroma,Courier New,monospace;text-shadow:var(--shadow-text);letter-spacing:3px}.schedule-btn{display:inline-block;background:transparent;border:1px solid rgb(0 0 0 / 8%);color:var(--text-color);padding:10px 18px;border-radius:8px;font-size:1.6rem;min-width:200px;text-align:center;cursor:pointer;transition:background-color .12s ease,color .12s ease,opacity .12s ease,transform .12s ease;opacity:.85}@media(max-width:600px){.schedule-btn{padding:8px 12px;font-size:1.3rem;min-width:160px}.schedule-btn .schedule-text{font-size:1.3rem}}.schedule-btn.enabled{background:linear-gradient(90deg,#ffffff0a,#ffffff05);color:var(--primary-color);border-color:#0000001f;opacity:1;box-shadow:0 1px #0000000a}.schedule-btn.disabled{background:transparent;color:var(--schedule-disabled);border-color:#0000000a}.schedule-btn .schedule-text{font-size:1.6rem;font-weight:600}.schedule-btn .schedule-indicator{margin-left:8px;font-size:1rem;color:currentcolor;opacity:.9}.schedule-btn.enabled .schedule-indicator{color:var(--primary-color)}.schedule-btn.disabled .schedule-indicator{color:#00000073}.schedule-btn:focus{outline:2px solid rgb(0 0 0 / 8%);outline-offset:2px}.timer-display-actions{display:flex;gap:var(--spacing-md);justify-content:center}.btn-edit{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:#fff;margin-top:var(--spacing-sm)}.btn-edit:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary-light) 100%);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn-edit:active{transform:translateY(0)}.timer-input-actions{display:flex;gap:var(--spacing-md);justify-content:center}.btn-cancel{padding:var(--spacing-sm) var(--spacing-xl);background:var(--background-overlay);border:1px solid var(--border-primary);border-radius:var(--border-radius-xs);color:var(--text-color);font-size:var(--font-size-regular);font-weight:700;cursor:pointer;transition:all var(--transition-normal);min-width:100px}.btn-cancel:hover{background:#64b5f61a;border-color:var(--primary-color)}.btn-cancel:active{transform:scale(.95)}.edit-mode-overlay{display:none;position:fixed;inset:0;background:#0000007f;z-index:998}.timer-edit-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;background:var(--background-modal-content);border-radius:var(--border-radius);padding:var(--spacing-md);width:fit-content;min-width:240px;max-width:90%;height:auto;overflow-y:auto;box-shadow:var(--shadow-modal);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:var(--spacing-md)}@media(max-width:600px){.edit-mode-overlay{display:block}.timer-input-container{display:flex;flex-direction:column;gap:var(--spacing-md)}}@media(max-height:500px){.edit-mode-overlay{display:block}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}html{background:linear-gradient(135deg,#0f0f1e,#1a1a2e);width:100%;height:100%}body{margin:0;padding:0;display:flex;width:100%;height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0f1e,#1a1a2e);overflow-x:hidden}h1{font-size:3.2em;line-height:1.1}#root{width:100%;height:100%}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
