:root { color-scheme: light; --bg:#f6f1e4; --panel:#fffdf7; --line:#ddd4bd; --text:#273a2b; --muted:#718073; --accent:#d99632; --accent-dark:#35543b; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
html { width:100%; max-width:100%; overflow-x:hidden; }
body { width:100%; max-width:100%; margin:0; min-height:100dvh; overflow-x:hidden; background:radial-gradient(circle at 85% -10%,#f0cf87 0,transparent 34%),linear-gradient(180deg,#fbf8ef,var(--bg)); color:var(--text); }
button,input { font:inherit; }
.hidden { display:none!important; }
.loading-shell { min-height:100dvh; display:grid; place-items:center; }
.loading-shell img { width:72px; height:72px; animation:loading-pulse 1.2s ease-in-out infinite; }
@keyframes loading-pulse { 0%,100% { opacity:.72; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }
.eyebrow { margin:0 0 .35rem; color:#a96118; text-transform:uppercase; font-size:.7rem; font-weight:800; letter-spacing:.15em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.04em; } h2 { margin:0; font-size:1.6rem; }
.muted { color:var(--muted); }
.login-shell { min-height:100dvh; display:grid; place-items:center; padding:1.25rem; }
.login-card { width:min(100%,390px); padding:2rem; border:1px solid var(--line); border-radius:24px; background:#fffdf7eF; box-shadow:0 25px 80px #4a3a1a24; backdrop-filter:blur(15px); }
.brand-mark { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 1.75rem; }
.brand-mark img { display:block; width:100%; height:100%; }
label { display:grid; gap:.5rem; margin:1rem 0; color:#4e6253; font-size:.85rem; font-weight:700; }
input { width:100%; padding:.9rem 1rem; color:var(--text); border:1px solid var(--line); border-radius:12px; outline:none; background:#fff; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #d9963228; }
.login-card button { width:100%; margin-top:.5rem; padding:.95rem; border:0; border-radius:12px; background:var(--accent-dark); color:#fff; font-weight:850; cursor:pointer; }
.error { min-height:1.25rem; margin:.3rem 0; color:#ff9b8f; font-size:.85rem; }
header { width:100%; max-width:100%; min-height:98px; padding:1.35rem max(1.25rem,calc((100% - 1280px)/2)); display:flex; justify-content:space-between; align-items:center; gap:1rem; border-bottom:1px solid var(--line); background:#fffdf7d9; backdrop-filter:blur(18px); position:sticky; top:0; z-index:5; }
header>div,.header-actions,.weather { min-width:0; }
.header-actions,.weather { display:flex; align-items:center; gap:1rem; }
.weather { padding:.7rem 1rem; border:1px solid var(--line); border-radius:15px; background:var(--panel); position:relative; }
.weather span { display:grid; }.weather b { font-size:1.05rem; }.weather small { color:var(--muted); font-size:.63rem; }.weather i { width:1px; height:30px; background:var(--line); }
.weather em { width:8px; height:8px; border-radius:50%; background:#a8aea9; position:absolute; right:7px; top:7px; }.weather em.online { background:#5f9b56; box-shadow:0 0 7px #73b968; }
.icon-button { width:43px; height:43px; border:1px solid var(--line); border-radius:13px; background:var(--panel); color:var(--text); font-size:1.4rem; cursor:pointer; }
.content { width:min(1280px,100%); max-width:100%; margin:auto; padding:2.2rem 1.25rem 4rem; overflow:hidden; }
.section-title { min-height:1.25rem; display:flex; justify-content:flex-end; align-items:center; margin-bottom:.75rem; }.section-title>span { color:var(--muted); font-size:.85rem; }
.camera-grid { width:100%; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:1rem; }
.camera { width:100%; min-width:0; padding:0; overflow:hidden; text-align:left; color:var(--text); border:1px solid var(--line); border-radius:18px; background:var(--panel); cursor:pointer; transition:transform .18s,border-color .18s; }
.camera:hover { transform:translateY(-2px); border-color:#9eaa8e; box-shadow:0 12px 28px #54451d18; }.camera:focus-visible { outline:3px solid var(--accent); }
.preview { position:relative; aspect-ratio:16/9; background:#080d0b; overflow:hidden; }.preview img { width:100%; height:100%; display:block; object-fit:cover; }.preview::after { content:'LIVE'; position:absolute; top:.75rem; left:.75rem; padding:.28rem .48rem; border-radius:6px; background:#111b; color:#fff; font-size:.61rem; font-weight:900; letter-spacing:.1em; }
.camera-meta { min-width:0; padding:1rem 1.1rem; display:flex; justify-content:space-between; align-items:center; gap:.75rem; }.camera-meta strong { min-width:0; font-size:1rem; }.camera-meta span { flex:0 1 auto; min-width:0; color:var(--muted); font-size:.75rem; text-align:right; }
dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#101411; color:#fff; box-shadow:none; overflow:hidden; } dialog[open] { display:flex; flex-direction:column; } dialog::backdrop { background:#101411; }.dialog-head { flex:0 0 64px; padding:env(safe-area-inset-top) max(1rem,env(safe-area-inset-right)) 0 max(1.25rem,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; background:#172019; }.dialog-head h2 { font-size:1.15rem; margin:0; }.dialog-head .icon-button { color:#fff; border-color:#526057; background:#263129; } iframe { display:block; flex:1 1 auto; width:100%; min-height:0; border:0; background:#000; }
@media (max-width:600px) {
  header { min-height:0; padding:1rem; flex-direction:column; align-items:stretch; gap:.85rem; }
  header h1 { font-size:1.65rem; }
  .header-actions { width:100%; justify-content:space-between; gap:.6rem; }
  .weather { flex:1 1 auto; width:auto; justify-content:space-around; padding:.6rem .8rem; gap:.65rem; }
  .weather span { min-width:0; }
  .weather b { font-size:1rem; white-space:nowrap; }
  .weather small { display:block; font-size:.58rem; }
  .weather i { height:28px; }
  .icon-button { flex:0 0 43px; }
  .content { padding:1.5rem .85rem 4rem; }
  .camera-grid { grid-template-columns:minmax(0,1fr); }
  .camera-meta { padding:.9rem; }
  .camera-meta strong { font-size:.95rem; }
  .camera-meta span { max-width:55%; font-size:.7rem; }
  .dialog-head { flex-basis:calc(56px + env(safe-area-inset-top)); }
}
@media (display-mode:standalone) { header { padding-top:max(1.35rem,env(safe-area-inset-top)); } }
@media (prefers-reduced-motion:reduce) { .loading-shell img { animation:none; } }