* { box-sizing: border-box; }

:root {
  --radius: 18px;
  --max-width: 1180px;
  --shadow: 0 14px 32px rgba(18, 32, 51, 0.08);
}

body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.6;
  transition: background 0.35s ease, color 0.35s ease;
}

body.theme-day {
  --bg: #f3f7fc;
  --bg-soft: #fbfdff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text: #142033;
  --muted: #617085;
  --primary: #1d4ed8;
  --primary-dark: #183fb0;
  --border: #d8e0ea;
  --success-bg: #edf9f1;
  --success-text: #16613a;
  --error-bg: #fff1f1;
  --error-text: #9f1d1d;
  --badge-bg: #eaf1ff;
  --badge-text: #1d4ed8;
  --frame-border: #ccd6e2;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  color: var(--text);
}

body.theme-night {
  --bg: #12161c;
  --bg-soft: #171d25;
  --surface: #1d2430;
  --surface-soft: #232c3a;
  --text: #e5ebf2;
  --muted: #a2afbf;
  --primary: #7f93b8;
  --primary-dark: #6d82aa;
  --border: #303a49;
  --success-bg: #1d3328;
  --success-text: #9bd3ad;
  --error-bg: #3a2226;
  --error-text: #f1a5ae;
  --badge-bg: rgba(183,155,122,0.14);
  --badge-text: #d5bea2;
  --frame-border: #3a4350;
  background:
    radial-gradient(circle at top left, rgba(183,155,122,0.08) 0%, transparent 28%),
    radial-gradient(circle at top right, rgba(127,147,184,0.08) 0%, transparent 24%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  color: var(--text);
}

a { color: var(--primary); }
.page { width: min(var(--max-width), calc(100% - 24px)); margin: 0 auto; padding: 18px 0 48px; }
.menu, .hero, .card, .stat-card, .donate-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; margin-bottom:18px; position:sticky; top:10px; z-index:10; }
.brand { display:flex; flex-direction:column; gap:2px; }
.brand strong { font-size:1rem; }
.brand span { font-size:.87rem; color:var(--muted); }
.menu-links { display:flex; flex-wrap:wrap; gap:10px; }
.menu-links a { text-decoration:none; padding:10px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface-soft); color:var(--text); font-weight:700; font-size:.94rem; }
.menu-links a.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.hero { padding:28px; text-align:center; margin-bottom:18px; }
.badge { display:inline-block; padding:8px 14px; border-radius:999px; background:var(--badge-bg); color:var(--badge-text); font-size:.9rem; font-weight:800; margin-bottom:12px; }
h1,h2,h3 { margin-top:0; color:var(--text); }
h1 { margin-bottom:10px; font-size:clamp(2rem,4vw,3.1rem); line-height:1.08; letter-spacing:-.02em; }
.hero p { margin:0 auto; max-width:760px; color:var(--muted); font-size:1.02rem; }
.card { padding:22px; margin-bottom:18px; }
.card-subtitle { margin-top:-6px; margin-bottom:16px; color:var(--muted); }
.live-stage,.timelapse-stage { padding:12px; border-radius:16px; background:var(--surface-soft); border:1px solid var(--border); }
.live-frame,.timelapse-frame { overflow:hidden; border-radius:14px; background:#000; border:1px solid var(--frame-border); }
.live-frame { aspect-ratio:4/3; }
.timelapse-frame { aspect-ratio:16/9; }
.live-frame iframe,.timelapse-frame iframe { width:100%; height:100%; border:0; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.stat-card { padding:20px; }
.stat-label { color:var(--muted); font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.stat-value { font-size:clamp(1.65rem,3vw,2.3rem); font-weight:800; color:var(--primary); }
.guestbook-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.legal-list { margin:0; padding-left:18px; color:var(--muted); }
.legal-list li { margin-bottom:10px; }
form { display:grid; gap:14px; }
label { display:block; margin-bottom:6px; font-weight:700; color:var(--text); font-size:.95rem; }
input, textarea { width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:12px; font:inherit; color:var(--text); background:var(--surface-soft); }
textarea { min-height:150px; resize:vertical; }
button, .button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:0; border-radius:12px; padding:14px 18px; background:var(--primary); color:#fff; font-size:1rem; font-weight:700; cursor:pointer; }
button:hover, .button-link:hover { background:var(--primary-dark); }
.flash { padding:12px 14px; border-radius:12px; margin-bottom:14px; font-weight:700; }
.flash.success { background:var(--success-bg); color:var(--success-text); }
.flash.error { background:var(--error-bg); color:var(--error-text); }
.entries { display:grid; gap:14px; max-height:560px; overflow:auto; padding-right:4px; }
.entry { padding:15px; border-radius:14px; border:1px solid var(--border); background:var(--surface-soft); }
.entry-name { font-weight:800; margin-bottom:6px; }
.entry-date { margin-top:8px; color:var(--muted); font-size:.92rem; }
.info-box,.donate-box { padding:18px; }
.info-box { background:var(--surface-soft); border:1px solid var(--border); border-radius:14px; color:var(--muted); margin:16px 0; }
.donate-box { text-align:center; }
.donate-box p { margin:0 auto 16px; max-width:680px; color:var(--muted); }
.footer { text-align:center; color:var(--muted); font-size:.94rem; margin-top:24px; }
.donate-box.hidden { display:none; }
.map-card { text-align:center; }
.map-legend { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:10px; margin-top:18px; text-align:left; }
.map-legend-item { background:var(--surface-soft); border:1px solid var(--border); border-radius:12px; padding:10px 12px; color:var(--muted); font-size:.95rem; }
.map-legend-item strong { color:var(--text); display:block; margin-bottom:2px; }
.osm-map-wrap { display:flex; justify-content:center; margin:18px 0 8px; }
#osmMap { width:min(100%,920px); height:560px; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.osm-note { color:var(--muted); font-size:.95rem; margin-top:12px; text-align:center; }
.leaflet-container { background:#dbeafe; }
.leaflet-popup-content { line-height:1.45; }
.language-switch { margin-left:auto; }
.location-video-card { text-align:center; }
.location-video-wrap { display:flex; justify-content:center; margin:18px 0 8px; }
.location-video-player { width:min(100%,960px); border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#000; }
.location-video-player video { display:block; width:100%; height:auto; background:#000; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.admin-link { text-decoration:none; font-weight:700; }
.inline-form { margin:0; }
.admin-login-form { max-width:420px; }
.admin-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.admin-card { margin-bottom:0; }
.admin-entries { max-height:640px; }
.admin-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.status-badge { display:inline-block; margin-top:12px; padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700; }
.status-badge.pending { background:#fef3c7; color:#92400e; }
.status-badge.published { background:#dcfce7; color:#166534; }
.delete-button { background:#b91c1c; }
.delete-button:hover { background:#991b1b; }
@media (max-width:900px){ .stats,.guestbook-grid,.admin-columns{grid-template-columns:1fr;} .menu{flex-direction:column; align-items:flex-start;} .language-switch{margin-left:0;} }
@media (max-width:700px){ #osmMap{height:420px;} .map-legend{grid-template-columns:1fr;} .admin-header{align-items:flex-start; flex-direction:column;} .location-video-player{border-radius:14px;} }


.weather-card .stats {
  margin-bottom: 0;
}

.weather-card .stats + .stats {
  margin-top: 16px;
}

.weather-condition,
.weather-updated {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}


.weather-symbol-card {
  text-align: center;
}

.weather-symbol {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 10px;
}


.weather-content.hidden,
.info-box.hidden {
  display: none;
}


.admin-link-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-counter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

.admin-counter-form {
  max-width: none;
}

@media (max-width: 900px) {
  .admin-counter-grid {
    grid-template-columns: 1fr;
  }
}