.alarm-workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.alarm-clock-face{min-width:0;padding:28px;background:var(--cobalt);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;min-height:410px}
.alarm-clock-face h2{font-size:16px;font-weight:600;letter-spacing:-.02em}.alarm-clock-date{margin-top:6px;color:var(--cobalt-light);font-size:13px}
.alarm-clock{display:flex;align-items:baseline;justify-content:center;font-family:var(--timer-font);font-size:clamp(82px,11vw,140px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.025em;margin:30px 0;white-space:nowrap}
.alarm-clock-second{font-size:.42em;margin-left:10px;color:var(--lemon);min-width:1.1em}.alarm-clock-summary{font-size:13px;color:var(--cobalt-light);min-height:48px;line-height:1.8;overflow-wrap:anywhere}.alarm-clock-summary strong{color:var(--lemon);font-weight:600;display:block}
.alarm-form{padding:25px 22px;display:grid;gap:14px;align-content:start}.alarm-form h3{font-size:16px;font-weight:700;letter-spacing:-.02em}.alarm-field{display:grid;gap:5px;min-width:0}.alarm-field>label,.alarm-field-label{font-size:12px;color:var(--muted);font-weight:600}.alarm-field input:not([type=range]),.alarm-field select{min-width:0;width:100%;min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--ink);padding:8px 10px}.alarm-field input[type=time]{font-size:26px;min-height:52px;font-variant-numeric:tabular-nums;line-height:1.2}.alarm-field input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--cobalt)}.alarm-next-hint{color:var(--muted);font-size:12px;min-height:20px}.alarm-sound-row{display:flex;gap:6px;min-width:0}.alarm-sound-row select{flex:1}.alarm-control{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:8px 13px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:13px;white-space:nowrap}.alarm-control:hover{background:var(--pale);border-color:var(--cobalt)}.alarm-control svg{width:18px;height:18px}.alarm-primary{background:var(--cobalt);border-color:var(--cobalt);color:var(--white);font-weight:600}.alarm-primary:hover{background:var(--cobalt-hover);color:var(--white)}.alarm-feedback{font-size:12px;color:var(--muted);min-height:20px;overflow-wrap:anywhere}.alarm-feedback[data-error=true]{color:var(--danger)}
.alarm-list-section{margin-top:28px}.alarm-list-heading{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}.alarm-list-heading h3{font-size:16px}.alarm-count{font-size:12px;color:var(--muted)}.alarm-list{list-style:none;padding:0;margin:0}.alarm-item{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.alarm-item-time{font-family:var(--timer-font);font-size:38px;line-height:1;font-variant-numeric:tabular-nums;color:var(--cobalt);flex:none;min-width:74px}.alarm-item[data-enabled=false] .alarm-item-time{color:var(--muted)}.alarm-item-info{min-width:0;flex:1}.alarm-item-name{font-size:14px;font-weight:600;overflow-wrap:anywhere}.alarm-item-next{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.alarm-item-actions{display:flex;gap:6px;flex:none}.alarm-toggle[aria-pressed=true]{background:var(--lemon);border-color:#a8b854}.alarm-remove{width:44px;padding:0;color:var(--muted)}.alarm-remove:hover{color:var(--danger);border-color:var(--danger)}.alarm-empty{font-size:13px;color:var(--muted);padding:25px 0}.alarm-note{font-size:12px;line-height:1.9;color:var(--muted);margin-top:18px;max-width:75ch}
.alarm-ringing-dialog{padding:28px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);background:var(--white);width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}.alarm-ringing-dialog::backdrop{background:#17233c99}.alarm-ringing-dialog h2{font-size:22px;letter-spacing:-.025em}.alarm-ringing-name{font-size:16px;overflow-wrap:anywhere;margin-top:8px}.alarm-ringing-time{font-family:var(--timer-font);font-size:76px;line-height:1.2;color:var(--cobalt);font-variant-numeric:tabular-nums;margin:12px 0}.alarm-ringing-note{font-size:12px;line-height:1.8;color:var(--muted);min-height:22px}.alarm-dialog-actions{display:flex;gap:8px;margin-top:22px}.alarm-dialog-actions button{flex:1;min-height:48px}
@media(max-width:700px){.alarm-workspace{grid-template-columns:minmax(0,1fr) 255px}.alarm-form{padding:23px 18px}.alarm-clock-face{padding:25px 22px}.alarm-clock{font-size:88px}.alarm-clock-second{margin-left:6px}}
@media(max-width:580px){.alarm-workspace{grid-template-columns:1fr}.alarm-clock-face{min-height:285px;padding:23px 21px}.alarm-clock{font-size:clamp(94px,24vw,130px);margin:20px 0}.alarm-clock-summary{min-height:40px}.alarm-form{grid-template-columns:1fr 1fr;gap:15px;padding:23px 21px}.alarm-form h3,.alarm-field-wide,.alarm-next-hint,.alarm-submit,.alarm-feedback{grid-column:1 / -1}.alarm-form .alarm-next-hint{margin-top:-10px}.alarm-form .alarm-feedback{min-height:0}.alarm-item{gap:10px;align-items:flex-start}.alarm-item-time{font-size:34px;min-width:66px;margin-top:5px}.alarm-item-actions{gap:4px}.alarm-toggle{padding-inline:10px}.alarm-item-info{padding-top:3px}.alarm-list-section{margin-top:24px}}
@media(max-width:370px){.alarm-form{padding:20px 17px}.alarm-clock-face{padding:23px 17px}.alarm-item{flex-wrap:wrap}.alarm-item-info{flex-basis:calc(100% - 80px)}.alarm-item-actions{margin-left:76px}.alarm-dialog-actions{flex-direction:column}}