*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--font-ui);overflow:hidden}.time-root{background:var(--bg);flex-direction:column;height:100%;display:flex}.time-tabs{background:var(--bg-elev);border-bottom:1px solid var(--border);flex:none;display:flex}.time-tab{padding:var(--s-3);color:var(--fg-muted);font-family:var(--font-ui);cursor:pointer;transition:color var(--motion-duration) var(--motion-easing);background:0 0;border:none;flex:1;font-size:.85rem;position:relative}.time-tab:hover{color:var(--fg)}.time-tab[aria-selected=true]{color:var(--pai-blue)}.time-tab[aria-selected=true]:after{content:"";background:var(--pai-blue);height:2px;position:absolute;bottom:0;left:0;right:0}.time-tab:focus-visible{outline:2px solid var(--pai-blue);outline-offset:-2px}.time-panel{padding:var(--s-5);flex:1;display:none;overflow:auto}.time-panel.active{display:block}.clock-main{align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);flex-direction:column;display:flex}.clock-analog{width:200px;height:200px}.clock-digital{font-family:var(--font-mono);color:var(--fg);letter-spacing:.05em;font-size:2.5rem;font-weight:600}.clock-date{color:var(--fg-muted);font-size:.9rem}.clock-zones{gap:var(--s-2);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.zone-row{align-items:center;gap:var(--s-2);background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-2) var(--s-3);display:flex}.zone-name{flex:1;font-size:.85rem}.zone-time{font-family:var(--font-mono);color:var(--pai-blue)}.zone-remove{color:var(--fg-muted);cursor:pointer;padding:0 var(--s-1);background:0 0;border:none;font-size:1rem}.zone-remove:hover{color:var(--pai-red)}.zone-add{gap:var(--s-2);margin-top:var(--s-3);display:flex}.zone-add select{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-2);font-family:var(--font-ui);flex:1}.bigtime{font-family:var(--font-mono);text-align:center;color:var(--fg);margin:var(--s-5) 0;letter-spacing:.04em;font-size:3.5rem;font-weight:600}.bigtime.ringing{color:var(--pai-red);animation:.6s infinite pulse}@keyframes pulse{50%{opacity:.3}}.ctrl-row{justify-content:center;gap:var(--s-2);margin-bottom:var(--s-4);flex-wrap:wrap;display:flex}.btn{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-2) var(--s-4);font-family:var(--font-ui);cursor:pointer;transition:background var(--motion-duration) var(--motion-easing);font-size:.85rem}.btn:hover{background:color-mix(in srgb, var(--pai-blue) 15%, var(--bg-elev))}.btn.primary{background:var(--pai-blue);color:var(--bg);border-color:var(--pai-blue)}.btn.primary:hover{background:color-mix(in srgb, var(--pai-blue) 80%, #fff)}.btn.danger{border-color:var(--pai-red);color:var(--pai-red)}.btn:focus-visible{outline:2px solid var(--pai-blue);outline-offset:1px}.timer-set{gap:var(--s-2);margin-bottom:var(--s-3);justify-content:center;display:flex}.timer-set input{background:var(--bg-elev);width:60px;color:var(--fg);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-2);font-family:var(--font-mono);text-align:center;font-size:1rem}.timer-set label{color:var(--fg-muted);align-self:center;font-size:.85rem}.laps{margin-top:var(--s-4);border-top:1px solid var(--border);max-height:160px;overflow:auto}.lap-row{padding:var(--s-2) var(--s-3);font-family:var(--font-mono);border-bottom:1px dashed var(--border);justify-content:space-between;font-size:.85rem;display:flex}.alarm-add{gap:var(--s-2);margin-bottom:var(--s-3);display:flex}.alarm-add input[type=time]{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-2);font-family:var(--font-mono)}.alarm-add input[type=text]{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-2);font-family:var(--font-ui);flex:1}.alarm-list{gap:var(--s-2);flex-direction:column;display:flex}.alarm-row{align-items:center;gap:var(--s-3);background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-icon);padding:var(--s-3);display:flex}.alarm-row .time-label{font-family:var(--font-mono);font-size:1.4rem;font-weight:600}.alarm-row .alarm-label-text{color:var(--fg-muted);flex:1;font-size:.85rem}.alarm-row.disabled .time-label{opacity:.4}.alarm-row.firing{border-color:var(--pai-red);background:color-mix(in srgb, var(--pai-red) 15%, var(--bg-elev));animation:.6s infinite pulse}
