.settings-panel{backdrop-filter:blur(10px);background:var(--nav-bg);height:calc(100vh - 60px);overflow-y:auto;padding:1.5rem;position:fixed;right:0;top:60px;transform:translateX(100%);-webkit-transform:translateX(100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);-webkit-transition:-webkit-transform .4s cubic-bezier(.25,.46,.45,.94);width:280px;will-change:transform;z-index:999;-webkit-overflow-scrolling:touch;-webkit-backface-visibility:hidden;backface-visibility:hidden}.settings-panel.open{transform:translateX(0);-webkit-transform:translateX(0)}@media (min-width:1024px){.settings-panel.open{right:0}body.settings-panel-open .clock-section{padding-right:320px}}.settings-title{color:var(--page-text);font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.settings-group.template-group{padding-top:.5rem}.settings-label{color:var(--page-text);display:block;font-size:.9rem;font-weight:500}.settings-label.template-label{font-weight:600;margin-bottom:1rem}.template-options{display:grid;gap:.5rem}.settings-toggle{align-items:center;display:flex;justify-content:space-between;padding:.5rem 0}.settings-toggle .settings-label{color:var(--page-text);font-size:.9rem;white-space:nowrap}.toggle-input{display:none}.toggle-slider{background:var(--page-border);border-radius:20px;cursor:pointer;display:block;flex-shrink:0;height:20px;margin-left:auto;position:relative;transition:background-color .2s ease;width:36px}.toggle-slider:before{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .2s ease;width:16px}.toggle-input:checked+.toggle-slider{background:#007bff}.toggle-input:checked+.toggle-slider:before{transform:translateX(16px)}.settings-segment-group{align-items:center;display:flex;justify-content:space-between;padding:.5rem 0}.segment-control{background:hsla(0,0%,100%,.1);border-radius:6px;display:flex;gap:1px;padding:4px}.segment-option{background:none;border:none;border-radius:4px;color:var(--page-text-secondary);cursor:pointer;font-size:.7rem;font-weight:500;min-width:36px;outline:none;padding:2px 4px;transition:all .2s ease;white-space:nowrap}.segment-option:hover{color:var(--page-text)}.segment-option:focus{border:none;box-shadow:none;outline:none}.segment-option.active{background:#007bff;color:#fff}.template-preview-option{align-items:center;background:var(--page-bg);border:2px solid var(--page-border);border-radius:8px;cursor:pointer;display:flex;margin-bottom:.5rem;padding:.75rem;transition:all .2s ease}.template-preview-option:hover{border-color:var(--page-text);transform:translateY(-1px)}.template-preview-option.active{background:rgba(0,123,255,.1);border-color:#007bff}.template-preview-display{align-items:center;border-radius:4px;display:flex;flex-shrink:0;font-size:.7rem;font-weight:700;height:40px;justify-content:center;letter-spacing:.02em;margin-right:.75rem;width:80px}.template-preview-info{flex:1}.template-preview-name{color:var(--page-text);font-size:.85rem;font-weight:500;margin-bottom:.1rem}.template-preview-option[data-template=digital] .template-preview-display{background:#000;color:#fff;font-family:DSEG7,Courier New,monospace;font-style:italic;font-weight:700}.template-preview-option[data-template=digital-blue] .template-preview-display{background:#000;color:#66b8f0;font-family:DSEG7,Courier New,monospace;font-style:italic;font-weight:700}.template-preview-option[data-template=digital-red] .template-preview-display{background:#000;color:#d54d39;font-family:DSEG7,Courier New,monospace;font-style:italic;font-weight:700}.template-preview-option[data-template=digital-amber] .template-preview-display{background:#000;color:#e58f2e;font-family:DSEG7,Courier New,monospace;font-style:italic;font-weight:700}.template-preview-option[data-template=digital-orange] .template-preview-display{background:#fb7c00;color:#222;font-family:DSEG7,Courier New,monospace;font-style:italic;font-weight:700}.template-preview-option[data-template=pure-dark] .template-preview-display{background:#000;color:#fff;font-family:Helvetica,Arial,sans-serif;font-style:normal;font-weight:500}.template-preview-option[data-template=dark] .template-preview-display{background:#1a1a1a;color:#f2f2f2;font-family:Helvetica,Arial,sans-serif;font-style:normal;font-weight:500}.template-preview-option[data-template=light] .template-preview-display{background:#fff;border:1px solid #ddd;color:#111;font-family:Helvetica,Arial,sans-serif;font-style:normal;font-weight:500}.template-preview-option[data-template=classic] .template-preview-display{background:#000;color:#fff;font-family:Courier New,Monaco,monospace;font-style:normal;font-weight:600}.mobile-explore-section{display:none;text-align:center}.explore-styles-banner{background:linear-gradient(135deg,#007bff,#0056b3);border-radius:12px;box-shadow:0 4px 12px rgba(0,123,255,.3);color:#fff;margin:0 auto;max-width:250px;overflow:hidden;padding:1rem;position:relative}.explore-styles-banner:before{background:radial-gradient(circle,hsla(0,0%,100%,.1) 0,transparent 70%);content:"";height:100%;position:absolute;right:-50%;top:-50%;width:100%}.banner-close{align-items:center;background:hsla(0,0%,100%,.2);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:.8rem;height:24px;justify-content:center;position:absolute;right:.5rem;top:.5rem;transition:background .2s ease;width:24px}.banner-close:hover{background:hsla(0,0%,100%,.3)}.banner-content{position:relative;z-index:1}.banner-icon{display:block;font-size:1.5rem;margin-bottom:.5rem}.banner-title{font-size:1rem;font-weight:600;margin-bottom:.25rem}.usage-steps{margin-top:.75rem;text-align:left}.step{align-items:flex-start;display:flex;margin-bottom:.75rem}.step:last-child{margin-bottom:0}.step-number{align-items:center;background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.3);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.8rem;font-weight:600;height:22px;justify-content:center;margin-right:.75rem;width:22px}.step-text{font-size:.8rem;line-height:1.4;opacity:.95}.step-text strong{color:hsla(0,0%,100%,.9);font-weight:600}@media (max-width:1023px){.mobile-explore-section{align-self:center;display:block;flex-shrink:0;margin-left:1rem}.clock-section{align-items:center;flex-direction:row;gap:1rem;justify-content:center;padding:2rem 1rem}.clock-container{flex-shrink:0}.settings-panel{right:0;transform:translateX(100%);-webkit-transform:translateX(100%);width:60%}.settings-panel.open{transform:translateX(0);-webkit-transform:translateX(0)}}.mobile-explore-section.hidden{display:none!important}.settings-overlay{background:rgba(0,0,0,.3);bottom:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity .4s cubic-bezier(.25,.46,.45,.94),visibility .4s cubic-bezier(.25,.46,.45,.94);visibility:hidden;will-change:opacity;z-index:998}.settings-overlay.active{opacity:1;visibility:visible}:fullscreen .settings-overlay,:fullscreen .settings-panel{display:none}:-webkit-full-screen .settings-overlay,:-webkit-full-screen .settings-panel{display:none}:-moz-full-screen .settings-overlay,:-moz-full-screen .settings-panel{display:none}:-ms-fullscreen .settings-overlay,:-ms-fullscreen .settings-panel{display:none}[data-clock-template=flip-clock] .template-preview-option:not([data-template=pure-dark]):not([data-template=dark]):not([data-template=light]):not([data-template=green]){display:none}[data-clock-template=flip-clock] .template-preview-display{align-items:center;color:transparent;display:flex;font-size:5px;font-weight:700;gap:1px;justify-content:center;letter-spacing:.5px;padding:3px 2px}[data-clock-template=flip-clock] .template-preview-display:before{content:"■■ : ■■ : ■■";display:block;font-family:monospace;font-size:6px;font-weight:700;height:100%;letter-spacing:1px;line-height:38px;text-align:center;width:100%}[data-clock-template=flip-clock] .template-preview-option[data-template=pure-dark] .template-preview-display:before{color:#fff;text-shadow:0 0 2px hsla(0,0%,100%,.2)}[data-clock-template=flip-clock] .template-preview-option[data-template=dark] .template-preview-display:before{color:#ccc;text-shadow:0 0 1px hsla(0,0%,80%,.2)}[data-clock-template=flip-clock] .template-preview-option[data-template=light] .template-preview-display:before{color:#333;text-shadow:none}[data-clock-template=flip-clock] .template-preview-option[data-template=green] .template-preview-display:before{color:#cceac4;text-shadow:0 0 1px rgba(204,234,196,.3)}[data-clock-template=flip-clock] .template-preview-option[data-template=pure-dark] .template-preview-display{background:#000}[data-clock-template=flip-clock] .template-preview-option[data-template=dark] .template-preview-display{background:#151515}[data-clock-template=flip-clock] .template-preview-option[data-template=light] .template-preview-display{background:#fff;border:1px solid #e5e5e5}[data-clock-template=flip-clock] .template-preview-option[data-template=green] .template-preview-display{background:#10140f}@media (max-width:768px){.settings-panel{left:auto;right:0;transform:translateX(100%);-webkit-transform:translateX(100%);width:60%}.settings-panel.open{transform:translateX(0);-webkit-transform:translateX(0)}.template-preview-option[data-template=digital-amber] .template-preview-display,.template-preview-option[data-template=digital-blue] .template-preview-display,.template-preview-option[data-template=digital-orange] .template-preview-display,.template-preview-option[data-template=digital-red] .template-preview-display,.template-preview-option[data-template=digital] .template-preview-display{font-family:DSEG7,Courier New,monospace!important;font-style:italic!important;font-weight:700!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;text-rendering:optimizeLegibility!important}.template-preview-option[data-template=classic] .template-preview-display{font-family:Courier New,Monaco,monospace!important;font-style:normal!important;font-weight:600!important}.template-preview-option[data-template=dark] .template-preview-display,.template-preview-option[data-template=light] .template-preview-display{font-family:Helvetica,Arial,sans-serif!important;font-style:normal!important;font-weight:400!important}}@media (max-width:480px){.clock-section{flex-direction:column!important;gap:1.5rem!important}.mobile-explore-section{align-self:stretch!important;margin-left:0!important}.explore-styles-banner{margin:0 1rem;max-width:none}}