:root{--bg1: #4e54c8;--bg2: #8f94fb;--card-bg: rgba(255, 255, 255, .15);--card-border: rgba(255, 255, 255, .2);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .75);--divider-color: rgba(255, 255, 255, .2);--stepper-bg: rgba(0, 0, 0, .1);--picker-selected-bg: rgba(255, 255, 255, .95);--picker-selected-text: #000000;--button-primary-bg: #fff;--button-primary-text: #4e54c8}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 100%);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;align-items:center;padding:20px;min-height:100%;width:100%}.app-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:480px}.nav-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,.1)}.settings-button{background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.settings-button:hover{background-color:var(--stepper-bg)}.settings-button svg{fill:var(--text-primary)}.main-card{background:var(--card-bg);backdrop-filter:blur(25px) saturate(180%);-webkit-backdrop-filter:blur(25px) saturate(180%);border-radius:28px;border:1px solid var(--card-border);padding:24px;box-shadow:0 8px 32px #0003;width:100%;max-width:480px;display:flex;flex-direction:column;gap:20px;margin-top:20px}.divider{border:none;height:1px;background-color:var(--divider-color);margin:4px 0}.picker{display:flex;background-color:var(--stepper-bg);border-radius:10px;padding:4px;width:100%;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.picker::-webkit-scrollbar{display:none}.picker input[type=radio]{display:none}.picker label{flex:1;text-align:center;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .2s ease-in-out;white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:80px;line-height:1.3}.zone-name{font-size:.7rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase}.zone-display-name{font-size:.9rem;font-weight:600;color:var(--text-primary)}.picker input[type=radio]:checked+label{background-color:var(--picker-selected-bg);box-shadow:0 2px 8px #0000001a}.picker input[type=radio]:checked+label .zone-name,.picker input[type=radio]:checked+label .zone-display-name{color:var(--picker-selected-text)}.time-tile{display:flex;flex-direction:column;gap:4px;width:100%}.time-tile-header{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.time-tile-value{font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace;font-size:clamp(1.2rem,5vw,1.6rem);font-weight:600;letter-spacing:-.5px;line-height:1.2}.time-input-tile{display:flex;flex-direction:column;align-items:center;gap:12px}.time-input-header{font-size:.85rem;color:var(--text-secondary)}.time-input-wrapper{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.time-input-control{display:flex;align-items:center;gap:8px}.stepper-button{background:transparent;border:1px solid var(--card-border);color:var(--text-primary);width:40px;height:40px;border-radius:50%;font-size:1.8rem;font-weight:300;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0 0 3px;transition:background-color .2s ease,transform .1s ease;user-select:none;-webkit-user-select:none}.stepper-button:hover{background-color:var(--stepper-bg)}.stepper-button:active{background-color:#0003;transform:scale(.95)}.time-input-field{background:var(--stepper-bg);border:1px solid transparent;border-radius:12px;color:var(--text-primary);font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace;font-size:2rem;font-weight:600;text-align:center;width:80px;height:60px;padding:8px;-moz-appearance:textfield;transition:border-color .2s,background-color .2s}.time-input-field:focus{outline:none;background-color:#0003;border-color:var(--card-border)}.time-input-field::-webkit-outer-spin-button,.time-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-input-separator{font-size:2rem;font-weight:600;color:var(--text-secondary);padding-bottom:4px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--card-bg);border:1px solid var(--card-border);border-radius:24px;padding:24px;box-shadow:0 8px 32px #0000004d;width:90%;max-width:400px;display:flex;flex-direction:column;gap:20px}.modal-header{font-size:1.2rem;font-weight:600;color:var(--text-primary);text-align:center}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:.85rem;color:var(--text-secondary);padding-left:4px}.form-select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--card-border);background-color:var(--stepper-bg);color:var(--text-primary);font-size:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:24px}.form-select:focus{outline:none;border-color:var(--text-primary)}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:12px}.modal-button{padding:10px 20px;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.modal-button.primary{background-color:var(--button-primary-bg);color:var(--button-primary-text)}.modal-button.secondary{background-color:var(--stepper-bg);color:var(--text-primary)}.modal-button:active{transform:scale(.96)}