:root{
      --top-bar-h:120px;
      --bg:#050e09; --bg2:#0a1810; --bg3:#0d1f14;
      --border:rgba(0,255,120,0.12); --glass:rgba(0,255,120,0.04);
      --shadow:rgba(0,0,0,0.6); --text:#e8f5ec; --muted:#6ba880;
      --acc:#00ff78; --acc2:#00c95e; --amber:#ffc247;
      --red:#ff5555; --blue:#4db8ff; --rain:#4db8ff;
      --bebas:'Bebas Neue',sans-serif;
      --mono:'Space Mono',monospace;
      --body:'DM Sans',sans-serif;
    }
    body.light{
      --bg:#f0f4f8; --bg2:#ffffff; --bg3:#ffffff;
      --border:rgba(0,0,0,0.10); --glass:rgba(255,255,255,0.95);
      --shadow:rgba(0,0,0,0.10); --text:#111827; --muted:#4b5563;
      --acc:#059652; --acc2:#047a42; --amber:#d97706;
      --red:#dc2626; --blue:#2563eb; --rain:#2563eb;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100dvh;overflow-x:hidden;transition:background .3s,color .3s;padding-bottom:72px;padding-top:120px}

    /* ATMOSPHERE */
    .atmo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
    .atmo-orb1{position:absolute;width:600px;height:600px;top:-250px;left:-150px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,120,0.05),transparent 68%);filter:blur(60px);animation:orbFloat 18s ease-in-out infinite alternate}
    .atmo-orb2{position:absolute;width:400px;height:400px;bottom:-150px;right:-80px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,100,0.03),transparent 68%);filter:blur(60px);animation:orbFloat 14s ease-in-out infinite alternate-reverse}
    .atmo-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,120,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,120,0.025) 1px,transparent 1px);background-size:48px 48px}
    body.light .atmo-orb1{background:radial-gradient(circle,rgba(0,180,80,0.05),transparent 68%)}
    body.light .atmo-orb2{background:radial-gradient(circle,rgba(0,180,80,0.03),transparent 68%)}
    body.light .atmo-grid{background-image:linear-gradient(rgba(0,0,0,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.035) 1px,transparent 1px)}
    @keyframes orbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,20px) scale(1.05)}}

    #app{position:relative;z-index:1;max-width:520px;margin:0 auto}
    #top-bar{position:fixed;top:0;left:0;right:0;z-index:600;background:var(--bg);max-width:520px;margin:0 auto}
    body.light #top-bar{background:#f0f4f8}

    /* HEADER */
    .hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0;gap:8px}
    .logo{display:flex;align-items:center;gap:9px;flex-shrink:0;min-width:0}
    .logo-icon{width:36px;height:36px;background:var(--acc);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 20px rgba(0,255,120,0.35);flex-shrink:0}
    .logo-text{font-family:var(--bebas);font-size:22px;letter-spacing:.08em;color:var(--acc);line-height:1;white-space:nowrap}
    .logo-sub{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:1px;white-space:nowrap}
    .hdr-right{display:flex;align-items:center;gap:7px}
    .hdr-clock{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;line-height:1.6}
    .btn-icon{background:var(--bg2);border:1px solid var(--border);border-radius:8px;width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;color:var(--text)}
    .btn-icon:hover{border-color:var(--acc)}
    body.light .btn-icon{background:#ffffff;box-shadow:0 1px 4px var(--shadow)}

    /* SEARCH */
    .search-bar{padding:12px 16px 0;position:relative;z-index:100}
    .search-wrap{position:relative}
    .search-wrap input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:13px 14px 13px 40px;font-family:var(--mono);font-size:13px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;box-shadow:0 2px 10px var(--shadow)}
    .search-wrap input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,255,120,0.12)}
    .search-wrap input::placeholder{color:var(--muted)}
    .search-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
    .dropdown{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;z-index:300;box-shadow:0 20px 50px var(--shadow)}
    .dd-item{padding:11px 14px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);transition:background .12s}
    .dd-item:last-child{border-bottom:none}
    .dd-item:hover{background:var(--glass)}
    .dd-sub{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto}
    body.light .search-wrap input{background:#ffffff;color:#111827;border-color:rgba(0,0,0,0.12);font-size:14px}
    body.light .dropdown{background:#ffffff}

    /* MAIN SCROLL AREA */
    main{padding:14px 16px;display:flex;flex-direction:column;gap:11px}
    /* Gdy dane są załadowane — główny ekran nie scrolluje */
    main.has-data{overflow:hidden;height:calc(100dvh - var(--top-bar-h) - 72px);justify-content:space-between;gap:10px}

    /* CARDS */
    .card{background:var(--glass);border:1px solid var(--border);border-radius:16px;box-shadow:0 2px 10px var(--shadow);transition:transform .15s}
    body.light .card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 2px 12px var(--shadow)}

    /* HERO WEATHER CARD */
    .hero-card{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:16px 18px 14px;position:relative;overflow:hidden;box-shadow:0 4px 24px var(--shadow)}
    .hero-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(0,255,120,0.08),transparent 70%);pointer-events:none;border-radius:18px}
    body.light .hero-card{background:#ffffff;box-shadow:0 4px 20px var(--shadow);border-color:rgba(0,0,0,0.08)}
    /* ── FIELD MODE (max contrast for outdoor use) ── */
    body.field{
      --bg:#000000; --bg2:#111111; --bg3:#1a1a1a;
      --border:#ffffff; --glass:#111111;
      --shadow:rgba(0,0,0,0.9); --text:#ffffff; --muted:#bbbbbb;
      --acc:#ffffff; --acc2:#dddddd; --amber:#ffffff;
      --red:#ffffff; --blue:#ffffff;
    }
    body.field .hero-card{background:#111111;border:2px solid #ffffff}
    body.field .ctx-btn{background:#111111;border:2px solid #ffffff}
    body.field .ctx-btn-val{color:#ffffff!important}
    body.field .top-bar-inner{background:#000000;border-bottom:2px solid #ffffff}
    body.field .hdr{background:#000000}
    body.field .search-wrap input{background:#111111;color:#ffffff;border:2px solid #ffffff}
    body.field .sheet-box{background:#000000;border:2px solid #ffffff}
    body.field .btn-icon{background:#111111;border:2px solid #ffffff;color:#ffffff}
    .hero-loc{font-family:var(--bebas);font-size:clamp(30px,8vw,46px);line-height:.92;letter-spacing:.04em}
    .hero-county{font-family:var(--mono);font-size:10px;color:var(--acc);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
    body.light .hero-county{color:#059652}
    .hero-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
    .hero-temp{font-family:var(--bebas);font-size:clamp(68px,17vw,100px);line-height:.88;letter-spacing:-.01em}
    .hero-temp sup{font-size:.28em;vertical-align:super;color:var(--muted)}
    .hero-feels{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px}
    .hero-right{text-align:right}
    .hero-icon{font-size:46px;line-height:1;margin-bottom:4px}
    .hero-desc{font-size:15px;font-weight:600}
    .hero-range{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px;line-height:1.8}
    .hero-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
    .hero-meta-item{display:flex;flex-direction:column;gap:2px}
    .hero-meta-label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .hero-meta-val{font-family:var(--bebas);font-size:22px;letter-spacing:.03em;line-height:1}
    .hero-meta-unit{font-family:var(--mono);font-size:10px;color:var(--muted)}

    /* SECTION LABEL */
    .sec-lbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 2px}
    body.light .sec-lbl{color:#374151}

    /* HERO STATS ROW (3 kluczowe wartości) */
    .hero-stats-row{display:flex;align-items:center;gap:0;margin-top:10px;padding-top:10px;padding-bottom:6px;border-top:1px solid var(--border)}
    .hero-stat{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0 2px}
    .hero-stat-ico{font-size:16px;flex-shrink:0}
    .hero-stat-val{font-family:var(--bebas);font-size:19px;letter-spacing:.03em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .hero-stat-lbl{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:0;white-space:nowrap;line-height:1}
    .hero-stat-unit{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .hero-stat-div{width:1px;background:var(--border);height:28px;flex-shrink:0}

    /* HERO INFO ROW (pressure + sun) */
    .hero-info-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);gap:4px;flex-wrap:wrap}

    /* CONTEXT GRID 2×3 */
    .ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .ctx-btn{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:14px 13px;cursor:pointer;text-align:left;transition:border-color .18s,transform .12s,background .18s;box-shadow:0 2px 10px var(--shadow);color:var(--text);display:flex;flex-direction:column;gap:5px;min-height:88px;-webkit-tap-highlight-color:transparent}
    .ctx-btn:active{transform:scale(.96)}
    .ctx-btn:hover{border-color:rgba(0,255,120,.3);background:rgba(0,255,120,.03)}
    body.light .ctx-btn{background:#ffffff;border-color:rgba(0,0,0,.08);box-shadow:0 2px 8px var(--shadow)}
    body.light .ctx-btn:hover{border-color:rgba(5,150,82,.3);background:#f0fdf4}
    .ctx-btn--dim{opacity:.5}
    .ctx-btn-top{display:flex;align-items:center;gap:7px}
    .ctx-btn-icon{font-size:18px;line-height:1;flex-shrink:0}
    .ctx-btn-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
    body.light .ctx-btn-label{color:#6b7280}
    .ctx-btn-val{font-family:var(--bebas);font-size:26px;letter-spacing:.03em;line-height:1;color:var(--acc)}
    body.light .ctx-btn-val{color:#059652}
    .ctx-btn-sub{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* SUN ROW */
    .sun-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .sun-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 2px 8px var(--shadow)}
    body.light .sun-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .sun-card:first-child{border-left:4px solid #f59e0b}
    body.light .sun-card:last-child{border-left:4px solid #ef4444}
    .sun-icon{font-size:20px;flex-shrink:0}
    .sun-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
    .sun-val{font-family:var(--bebas);font-size:24px;letter-spacing:.03em;color:var(--amber)}
    .sun-sub{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:1px}

    /* WIND CARD */
    .wind-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;box-shadow:0 2px 10px var(--shadow)}
    body.light .wind-card{background:#ffffff;border-color:rgba(0,0,0,0.08);box-shadow:0 2px 12px var(--shadow)}
    .wind-item{}
    .wind-item-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;display:flex;align-items:center;gap:6px}
    .wind-item-val{font-family:var(--bebas);font-size:36px;line-height:1;letter-spacing:.02em}
    .wind-item-unit{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
    .wind-dir-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
    .wind-arrow{font-size:22px;transition:transform .5s ease}
    .wind-dir-lbl{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--acc)}
    .wind-dir-deg{font-family:var(--mono);font-size:11px;color:var(--muted)}
    .unit-pill{background:rgba(0,255,120,0.1);border:1px solid rgba(0,255,120,0.25);border-radius:5px;padding:2px 7px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--acc);cursor:pointer;letter-spacing:.06em;transition:background .15s;user-select:none}
    .unit-pill:hover{background:rgba(0,255,120,0.2)}
    body.light .unit-pill{background:rgba(5,150,82,0.1);border-color:rgba(5,150,82,0.25);color:#059652}

    /* ROAD + SAFETY */
    .road-safety-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .road-card{background:linear-gradient(135deg,rgba(255,194,71,0.06),transparent);border:1px solid rgba(255,194,71,0.2);border-radius:14px;padding:13px;box-shadow:0 2px 8px var(--shadow)}
    .road-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
    .road-val{font-family:var(--bebas);font-size:30px;line-height:1;letter-spacing:.02em}
    .road-badge{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;padding:3px 8px;border-radius:5px;text-transform:uppercase}
    .road-badge.ok{background:rgba(0,255,120,0.12);color:var(--acc);border:1px solid rgba(0,255,120,0.2)}
    .road-badge.wet{background:rgba(77,184,255,0.12);color:var(--blue);border:1px solid rgba(77,184,255,0.25)}
    .road-badge.slick{background:rgba(255,194,71,0.12);color:var(--amber);border:1px solid rgba(255,194,71,0.2)}
    .road-badge.ice{background:rgba(255,85,85,0.12);color:var(--red);border:1px solid rgba(255,85,85,0.2)}
    .road-badge.snow{background:rgba(200,220,255,0.1);color:#c8dcff;border:1px solid rgba(200,220,255,0.2)}
    .safety-card{border-radius:14px;padding:13px;box-shadow:0 2px 8px var(--shadow)}
    .safety-card.safe{background:linear-gradient(135deg,rgba(0,255,120,0.07),transparent);border:1px solid rgba(0,255,120,0.2)}
    .safety-card.caution{background:linear-gradient(135deg,rgba(255,194,71,0.08),transparent);border:1px solid rgba(255,194,71,0.22)}
    .safety-card.danger{background:linear-gradient(135deg,rgba(255,85,85,0.08),transparent);border:1px solid rgba(255,85,85,0.25)}
    body.light .road-card{background:#fffbeb;border-color:rgba(217,119,6,0.25);border-left:4px solid #d97706}
    body.light .safety-card.safe{background:#f0fdf4;border-color:rgba(5,150,82,0.2);border-left:4px solid #059652}
    body.light .safety-card.caution{background:#fffbeb;border-color:rgba(217,119,6,0.22);border-left:4px solid #d97706}
    body.light .safety-card.danger{background:#fef2f2;border-color:rgba(220,38,38,0.25);border-left:4px solid #dc2626}
    .safety-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .safety-verdict{font-family:var(--bebas);font-size:24px;letter-spacing:.05em;line-height:1}
    .safety-reasons{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px;line-height:1.5}

    /* MINUTE RAIN */
    .rain-chart{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:13px 13px 10px;box-shadow:0 2px 8px var(--shadow)}
    body.light .rain-chart{background:#ffffff;border-left:4px solid #2563eb;border-color:rgba(0,0,0,0.08)}
    .rain-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
    .rain-chart-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    body.light .rain-chart-title{color:#374151}
    .rain-chart-status{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em}
    .rain-bars{display:flex;align-items:flex-end;gap:2px;height:48px}
    .rain-bar-item{flex:1;border-radius:2px 2px 0 0;min-height:2px}
    .rain-time-labels{display:flex;justify-content:space-between;margin-top:4px}
    .rain-time-lbl{font-family:var(--mono);font-size:9px;color:var(--muted)}

    /* HOURLY */
    .hourly-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
    .hourly-scroll::-webkit-scrollbar{display:none}
    .hourly-track{display:flex;gap:7px;width:max-content}
    .h-card{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:11px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:68px;cursor:pointer;box-shadow:0 2px 6px var(--shadow);transition:transform .15s}
    .h-card.now{background:linear-gradient(160deg,rgba(0,255,120,0.1),transparent);border-color:rgba(0,255,120,0.3)}
    .h-card:active{transform:scale(.95)}
    body.light .h-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .h-card.now{background:#f0fdf4;border-color:#059652}
    .h-time{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .h-icon{font-size:18px;line-height:1}
    .h-temp{font-family:var(--bebas);font-size:20px;letter-spacing:.03em}
    .h-prob{font-family:var(--mono);font-size:10px;color:var(--blue)}

    /* ENV - UV/AQI/POLLEN (collapsible) */
    .env-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0 2px;user-select:none}
    .env-toggle-arr{font-size:12px;color:var(--muted);transition:transform .25s}
    .env-toggle-arr.open{transform:rotate(180deg)}
    .env-body{display:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
    .env-body.visible{display:flex}
    .env-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .env-card{background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:12px;box-shadow:0 2px 6px var(--shadow)}
    body.light .env-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .env-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
    body.light .env-lbl{color:#374151}
    .env-val{font-family:var(--bebas);font-size:30px;line-height:1;letter-spacing:.02em}
    .env-pill{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase}
    .pill-low{background:rgba(0,255,120,0.12);color:var(--acc);border:1px solid rgba(0,255,120,0.2)}
    .pill-mod{background:rgba(255,194,71,0.12);color:var(--amber);border:1px solid rgba(255,194,71,0.2)}
    .pill-high{background:rgba(255,140,0,0.14);color:#ff8c00;border:1px solid rgba(255,140,0,0.25)}
    .pill-vhigh{background:rgba(255,60,0,0.14);color:#ff3c00;border:1px solid rgba(255,60,0,0.25)}
    .pill-ext{background:rgba(180,0,255,0.14);color:#b400ff;border:1px solid rgba(180,0,255,0.25)}
    .pill-good{background:rgba(0,255,120,0.12);color:var(--acc);border:1px solid rgba(0,255,120,0.2)}
    .pill-fair{background:rgba(100,220,100,0.12);color:#64dc64;border:1px solid rgba(100,220,100,0.2)}
    .pill-mod2{background:rgba(255,194,71,0.12);color:var(--amber);border:1px solid rgba(255,194,71,0.2)}
    .pill-poor{background:rgba(255,120,0,0.14);color:#ff7800;border:1px solid rgba(255,120,0,0.25)}
    .pill-vpoor{background:rgba(255,60,0,0.14);color:#ff3c00;border:1px solid rgba(255,60,0,0.25)}
    .uv-bar{height:6px;border-radius:3px;margin-top:6px;background:var(--border);overflow:hidden}
    .uv-fill{height:100%;border-radius:3px;background:linear-gradient(to right,#00ff78,#ffd700,#ff8c00,#ff3c00,#b400ff);transition:width .5s ease}
    .aqi-bar{height:6px;border-radius:3px;margin-top:6px;background:var(--border);overflow:hidden}
    .aqi-fill{height:100%;border-radius:3px;background:linear-gradient(to right,#00ff78,#adff2f,#ffd700,#ff8c00,#ff3c00,#960018);transition:width .5s ease}
    .pollen-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:4px}
    .pollen-item{text-align:center}
    .pollen-name{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
    .pollen-val{font-family:var(--bebas);font-size:20px;letter-spacing:.03em}

    /* FISHING CARD */
    .fishing-card{background:linear-gradient(135deg,rgba(77,184,255,0.07),transparent);border:1px solid rgba(77,184,255,0.2);border-radius:16px;padding:16px;box-shadow:0 2px 10px var(--shadow)}
    body.light .fishing-card{background:#eff6ff;border-color:rgba(37,99,235,0.2);border-left:4px solid #2563eb}
    .fishing-title{font-family:var(--bebas);font-size:20px;letter-spacing:.08em;color:var(--blue);margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .fishing-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .fishing-item{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:11px 12px}
    body.light .fishing-item{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .fishing-lbl{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
    .fishing-val{font-family:var(--bebas);font-size:26px;line-height:1;letter-spacing:.02em}
    .fishing-unit{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:1px}
    .fishing-badge{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase}
    .surf-great{color:#00e5ff;border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.08)}
    .surf-good{color:var(--acc);border:1px solid rgba(0,255,120,.2);background:rgba(0,255,120,.06)}
    .surf-fair{color:var(--amber);border:1px solid rgba(255,194,71,.2);background:rgba(255,194,71,.06)}
    .surf-poor{color:var(--muted);border:1px solid var(--border);background:var(--glass)}
    .fishing-hourly{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:12px;padding-bottom:2px}
    .fishing-hourly::-webkit-scrollbar{display:none}
    .fishing-hourly-track{display:flex;gap:7px;width:max-content}
    .fish-h-card{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:10px 9px;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:3px}
    body.light .fish-h-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .fish-h-time{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .fish-h-wave{font-family:var(--bebas);font-size:18px;letter-spacing:.03em;color:var(--blue)}
    .fish-h-wind{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .fish-h-icon{font-size:14px}

    /* 7-DAY */
    .week-chart-wrap{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 13px 11px;box-shadow:0 2px 8px var(--shadow)}
    body.light .week-chart-wrap{background:#ffffff;border-color:rgba(0,0,0,0.08);border-left:4px solid #059652}
    .week-chart-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
    body.light .week-chart-title{color:#374151}
    .week-svg{width:100%;overflow:visible;display:block}
    .week-day-labels{display:flex;justify-content:space-between;margin-top:5px}
    .week-day-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;flex:1}
    .week-day-lbl.today-lbl{color:var(--acc);font-weight:700}
    body.light .week-day-lbl.today-lbl{color:#059652}
    .week-wrap{display:flex;flex-direction:column;gap:6px}
    .day-row{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:10px 12px;transition:border-color .2s}
    .day-row.today{border-color:rgba(0,255,120,0.25)}
    body.light .day-row{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .day-row.today{border-color:#059652}
    .day-name{font-family:var(--mono);font-size:11px;font-weight:700;width:42px;flex-shrink:0;color:var(--muted)}
    .day-name.today-lbl{color:var(--acc)}
    body.light .day-name.today-lbl{color:#059652}
    .day-icon{font-size:20px;flex-shrink:0}
    .day-range{flex:1;display:flex;align-items:center;gap:8px}
    .day-lo{font-family:var(--mono);font-size:11px;color:var(--muted);width:28px;text-align:right;flex-shrink:0}
    .day-bar-wrap{flex:1;height:5px;border-radius:3px;background:var(--border);position:relative}
    .day-bar{position:absolute;height:100%;border-radius:3px;background:linear-gradient(to right,var(--blue),var(--acc))}
    .day-hi{font-family:var(--mono);font-size:11px;font-weight:700;width:28px;flex-shrink:0}
    .day-rain{font-family:var(--mono);font-size:10px;color:var(--blue);flex-shrink:0;width:46px;text-align:right}
    body.light .day-rain{color:#2563eb;font-weight:700}

    /* ── WEATHER ATMOSPHERE ANIMATIONS ── */
    .wx-rain .atmo-orb1{background:radial-gradient(circle,rgba(77,184,255,0.12),transparent 68%)!important;animation:orbFloat 10s ease-in-out infinite alternate}
    .wx-rain .atmo-orb2{background:radial-gradient(circle,rgba(77,184,255,0.08),transparent 68%)!important}
    .wx-storm .atmo-orb1{background:radial-gradient(circle,rgba(180,100,255,0.12),transparent 68%)!important;animation:orbFloat 6s ease-in-out infinite alternate}
    .wx-storm .atmo-orb2{background:radial-gradient(circle,rgba(255,85,85,0.08),transparent 68%)!important}
    .wx-fog .atmo-orb1{background:radial-gradient(circle,rgba(180,180,180,0.15),transparent 68%)!important;animation:orbFloat 22s ease-in-out infinite alternate}
    .wx-fog .atmo-orb2{background:radial-gradient(circle,rgba(180,180,180,0.10),transparent 68%)!important}
    .wx-snow .atmo-orb1{background:radial-gradient(circle,rgba(180,220,255,0.14),transparent 68%)!important}
    .wx-snow .atmo-orb2{background:radial-gradient(circle,rgba(200,230,255,0.10),transparent 68%)!important}
    .wx-clear .atmo-orb1{background:radial-gradient(circle,rgba(0,255,120,0.07),transparent 68%)!important;animation:orbFloat 20s ease-in-out infinite alternate}

    /* Rain drops — CSS only, subtle */
    .wx-rain::after,.wx-storm::after{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:
        linear-gradient(180deg,rgba(77,184,255,0.06) 1px,transparent 1px),
        linear-gradient(180deg,rgba(77,184,255,0.04) 1px,transparent 1px),
        linear-gradient(180deg,rgba(77,184,255,0.03) 1px,transparent 1px);
      background-size:3px 28px, 2px 20px, 2px 35px;
      background-position:10% 0,40% 5px,70% 12px;
      animation:rainFall 1.2s linear infinite;
      opacity:.5;
    }
    .wx-storm::after{opacity:.8;animation-duration:.7s}
    body.light .wx-rain::after,body.light .wx-storm::after{background-image:linear-gradient(180deg,rgba(37,99,235,0.08) 1px,transparent 1px),linear-gradient(180deg,rgba(37,99,235,0.05) 1px,transparent 1px),linear-gradient(180deg,rgba(37,99,235,0.04) 1px,transparent 1px);background-size:3px 28px,2px 20px,2px 35px;background-position:10% 0,40% 5px,70% 12px}

    /* Snow dots */
    .wx-snow::after{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:radial-gradient(circle,rgba(200,230,255,0.5) 1px,transparent 1px),radial-gradient(circle,rgba(200,230,255,0.3) 1px,transparent 1px);
      background-size:60px 60px,90px 90px;
      background-position:0 0,30px 30px;
      animation:snowFall 8s linear infinite;
      opacity:.6;
    }

    /* Fog pulse */
    .wx-fog::before{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background:linear-gradient(180deg,transparent 30%,rgba(160,160,160,0.06) 60%,transparent 80%);
      animation:fogPulse 5s ease-in-out infinite;
    }

    @keyframes rainFall{from{background-position:10% 0,40% 5px,70% 12px}to{background-position:10% 28px,40% 25px,70% 47px}}
    @keyframes snowFall{from{background-position:0 0,30px 30px}to{background-position:10px 60px,40px 90px}}
    @keyframes fogPulse{0%,100%{opacity:.4}50%{opacity:1}}


    .quick-btn{width:100%;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;transition:border-color .2s,transform .15s;box-shadow:0 2px 8px var(--shadow);color:var(--text)}
    .quick-btn:hover{border-color:var(--acc);transform:translateY(-1px)}
    .quick-btn:active{transform:scale(.98)}
    body.light .quick-btn{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    body.light .quick-btn:hover{border-color:#059652}
    .quick-btn-icon{font-size:24px;flex-shrink:0}
    .quick-btn-body{flex:1;min-width:0}
    .quick-btn-title{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
    body.light .quick-btn-title{color:#111827}
    .quick-btn-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .quick-btn-arr{font-size:20px;color:var(--muted);flex-shrink:0;font-weight:300}


    /* SHARE + COFFEE */
    .share-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:4px 2px 8px}
    .share-btn{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;text-transform:uppercase}
    .share-btn:hover{border-color:var(--acc);color:var(--acc)}
    .coffee-btn{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--amber);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;text-transform:uppercase;text-decoration:none}
    .coffee-btn:hover{border-color:var(--amber);background:rgba(255,194,71,.06)}
    body.light .share-btn{background:#ffffff;border-color:rgba(0,0,0,.08)}
    body.light .coffee-btn{background:#ffffff;border-color:rgba(0,0,0,.08)}
    .src-row{display:flex;gap:6px;flex-wrap:wrap;padding:4px 2px 24px}
    .src-badge{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--glass);border:1px solid var(--border);border-radius:5px;padding:3px 9px}
    body.light .src-badge{background:#f9fafb;color:#6b7280;border-color:rgba(0,0,0,0.08)}

    /* BOTTOM NAV */
    .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:450;background:var(--bg2);border-top:1px solid var(--border);display:flex;max-width:520px;margin:0 auto;box-shadow:0 -4px 20px var(--shadow)}
    body.light .bottom-nav{background:#ffffff;border-top-color:rgba(0,0,0,0.1);box-shadow:0 -2px 12px var(--shadow)}
    .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0 8px;gap:3px;background:none;border:none;cursor:pointer;color:var(--muted);transition:color .2s;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
    .nav-btn:active{transform:scale(.93)}
    .nav-btn.active{color:var(--acc)}
    body.light .nav-btn.active{color:#059652}
    .nav-btn-icon{font-size:22px;line-height:1}
    .nav-separator{width:1px;background:var(--border);margin:10px 0}

    /* SHEETS (My Car + Route) */
    .sheet-overlay{position:fixed;top:var(--top-bar-h);left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:400;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(4px)}
    .sheet-overlay.hidden{display:none!important}
    .sheet-box{background:var(--bg2);border:1px solid var(--border);border-radius:22px 22px 0 0;width:100%;max-width:520px;max-height:calc(96dvh - var(--top-bar-h));display:flex;flex-direction:column;animation:slideUp .25s ease}
    body.light .sheet-box{background:#ffffff}
    .sheet-handle-wrap{padding:12px 18px 0;flex-shrink:0}
    .sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
    .sheet-title{font-family:var(--bebas);font-size:22px;letter-spacing:.08em;color:var(--acc)}
    body.light .sheet-title{color:#059652}
    .sheet-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;padding:4px}
    .sheet-body{overflow-y:auto;padding:14px 16px 88px;flex:1}

    /* CAR PANEL — NAVIGATOR STYLE */
    .car-no-saved{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 16px}
    .car-no-icon{width:80px;height:80px;border-radius:50%;background:var(--glass);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:4px}
    .car-no-title{font-family:var(--bebas);font-size:22px;letter-spacing:.08em;text-align:center}
    .car-no-sub{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;line-height:1.75;max-width:260px}
    .car-park-btn{width:100%;background:var(--acc2);color:#000;border:none;border-radius:14px;padding:16px 20px;font-family:var(--bebas);font-size:18px;letter-spacing:.12em;cursor:pointer;transition:background .2s,transform .1s;box-shadow:0 4px 20px rgba(0,200,80,0.3)}
    .car-park-btn:hover{background:var(--acc)}
    .car-park-btn:active{transform:scale(.97)}
    .car-park-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
    .car-compass-outer{position:relative;width:210px;height:210px;margin:0 auto}
    .car-compass-needle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
    .car-dist-block{text-align:center;padding:12px 0 4px}
    .car-dist-num{font-family:var(--bebas);font-size:68px;line-height:.88;letter-spacing:-.01em;color:var(--acc)}
    body.light .car-dist-num{color:#059652}
    .car-dist-unit-lbl{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.12em;text-transform:uppercase}
    .car-bearing-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
    .car-bearing-dir{font-family:var(--bebas);font-size:28px;letter-spacing:.06em;color:var(--text)}
    .car-bearing-deg{font-family:var(--mono);font-size:12px;color:var(--muted)}
    .car-accuracy-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;margin-top:2px;opacity:.6}
    .car-location-box{background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:13px 15px;margin:12px 0 8px}
    body.light .car-location-box{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    .car-loc-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .car-loc-name{font-size:15px;font-weight:700;color:var(--text)}
    .car-loc-sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
    .car-loc-time{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:5px;opacity:.65}
    .car-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .car-btn-repark{background:var(--glass);border:1px solid rgba(0,255,120,.2);border-radius:12px;padding:12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--acc);text-transform:uppercase;transition:all .2s}
    .car-btn-repark:hover{background:rgba(0,255,120,.1)}
    body.light .car-btn-repark{color:#059652;background:#ffffff;border-color:rgba(5,150,82,.2)}
    .car-btn-del{background:var(--glass);border:1px solid rgba(255,85,85,.18);border-radius:12px;padding:12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;color:var(--red);text-transform:uppercase;transition:all .2s}
    .car-btn-del:hover{background:rgba(255,85,85,.08);border-color:var(--red)}
    .car-footnote{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.7;opacity:.6}

    /* ROUTE SHEET */
    .route-field{position:relative;margin-bottom:8px}
    .route-field input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px 12px 36px;font-family:var(--mono);font-size:12px;color:var(--text);outline:none;transition:border-color .2s}
    .route-field input:focus{border-color:var(--acc)}
    .route-field input::placeholder{color:var(--muted)}
    .route-field-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none}
    .route-field .dropdown{top:calc(100% + 4px);z-index:1000}
    body.light .route-field input{background:#ffffff;color:#111827;border-color:rgba(0,0,0,0.12)}
    .btn-route{width:100%;background:var(--acc2);color:#000;border:none;border-radius:10px;padding:13px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
    .btn-route:disabled{opacity:.35;cursor:not-allowed}
    #route-map{height:250px;border-radius:14px;border:1px solid var(--border);overflow:hidden;background:var(--bg2);margin-top:12px;transition:opacity .2s}
    #route-map.map-hidden{opacity:0;pointer-events:none;height:0;margin-top:0}
    .route-summary{background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:12px 14px;display:flex;gap:12px;margin-top:10px}
    body.light .route-summary{background:#f0fdf4;border-color:rgba(5,150,82,0.2)}
    .route-stat{flex:1;text-align:center}
    .route-stat-val{font-family:var(--bebas);font-size:24px;color:var(--acc);letter-spacing:.04em}
    .route-stat-lbl{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
    .waypoints{display:flex;flex-direction:column;gap:6px;margin-top:10px}
    .wp-card{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:10px 12px;display:flex;align-items:center;gap:10px}
    body.light .wp-card{background:#ffffff;border-color:rgba(0,0,0,0.08)}
    .wp-card.wp-danger{border-color:rgba(255,85,85,0.35);background:rgba(255,85,85,0.04)}
    .wp-card.wp-caution{border-color:rgba(255,194,71,0.3);background:rgba(255,194,71,0.04)}
    .wp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .wp-dot.safe{background:var(--acc)}.wp-dot.caution{background:var(--amber)}.wp-dot.danger{background:var(--red)}
    .wp-info{flex:1;min-width:0}
    .wp-name{font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .wp-km{font-family:var(--mono);font-size:10px;color:var(--muted)}
    .wp-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:4px;text-transform:uppercase;margin-top:2px;display:inline-block}
    .wp-badge.safe{background:rgba(0,255,120,0.12);color:var(--acc)}
    .wp-badge.caution{background:rgba(255,194,71,0.12);color:var(--amber)}
    .wp-badge.danger{background:rgba(255,85,85,0.12);color:var(--red)}
    .wp-weather{text-align:right;flex-shrink:0}
    .wp-temp{font-family:var(--bebas);font-size:20px;letter-spacing:.03em}
    .wp-wind{font-family:var(--mono);font-size:10px;color:var(--muted)}

    /* HOUR MODAL */
    .modal-overlay{position:fixed;top:var(--top-bar-h);left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:500;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(4px)}
    .modal-overlay.hidden{display:none!important}
    .modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:22px 22px 0 0;padding:16px 16px 36px;width:100%;max-width:520px;animation:slideUp .25s ease;position:relative;max-height:85dvh;overflow-y:auto}
    body.light .modal-box{background:#ffffff}
    .modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 12px}
    .modal-time{font-family:var(--bebas);font-size:26px;letter-spacing:.06em;color:var(--acc);margin-bottom:2px}
    body.light .modal-time{color:#059652}
    .modal-desc{font-size:13px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .modal-item{background:var(--glass);border:1px solid var(--border);border-radius:11px;padding:11px 12px}
    body.light .modal-item{background:#f9fafb}
    .modal-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
    body.light .modal-lbl{color:#374151}
    .modal-val{font-family:var(--bebas);font-size:24px;letter-spacing:.03em;line-height:1}
    .modal-val.hi{color:var(--acc)}
    body.light .modal-val.hi{color:#059652}
    .modal-unit{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:1px}
    .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer}

    /* RANKING SHEET */
    .ranking-list{overflow-y:auto;padding:10px 0 20px}
    .ranking-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;margin-bottom:5px;background:var(--glass);border:1px solid var(--border);cursor:pointer;transition:transform .15s}
    .ranking-item:hover{transform:translateX(4px)}
    body.light .ranking-item{background:#f9fafb;border-color:rgba(0,0,0,0.08)}
    .ranking-pos{font-family:var(--bebas);font-size:18px;color:var(--muted);width:24px;text-align:center;flex-shrink:0}
    .ranking-pos.gold{color:#ffd700}.ranking-pos.silver{color:#c0c0c0}.ranking-pos.bronze{color:#cd7f32}
    .ranking-city{flex:1}
    .ranking-city-name{font-family:var(--bebas);font-size:18px;letter-spacing:.04em;line-height:1}
    .ranking-city-county{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:1px}
    .ranking-temp{font-family:var(--bebas);font-size:26px;letter-spacing:.02em;text-align:right;flex-shrink:0}

    /* EMPTY / LOADING */
    .empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:50px 20px;text-align:center;animation:fadeUp .5s ease both}
    .empty-glyph{font-size:56px;opacity:.2;filter:grayscale(1)}
    .empty-title{font-family:var(--bebas);font-size:24px;letter-spacing:.08em;color:var(--muted)}
    .empty-sub{font-size:13px;color:var(--muted);opacity:.6;max-width:240px;line-height:1.6}
    .loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px}
    .spin{width:34px;height:34px;border:2px solid var(--border);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
    .loading p{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em}

    /* ANIMATIONS */
    @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* LEAFLET */
    .leaflet-tile-pane{filter:none}
    ::-webkit-scrollbar{width:4px;height:4px;background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
    .hidden{display:none!important}