.demo-shell{color:#10283c;background:#eef4f7;min-height:100vh}.demo-header{color:#fff;background:#061a2f;justify-content:space-between;align-items:center;height:64px;padding:0 4vw;display:flex}.demo-brand{letter-spacing:.06em;align-items:center;gap:9px;display:flex}.demo-brand>span{background:linear-gradient(145deg,#31c6e8,#0786d1);border-radius:10px;place-items:center;width:34px;height:34px;display:grid}.demo-brand svg{width:19px}.demo-brand small{color:#7ce0ef;background:#163d54;border-radius:5px;padding:3px 6px;font-size:8px}.simulation-tag,.back-link{color:#b7ccd7;align-items:center;gap:7px;font-size:10px;display:flex}.simulation-tag>span{background:#ffb64c;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 5px #ffb64c1f}.back-link svg{width:15px}.demo-content{max-width:1400px;margin:auto;padding:32px 28px 70px}.demo-intro{justify-content:space-between;align-items:flex-end;margin-bottom:24px;display:flex}.demo-intro p{color:#0786d1;letter-spacing:.14em;margin:0 0 6px;font-size:10px;font-weight:900}.demo-intro h1{color:#061a2f;letter-spacing:-.035em;margin:0;font-size:34px;font-weight:950}.demo-intro h1 span{color:#0786d1}.system-online{background:#fff;border:1px solid #d7e4ea;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;display:flex}.system-online>span{background:#1db678;border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 6px #1db6781f}.system-online div{flex-direction:column;display:flex}.system-online b{font-size:11px}.system-online small{color:#718796;font-size:8px}.view-tabs{background:#dce8ed;width:fit-content;height:44px;margin-bottom:18px;padding:4px}.view-tabs button{height:36px;padding:0 18px;font-size:11px}.view-tabs button[data-state=active]{color:#075f88;background:#fff}.citizen-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px;display:grid}.citizen-main{gap:17px;display:grid}.select-row{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.select-row label>span{color:#607989;margin-bottom:7px;font-size:9px;font-weight:800;display:block}.village-select{background:#fff;border-color:#cbdde5;width:360px;height:44px;font-weight:800}.risk-chip{border-radius:11px;align-items:center;gap:9px;min-width:150px;padding:9px 12px;display:flex}.risk-chip>svg{width:18px}.risk-chip span{flex-direction:column;display:flex}.risk-chip small{font-size:8px}.risk-chip b{font-size:12px}.critical{color:#b72d36;background:#ffe9ea}.warning{color:#a95c14;background:#fff1dc}.watch{color:#147254;background:#e5f7ef}.warning-panel{color:#10283c;background:#fff;border:1px solid #d8e6ec;border-top:5px solid #df3942;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #0a2b3d0f}.warning-panel.warning{border-top-color:#f39a37}.warning-panel.watch{border-top-color:#24aa75}.warning-top{border-bottom:1px solid #e2ebef;justify-content:space-between;align-items:center;padding:19px 22px;display:flex}.warning-title{align-items:center;gap:12px;display:flex}.warning-title>span{color:#fff;background:#df3942;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.warning-panel.warning .warning-title>span{background:#f39a37}.warning-panel.watch .warning-title>span{background:#24aa75}.warning-title small{color:#718794;font-size:8px}.warning-title h2{margin:2px 0 0;font-size:23px}.channels{gap:6px;display:flex}.channels span{color:#507080;background:#edf4f7;border-radius:6px;padding:5px 8px;font-size:8px;font-weight:800}.forecast-grid{grid-template-columns:1fr 1fr 1.2fr;gap:12px;padding:25px 22px;display:grid}.forecast-grid>div{background:#f5f9fb;border-radius:11px;align-items:center;gap:11px;padding:13px;display:flex}.forecast-grid svg{color:#0786d1}.forecast-grid span{flex-direction:column;display:flex}.forecast-grid small{color:#748a98;font-size:8px}.forecast-grid b{font-size:17px}.forecast-grid .countdown{color:#fff;background:linear-gradient(125deg,#d9333d,#b7202f);flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.countdown small{color:#ffd9dc}.countdown strong{font-size:21px}.forecast-note{color:#728996;background:#f4f8fa;margin:0;padding:9px 22px;font-size:8px}.white-card{background:#fff;border:1px solid #d8e6ec;border-radius:17px;padding:21px;box-shadow:0 10px 28px #0d354a0d}.action-grid-demo{grid-template-columns:1.25fr .75fr;gap:17px;display:grid}.card-title{align-items:center;gap:11px;display:flex}.card-title>span{color:#0786d1;background:#e5f5fb;border-radius:10px;place-items:center;width:40px;height:40px;padding:9px;display:grid}.card-title svg{width:20px}.card-title small{color:#7c919d;font-size:8px}.card-title h3{margin:2px 0 0;font-size:16px}.route-visual{grid-template-columns:auto 1fr auto;align-items:center;margin:24px 0 18px;display:grid}.route-point{align-items:center;gap:8px;display:flex}.route-point>svg{border-radius:50%;width:34px;height:34px;padding:8px}.route-point.danger>svg{color:#c3343d;background:#ffe7e9}.route-point.safe>svg{color:#13845e;background:#e5f7ef}.route-point span{flex-direction:column;display:flex}.route-point b{font-size:10px}.route-point small{color:#7d929e;font-size:7px}.route-line{border-top:3px dashed #34aeca;margin:0 14px;position:relative}.route-line svg{color:#0786d1;background:#fff;width:20px;position:absolute;top:-12px;right:-4px}.route-instruction{color:#075f88;background:#e7f6fb;border-radius:10px;align-items:center;gap:10px;padding:12px;display:flex}.route-instruction span{flex-direction:column;display:flex}.route-instruction small{font-size:7px}.route-instruction b{font-size:10px}.road-open{color:#16815e;align-items:center;gap:6px;margin-top:10px;font-size:8px;display:flex}.road-open svg{width:14px}.road-open span{color:#7c909b;margin-left:auto}.checkin-card>p{color:#6e8492;font-size:9px;line-height:1.6}.action-buttons{gap:8px;display:grid}.safe-button{background:#15966b;height:42px}.hotline{color:#657f8d;background:0 0;border:0;width:100%;margin-top:8px;padding:8px;font-size:8px;font-weight:800}.status-result{border-radius:11px;align-items:center;gap:10px;padding:15px;display:flex}.status-result span{flex-direction:column;display:flex}.status-result b{font-size:10px}.status-result small{font-size:7px}.status-result.safe{color:#147655;background:#e4f7ee}.status-result.help{color:#ae5b14;background:#fff0dc}.water-level{align-items:center;gap:20px;margin:23px 0;display:flex}.water-level>div{background:#e6eef2;border-radius:12px;align-items:flex-end;width:45px;height:155px;padding:5px;display:flex}.water-level>div span{background:linear-gradient(#45d1e8,#0786d1);border-radius:8px;width:100%;height:76%}.water-level section{flex-direction:column;display:flex}.water-level b{color:#df3942;font-size:9px}.water-level strong{font-size:29px}.water-level small{color:#738a97;font-size:7px}.sensor-list>div{border-top:1px solid #e5edf1;justify-content:space-between;padding:12px 0;font-size:8px;display:flex}.sensor-list span{align-items:center;gap:7px;display:flex}.sensor-list svg{color:#0786d1;width:14px}.sensor-list b{color:#16815e}.offline-note{color:#526d7b;background:#edf4f7;border-radius:10px;gap:9px;margin-top:18px;padding:12px;display:flex}.offline-note svg{width:18px}.offline-note span{flex-direction:column;display:flex}.offline-note b{font-size:8px}.offline-note small{font-size:7px}.summary-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.summary{background:#fff;border:1px solid #d8e6ec;border-radius:14px;align-items:center;gap:12px;padding:17px;display:flex}.summary>svg{border-radius:11px;width:39px;height:39px;padding:9px}.summary span{flex-direction:column;display:flex}.summary small{color:#718795;font-size:7px}.summary b{font-size:16px}.summary.red>svg{color:#c42e39;background:#ffe7e9}.summary.blue>svg{color:#087dac;background:#e4f4fa}.summary.green>svg{color:#11805a;background:#e3f6ed}.summary.orange>svg{color:#b86515;background:#fff0dc}.command-grid{grid-template-columns:minmax(0,1fr) 320px;gap:17px;margin-top:17px;display:grid}.card-head{justify-content:space-between;align-items:flex-start;display:flex}.card-head small{color:#0786d1;font-size:7px;font-weight:900}.card-head h2{margin:3px 0 18px;font-size:18px}.auto{color:#6e8591;align-items:center;gap:5px;font-size:7px;display:flex}.auto i{background:#1caf76;border-radius:50%;width:7px;height:7px}.operations th{color:#69818f;background:#f1f6f8;font-size:7px}.operations td{padding-top:13px;padding-bottom:13px;font-size:9px}.village-cell{flex-direction:column;display:flex}.village-cell small{color:#7a909c;font-size:7px}.table-risk{border-radius:999px;padding:4px 7px;font-size:7px;font-weight:800}.table-risk.critical{color:#af2732;background:#ffe5e7}.table-risk.warning{color:#a45a14;background:#fff0db}.table-risk.watch{color:#147452;background:#e3f6ed}.progress-cell{min-width:120px}.progress-cell span{color:#738996;justify-content:space-between;margin-bottom:5px;font-size:7px;display:flex}.progress-cell [data-slot=progress]{background:#dbe8ed;height:5px}.progress-cell [data-slot=progress-indicator]{background:#14976b}.urgent{color:#c52e38}.sent{color:#15805b;align-items:center;gap:3px;display:flex}.sent svg{width:12px}.priority-row{border-top:1px solid #e4edf1;grid-template-columns:27px 1fr auto;gap:8px;padding:14px 0;display:grid}.priority-row>span{color:#bd2a35;background:#ffe5e7;border-radius:7px;place-items:center;width:25px;height:25px;font-size:7px;font-weight:900;display:grid}.priority-row div{flex-direction:column;display:flex}.priority-row b{font-size:9px}.priority-row small{color:#718793;font-size:7px}.priority-row em{color:#0f7554;background:#e4f6ed;border-radius:5px;height:fit-content;padding:4px 6px;font-size:7px;font-style:normal}.dispatch{background:#087fae;width:100%;margin-top:12px}.integration-strip{color:#fff;background:#07233b;border-radius:14px;justify-content:center;align-items:center;gap:30px;margin-top:17px;padding:19px;font-size:10px;display:flex}.integration-strip svg{color:#4ba9c1;width:18px}.demo-footer{color:#7e929d;background:#061522;justify-content:space-between;padding:20px 4vw;font-size:8px;display:flex}@media (width<=1050px){.citizen-layout,.command-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr 1fr}.action-grid-demo{grid-template-columns:1fr}.channels{display:none}}@media (width<=680px){.demo-header{padding:0 16px}.simulation-tag{display:none}.back-link{font-size:0}.demo-content{padding:25px 16px 55px}.demo-intro{flex-direction:column;align-items:flex-start;gap:14px}.demo-intro h1{font-size:27px}.system-online{align-self:stretch}.view-tabs{width:100%}.view-tabs button{padding:0 8px;font-size:9px}.select-row{flex-direction:column;align-items:stretch}.village-select{width:100%}.forecast-grid{grid-template-columns:1fr 1fr}.forecast-grid .countdown{grid-column:1/-1}.route-visual{grid-template-columns:1fr}.route-line{border-top:0;border-left:3px dashed #34aeca;height:36px;margin:8px 17px}.route-line svg{top:23px;left:-11px;right:auto;transform:rotate(90deg)}.summary-grid{grid-template-columns:1fr}.integration-strip{flex-direction:column;align-items:flex-start}.integration-strip svg{transform:rotate(90deg)}.demo-footer{flex-direction:column;gap:5px}}