:root{
  --void:#0A1120; --panel:#111B2E; --panel-2:#0D1626; --line:#22304A; --line-bright:#324563;
  --text:#E9EEF7; --text-dim:#8CA0BE; --text-faint:#516281;
  --rain:#4FA8E0; --rain-dim:#2C4C68; --alert:#E0A64F; --danger:#E0574F; --ok:#4FC98A;
  --mono:'IBM Plex Mono', monospace; --sans:'IBM Plex Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(79,168,224,0.08), transparent), var(--void); color:var(--text); font-family:var(--sans); min-height:100vh;}
a{color:var(--rain); text-decoration:none;}
.app{max-width:1080px; margin:0 auto; padding:28px 20px 100px;}

header.top{display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap; gap:12px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand-mark{width:34px; height:34px; border:1px solid var(--rain); border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; color:var(--rain); font-size:12px;}
.brand-name{font-weight:600; font-size:16px;}
.brand-sub{font-family:var(--mono); font-size:10px; color:var(--text-faint); letter-spacing:0.09em; text-transform:uppercase;}
.nav-links{display:flex; gap:18px; align-items:center; font-family:var(--mono); font-size:12.5px;}
.nav-links a{color:var(--text-dim);}
.nav-links a:hover{color:var(--rain);}
.signout-btn{background:none; border:1px solid var(--line-bright); color:var(--text-dim); font-family:var(--mono); font-size:11.5px; padding:6px 12px; border-radius:6px; cursor:pointer;}
.signout-btn:hover{border-color:var(--danger); color:var(--danger);}

.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px 26px; margin-bottom:18px;}
.card h2{font-size:16px; margin-bottom:4px;}
.card .sub{color:var(--text-dim); font-size:13px; margin-bottom:16px; line-height:1.5;}

.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--mono); font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px;}
.field input, .field select{width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text); font-family:var(--sans); font-size:13.5px; padding:11px 13px; border-radius:6px;}
.field input:focus, .field select:focus{outline:none; border-color:var(--rain);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

button.btn{font-family:var(--sans); font-size:13.5px; font-weight:600; padding:11px 20px; border-radius:6px; border:1px solid var(--line-bright); background:transparent; color:var(--text); cursor:pointer;}
button.btn.primary{background:var(--rain); border-color:var(--rain); color:#06131F;}
button.btn.primary:hover{filter:brightness(1.08);}
button.btn.ghost{color:var(--text-dim);}
button.btn:disabled{opacity:0.4; cursor:default;}

.hint{font-size:11.5px; color:var(--text-faint); margin-top:6px; line-height:1.5;}
.err{color:var(--danger);}
.ok-msg{color:var(--ok);}

.day-strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;}
.day-cell{flex:0 0 100px; border-radius:8px; padding:12px 10px; text-align:center; border:1px solid var(--line); cursor:pointer;}
.day-cell.red{background:rgba(224,87,80,0.12); border-color:var(--danger);}
.day-cell.yellow{background:rgba(224,166,79,0.12); border-color:var(--alert);}
.day-cell.green{background:rgba(79,201,138,0.08); border-color:var(--ok);}
.day-cell .dc-date{font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-bottom:6px;}
.day-cell .dc-tag{font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; margin-bottom:4px;}
.day-cell.red .dc-tag{color:var(--danger);} .day-cell.yellow .dc-tag{color:var(--alert);} .day-cell.green .dc-tag{color:var(--ok);}
.day-cell .dc-amt{font-family:var(--mono); font-size:12.5px; color:var(--text);}

.legend{display:flex; gap:18px; flex-wrap:wrap; margin:12px 0 18px; font-size:11.5px; color:var(--text-dim); font-family:var(--mono);}
.legend-dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}

.station-card{border:1px solid var(--line-bright); border-radius:8px; padding:14px 16px; margin-bottom:10px; background:var(--panel-2);}
.station-card .sc-name{font-family:var(--mono); font-weight:600; font-size:13px; color:var(--rain);}
.station-card .sc-dist{font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-top:4px;}
.badge-warn{display:inline-block; font-family:var(--mono); font-size:10px; color:var(--alert); border:1px solid var(--alert); padding:2px 8px; border-radius:10px; margin-left:8px;}

.facility-row{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:10px; background:var(--panel-2); cursor:pointer; transition:border-color .15s;}
.facility-row:hover{border-color:var(--rain);}
.facility-row .fr-name{font-weight:600; font-size:13.5px;}
.facility-row .fr-meta{font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:3px;}

.metric-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 18px;}
.metric .m-label{font-family:var(--mono); font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;}
.metric .m-value{font-family:var(--mono); font-size:20px; font-weight:600; color:var(--rain);}

.qse-log-item{display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:10px 0; font-size:12.5px;}
.qse-log-item:last-child{border-bottom:none;}

.loading-text{font-family:var(--mono); font-size:12.5px; color:var(--text-faint); padding:20px 0; text-align:center;}

/* Demo/placeholder-data flag — consistent hover indicator used wherever data is not yet real */
.demo-flag{color:var(--danger); cursor:help; margin-left:6px; font-size:13px; user-select:none;}

.back-btn{font-family:var(--mono); font-size:11px; color:var(--text-dim); background:transparent; border:1px solid var(--line-bright); border-radius:6px; padding:7px 14px; cursor:pointer; margin-bottom:16px; display:inline-block;}
.back-btn:hover{border-color:var(--rain); color:var(--rain);}

.field input:disabled, .field select:disabled{opacity:0.55; cursor:not-allowed; background:var(--panel);}
.section-actions{display:flex; justify-content:flex-end; margin-bottom:14px;}
.btn.small{padding:6px 14px; font-size:12px;}

.mini-week{display:flex; gap:3px; margin-top:8px;}
.mini-day{width:15px; height:15px; border-radius:3px; flex-shrink:0;}
.mini-day.red{background:var(--danger);}
.mini-day.yellow{background:var(--alert);}
.mini-day.green{background:rgba(79,201,138,0.35);}

@media (max-width:720px){ .metric-strip{grid-template-columns:repeat(2,1fr);} .field-row{grid-template-columns:1fr;} }