:root{
      color-scheme: dark;
      --bg:#0b1220;
      --bg2:#111827;
      --bg3:#1b263b;
      --card:rgba(255,255,255,.105);
      --card-strong:rgba(255,255,255,.15);
      --panel:rgba(255,255,255,.065);
      --line:rgba(255,255,255,.16);
      --line-strong:rgba(255,255,255,.24);
      --text:#f8fbff;
      --muted:rgba(248,251,255,.74);
      --accent:#8bd8ff;
      --accent2:#71a8ff;
      --accent3:#cdbfff;
      --success:#86efac;
      --warning:#f9a8d4;
      --btn-bg:rgba(255,255,255,.11);
      --btn-text:var(--text);
      --btn-border:rgba(255,255,255,.20);
      --chip-bg:rgba(255,255,255,.085);
      --shadow:0 22px 54px rgba(0,0,0,.34);
      --blur:22px;
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
    }

    *{ box-sizing:border-box; }
    html{ min-height:100%; background:
      radial-gradient(980px 700px at 16% 8%, rgba(37,99,235,.46), transparent 58%),
      radial-gradient(720px 480px at 84% 10%, rgba(251,146,60,.18), transparent 48%),
      radial-gradient(980px 700px at 50% 100%, rgba(14,165,233,.16), transparent 60%),
      linear-gradient(180deg, #061223 0%, #040a16 48%, #020611 100%);
      background-attachment: fixed;
    }
    body{
      margin:0;
      min-height:100vh;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
      background:transparent;
      color:var(--text);
      letter-spacing:-.01em;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      position:relative;
      overflow-x:hidden;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
    }
    body::before{
      background:
        radial-gradient(60vw 60vw at 18% 16%, rgba(37,99,235,.30), transparent 60%),
        radial-gradient(34vw 24vw at 82% 10%, rgba(249,115,22,.16), transparent 58%),
        radial-gradient(42vw 28vw at 50% 92%, rgba(56,189,248,.11), transparent 65%),
        radial-gradient(circle at center, rgba(255,255,255,.05), transparent 56%);
      filter: blur(10px);
      opacity:.98;
    }
    body::after{
      box-shadow: inset 0 0 160px rgba(0,0,0,.52);
      opacity:.9;
    }

    body[data-weather="clear"]::before{
      background:
        radial-gradient(62vw 62vw at 14% 14%, rgba(56,189,248,.36), transparent 58%),
        radial-gradient(34vw 24vw at 84% 10%, rgba(251,146,60,.28), transparent 56%),
        radial-gradient(46vw 28vw at 52% 94%, rgba(125,211,252,.16), transparent 64%),
        radial-gradient(circle at center, rgba(255,255,255,.08), transparent 56%);
      filter: blur(10px) saturate(118%);
      opacity:1;
    }
    body[data-weather="cloudy"]::before{
      background:
        radial-gradient(56vw 56vw at 16% 12%, rgba(125,211,252,.18), transparent 58%),
        radial-gradient(42vw 28vw at 82% 12%, rgba(148,163,184,.18), transparent 58%),
        radial-gradient(44vw 30vw at 50% 96%, rgba(96,165,250,.12), transparent 65%),
        radial-gradient(circle at center, rgba(255,255,255,.04), transparent 58%);
      filter: blur(12px) saturate(105%);
      opacity:.98;
    }
    body[data-weather="rain"]::before{
      background:
        radial-gradient(58vw 58vw at 18% 10%, rgba(37,99,235,.18), transparent 58%),
        radial-gradient(36vw 22vw at 84% 10%, rgba(14,165,233,.14), transparent 56%),
        radial-gradient(44vw 28vw at 52% 96%, rgba(15,23,42,.28), transparent 64%),
        linear-gradient(180deg, rgba(15,23,42,.24), rgba(2,6,23,.08));
      filter: blur(14px) saturate(96%);
      opacity:1;
    }
    body[data-weather="storm"]::before{
      background:
        radial-gradient(58vw 58vw at 16% 12%, rgba(99,102,241,.22), transparent 58%),
        radial-gradient(32vw 22vw at 84% 10%, rgba(59,130,246,.18), transparent 55%),
        radial-gradient(42vw 28vw at 48% 94%, rgba(30,41,59,.32), transparent 64%),
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.05), transparent 30%);
      filter: blur(16px) saturate(94%);
      opacity:1;
    }
    body[data-weather="night"]::before{
      background:
        radial-gradient(58vw 58vw at 18% 14%, rgba(37,99,235,.24), transparent 58%),
        radial-gradient(32vw 22vw at 84% 10%, rgba(168,85,247,.18), transparent 56%),
        radial-gradient(46vw 28vw at 52% 96%, rgba(14,165,233,.10), transparent 64%),
        radial-gradient(circle at center, rgba(255,255,255,.03), transparent 56%);
      filter: blur(14px) saturate(106%);
      opacity:1;
    }
    body, body::before, .wrap::before, .heroOrb{ transition: background .7s ease, filter .7s ease, opacity .7s ease, box-shadow .7s ease; }
    body[data-weather="clear"] .heroOrb{
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(255,233,145,.95) 24%, rgba(255,184,77,.72) 56%, rgba(255,255,255,.12) 100%);
      box-shadow: 0 0 0 10px rgba(255,214,102,.08), 0 0 42px rgba(255,184,77,.38);
    }
    body[data-weather="cloudy"] .heroOrb{
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.94), rgba(191,219,254,.76) 24%, rgba(148,163,184,.30) 58%, rgba(255,255,255,.10) 100%);
      box-shadow: 0 0 0 10px rgba(191,219,254,.08), 0 0 36px rgba(148,163,184,.22);
    }
    body[data-weather="rain"] .heroOrb,
    body[data-weather="storm"] .heroOrb{
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.88), rgba(125,211,252,.54) 22%, rgba(59,130,246,.24) 56%, rgba(255,255,255,.06) 100%);
      box-shadow: 0 0 0 10px rgba(59,130,246,.08), 0 0 40px rgba(14,165,233,.22);
    }
    body[data-weather="night"] .heroOrb{
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), rgba(196,181,253,.54) 22%, rgba(99,102,241,.24) 56%, rgba(255,255,255,.06) 100%);
      box-shadow: 0 0 0 10px rgba(99,102,241,.08), 0 0 40px rgba(168,85,247,.24);
    }
    a{ color:inherit; }
    .wrap{
      position:relative;
      z-index:1;
      max-width:1120px;
      margin:14px auto 24px;
      padding:18px 16px 26px;
      border-radius:34px;
      background:linear-gradient(180deg, rgba(8,15,28,.78) 0%, rgba(6,13,24,.64) 100%);
      border:1px solid rgba(255,255,255,.085);
      box-shadow:
        0 26px 70px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -1px 0 rgba(255,255,255,.02);
      backdrop-filter: blur(18px) saturate(138%);
      -webkit-backdrop-filter: blur(18px) saturate(138%);
      overflow:hidden;
    }
    .wrap::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(560px 250px at 18% 0%, rgba(59,130,246,.13), transparent 64%),
        radial-gradient(420px 220px at 88% 8%, rgba(249,115,22,.11), transparent 60%);
      opacity:.96;
    }
    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:8px 4px 18px;
    }
    .logo img{
      height:46px;
      width:auto;
      display:block;
      filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
    }
    .title{
      margin:0;
      font-size:clamp(24px,3vw,36px);
      line-height:1.08;
      font-weight:800;
      letter-spacing:-.035em;
    }
    .sub{ color:var(--muted); margin-top:8px; font-size:14px; }
    .grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:14px; }
    @media (max-width: 860px){ .grid{ grid-template-columns:1fr; } }

    .card{
      position:relative;
      background:linear-gradient(180deg, var(--card-strong) 0%, var(--card) 100%);
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      padding:16px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(var(--blur)) saturate(142%);
      -webkit-backdrop-filter:blur(var(--blur)) saturate(142%);
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,0) 32%, rgba(255,255,255,.12) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
      opacity:.9;
    }
    .bigtemp{
      font-size:clamp(88px,12vw,176px);
      font-weight:800;
      letter-spacing:-.068em;
      line-height:.92;
      margin:8px 0 4px;
      text-shadow:0 12px 34px rgba(0,0,0,.16);
    }
    .deg{
      font-size:.33em;
      vertical-align:super;
      color:var(--accent);
      margin-left:8px;
      font-weight:700;
    }
    .meta{ display:flex; flex-wrap:wrap; gap:10px 12px; color:var(--muted); font-size:14px; }
    .pill{
      border:1px solid var(--line);
      padding:8px 12px;
      border-radius:999px;
      background:var(--chip-bg);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    .sectionTitle{ margin:0 0 10px; font-size:18px; font-weight:800; letter-spacing:-.02em; }
    .small{ font-size:13px; color:var(--muted); }
    .btn,
    .subtab,
    select{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-decoration:none;
      border:1px solid var(--btn-border);
      background:var(--btn-bg);
      padding:10px 14px;
      border-radius:14px;
      font-size:14px;
      font-weight:700;
      color:var(--btn-text);
      cursor:pointer;
      backdrop-filter:blur(14px) saturate(130%);
      -webkit-backdrop-filter:blur(14px) saturate(130%);
      transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      box-shadow:0 6px 16px rgba(0,0,0,.08);
    }
    .btn:hover,.subtab:hover{ transform:translateY(-1px); }
    .btn:active,.subtab:active{ transform:translateY(0); }
    .btn.active{
      border-color:rgba(125,211,252,.48);
      box-shadow:0 0 0 2px rgba(125,211,252,.18) inset;
    }
    .selectRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    select{
      appearance:none;
      background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.76));
      color:#111827;
      border:1px solid rgba(124,146,188,.26);
      border-radius:16px;
      padding:10px 42px 10px 14px;
      font-size:14px;
      outline:none;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 6px 14px rgba(27,38,59,.06);
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 14px center;
    }
    option{ color:#000; }
    footer{ margin:18px 0 8px; }
    .links{ display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:14px; }
    .links a{ color:var(--muted); text-decoration:none; }
    .links a:hover{ color:var(--text); text-decoration:underline; }
    .err{
      background:linear-gradient(180deg, rgba(255,105,105,.18), rgba(255,105,105,.10));
      border:1px solid rgba(255,145,145,.28);
      padding:12px 14px;
      border-radius:20px;
      color:#ffe5e5;
    }

    .radarHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .subtab{
      border:1px solid var(--line);
      background:rgba(255,255,255,.82);
      color:#111827;
      padding:10px 14px;
      border-radius:999px;
      font-weight:800;
      cursor:pointer;
      transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
      user-select:none;
      line-height:1;
      box-shadow:0 8px 18px rgba(17,24,39,.08);
    }
    .subtab.active{
      background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 55%, var(--accent3) 100%);
      color:#fff;
      border-color:transparent;
      box-shadow:0 10px 24px rgba(59,130,246,.26);
    }

    .tambonRadarPanel{ margin-top:12px; }

    .radarLegend{
      margin-top:12px;
      border:1px solid var(--line);
      border-radius:24px;
      padding:14px 16px;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
    }
    .legendTitle{ font-weight:800; margin-bottom:8px; }
    .legendRow{ display:flex; align-items:center; gap:10px; margin-top:6px; }
    .swatch{ width:18px; height:18px; border-radius:7px; border:1px solid var(--line); display:inline-block; }
    .swatch.green{ background:#22c55e; }
    .swatch.warm{ background:linear-gradient(90deg,#fde047,#fb923c,#ef4444,#ec4899); }
    .legendText{ font-size:13px; color:var(--muted); line-height:1.35; }


    .heroNewsCard{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:100%;
      background:
        radial-gradient(700px 260px at 4% 0%, rgba(125,211,252,.10), transparent 55%),
        radial-gradient(420px 220px at 92% 0%, rgba(244,114,182,.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.08) 100%);
      border-color:rgba(255,255,255,.14);
    }
    .heroNewsTopline{ margin-bottom:0; }
    .heroNewsMore{
      color:var(--text);
      text-decoration:none;
      font-weight:800;
      font-size:13px;
      opacity:.92;
    }
    .heroNewsMore:hover{ text-decoration:underline; }
    .heroNewsTitle{
      margin:0;
      font-size:clamp(22px, 2.6vw, 30px);
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:800;
    }
    .heroNewsSubtitle{
      color:var(--muted);
      font-size:14px;
      margin-top:-4px;
    }
    .heroNewsList{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:2px;
    }
    .heroNewsItem{
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .heroNewsLink{
      display:grid;
      grid-template-columns:132px 1fr;
      color:inherit;
      text-decoration:none;
      min-height:118px;
    }
    .heroNewsThumbWrap{
      background:rgba(255,255,255,.06);
      min-height:100%;
    }
    .heroNewsThumb{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .heroNewsThumbPlaceholder{
      display:grid;
      place-items:center;
      color:var(--muted);
      font-weight:800;
      font-size:14px;
      min-height:100%;
    }
    .heroNewsBody{
      padding:12px 14px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:8px;
    }
    .heroNewsMeta{
      color:var(--muted);
      font-size:12px;
      line-height:1.3;
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .heroNewsHeadline{
      margin:0;
      font-size:15px;
      line-height:1.45;
      font-weight:800;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .heroNewsCta{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--accent);
      font-weight:800;
      font-size:13px;
    }
    .heroNewsEmpty{
      border:1px dashed var(--line);
      border-radius:18px;
      padding:18px;
      text-align:center;
      color:var(--muted);
      background:rgba(255,255,255,.05);
    }

    .radarFull{ grid-column:1 / -1; }
    @media (max-width: 860px){
      .heroNewsCard{ margin-top:0; }
    }
    @media (max-width: 640px){
      .heroNewsLink{ grid-template-columns:108px 1fr; }
      .heroNewsBody{ padding:10px 12px; }
      .heroNewsHeadline{ font-size:14px; -webkit-line-clamp:2; }
    }
    @media (max-width: 720px){
      .wrap{ padding:16px 12px 26px; }
      .card{ border-radius:24px; padding:14px; }
      header{ align-items:flex-start; }
      .logo img{ height:40px; }
      .bigtemp{ font-size:clamp(76px,24vw,118px); }
    }


    .wrap{
      max-width:1180px;
      margin:10px auto 26px;
      padding:18px 16px 30px;
    }
    header{
      padding:4px 2px 18px;
    }
    .heroCard{
      padding:22px 22px 20px;
      background:
        radial-gradient(1200px 420px at 8% 0%, rgba(125,211,252,.18), transparent 56%),
        radial-gradient(580px 340px at 94% 6%, rgba(244,114,182,.10), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.10) 100%);
      border-color:rgba(255,255,255,.18);
      box-shadow:0 28px 80px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .heroTopline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:var(--muted);
      font-size:13px;
      margin-bottom:10px;
    }
    .heroBadge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    }
    .heroBadgeDot{
      width:8px;height:8px;border-radius:999px;
      background:linear-gradient(135deg, #7dd3fc, #c4b5fd);
      box-shadow:0 0 0 5px rgba(125,211,252,.12);
      flex:0 0 auto;
    }
    .heroPlace{
      font-size:clamp(28px, 4vw, 42px);
      line-height:1.04;
      font-weight:700;
      letter-spacing:-.04em;
      margin:0;
    }
    .heroCondition{
      margin-top:10px;
      font-size:17px;
      color:rgba(248,251,255,.84);
      letter-spacing:-.02em;
    }
    .heroSubline{
      margin-top:6px;
      color:var(--muted);
      font-size:14px;
    }
    .heroTempRow{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      margin-top:14px;
      flex-wrap:wrap;
    }
    .heroTempBlock{ min-width: 280px; }
    .bigtemp{
      font-size:clamp(104px,14vw,196px);
      font-weight:700;
      letter-spacing:-.09em;
      line-height:.84;
      margin:0;
      text-shadow:0 18px 42px rgba(0,0,0,.24);
    }
    .deg{
      font-size:.28em;
      vertical-align:top;
      position:relative;
      top:.18em;
      margin-left:10px;
      color:rgba(255,255,255,.82);
      font-weight:600;
    }
    .heroOrb{
      width:120px;
      height:120px;
      border-radius:50%;
      background:
        radial-gradient(circle at 34% 32%, rgba(255,255,255,.95), rgba(255,255,255,.42) 18%, rgba(255,196,113,.38) 42%, rgba(251,146,60,.18) 62%, rgba(255,255,255,0) 74%),
        radial-gradient(circle at center, rgba(255,210,138,.18), rgba(255,255,255,0) 72%);
      box-shadow:0 0 70px rgba(255,190,92,.18), inset 0 1px 16px rgba(255,255,255,.26);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      flex:0 0 auto;
      margin-bottom:12px;
    }
    .toolbarCard{
      padding:14px 16px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.09));
    }
    .selectRow{
      gap:12px;
      align-items:center;
    }
    .pickerGroup{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:210px;
      flex:1 1 210px;
    }
    .pickerLabel{
      font-size:12px;
      color:var(--muted);
      padding-left:4px;
      letter-spacing:.01em;
    }
    .pickerShell{
      position:relative;
      border-radius:20px;
      padding:2px;
      background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    select{
      width:100%;
      min-width:0;
      border-radius:18px;
      min-height:52px;
      padding:12px 44px 12px 16px;
      font-size:15px;
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 8px 18px rgba(27,38,59,.08);
    }
    .actionRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:flex-end;
    }
    .btn{
      min-height:52px;
      border-radius:18px;
      padding:0 18px;
      font-size:15px;
      box-shadow:0 12px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .btn.primary{
      background:linear-gradient(135deg, rgba(125,211,252,.96) 0%, rgba(96,165,250,.95) 52%, rgba(167,139,250,.95) 100%);
      color:#fff;
      border-color:transparent;
      box-shadow:0 16px 34px rgba(59,130,246,.26), inset 0 1px 0 rgba(255,255,255,.28);
    }
    .toolbarMeta{
      margin-top:12px;
      padding:11px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:13px;
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .meta{
      gap:10px;
      margin-top:16px !important;
    }
    .pill{
      padding:10px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.08);
    }
    .sectionTitle{
      font-size:20px;
      letter-spacing:-.03em;
    }
    .radarHeader .btn{ min-height:46px; }
    .radarLegend,
    section.card > div[style*="border:1px solid var(--line)"]{
      border-radius:26px !important;
    }
    .subtab{
      min-height:46px;
      padding:0 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
    }
    footer.card{
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
    }
    @media (max-width: 860px){
      .heroCard{ padding:18px 18px 18px; }
      .toolbarCard{ padding:14px; }
      .pickerGroup{ min-width:100%; }
      .actionRow{ width:100%; }
      .actionRow .btn{ flex:1 1 180px; }
      .heroOrb{ width:94px; height:94px; margin-bottom:0; }
      .heroTempRow{ align-items:center; }
    }

    /* 2026 refresh: simpler, faster and easier to scan */
    :root{
      color-scheme:light;
      --bg:#f3f6fa;
      --bg2:#eef3f8;
      --card:#fff;
      --card-strong:#fff;
      --panel:#f7f9fc;
      --line:#dbe4ee;
      --line-strong:#cbd8e6;
      --text:#102238;
      --muted:#607086;
      --accent:#087f5b;
      --accent2:#0b9f70;
      --accent3:#22c55e;
      --btn-bg:#f5f8fb;
      --btn-text:#183047;
      --btn-border:#d6e0ea;
      --chip-bg:#f2f6fa;
      --shadow:0 8px 26px rgba(25,48,71,.08);
    }
    html{
      background:#f3f6fa;
      background-attachment:initial;
    }
    body{
      color:var(--text);
      background:#f3f6fa;
      letter-spacing:0;
    }
    body::after{ display:none; }
    body::before,
    body[data-weather="clear"]::before,
    body[data-weather="cloudy"]::before,
    body[data-weather="rain"]::before,
    body[data-weather="storm"]::before,
    body[data-weather="night"]::before{
      background:
        radial-gradient(750px 300px at 50% -80px, rgba(22,163,74,.10), transparent 68%),
        linear-gradient(180deg, #edf7f2 0, #f3f6fa 310px);
      filter:none;
      opacity:1;
    }
    .wrap{
      max-width:1180px;
      margin:0 auto;
      padding:20px 16px 34px;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      overflow:visible;
    }
    .wrap::before{ display:none; }
    header{ padding:4px 4px 18px; }
    .logo img{ height:40px; filter:none; }
    .title{ color:#102238; font-size:clamp(25px,3vw,36px); }
    .sub,.small,.pickerLabel,.toolbarMeta{ color:var(--muted); }
    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      box-shadow:var(--shadow);
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .card::before{ display:none; }
    .toolbarCard{
      background:#fff;
      border-radius:20px;
    }
    .pickerShell{
      padding:0;
      background:transparent;
      box-shadow:none;
    }
    select{
      background-color:#fff;
      border:1px solid var(--line-strong);
      box-shadow:none;
    }
    .btn{
      color:var(--btn-text);
      background:var(--btn-bg);
      border-color:var(--btn-border);
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .btn:hover,.subtab:hover{ transform:none; border-color:#9fb3c8; }
    .btn.primary{
      color:#fff;
      background:#087f5b;
      box-shadow:none;
    }
    .toolbarMeta{
      background:#f7f9fc;
      border-color:#e2e9f0;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .heroCard{
      color:#fff;
      background:linear-gradient(145deg,#12324b 0%,#0b5360 58%,#087f5b 100%);
      border:0;
      box-shadow:0 12px 28px rgba(12,68,79,.18);
    }
    .heroCard .heroCondition,
    .heroCard .heroSubline,
    .heroCard .meta{ color:rgba(255,255,255,.82); }
    .heroCard .pill{
      color:#fff;
      background:rgba(255,255,255,.11);
      border-color:rgba(255,255,255,.18);
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .heroNewsCard{
      color:var(--text);
      background:#fff;
      border-color:var(--line);
      box-shadow:var(--shadow);
    }
    .heroNewsItem{
      background:#f7f9fc;
      border-color:#e1e8ef;
      box-shadow:none;
    }
    .heroNewsCta{ color:#087f5b; }
    .heroNewsEmpty{ background:#f7f9fc; }
    .radarHeader{ align-items:center; }
    .radarTitleLine{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .radarTitleLine .sectionTitle{ margin-bottom:0; }
    .liveBadge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:5px 9px;
      color:#087f5b;
      background:#eaf8f1;
      font-size:12px;
      font-weight:800;
    }
    .liveBadge span{
      width:7px;
      height:7px;
      border-radius:50%;
      background:#16a34a;
      box-shadow:0 0 0 4px rgba(22,163,74,.13);
    }
    .liveBadge strong{ font:inherit; }
    .liveBadge[data-state="loading"]{ color:#9a6700; background:#fff7d6; }
    .liveBadge[data-state="loading"] span{
      background:#f59e0b;
      box-shadow:0 0 0 4px rgba(245,158,11,.13);
    }
    .liveBadge[data-state="error"]{ color:#b42318; background:#fff0ed; }
    .liveBadge[data-state="error"] span{
      background:#ef4444;
      box-shadow:0 0 0 4px rgba(239,68,68,.13);
    }
    .subtab{
      color:#294158;
      background:#f4f7fa;
      border-color:#d9e2eb;
      box-shadow:none;
    }
    .subtab.active{
      color:#fff;
      background:#087f5b;
      border-color:#087f5b;
      box-shadow:none;
    }
    .tambonRadarToolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
      padding:10px;
      border:1px solid var(--line);
      border-radius:14px;
      background:#f7f9fc;
    }
    .radarControlGroup{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .radarControlLabel{ color:var(--muted); font-size:13px; font-weight:700; padding:0 3px; }
    .tambonRadarToolbar .subtab{
      min-height:40px;
      padding:0 13px;
      font-size:13px;
    }
    .radarOverlayToggle,
    .radarMarkerToggle{ min-height:40px; padding:0 14px; font-size:13px; }
    .radarOverlayToggle.active,
    .radarMarkerToggle.active{
      color:#087f5b;
      border-color:#78c5aa;
      background:#eaf8f1;
    }
    .radarViewOptions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .radarContrastToggle{
      min-height:40px;
      padding:0 14px;
      font-size:13px;
    }
    .radarContrastToggle.active{
      color:#075985;
      border-color:#7dd3fc;
      background:#eaf7ff;
    }
    .radarFocusCard{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px 18px;
      margin-bottom:10px;
      padding:11px 12px;
      border:1px solid #cfe0ed;
      border-radius:14px;
      background:linear-gradient(135deg,#f0f9ff 0%,#f4fbf7 100%);
    }
    .radarFocusLead{
      display:flex;
      align-items:center;
      gap:11px;
      min-width:0;
    }
    .radarFocusCopy{
      display:grid;
      gap:2px;
      min-width:0;
    }
    .radarFocusEyebrow{
      color:#607086;
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .radarFocusPlace{
      color:#102238;
      font-size:15px;
      line-height:1.25;
    }
    .radarFocusWeather{
      color:#51667b;
      font-size:12px;
      line-height:1.35;
    }
    .radarMarkerKey{
      position:relative;
      width:24px;
      height:24px;
      flex:0 0 24px;
      border:2px solid #fff;
      border-radius:50%;
      background:#0ea5e9;
      box-shadow:0 0 0 4px rgba(14,165,233,.18),0 2px 8px rgba(3,105,161,.28);
    }
    .radarMarkerKey::before,
    .radarMarkerKey::after{
      content:"";
      position:absolute;
      background:#fff;
    }
    .radarMarkerKey::before{ width:12px; height:2px; left:4px; top:9px; }
    .radarMarkerKey::after{ width:2px; height:12px; left:9px; top:4px; }
    .radarFocusActions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:7px;
      flex-wrap:wrap;
    }
    .radarFocusActions .btn{
      min-height:38px;
      padding:0 11px;
      border-radius:10px;
      font-size:12px;
      white-space:nowrap;
    }
    .radarFocusActions [hidden]{ display:none !important; }
    .radarLoopToggle.active{
      color:#9a3412;
      border-color:#fdba74;
      background:#fff7ed;
    }
    .radarAutoRefresh{
      color:#607086;
      font-size:11px;
      font-weight:700;
      white-space:nowrap;
    }
    .radarZoomBar{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
      color:#41556b;
      font-size:13px;
    }
    .radarZoomBar label{ white-space:nowrap; }
    .radarZoomBar input[type="range"]{ flex:1; accent-color:#087f5b; min-width:90px; }
    .zoomButton,.zoomReset{
      min-width:38px;
      min-height:38px;
      border:1px solid var(--line-strong);
      border-radius:10px;
      color:#183047;
      background:#fff;
      font-weight:800;
      cursor:pointer;
    }
    .zoomReset{ padding:0 11px; white-space:nowrap; }
    .radarViewerShell{
      width:100%;
      max-width:832px;
      margin-inline:auto;
      overflow:hidden;
      border:1px solid #1f3448;
      border-radius:16px;
      background:#07111f;
      box-shadow:0 8px 22px rgba(7,17,31,.13);
    }
    .tmdRadarScroll{
      width:100%;
      max-height:none;
      overflow:visible;
      overscroll-behavior:contain;
      background:#07111f;
    }
    .tmdRadarScroll.is-zoomed{
      max-height:min(76vh,820px);
      overflow:auto;
    }
    .tmdRadarStage{
      position:relative;
      width:100%;
      min-width:100%;
      aspect-ratio:1 / 1;
      line-height:0;
      transition:width .18s ease;
      transform-origin:top left;
    }
    .tmdRadarBase{
      display:block;
      width:100%;
      height:auto;
      transition:filter .18s ease;
    }
    .tmdRadarOverlay{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:fill;
      pointer-events:none;
      transition:opacity .16s ease;
    }
    .tmdRadarBoundary{
      position:absolute;
      inset:0;
      z-index:3;
      width:100%;
      height:100%;
      object-fit:fill;
      pointer-events:none;
    }
    .tmdRadarStage.is-rain-focus .tmdRadarBase{
      filter:saturate(1.45) contrast(1.1) brightness(1.02);
    }
    .tmdRadarStage.is-rain-focus .tmdRadarOverlay{ opacity:.72; }
    .tmdRadarOverlay.is-hidden{ opacity:0 !important; }
    .radarLocationMarker{
      position:absolute;
      z-index:5;
      left:var(--radar-marker-x,50%);
      top:var(--radar-marker-y,50%);
      display:block;
      width:0;
      height:0;
      pointer-events:none;
      transition:left .22s ease,top .22s ease,opacity .16s ease;
    }
    .radarLocationMarker.is-hidden{ opacity:0; }
    .radarLocationMarker.is-user-hidden{ display:none !important; }
    .radarMarkerPulse{
      position:absolute;
      width:28px;
      height:28px;
      left:-14px;
      top:-14px;
      border:2px solid rgba(125,211,252,.95);
      border-radius:50%;
      background:rgba(14,165,233,.13);
      box-shadow:0 0 0 4px rgba(2,6,23,.32),0 0 18px rgba(56,189,248,.9);
      animation:radarMarkerPulse 1.8s ease-out infinite;
    }
    .radarMarkerPulse::before,
    .radarMarkerPulse::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      background:#fff;
      transform:translate(-50%,-50%);
      box-shadow:0 1px 2px rgba(2,6,23,.8);
    }
    .radarMarkerPulse::before{ width:18px; height:2px; }
    .radarMarkerPulse::after{ width:2px; height:18px; }
    .radarMarkerLabel{
      position:absolute;
      left:0;
      top:18px;
      max-width:150px;
      padding:5px 8px;
      border:1px solid rgba(255,255,255,.74);
      border-radius:8px;
      color:#fff;
      background:rgba(2,17,32,.88);
      box-shadow:0 4px 12px rgba(2,6,23,.35);
      font-size:12px;
      font-weight:800;
      line-height:1.2;
      white-space:nowrap;
      transform:translateX(-50%);
    }
    @keyframes radarMarkerPulse{
      0%{ box-shadow:0 0 0 4px rgba(2,6,23,.32),0 0 0 0 rgba(56,189,248,.5); }
      70%,100%{ box-shadow:0 0 0 4px rgba(2,6,23,.32),0 0 0 14px rgba(56,189,248,0); }
    }
    .radarImageNotice{
      position:absolute;
      z-index:6;
      top:10px;
      right:10px;
      display:none;
      align-items:center;
      gap:6px;
      max-width:calc(100% - 20px);
      padding:7px 9px;
      border:1px solid rgba(255,255,255,.32);
      border-radius:999px;
      color:#fff;
      background:rgba(2,17,32,.82);
      font-size:11px;
      font-weight:800;
      line-height:1.2;
    }
    .radarImageNotice[data-state="loading"],
    .radarImageNotice[data-state="error"]{ display:inline-flex; }
    .radarImageNotice[data-state="error"]{ background:rgba(127,29,29,.9); }
    .radarFullscreenExit{
      display:none;
      position:fixed;
      z-index:999999;
      top:12px;
      right:12px;
      min-height:42px;
      padding:0 14px;
      border:1px solid rgba(255,255,255,.5);
      border-radius:12px;
      color:#fff;
      background:rgba(2,17,32,.86);
      font:700 13px/1 system-ui,sans-serif;
      cursor:pointer;
    }
    body.radar-fullscreen-open{ overflow:hidden; }
    .radarViewerShell:fullscreen,
    .radarViewerShell.is-pseudo-fullscreen{
      width:100vw;
      max-width:none;
      height:100vh;
      margin:0;
      border:0;
      border-radius:0;
      background:#07111f;
    }
    .radarViewerShell.is-pseudo-fullscreen{
      position:fixed;
      inset:0;
      z-index:9999;
    }
    .radarViewerShell:fullscreen .tmdRadarScroll,
    .radarViewerShell.is-pseudo-fullscreen .tmdRadarScroll{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100vh;
      max-height:none;
      overflow:auto;
    }
    .radarViewerShell:fullscreen .tmdRadarStage,
    .radarViewerShell.is-pseudo-fullscreen .tmdRadarStage{
      width:var(--radar-fullscreen-size,100vmin) !important;
      min-width:var(--radar-fullscreen-size,100vmin);
      flex:0 0 auto;
    }
    .radarViewerShell:fullscreen .radarFullscreenExit,
    .radarViewerShell.is-pseudo-fullscreen .radarFullscreenExit{ display:inline-flex; align-items:center; }
    .tambonRadarStatus{
      display:flex;
      justify-content:space-between;
      gap:8px 16px;
      flex-wrap:wrap;
      margin-top:9px;
    }
    .provinceLineKey{
      display:inline-block;
      width:22px;
      height:3px;
      margin-right:4px;
      border-radius:99px;
      vertical-align:middle;
      background:#ff2d20;
    }
    .toolbarMetaActions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px 12px;
      flex-wrap:wrap;
    }
    .locationDetails{
      position:relative;
      color:#607086;
      font-size:12px;
    }
    .locationDetails summary{
      cursor:pointer;
      font-weight:700;
      list-style:none;
    }
    .locationDetails summary::-webkit-details-marker{ display:none; }
    .locationDetails summary::after{ content:" +"; }
    .locationDetails[open] summary::after{ content:" −"; }
    .locationDetails[open] .locationMeta{
      display:block;
      position:absolute;
      z-index:20;
      right:0;
      top:calc(100% + 7px);
      width:max-content;
      max-width:min(520px,80vw);
      padding:9px 11px;
      border:1px solid var(--line);
      border-radius:10px;
      color:#51667b;
      background:#fff;
      box-shadow:0 10px 24px rgba(25,48,71,.13);
    }
    .radarJumpLink{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:0 10px;
      border:1px solid #a7d8c6;
      border-radius:999px;
      color:#087f5b;
      background:#edf9f4;
      font-size:12px;
      font-weight:800;
      text-decoration:none;
      white-space:nowrap;
    }
    .radarLegendScale{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
      margin-top:10px;
    }
    .radarLegendLevel{
      overflow:hidden;
      border:1px solid #dbe4ee;
      border-radius:10px;
      background:#fff;
    }
    .radarLegendColor{ display:block; height:9px; }
    .radarLegendColor.light{ background:linear-gradient(90deg,#1ed760,#64e572); }
    .radarLegendColor.medium{ background:linear-gradient(90deg,#e8ed36,#ffd32a); }
    .radarLegendColor.heavy{ background:linear-gradient(90deg,#ff9f1a,#ef2b2d); }
    .radarLegendColor.severe{ background:linear-gradient(90deg,#f500a6,#8f2ad7); }
    .radarLegendLevel strong,
    .radarLegendLevel small{
      display:block;
      padding:0 8px;
    }
    .radarLegendLevel strong{ margin-top:7px; color:#294158; font-size:12px; }
    .radarLegendLevel small{ margin:2px 0 7px; color:#75869a; font-size:10px; }
    .radarLegendKeys{
      display:flex;
      align-items:center;
      gap:8px 18px;
      flex-wrap:wrap;
      margin-top:10px;
      color:#607086;
      font-size:11px;
    }
    .legendBoundaryKey,
    .legendAreaKey{
      display:inline-block;
      width:21px;
      height:3px;
      margin-right:5px;
      border-radius:99px;
      vertical-align:middle;
    }
    .legendBoundaryKey{ background:#ff2d20; }
    .legendAreaKey{ background:#cbd5e1; }
    .legendMarkerKey{
      display:inline-block;
      width:12px;
      height:12px;
      margin-right:5px;
      border:2px solid #fff;
      border-radius:50%;
      vertical-align:-2px;
      background:#0ea5e9;
      box-shadow:0 0 0 2px #0ea5e9;
    }
    .forecastCard{
      content-visibility:auto;
      contain-intrinsic-size:auto 760px;
    }
    .radarLegend{
      border-radius:14px;
      background:#f7f9fc;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .weatherOverviewGrid{ align-items:start; }
    .heroNewsCard{
      min-height:0;
      align-self:start;
    }
    .heroNewsLink{
      grid-template-columns:112px 1fr;
      min-height:112px;
    }
    .heroNewsThumbWrap{ background:#eef4f7; }
    .heroNewsThumb{
      object-fit:contain;
      padding:5px;
    }
    .toolbarMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:6px 16px;
      flex-wrap:wrap;
    }
    .toolbarMeta strong{
      color:#294158;
      font-size:13px;
    }
    .locationMeta{
      color:#75869a;
      font-size:12px;
    }
    .weatherStatus{
      display:inline-flex;
      align-items:center;
      gap:7px;
      width:max-content;
      max-width:100%;
      margin-top:12px;
      padding:7px 10px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:999px;
      color:rgba(255,255,255,.86);
      background:rgba(255,255,255,.09);
      font-size:12px;
      font-weight:700;
    }
    .weatherStatus::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:#86efac;
      flex:0 0 auto;
    }
    .weatherStatus[data-state="loading"]::before{
      background:#fde68a;
      box-shadow:0 0 0 4px rgba(253,230,138,.13);
    }
    .weatherStatus[data-state="stale"]::before{ background:#fbbf24; }
    .weatherStatus[data-state="error"]::before{ background:#fca5a5; }
    .bigtemp.is-empty{
      max-width:360px;
      font-size:clamp(24px,3.2vw,36px);
      letter-spacing:-.03em;
      line-height:1.2;
      margin:28px 0 20px;
    }
    .bigtemp.is-empty .deg{ display:none; }
    .heroCard.is-loading{ cursor:progress; }
    @media (min-width:641px) and (max-width:860px){
      .pickerGroup{
        min-width:0;
        flex:1 1 calc(50% - 6px);
      }
      .actionRow{ width:100%; }
      .actionRow .btn{
        flex:1 1 0;
        min-width:0;
      }
    }
    footer.card{ background:#fff; }
    @media (max-width:640px){
      .wrap{ padding:14px 10px 26px; }
      header{ align-items:flex-start; }
      .logo img{ height:34px; }
      .card{ border-radius:16px; padding:13px; }
      .radarHeader{ align-items:flex-start; }
      .radarHeader .btn{ min-height:40px; padding:0 12px; font-size:13px; }
      .tambonRadarToolbar{ align-items:stretch; }
      .radarControlGroup{ width:100%; }
      .radarControlGroup .subtab{ flex:1 1 auto; }
      .radarViewOptions{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
      }
      .radarOverlayToggle,
      .radarMarkerToggle,
      .radarContrastToggle{ width:auto; min-width:0; padding:0 8px; }
      .radarContrastToggle{ grid-column:1 / -1; }
      .zoomReset{ display:none; }
      .tmdRadarScroll.is-zoomed{ max-height:68vh; }
      .tambonRadarStatus{ display:block; }
      .tambonRadarStatus .small + .small{ margin-top:6px; }
      .radarFocusCard{ align-items:flex-start; flex-direction:column; }
      .radarFocusActions{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
      }
      .radarFocusActions .btn{ width:100%; }
      .radarFocusActions .btn:last-child{ grid-column:1 / -1; }
      .radarLoopToggle[hidden] + #radarFullscreenBtn{ grid-column:auto; }
      .radarAutoRefresh{ grid-column:1 / -1; }
      .radarLegendScale{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      .radarMarkerLabel{ max-width:110px; font-size:10px; }
      select,.btn{ min-height:48px; }
      .actionRow{ flex-wrap:nowrap; }
      .actionRow .btn{
        flex:1 1 0;
        min-width:0;
      }
      .toolbarMeta{ align-items:flex-start; }
      .toolbarMetaActions{ width:100%; justify-content:space-between; }
      .locationDetails[open] .locationMeta{
        right:auto;
        left:0;
        max-width:calc(100vw - 46px);
      }
      .heroOrb{ display:none; }
      .heroTempBlock{ min-width:0; }
      .heroTempRow{ margin-top:10px; }
      .bigtemp{ font-size:clamp(76px,28vw,104px); }
      .heroTopline > div:last-child{ display:none; }
      .heroCard .meta{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
        margin-top:12px !important;
      }
      .heroCard .meta .pill{
        min-width:0;
        padding:8px 9px;
        border-radius:12px;
        font-size:11px;
        line-height:1.3;
      }
      .heroCard .meta .pill:first-child,
      .heroCard .meta .pill:last-child{ grid-column:1 / -1; }
      .heroNewsLink{ grid-template-columns:96px 1fr; }
    }
    @media (prefers-reduced-motion:reduce){
      .radarMarkerPulse{ animation:none; }
      .tmdRadarStage,
      .radarLocationMarker{ transition:none; }
    }