:root{
  --navy:#073f6b;
  --blue:#0d6fa9;
  --cyan:#28b4d5;
  --green:#55b84a;
  --bg:#edf4f7;
  --card:#fff;
  --line:#d7e4eb;
  --muted:#71859a;
  --ink:#0b426b;
  --text:#17384f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:"Segoe UI",Arial,sans-serif;color:var(--text)}
button,input{font:inherit}
.wrap{max-width:1500px;margin:auto;padding:0 20px}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.head{height:88px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:56px;height:56px;object-fit:contain}
.brand h1{margin:0;color:var(--navy);font-size:25px;line-height:1.1}
.brand p{margin:4px 0 0;color:var(--muted);font-size:12px}
.status{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:#f7fafb;border-radius:999px;padding:8px 12px;font-size:11px;color:#38566c;white-space:nowrap}
.pill.live{color:#16834a;background:#ebf9f0;border-color:#c5e9d1;font-weight:800}
.pill.error,.pill.offline{color:#b43a3a;background:#fff0f0;border-color:#f1caca;font-weight:800}
main.wrap{padding-top:18px;padding-bottom:35px}
.sectionhead{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 10px}
.sectionhead h2{margin:0;color:var(--navy);font-size:20px}
.sectionhead p{margin:3px 0 0;color:var(--muted);font-size:11px}
.hero-section{align-items:center;margin-bottom:12px}
.hero-section h2{font-size:22px}
.hero-actions{display:flex;gap:8px}
.btn{border:0;background:#074a7d;color:#fff;padding:11px 16px;border-radius:12px;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 4px 12px #315f7b14}
.btn:hover{filter:brightness(1.04)}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.setup-banner{margin:0 0 12px;padding:12px 14px;border-radius:13px;border:1px solid #f0d9a4;background:#fff8e8;color:#755515;font-size:12px}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px #45677d0b;padding:18px 18px 16px;position:relative;overflow:hidden;min-height:126px}
.summary-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#b7c4cb}
.summary-card.accent-blue:before{background:var(--blue)}
.summary-card.accent-cyan:before{background:var(--cyan)}
.summary-card.accent-green:before{background:var(--green)}
.summary-card.accent-gray:before{background:#8d9ba4}
.lab{font-size:10px;letter-spacing:.05em;color:var(--muted);font-weight:800}
.summary-value{font-size:32px;line-height:1.1;color:var(--navy);font-weight:800;margin:15px 0 6px}
.summary-sub{font-size:11px;color:var(--muted)}
.times{font-size:10px;color:var(--muted);text-align:right}.times b{color:#38566c}
.content-heading{margin-top:2px}
.workspace{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(300px,.75fr);gap:12px;align-items:stretch}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px #45677d0b;overflow:hidden}
.ct{padding:12px 15px;border-bottom:1px solid #e7eef2;display:flex;align-items:center;justify-content:space-between;color:var(--navy);font-weight:800;min-height:48px}
.ct span:last-child{font-size:10px;color:var(--muted);font-weight:500}
.map-card{min-height:570px}
.map-card .ct{border-top:4px solid var(--blue)}
.map-frame{height:475px;position:relative;background:#eef4f6}
#map{height:100%;width:100%;z-index:1}
.map-overlay{position:absolute;left:14px;bottom:14px;z-index:500;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:12px;padding:9px 11px;display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:#526b7e;box-shadow:0 6px 18px #214b6517}
.map-overlay span{display:flex;align-items:center;gap:5px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.dry{background:#8fa1ac}.dot.wet{background:#0d6fa9}.dot.nodata{background:#d4dde2}
.map-note{padding:10px 14px 12px;border-top:1px solid #e7eef2;color:var(--muted);font-size:10px;line-height:1.45}
.side-stack{display:grid;grid-template-rows:minmax(0,1.35fr) auto;gap:12px}
.rainfall-card .ct{border-top:4px solid var(--cyan)}
.source-card .ct{border-top:4px solid var(--green)}
.rain-list{padding:9px 14px 8px;min-height:245px}
.rain-item{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf2f5}
.rain-item:last-child{border-bottom:0}
.rain-rank{width:28px;height:28px;border-radius:9px;background:#edf7fb;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.rain-name{font-size:12px;color:#294c64;font-weight:700}.rain-name small{display:block;color:var(--muted);font-size:10px;font-weight:500;margin-top:3px}
.rain-value{font-size:18px;font-weight:800;color:var(--navy);text-align:right}.rain-value small{font-size:9px;color:var(--muted);font-weight:600;margin-left:2px}
.note{padding:10px 14px 13px;color:var(--muted);font-size:10px;line-height:1.45}
.source-body{padding:16px}.source-body h3{margin:0 0 8px;color:var(--navy);font-size:16px}.source-body p{margin:0 0 14px;color:var(--muted);font-size:11px;line-height:1.5}
.source-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #edf2f5;font-size:10px}.source-row span{color:var(--muted)}.source-row b{color:#38566c;text-align:right}
.detail-card{margin-top:12px}.detail-card .ct{border-top:4px solid var(--green)}
.detail-head>div{display:flex;flex-direction:column;gap:3px}.detail-head small{font-size:10px;color:var(--muted);font-weight:500}.close-btn{border:0;background:#f4f8fa;border-radius:9px;width:30px;height:30px;color:var(--navy);font-size:20px;cursor:pointer}
.param-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-bottom:1px solid #e7eef2}
.metric{padding:17px;border-right:1px solid #edf2f5;min-height:92px}.metric:last-child{border-right:0}.metric .val{font-size:20px;color:var(--navy);font-weight:800;margin-top:10px}.metric .val.small{font-size:13px;line-height:1.4}.primary-metric{background:#f4fafd}.primary-metric .val{color:var(--blue);font-size:25px}
.history-title{padding:12px 15px 6px;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--navy)}.history-title span{color:var(--muted);font-size:10px}.history{padding:5px 15px 15px;overflow:auto}
.list-heading{margin-top:20px}
.table-card{overflow:hidden}.table-toolbar{padding:13px 15px;border-bottom:1px solid #e7eef2;border-top:4px solid var(--navy);display:flex;align-items:center;justify-content:space-between;gap:12px}.table-toolbar>div{display:flex;flex-direction:column}.table-toolbar b{color:var(--navy);font-size:13px}.table-toolbar span{color:var(--muted);font-size:10px;margin-top:3px}.table-toolbar input{width:260px;max-width:100%;border:1px solid var(--line);background:#f8fbfc;border-radius:11px;padding:9px 11px;color:#294c64;outline:none}.table-toolbar input:focus{border-color:#9ac7dc;background:#fff}
.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}thead th{background:#f3f8fa;color:#60788b;font-size:9px;letter-spacing:.03em;text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}tbody td{padding:12px;border-bottom:1px solid #edf2f5;color:#38566c}tbody tr{cursor:pointer}tbody tr:hover{background:#f8fbfc}tbody tr:last-child td{border-bottom:0}
.events-card{margin-top:12px}.events-card .ct{border-top:4px solid #b7c4cb}.events{padding:4px 14px 12px}.event-row{display:grid;grid-template-columns:145px 130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #edf2f5;font-size:10px;color:#526b7e}.event-row:last-child{border-bottom:0}.event-row strong{color:#38566c}.event-row .event-level{font-weight:800}.event-row.error .event-level{color:#b43a3a}.event-row.warning .event-level{color:#a67717}
.foot{text-align:center;color:#8799a6;font-size:10px;margin-top:22px;line-height:1.6}
.empty-state{padding:20px 10px;color:var(--muted);font-size:11px;text-align:center}
/* Leaflet restyle */
.leaflet-container{font-family:"Segoe UI",Arial,sans-serif;background:#eef4f6}.leaflet-control-zoom a{color:var(--navy)!important}.leaflet-popup-content-wrapper,.leaflet-popup-tip{box-shadow:0 8px 24px #345a701f}.leaflet-popup-content{font-size:11px;color:#38566c}
@media(max-width:1180px){.summary{grid-template-columns:1fr 1fr}.workspace{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.param-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.wrap{padding:0 12px}.head{height:auto;padding:12px 0;align-items:flex-start;flex-direction:column}.brand img{width:50px;height:50px}.brand h1{font-size:21px}.status{width:100%}.hero-section,.sectionhead{align-items:flex-start;flex-direction:column}.hero-actions{width:100%}.hero-actions .btn{flex:1}.summary{grid-template-columns:1fr}.workspace{display:block}.side-stack{display:grid;grid-template-columns:1fr;margin-top:12px}.map-frame{height:390px}.param-grid{grid-template-columns:1fr 1fr}.metric{border-bottom:1px solid #edf2f5}.table-toolbar{align-items:flex-start;flex-direction:column}.table-toolbar input{width:100%}.event-row{grid-template-columns:1fr;gap:4px}.times{text-align:left}}
.rain-list button{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid #edf2f5;text-align:left;cursor:pointer;color:#38566c}
.rain-list button:last-child{border-bottom:0}.rain-list button:hover{background:#f8fbfc}
.rain-list button span{min-width:0}.rain-list button b{display:block;font-size:12px;color:#294c64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rain-list button span small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.rain-list button strong{font-size:18px;color:var(--navy);white-space:nowrap}.rain-list button strong small{font-size:9px;color:var(--muted)}
.empty{padding:18px 8px;color:var(--muted);font-size:11px;text-align:center}.rr.wet-text{color:var(--blue);font-weight:800}
.event{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid #edf2f5}.event:last-child{border-bottom:0}.event .sev{align-self:start;justify-self:start;border-radius:999px;padding:5px 8px;background:#f3f8fa;color:#60788b;font-size:9px;font-weight:800}.event .sev.error,.event .sev.high{background:#fff0f0;color:#b43a3a}.event .sev.warning,.event .sev.medium{background:#fff8e8;color:#a67717}.event .sev.info,.event .sev.low{background:#edf7fb;color:var(--blue)}.event b{font-size:11px;color:#38566c}.event p{margin:3px 0;color:#60788b;font-size:10px;line-height:1.45}.event small{color:#91a0aa;font-size:9px}
.popup-btn{margin-top:7px;border:0;background:#074a7d;color:#fff;border-radius:8px;padding:6px 9px;font-weight:700;font-size:10px;cursor:pointer}


/* AWS Watch v4.5 - Alarm RR */
.status .alarm-pill{font:inherit;cursor:pointer;border:1px solid #cfdde5;background:#fff;color:#536c7d}
.status .alarm-pill.on{background:#eef8f2;border-color:#badfc8;color:#167341}
.status .alarm-pill.alerting{background:#fff1f1;border-color:#efb8b8;color:#a92323;animation:alarmPulse 1.1s ease-in-out infinite}
@keyframes alarmPulse{50%{box-shadow:0 0 0 5px rgba(201,49,49,.09)}}
.alarm-banner{margin:0 0 16px;background:#fff3f3;border:1px solid #efc0c0;border-left:5px solid #c83232;border-radius:16px;padding:13px 15px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:#812525}
.alarm-banner[hidden]{display:none!important}.alarm-banner strong{display:block;font-size:13px;letter-spacing:.03em}.alarm-banner span{display:block;margin-top:3px;font-size:12px;color:#8d4a4a}
.alarm-modal{position:fixed;inset:0;background:rgba(5,31,49,.62);z-index:2000;display:flex;align-items:center;justify-content:center;padding:18px}
.alarm-modal[hidden]{display:none!important}.alarm-modal-card{width:min(760px,96vw);max-height:94vh;overflow:auto;background:#fff;border:1px solid #dce7ed;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.28);padding:20px}
.alarm-modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.alarm-modal-head h2{margin:3px 0 6px;color:#073f6b;font-size:24px}.alarm-modal-head p{margin:0;color:#667f90;font-size:13px;line-height:1.55}.modal-eyebrow{font-size:10px;font-weight:900;letter-spacing:.13em;color:#5d8199}
.alarm-master{margin-top:17px;background:#f3f8fa;border:1px solid #dce7ed;border-radius:15px;padding:14px;display:flex;justify-content:space-between;gap:15px;align-items:center}.alarm-master b{display:block;color:#143f5b}.alarm-master span{display:block;color:#6e8392;font-size:12px;margin-top:3px}.toggle-line{display:flex;align-items:center;gap:7px;font-weight:800;color:#15445f;white-space:nowrap}.toggle-line input{width:19px;height:19px}
.alarm-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.alarm-field{border:1px solid #dce7ed;border-radius:14px;padding:13px;background:#fff}.alarm-field>span,.alarm-message-field>span{display:block;font-size:11px;font-weight:900;color:#547083;margin-bottom:7px}.alarm-field small{display:block;margin-top:6px;color:#8799a6;font-size:10px}.alarm-field input,.alarm-field select,.alarm-message-field textarea{box-sizing:border-box;width:100%;border:1px solid #cfdde5;border-radius:10px;padding:10px;background:#fff;color:#173e58;font:inherit}.input-unit{display:flex;align-items:center;gap:8px}.input-unit b{font-size:12px;color:#617989}
.alarm-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.alarm-options label{display:flex;gap:9px;align-items:flex-start;border:1px solid #dce7ed;border-radius:13px;padding:11px;background:#f9fbfc}.alarm-options input{margin-top:2px}.alarm-options b{display:block;color:#20475f;font-size:12px}.alarm-options small{display:block;color:#7c909d;font-size:10px;line-height:1.4;margin-top:2px}
.alarm-message-field{display:block;margin-top:12px}.alarm-message-field textarea{resize:vertical;min-height:90px;line-height:1.5}
.token-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}.token-row span{font-size:10px;color:#7c909d}.token-row button{border:1px solid #d4e0e7;background:#f6f9fb;color:#31576f;border-radius:8px;padding:5px 7px;font-size:10px;cursor:pointer}
.alarm-permission-note{min-height:16px;margin-top:8px;color:#8a6a27;font-size:10px}.alarm-modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}
.toast{display:none;position:fixed;z-index:2500;right:18px;bottom:18px;background:#123d5b;color:#fff;padding:10px 14px;border-radius:11px;font-size:12px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.22)}
@media(max-width:760px){.alarm-settings-grid,.alarm-options{grid-template-columns:1fr}.alarm-banner{align-items:flex-start;flex-direction:column}.status{flex-wrap:wrap}}


/* AWS Watch v4.7.0 - Curah Hujan Harian 7 Hari */
.daily-rain-section{border-bottom:1px solid #e7eef2;background:#fbfdfe}
.daily-rain-title{padding-top:15px}
.daily-rain-title>div{display:flex;flex-direction:column;gap:3px}
.daily-rain-title small{font-size:9px;color:var(--muted);font-weight:500}
.daily-rain-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 15px 12px}
.daily-rain-summary>div{background:#fff;border:1px solid #e3ebf0;border-radius:13px;padding:11px 12px;min-height:70px}
.daily-rain-summary span{display:block;font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--muted)}
.daily-rain-summary b{display:block;margin-top:7px;font-size:20px;color:var(--navy)}
.daily-rain-summary small{display:block;margin-top:2px;font-size:9px;color:var(--muted)}
.daily-rain-chart{padding:4px 15px 10px}
.daily-bar-row{display:grid;grid-template-columns:62px minmax(120px,1fr) 130px;gap:10px;align-items:center;min-height:34px;border-top:1px solid #edf2f5}
.daily-bar-row:first-child{border-top:0}
.daily-date{font-size:10px;font-weight:700;color:#496579}
.daily-bar-track{height:12px;border-radius:999px;background:#edf3f6;overflow:hidden;position:relative}
.daily-bar-fill{height:100%;border-radius:999px;min-width:2px}
.daily-bar-fill.wet{background:linear-gradient(90deg,#5ab4dd,#0874aa)}
.daily-bar-fill.zero{background:#a8bac4}
.daily-bar-missing{height:100%;background:repeating-linear-gradient(135deg,#eef2f4,#eef2f4 5px,#e3e9ec 5px,#e3e9ec 10px)}
.daily-bar-value{text-align:right;font-size:11px;font-weight:800;color:var(--navy)}
.daily-bar-value.missing{font-size:9px;font-weight:600;color:#98a6ae}
.daily-rain-note{padding:0 15px 14px;font-size:9px;line-height:1.45;color:var(--muted)}
@media(max-width:720px){
 .daily-rain-summary{grid-template-columns:1fr}
 .daily-bar-row{grid-template-columns:54px 1fr 95px;gap:7px}
 .daily-bar-value.missing{font-size:8px}
}


/* v4.7.1 - explicit 7-day daily rainfall table */
.daily-rain-table-wrap{padding:0 15px 12px;overflow:auto}
.daily-rain-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e2ebf0;border-radius:12px;overflow:hidden}
.daily-rain-table th{background:#f3f8fa;color:#557083;font-size:9px;letter-spacing:.03em;text-align:left;padding:9px 10px}
.daily-rain-table td{border-top:1px solid #edf2f5;padding:9px 10px;font-size:10px;color:#31536a}
.daily-rain-table td:nth-child(2){font-size:11px;color:#073f6b}
.daily-rain-table td:nth-child(3){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;color:#718795}
.missing-text{color:#9aa8b0;font-weight:600}