body { align-items: flex-start; }
main { width: min(62rem, 100%); }
.page-header, .chain-state { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.chain-state { display: grid; grid-template-columns: repeat(4, 1fr); }
.chain-state strong { display: block; font-size: clamp(1.3rem, 5vw, 2.4rem); }
.chain-source-actions { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-width: 0; }
.chain-source-actions > div { min-width: 0; }
#source { white-space: nowrap; }
#hits { white-space: nowrap; font-variant-numeric: tabular-nums; }
#emergency-save { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: .5rem; border-color: #ff8795; color: #ff8795; }
#emergency-save:hover { background: #ff87951a; }
#emergency-save:focus-visible { outline: 2px solid #ff8795; outline-offset: 3px; }
#emergency-save-result:empty { display: none; }
.indicator { color: #70d6ff; }
.state-alive, .source-helper { color: #8ce99a; }
.state-warmup, .source-api { color: #ffd166; }
.state-cooldown { color: #70d6ff; }
.state-inactive, .timer-unavailable { color: #9aa7b9; }
.source-none { color: #ff6b7d; }
.eyebrow { color: #8ba5c8; font-size: .8rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .25rem; text-transform: uppercase; }
.coverage { color: #8ce99a; font-weight: 700; }
.critical-alert { background: #4a1720; border: 2px solid #ff6b7d; border-radius: .5rem; box-shadow: 0 0 0 9999px rgb(0 0 0 / .5); color: #fff; left: 50%; max-width: 34rem; padding: 1rem; position: fixed; top: 1rem; transform: translateX(-50%); width: calc(100% - 2rem); z-index: 10; }
.critical-alert strong { color: #ffd8dd; font-size: 1.15rem; }
.critical-alert p { margin: .5rem 0 1rem; }
.timeline { margin: 1rem 0 0; padding-left: 1.4rem; }
.timeline li { color: #b7c8df; margin: .55rem 0; }
#timer-graph, #timeline { background: #08101d; border: 1px solid #2b405f; border-radius: .5rem; display: block; height: auto; width: 100%; }
.graph-axis { stroke: #58749e; } .graph-line { fill: none; stroke-width: 3; } .graph-label { fill: #b7c8df; font-size: 14px; }
.graph-grid { stroke: #2b405f; stroke-dasharray: 3 4; } .threshold-tick { stroke: #8ce99a; stroke-width: 2; } .threshold-label { fill: #b7c8df; font-size: 13px; }
textarea { background: #08101d; border: 1px solid #58749e; border-radius: .35rem; box-sizing: border-box; color: #e5eefb; display: block; margin-top: 1rem; min-height: 5rem; padding: .7rem; width: 100%; }
@media (max-width: 42rem) {
  main { box-sizing: border-box; padding: 1rem; }
  .chain-state {
    grid-template-columns: minmax(0, .8fr) minmax(max-content, 1.2fr);
    grid-template-areas: "state timer" "hits source";
    gap: 1rem .75rem;
    padding: 1rem;
  }
  .chain-state-value { grid-area: state; }
  .chain-hits-value { grid-area: hits; min-width: 0; }
  .chain-timer-value { grid-area: timer; }
  .chain-source-actions { grid-area: source; gap: .4rem; }
  .chain-state strong { font-size: clamp(1.1rem, 4.5vw, 1.8rem); }
  #hits.hits-compact { font-size: clamp(1rem, 4vw, 1.5rem); }
  #hits.hits-small { font-size: clamp(.85rem, 3.4vw, 1.25rem); }
  .page-header { align-items: flex-start; }
  .desktop-helper { display: none; }
}
.watch-scroll { max-height: 38rem; overflow: auto; margin-top: 1rem; }
#watch-table { border-collapse: separate; border-spacing: 0; min-width: 40rem; width: 100%; text-align: left; }
#watch-table caption { text-align: left; padding: .75rem 0; color: #b7c8df; }
#watch-table thead { position: sticky; top: 0; z-index: 1; background: #142238; }
#watch-table th, #watch-table td { border-bottom: 1px solid #2b405f; padding: .8rem; vertical-align: top; }
#watch-table tbody th { width: 24%; }
#watch-table td { width: 38%; }
.watch-day { display: block; font-size: .8rem; color: #b7c8df; margin: .25rem 0; }
#watch-table tbody tr { background: #25282d; }
#watch-table tbody tr.watch-bonus { background: #153d3f; }
#watch-table tbody tr.watch-current-hour { background: #514016; }
.watch-current-hour > * { border-top: 1px solid #c49b39; border-bottom: 1px solid #c49b39 !important; }
.watch-names { padding: 0; margin: 0 0 .5rem; list-style: none; }
.watch-officer-name { color: #8ce99a; }
.watch-names li { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; overflow-wrap: anywhere; }
.watch-event { color: #8ce99a; margin: 0 0 .5rem; }
#watch-table .watch-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 1.8rem; min-height: 1.8rem; border: 1px solid #78909c; background: transparent; color: #e5eefb; border-radius: .3rem; font-size: 1.15rem; line-height: 1; }
#watch-table .watch-icon:hover { background: #ffffff14; }
#watch-table .watch-icon:disabled { opacity: .4; }
#watch-table .watch-note { display: block; width: 100%; min-height: 2rem; padding: .25rem 0; text-align: left; color: #e5eefb; background: transparent; border: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
#watch-table .watch-note:hover { text-decoration: underline; }
#watch-table .watch-note-empty { color: #9aa7b9; }
.watch-note-status { display: block; color: #a8c5c4; font-size: .8rem; }
.watch-note-status.error { color: #ff8795; }
#watch-table textarea { margin-top: .5rem; }
.watch-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
#watch-history, #watch-timezone, #watch-member { max-width: 100%; background: #08101d; color: #e5eefb; padding: .5rem; border: 1px solid #58749e; border-radius: .35rem; }
.watch-navigation { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: .65rem; margin-top: 1rem; }
.watch-today { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.watch-today strong { font-size: .85rem; }
.watch-navigation button { width: 100%; padding: .65rem .35rem; font-size: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 42rem) { .watch-settings { grid-template-columns: 1fr; } }

.watch-repeated-slot { padding: .5rem; border-radius: .25rem; margin-bottom: .5rem; background: #25282d; }
.watch-repeated-slot.watch-bonus { background: #153d3f; }
.watch-repeated-slot.watch-current-hour { background: #514016; outline: 1px solid #c49b39; }

#watch-table .watch-add { background: #175234; color: #b5f7cd; border-color: #408e61; }
#watch-table .watch-add:hover { background: #216845; }
#watch-table .watch-remove { background: #5c2029; color: #ffd0d6; border-color: #a54b59; }
#watch-table .watch-remove:hover { background: #78303b; }
.watch-delete { color: #ffd0d6; border-color: #a54b59; }
.watch-collapsible { margin-top: 1.25rem; }
.watch-collapsible > summary { cursor: pointer; font-weight: 700; color: #b7c8df; padding: .65rem 0; }
#watch-summary-table { width: 100%; min-width: 30rem; border-collapse: collapse; text-align: left; }
#watch-summary-table th, #watch-summary-table td { padding: .7rem; border-bottom: 1px solid #2b405f; }
#watch-summary-table td, #watch-summary-table thead th:not(:first-child) { text-align: right; }
#watch-summary-table thead, #watch-summary-table tfoot { background: #142238; }
#watch-summary-table tfoot { font-weight: 700; }