:root{
  --bg:#04060b; --bg2:#070b14; --panel:#0a1222; --panel2:#0d1730; --navy:#10234d; --navy2:#173170;
  --line:#1a2a4d; --line2:#24396a; --text:#e7eefb; --muted:#8c9bba; --dim:#5e6d8f;
  --ice:#9cc8ff; --accent:#4c8dff; --accent2:#2f6fe8; --snow:#dfe9ff;
  --ok:#3ecf8e; --warn:#ffc53d; --orange:#ff8a3d; --danger:#ff4d5e; --violet:#b48cff;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --head:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.45}
body{background:
  radial-gradient(1200px 500px at 85% -10%, rgba(40,80,170,.22), transparent 60%),
  radial-gradient(900px 400px at -10% 0%, rgba(20,45,110,.25), transparent 60%),
  var(--bg); min-height:100vh}
a{color:var(--ice);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:.02em;margin:0;font-weight:700}
h1{font-size:2.1rem} h2{font-size:1.55rem} h3{font-size:1.2rem} h4{font-size:1.02rem}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:.82rem} .tiny{font-size:.72rem}
.mono{font-family:var(--mono)} .nowrap{white-space:nowrap}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.hidden{display:none!important}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:10px max(18px,env(safe-area-inset-left));
  padding-top:max(10px,env(safe-area-inset-top));background:rgba(4,6,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)} .brand:hover{text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:9px;background:#0b1730;border:1px solid var(--line2)}
.brand b{display:block;font-family:var(--head);font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.brand small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.04em}
.topnav{display:flex;gap:4px;margin-left:8px}
.topnav a{color:var(--muted);padding:7px 12px;border-radius:9px;font-weight:600;font-size:.9rem}
.topnav a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.topnav a.active{color:var(--text);background:var(--navy)}
.topright{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:720px){ .topbar{gap:8px} .topnav{margin-left:0} .topnav a{padding:6px 8px;font-size:.82rem} .brand small{display:none} #updated{display:none} #refreshBtn{padding:6px 9px} }
@media (max-width:480px){ .brand span{display:none} }

.env-banner{margin:12px auto 0;max-width:1320px;padding:10px 14px;border-radius:10px;background:#2a1d05;border:1px solid #6b4a0c;color:#ffd894;font-size:.88rem}
main{max-width:1320px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-left)) 40px;outline:none}
.footer{max-width:1320px;margin:0 auto;padding:22px 18px 40px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

/* ---------- buttons/inputs ---------- */
.btn{appearance:none;border:1px solid var(--line2);background:var(--navy);color:var(--text);padding:8px 14px;border-radius:10px;font:600 .88rem var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--navy2);text-decoration:none}
.btn.ghost{background:transparent} .btn.ghost:hover{background:var(--panel)}
.btn.primary{background:var(--accent2);border-color:var(--accent)} .btn.primary:hover{background:var(--accent)}
.btn.danger{background:#3a0d14;border-color:#7a1d2a;color:#ffc2c8}
.btn.sm{padding:5px 10px;font-size:.8rem;border-radius:8px}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:9px 11px;font:400 .92rem var(--body)}
textarea{min-height:110px;font-family:var(--mono);font-size:.8rem}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:4px;font-weight:600}
.field{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* ---------- panels ---------- */
.panel{background:linear-gradient(180deg,var(--panel),#08101e);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-h h2,.panel-h h3{display:flex;align-items:center;gap:8px}
.section{margin-top:22px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 0 12px;flex-wrap:wrap}
.section-title h2{font-size:1.45rem;text-transform:uppercase;letter-spacing:.06em}
.kicker{font:700 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
.badge{display:inline-flex;align-items:center;gap:5px;font:700 .7rem var(--body);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--muted)}
.badge.live{color:#bff5d9;border-color:#1f6b48;background:#082a1b}
.badge.stale{color:#ffd0d4;border-color:#7a1d2a;background:#2c0a10}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--navy);font-size:.75rem;color:var(--snow)}
.skeleton{background:linear-gradient(90deg,#0d1730 0%,#15244a 50%,#0d1730 100%);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px;min-height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.err{color:#ffb3bb;font-size:.84rem} .note{font-size:.82rem;color:var(--muted)}
.sep{height:1px;background:var(--line);margin:14px 0}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:16px} @media(max-width:900px){.hero{grid-template-columns:1fr}}
.bc-card{position:relative;overflow:hidden;background:
  linear-gradient(180deg,rgba(9,17,36,.2),rgba(4,6,11,.9)),
  linear-gradient(135deg,#0e2250 0%,#060b16 70%);border:1px solid var(--line2)}
.bc-card .mtns{position:absolute;right:-20px;bottom:-10px;width:70%;opacity:.35;pointer-events:none}
.bc-card h2{font-size:2rem;text-transform:uppercase;letter-spacing:.08em}
.avy-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} @media(max-width:560px){.avy-chips{grid-template-columns:1fr}}
.avy-chip{border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.35);border:1px solid var(--line2);display:flex;gap:10px;align-items:center}
.avy-chip .lvl{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font:700 1.25rem var(--head);flex:none}
.avy-chip b{display:block;font-size:.88rem} .avy-chip span{font-size:.76rem;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;align-items:start}
.loc-card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.loc-card .lc-top{display:block;padding:14px 16px;color:var(--text);background:linear-gradient(135deg,#0f2147,#0a1222 70%);border-bottom:1px solid var(--line)}
.loc-card .lc-top:hover{text-decoration:none;background:linear-gradient(135deg,#143066,#0a1222 70%)}
.lc-name{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lc-name h3{font-size:1.45rem;text-transform:uppercase;letter-spacing:.05em}
.lc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stat{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:7px 9px}
.stat .v{font:700 1.25rem var(--head);letter-spacing:.02em} .stat .k{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.lc-alerts{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.lc-alerts .none{font-size:.8rem;color:var(--dim);padding:2px 4px}
.add-card{display:grid;place-items:center;min-height:180px;border:1.5px dashed var(--line2);background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--radius);font-weight:600}
.add-card:hover{color:var(--text);border-color:var(--accent)}

/* ---------- alerts ---------- */
.alert{border-radius:10px;padding:9px 11px;border:1px solid;font-size:.84rem;cursor:pointer}
.alert .a-h{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.alert .a-ev{font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.8rem}
.alert .a-what{margin-top:4px}
.alert .a-more{display:none;margin-top:8px;white-space:pre-wrap;font-size:.8rem;line-height:1.5}
.alert.open .a-more{display:block}
.alert.warning{background:#2a070c;border-color:#8a1c2b;color:#ffd5d9} .alert.warning .a-ev{color:#ff7b88}
.alert.watch{background:#2a1606;border-color:#8a4a12;color:#ffe2c7} .alert.watch .a-ev{color:#ffa860}
.alert.advisory{background:#262005;border-color:#7a6512;color:#fff1bf} .alert.advisory .a-ev{color:#ffd54d}
.alert.statement{background:#091a33;border-color:#24477f;color:#d6e6ff} .alert.statement .a-ev{color:#8fbaff}
.alert.avy{background:#2a0712;border-color:#a3163a;color:#ffd1dc} .alert.avy .a-ev{color:#ff6f91}
.alert-banner{display:flex;flex-direction:column;gap:8px;margin:14px 0}

/* ---------- location page ---------- */
.loc-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.loc-head h1{font-size:2.6rem;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:6px}
.tabs{display:inline-flex;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:3px;flex-wrap:wrap}
.tabs button{background:transparent;border:0;color:var(--muted);padding:6px 12px;border-radius:8px;font:600 .84rem var(--body);cursor:pointer}
.tabs button.on{background:var(--navy2);color:var(--text)}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:820px){.summary-grid{grid-template-columns:1fr}}
.day-card h3{font-size:1.35rem;text-transform:uppercase;letter-spacing:.06em}
.day-card .big{font:700 2.6rem/1 var(--head);color:var(--snow)} .day-card .big small{font-size:1rem;color:var(--muted);font-weight:600;margin-left:4px}
.day-card .nws{margin-top:10px;font-size:.88rem;color:#cfdaf0}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.fact{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.fact .k{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .fact .v{font-weight:700;font-size:.98rem;margin-top:2px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
table.data th,table.data td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.data th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;background:#08101e;position:sticky;top:0}
table.data td.num{font-family:var(--mono);font-size:.82rem}
table.data tr.dayrow td{background:#0b1630;font:700 .8rem var(--body);color:var(--ice);text-transform:uppercase;letter-spacing:.1em}
.snowval{font-weight:700;color:var(--snow)}
.slr{font-family:var(--mono);font-size:.8rem}
.cond-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.obs{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px}
.obs h4{font-size:1rem;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.obs .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin-top:8px;font-size:.84rem}
.obs .kv span:nth-child(odd){color:var(--muted)} .obs .kv span:nth-child(even){font-weight:600;text-align:right}
.chart{width:100%;height:auto;display:block}
.compass{width:120px;height:120px;flex:none}
.wind-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* ---------- avalanche ---------- */
.danger-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:900px){.danger-cards{grid-template-columns:1fr}}
.dcard{border-radius:var(--radius);border:1px solid var(--line2);background:var(--panel);overflow:hidden}
.dcard .dtop{padding:14px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.dcard .dtop h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:.05em}
.dlevel{white-space:nowrap;font:700 1.05rem var(--head);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:9px}
.bands{padding:0 16px 14px;display:flex;flex-direction:column;gap:6px}
.band{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:center;font-size:.8rem}
.band .lbl{color:var(--muted)}
.band .cell{padding:5px 8px;border-radius:7px;font-weight:700;text-align:center;font-size:.76rem}
.dfoot{padding:10px 16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.problem{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
@media(max-width:640px){.problem{grid-template-columns:1fr}}
.problem h4{font-size:1.2rem;text-transform:uppercase}
.rose{width:140px;height:140px}
.richtext{font-size:.92rem;line-height:1.6;color:#d8e2f5}
.richtext p{margin:.5em 0} .richtext img{max-width:100%;border-radius:8px}
.expired{background:#3a0710;border:2px solid #ff4d5e;color:#ffd5d9;border-radius:12px;padding:12px 14px;font-weight:700}
.safety{background:linear-gradient(90deg,#2a0711,#130a1d);border:1px solid #7a1d38;border-radius:12px;padding:12px 16px;color:#ffd9e1;font-size:.88rem}
.zone-tabs{margin:10px 0 14px}

/* ---------- webcams ---------- */
.cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cam{background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.cam .media{aspect-ratio:16/9;width:100%;display:block;object-fit:cover;background:#05080f;border:0}
.cam .cap{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 10px;font-size:.78rem;background:#070c18;border-top:1px solid var(--line)}
.cam .cap b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam .fail{aspect-ratio:16/9;display:grid;place-items:center;color:var(--dim);font-size:.8rem;text-align:center;padding:10px}
.cam .zoom{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);border:1px solid var(--line2);color:var(--text);border-radius:7px;padding:2px 7px;font-size:.75rem;cursor:pointer}

/* ---------- roads ---------- */
.road{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg2)}
.road h4{font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em}
.road-items{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ritem{font-size:.84rem;padding:7px 10px;border-radius:8px;background:#0b1428;border-left:3px solid var(--accent)}
.ritem.bad{border-left-color:var(--danger)} .ritem.mid{border-left-color:var(--warn)} .ritem.good{border-left-color:var(--ok)}

/* ---------- library ---------- */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.vid{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative}
.vid button.play{display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;position:relative}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.92}
.vid button.play:hover img{opacity:1}
.vid .pl{position:absolute;inset:0;display:grid;place-items:center}
.vid .pl span{width:54px;height:38px;border-radius:10px;background:rgba(16,35,77,.9);display:grid;place-items:center;border:1px solid #3a5aa0;font-size:1rem}
.vid .t{padding:9px 11px;font-size:.84rem;font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.vid .rm{background:none;border:0;color:var(--dim);cursor:pointer;font-size:.9rem} .vid .rm:hover{color:var(--danger)}

/* ---------- modal/toast ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(1100px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.modal-close{position:absolute;top:8px;right:10px;background:var(--navy);border:1px solid var(--line2);color:var(--text);border-radius:8px;width:32px;height:32px;cursor:pointer;z-index:2}
.modal-body img{max-width:100%;display:block;margin:0 auto;border-radius:10px}
.ratio{position:relative;aspect-ratio:16/9;width:100%} .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--navy2);border:1px solid var(--accent);padding:10px 16px;border-radius:10px;z-index:60;font-size:.88rem;box-shadow:var(--shadow);max-width:92vw}

/* ---------- manage ---------- */
.mlist{display:flex;flex-direction:column;gap:8px}
.mitem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim)} .status-dot.on{background:var(--ok)} .status-dot.off{background:var(--danger)}
details.disc{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:0}
details.disc summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
details.disc summary::-webkit-details-marker{display:none}
details.disc pre{margin:0;padding:0 14px 14px;white-space:pre-wrap;font:400 .8rem/1.55 var(--mono);color:#cbd6ee}