:root { --clock-green: #36f58c; --clock-amber: #ffbd45; --clock-red: #ff4a59; }
.clock-header { max-width: 900px; margin-inline: auto; }
.clock-header > p { max-width: 800px; margin: 18px auto 0; color: var(--text-main); font-size: 1.1rem; line-height: 1.75; }
.clock-boundary { padding: 14px 16px; border: 1px solid rgba(0,240,255,.25); border-radius: 10px; background: rgba(0,240,255,.06); color: var(--text-muted) !important; }
.clock-page-shell { max-width: 1120px; margin: 0 auto 80px; padding: 0 20px; }
.clock-display { position: relative; min-height: 620px; display: grid; grid-template-rows: 1fr 1.25fr; align-items: center; padding: 44px 28px 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #000; color: #fff; font-family: 'Roboto Mono', monospace; }
.state-bar { position: absolute; inset: 0 0 auto; height: 14px; background: #30343b; transition: background .2s, height .2s; }
.clock-display.standby .state-bar { height: 24px; background: var(--clock-amber); }
.clock-display.overtime .state-bar { height: 24px; background: var(--clock-red); }
.display-section { text-align: center; }
.display-label { margin-bottom: 8px; color: #969aa3; font: 700 clamp(.85rem,2.2vw,1.45rem) 'Outfit', sans-serif; letter-spacing: .28em; }
.time-of-day { display: block; font-size: clamp(3.8rem,13vw,10rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.date-display, .target-summary { margin-top: 12px; color: #9ba0aa; font: 400 clamp(.85rem,1.8vw,1.15rem) 'Outfit', sans-serif; }
.countdown-display { color: var(--clock-green); font-size: clamp(4rem,14vw,11rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.clock-display.standby .countdown-display { color: var(--clock-amber); }
.clock-display.overtime .countdown-display { color: var(--clock-red); }
.display-exit { display: none; position: absolute; right: 18px; bottom: 18px; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.clock-display:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.clock-display:fullscreen .display-exit { display: block; }
.clock-controls, .clock-notes { margin-top: 24px; padding: 24px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-surface); }
.clock-controls > div:first-child p, .clock-notes p { margin-top: 8px; color: var(--text-muted); line-height: 1.65; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.field label { display: block; margin-bottom: 7px; color: var(--text-muted); }
.field input { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-main); color: var(--text-main); font: 1rem 'Roboto Mono', monospace; }
.control-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.control-actions button { min-height: 44px; }
.validation-message { min-height: 22px; margin-top: 10px; color: var(--clock-amber); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 20px; }
.related-grid a { display: block; padding: 16px; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-main); text-decoration: none; }
.related-grid span { display: block; margin-top: 6px; color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
@media (max-width: 760px) {
  .clock-display { min-height: 440px; padding-inline: 12px; }
  .control-grid, .related-grid { grid-template-columns: 1fr; }
  .clock-controls, .clock-notes { padding: 18px; }
  .display-label { letter-spacing: .18em; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .clock-display { min-height: 330px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 18px; }
  .time-of-day, .countdown-display { font-size: clamp(3rem,10vw,6rem); }
}