:root {
    --bg: #f7f7f5; --panel: #fff; --border: #e3e3e0;
    --text: #1a1a1a; --muted: #6b6b66;
    --accent: #2a6dd8; --accent-hover: #1f56b0;
    --warn-bg:#fff8e1; --warn-text:#7c5e00;
    --error-bg:#fce4ec; --error-text:#b71c1c;
    --info-bg:#e3f2fd; --info-text:#0d47a1;
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); }
body { display:flex; }

/* ---- Sidebar ---- */
#sidebar {
    width:340px; height:100vh; background:var(--panel);
    border-right:1px solid var(--border); overflow-y:auto;
    display:flex; flex-direction:column; gap:12px; padding:16px;
    box-shadow:var(--shadow); z-index:1;
}
#sidebar header { margin-bottom:4px; }

.header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-bottom:6px; }
#sidebar h1 { font-size:16px; font-weight:700; line-height:1.3; flex:1; }
.header-actions { display:flex; gap:4px; flex-shrink:0; }

.header-actions button {
    width:28px; height:28px; border-radius:50%;
    background:var(--bg); border:1px solid var(--border);
    font-size:13px; cursor:pointer; color:var(--muted);
    display:flex; align-items:center; justify-content:center;
    transition:background .1s,color .1s,border-color .1s;
}
.header-actions button:hover { background:#f0f6ff; color:var(--accent); border-color:#b0c8f8; }
.header-actions button:disabled { opacity:.4; cursor:not-allowed; }
.lang-btn { font-size:11px; font-weight:700; letter-spacing:.04em; }
#locate-btn.locating svg { animation:spin 1s linear infinite; }

.subtitle { font-size:12px; color:var(--muted); line-height:1.5; }
.subtitle-hint { font-size:11px; opacity:.8; }
#coverage-label { font-weight:500; color:var(--text); }
.locate-error { margin-top:6px; font-size:11px; color:#c0392b; line-height:1.4; }
.share-toast { margin-top:4px; font-size:11px; color:#2e7d32; font-weight:500; }

/* ---- Legend ---- */
#legend-panel { border-color:#d0e4fd; }
.legend-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.legend-close { background:transparent; border:none; font-size:18px; cursor:pointer; color:var(--muted); line-height:1; }
.legend-close:hover { color:var(--text); }
.legend-section { margin-bottom:12px; }
.legend-section:last-child { margin-bottom:0; }
.legend-title { font-size:11px; font-weight:700; color:var(--accent); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.legend-text { font-size:12px; color:var(--muted); line-height:1.5; }
.legend-text + .legend-text { margin-top:4px; }
.legend-text strong { color:var(--text); }
.legend-text em { font-style:normal; font-weight:500; color:var(--text); }
.freq-legend-row { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); margin-bottom:3px; }
.freq-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.legend-palette-row { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.legend-palette-swatch { width:28px; height:8px; border-radius:4px; }
.legend-gradient { margin-top:6px; }
.gradient-bar { height:10px; border-radius:5px; background:linear-gradient(to right,#2EAE64,#8FC649,#FCC419,#FB8500,#C71F37); margin-bottom:4px; }
.gradient-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); }

/* ---- Cards ---- */
.card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; }
.card-label { font-size:13px; font-weight:500; margin-bottom:8px; }
.card label { display:block; font-size:13px; font-weight:500; margin-bottom:8px; }
.card input[type="range"] { width:100%; accent-color:var(--accent); }
.card input[type="time"] { width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px; font-size:14px; background:var(--bg); color:var(--text); }
.checkbox-label { display:flex !important; align-items:flex-start; gap:7px; font-size:12px !important; font-weight:400 !important; color:var(--muted); cursor:pointer; line-height:1.4; margin-bottom:0 !important; }
.checkbox-label input { flex-shrink:0; margin-top:2px; accent-color:var(--accent); }
.hint { font-size:11px; color:var(--muted); margin-top:4px; font-style:italic; line-height:1.4; }

/* ---- Search ---- */
.search-card { padding:8px 10px; position:relative; }
.search-wrap { display:flex; align-items:center; gap:4px; }
#search-input {
    flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:6px;
    font-size:13px; background:var(--bg); color:var(--text); outline:none;
}
#search-input:focus { border-color:var(--accent); }
.search-clear { background:transparent; border:none; font-size:16px; color:var(--muted); cursor:pointer; padding:0 2px; line-height:1; }
.search-clear:hover { color:var(--text); }
.search-results {
    position:absolute; left:0; right:0; top:100%; z-index:20;
    background:var(--panel); border:1px solid var(--border); border-top:none;
    border-radius:0 0 8px 8px; box-shadow:0 4px 12px rgba(0,0,0,.12);
    max-height:260px; overflow-y:auto;
}
.search-item { padding:8px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); }
.search-item:last-child { border-bottom:none; }
.search-item:hover { background:#f0f6ff; }
.search-empty { color:var(--muted); font-style:italic; cursor:default; }

/* ---- Origins ---- */
#origins-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.origin-chip { display:flex; align-items:flex-start; gap:8px; padding:7px 8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; font-size:13px; }
.origin-dot { flex-shrink:0; width:10px; height:10px; border-radius:50%; margin-top:3px; }
.origin-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.origin-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.origin-warn { font-size:11px; line-height:1.3; border-radius:4px; padding:2px 5px; }
.origin-warn.level-info  { background:var(--info-bg);  color:var(--info-text); }
.origin-warn.level-warn  { background:var(--warn-bg);  color:var(--warn-text); }
.origin-warn.level-error { background:var(--error-bg); color:var(--error-text); }
.origin-loading { font-size:12px; color:var(--muted); animation:spin 1s linear infinite; flex-shrink:0; margin-top:2px; }
.origin-remove { background:transparent; border:none; font-size:16px; cursor:pointer; color:var(--muted); padding:0 2px; line-height:1; flex-shrink:0; }
.origin-remove:hover { color:var(--text); }
.btn-add { width:100%; padding:7px 10px; background:transparent; border:1px dashed var(--accent); border-radius:6px; color:var(--accent); font-size:13px; cursor:pointer; text-align:center; margin-top:4px; }
.btn-add:hover { background:#f0f6ff; }
.btn-add.cancelling { border-color:#e07b5a; color:#e07b5a; }

/* ---- Day tabs ---- */
.day-tabs { display:flex; gap:4px; margin-bottom:8px; }
.day-tab { flex:1; padding:5px 4px; border:1px solid var(--border); border-radius:6px; background:var(--bg); font-size:12px; cursor:pointer; color:var(--text); transition:background .1s,border-color .1s; }
.day-tab:hover:not(:disabled) { background:#f0f6ff; border-color:#b0c8f8; }
.day-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500; }
.day-tab:disabled { opacity:.38; cursor:not-allowed; }

.layer-divider { border-top:1px solid var(--border); margin:8px 0 4px; }

/* ---- Modes ---- */
#mode-checkboxes { display:flex; flex-direction:column; gap:6px; font-size:13px; }
#mode-checkboxes label { display:flex; align-items:center; gap:8px; margin-bottom:0; font-weight:400; cursor:pointer; }

/* ---- Palette selector ---- */
.palette-selector { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.palette-swatch {
    flex:1; min-width:36px; height:16px; border-radius:3px; cursor:pointer;
    border:2px solid transparent; transition:border-color .12s,opacity .12s;
    position:relative;
}
.palette-swatch:hover { opacity:.8; }
.palette-swatch.active { border-color:var(--accent); }
.palette-swatch[data-cb]::after {
    content:"👁"; position:absolute; right:-2px; top:-9px; font-size:9px; line-height:1;
}

/* ---- Stats ---- */
.stat-row { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:2px 0; font-variant-numeric:tabular-nums; }

/* ---- Feedback ---- */
.feedback-cats { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.feedback-cat { padding:4px 9px; border:1px solid var(--border); border-radius:20px; background:var(--bg); font-size:12px; cursor:pointer; color:var(--muted); }
.feedback-cat:hover { border-color:var(--accent); color:var(--accent); }
.feedback-cat.active { background:var(--accent); border-color:var(--accent); color:#fff; }
#feedback-text { width:100%; padding:7px 9px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; resize:vertical; background:var(--bg); color:var(--text); margin-bottom:8px; }
#feedback-text:focus { outline:none; border-color:var(--accent); }
.feedback-actions { display:flex; gap:6px; justify-content:flex-end; }
.btn-primary { padding:6px 12px; background:var(--accent); border:none; border-radius:6px; color:#fff; font-size:13px; cursor:pointer; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { padding:6px 12px; background:transparent; border:1px solid var(--border); border-radius:6px; color:var(--muted); font-size:13px; cursor:pointer; }
.btn-secondary:hover { border-color:var(--text); color:var(--text); }

/* ---- Footer ---- */
footer { margin-top:auto; padding-top:12px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); line-height:1.5; }
footer a { color:var(--muted); text-decoration:underline; }
.data-date { font-size:11px; color:var(--muted); margin-top:1px; }
.footer-btns { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.footer-action-btn { padding:4px 10px; border-radius:12px; font-size:11px; cursor:pointer; text-decoration:none; display:inline-block; border:1px solid var(--border); background:var(--bg); color:var(--muted); }
.footer-action-btn:hover { background:#f0f6ff; border-color:#b0c8f8; color:var(--accent); }
.footer-action-btn.donation { border-color:#f5c542; color:#7c5e00; background:#fffbea; }
.footer-action-btn.donation:hover { background:#fff8d6; border-color:#e6a800; }

/* ---- Hero button ---- */
.hero-card { padding:8px; }
.hero-btn { width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 10px; background:var(--accent); border:none; border-radius:8px; color:#fff; cursor:pointer; text-align:center; transition:background .15s; }
.hero-btn:hover:not(:disabled) { background:var(--accent-hover); }
.hero-btn:disabled { opacity:.5; cursor:default; }
.hero-icon { font-size:20px; line-height:1; }
.hero-label { font-size:14px; font-weight:600; line-height:1.2; }
.hero-sub { font-size:11px; opacity:.85; }

/* ---- Point origin marker ---- */
.point-origin-marker { width:20px; height:20px; border-radius:50% 50% 50% 0; background:var(--accent); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transform:rotate(-45deg); cursor:grab; }
.point-origin-marker:active { cursor:grabbing; }

/* ---- Map ---- */
#map { flex:1; height:100vh; }
.location-dot { width:16px; height:16px; border-radius:50%; background:#2a6dd8; border:2px solid #fff; box-shadow:0 0 0 0 rgba(42,109,216,.5); animation:location-pulse 2s ease-out infinite; }
@keyframes location-pulse { 0%{box-shadow:0 0 0 0 rgba(42,109,216,.5)} 70%{box-shadow:0 0 0 12px rgba(42,109,216,0)} 100%{box-shadow:0 0 0 0 rgba(42,109,216,0)} }
.data-disclaimer { font-size:10px; color:var(--muted); margin-top:4px; }

/* ---- Utilities ---- */
.hidden { display:none !important; }
@keyframes spin { to { transform:rotate(360deg); } }
#loading { position:absolute; top:16px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; padding:8px 16px; border-radius:6px; font-size:13px; z-index:10; }
.maplibregl-popup { font-family:inherit; font-size:13px; }
.maplibregl-popup-content { padding:8px 12px; border-radius:6px; }

@media (max-width:768px) {
    body { flex-direction:column; }
    #sidebar { width:100%; height:auto; max-height:55vh; }
    #map { height:45vh; }
}