:root {
    --orange: #f37021;
    --deep: #253746;
    --sky: #1f9bd1;
    --mint: #29a87d;
    --paper: #f7fafc;
    --line: #d9e2ea;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, "Noto Sans Thai", sans-serif; color: var(--deep); background: var(--paper); }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--deep); text-decoration: none; font-weight: 700; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand span { line-height: 1.35; }
.menu-button { display: block; border: 1px solid var(--line); background: white; color: var(--deep); width: 42px; height: 42px; padding: 0; font-size: 24px; line-height: 1; border-radius: 8px; }
.menu-button:hover, .menu-button[aria-expanded="true"] { background: #eef6fb; }
.nav { display: none; position: absolute; top: calc(100% + 8px); right: 24px; z-index: 1000; width: min(260px, calc(100vw - 32px)); flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(37,55,70,.18); }
.nav.is-open { display: flex; }
.nav a { padding: 10px 12px; color: var(--deep); text-decoration: none; border-radius: 8px; }
.nav a:hover { background: #eef6fb; }
.page { max-width: 1280px; margin: 0 auto; padding: 24px; }
.site-footer { margin-top: 32px; padding: 24px; color: #536574; background: #fff; border-top: 1px solid var(--line); text-align: center; font-size: 14px; line-height: 1.6; }
.site-footer p { margin: 0; }
.site-footer p:first-child { color: var(--deep); font-weight: 700; }
.flash { margin-bottom: 16px; padding: 12px 14px; border-left: 4px solid var(--orange); background: #fff7ed; }
.hero { display: flex; align-items: end; min-height: 180px; margin-bottom: 20px; padding: 28px; color: white; background: linear-gradient(135deg, var(--deep), var(--sky) 58%, var(--orange)); border-radius: 8px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 46px); letter-spacing: 0; }
.hero p { margin: 0; max-width: 720px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.station-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-width: 0; }
.station-card.is-critical { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.08); }
.card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head h2 { margin: 0; font-size: 20px; }
.card-head p { margin: 4px 0 0; color: #607080; line-height: 1.35; }
.card-head strong { font-size: 28px; white-space: nowrap; }
.level-value.is-normal { color: #16a34a; }
.level-value.is-warning { color: #ca8a04; }
.level-value.is-critical { color: #dc2626; }
.chart-frame { position: relative; width: 100%; height: 220px; }
.level-chart { display: block; width: 100% !important; height: 100% !important; }
.panel, .form-panel { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
#map { width: 100%; height: min(70vh, 680px); border-radius: 8px; border: 1px solid var(--line); }
.water-level-marker-wrap { background: transparent; border: 0; }
.water-level-marker { display: block; width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 2px 7px rgba(37,55,70,.38); transform: rotate(-45deg); }
.water-level-marker.is-normal, .map-legend .is-normal { background: #16a34a; }
.water-level-marker.is-warning, .map-legend .is-warning { background: #eab308; }
.water-level-marker.is-critical, .map-legend .is-critical { background: #dc2626; }
.map-legend { display: grid; gap: 7px; padding: 10px 12px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(37,55,70,.16); }
.map-legend span { display: flex; align-items: center; gap: 8px; }
.map-legend i { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(37,55,70,.18); }
.form-panel { max-width: 520px; margin: 0 auto; }
.form-panel.wide { max-width: none; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 700; }
input, select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 11px 16px; background: var(--orange); color: white; font-weight: 700; }
.admin-settings { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1.5fr); gap: 20px; align-items: start; }
.admin-map-panel { position: sticky; top: 88px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.admin-map-panel h1 { margin: 0; }
.admin-map-panel p { margin: 8px 0 16px; color: #607080; }
#admin-map { width: 100%; height: min(65vh, 620px); min-height: 420px; border: 1px solid var(--line); border-radius: 8px; }
.station-settings { display: grid; gap: 12px; }
.setting-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.setting-row.is-map-active { border-color: var(--sky); box-shadow: 0 0 0 2px rgba(31,155,209,.12); }
.station-identity { grid-column: 1 / -1; display: grid; gap: 4px; }
.station-identity span { color: #607080; }
.setting-row label { font-size: 13px; }
.setting-row input[readonly] { background: #f2f6f8; color: #52616d; }
.map-select-button { background: var(--sky); }
@media (max-width: 820px) {
    .topbar { padding: 10px 16px; }
    .brand { min-width: 0; font-size: 13px; }
    .brand img { flex: 0 0 auto; width: 38px; height: 38px; }
    .brand span { overflow-wrap: anywhere; }
    .menu-button { flex: 0 0 auto; }
    .nav { top: 100%; left: 16px; right: 16px; width: auto; }
    .page { padding: 16px; }
    .admin-settings { grid-template-columns: 1fr; }
    .admin-map-panel { position: static; }
    #admin-map { height: 52vh; min-height: 320px; }
    .setting-row { grid-template-columns: 1fr; }
    .station-identity { grid-column: auto; }
}