:root{--monitor-red:#d92332;--ink:#20242c;--muted:#69717d;--line:#e4e7eb;--paper:#fff;--canvas:#f4f6f8}
body{background:var(--canvas);color:var(--ink);grid-template-rows:72px minmax(0,1fr) 66px}
body>header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);padding:0 28px;box-shadow:0 5px 22px rgba(29,34,43,.06);z-index:20}
body>header strong{color:#242932}body>header small{color:#7a818c}body>header time{color:#444b55}
main{background:radial-gradient(circle at 52% 16%,#fff 0,#f4f6f8 64%);overflow:hidden}
.standby{color:var(--ink);padding-top:36px}.standby .shield{background:linear-gradient(145deg,#ef4050,#c91f2d);box-shadow:0 16px 35px rgba(217,35,50,.2)}.standby h1{color:#20242c}.standby p{color:#747b86}
.standby-day-plan{left:3.5vw;right:31vw;top:28px;bottom:28px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 55px rgba(30,35,45,.1);color:var(--ink)}
.standby-day-plan header{background:transparent;box-shadow:none}.standby-day-plan header h2{color:#20242c}.standby-day-plan header>b{background:#fff1f2;color:#b91c2b}
.standby-timeline article{background:#f8f9fb;border-color:#e4e7eb}.standby-timeline h3{color:#222831}.standby-timeline p,.standby-timeline small{color:#747b86}
.history-panel,.multi-panel{background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 18px 55px rgba(30,35,45,.12);color:var(--ink)}
.history-panel h3,.multi-panel h3{color:#262b34}.history-panel small,.history-panel time,.multi-panel small{color:#747b86}
.multi-panel button{background:#f7f8fa;color:#272c34;border-color:#e2e5e9}.multi-panel button.selected{background:#d92332;color:#fff;border-color:#d92332}
.alarm{background:linear-gradient(155deg,#fff 0,#f7f8fa 54%,#fff1f2 100%);color:var(--ink)}
.alarm-head{background:linear-gradient(90deg,#c91f2d,#ef4050);box-shadow:0 8px 26px rgba(217,35,50,.22)}
.alarm-grid{gap:15px;padding:18px 2vw}.alarm-grid>div{background:rgba(255,255,255,.97);border:1px solid #e3e6ea;box-shadow:0 10px 30px rgba(30,35,45,.08);color:var(--ink)}
.alarm h1,.alarm h2,.alarm p{color:#20242c}.alarm label{color:#c91f2d}.map{overflow:hidden}.map iframe{border-radius:12px}
.map-links a{background:#fff1f2;color:#b91c2b;border:1px solid #fecdd3}
body>footer{background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -5px 22px rgba(29,34,43,.06);color:#535b66;z-index:20}
body>footer button,body>footer select,body>footer label{background:#f5f6f8;color:#343a44;border-color:#dfe2e7}
#soundHint{background:#fff;color:#343a44;border:1px solid #e1e4e8;box-shadow:0 12px 30px rgba(30,35,45,.14)}
#soundButton{min-height:46px;padding:0 18px;font-weight:800}#soundButton.active{background:#168653;color:#fff;border-color:#168653}
@supports(-webkit-touch-callout:none){#soundHint{display:block;top:86px;left:18px;right:18px;max-width:none;text-align:center;font-size:16px}#soundHint[hidden]{display:none}#soundButton{background:#d92332;color:#fff;border-color:#d92332;font-size:16px}}
@media(max-width:1100px){.standby-day-plan{right:3.5vw}.history-panel{background:#fff}}
main:has(.alarm:not([hidden])) .history-panel{display:none}
main:has(.alarm:not([hidden])) .multi-panel{top:auto;right:2vw;bottom:16px;width:min(520px,42vw);max-height:150px;overflow:auto}
.alarm{overflow:hidden}.alarm-grid{height:calc(100% - 76px);overflow:auto;align-content:start}.alarm-grid>div{min-width:0}.alarm h1,.alarm h2,.alarm p{overflow-wrap:anywhere}
body>footer{min-width:0;overflow-x:auto;gap:10px;padding:0 16px}body>footer>*{flex:0 0 auto}
@media(max-width:1000px){
 body{grid-template-rows:64px minmax(0,1fr) auto}
 body>header{padding:0 14px}body>header strong{font-size:18px}body>header small{font-size:9px}
 .alarm{overflow:auto}.alarm-grid{height:auto;grid-template-columns:1fr;padding:10px;padding-bottom:170px}
 .keyword,.place,.map,.vehicles,.notes{grid-column:1!important;grid-row:auto!important}
 .map{min-height:300px}.map iframe{min-height:300px}
 main:has(.alarm:not([hidden])) .multi-panel{left:10px;right:10px;bottom:10px;width:auto;max-height:145px}
 body>footer{padding:8px 10px;flex-wrap:wrap;justify-content:center;overflow:visible}
 body>footer #connection{width:100%;text-align:center}
}