:root{
    --night-1:#0b1e33;
    --night-2:#123252;
    --turquoise:#2fb8ae;
    --turquoise-soft:#7fd8cf;
    --sand:#e0a85e;
    --clay:#e0684a;
    --rain:#5aa7e0;
    --paper:#f4efe4;
    --paper-dim:rgba(244,239,228,.68);
    --paper-faint:rgba(244,239,228,.4);
    --card:rgba(255,255,255,.05);
    --card-border:rgba(255,255,255,.1);
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:9px;
    --font-ui:'Rubik','Noto Sans JP',sans-serif;
    --font-display:'Space Grotesk','Rubik',sans-serif;
  }
  *{box-sizing:border-box;}
  [hidden]{display:none!important;}
  .app-version{margin:0 0 6px;font-size:.7rem;line-height:1;text-align:right;color:var(--paper-dim);opacity:.8;}
  .pwa-tools{margin:0 0 18px;font-size:.85rem;color:var(--paper-dim);}
  .pwa-tools button{font:inherit;background:var(--turquoise);color:#062421;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;}
  .pwa-tools a.pwa-button{font:inherit;display:inline-block;text-decoration:none;background:var(--turquoise);color:#062421;border-radius:999px;padding:10px 16px;}
  .pwa-tools p.pwa-diag{font-size:.65rem;opacity:.6;word-break:break-all;margin:6px 0;}
  .pwa-tools p{margin:8px 0;}
  .share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .share-note{font-size:.75rem;line-height:1.5;opacity:.85;}
  .pwa-guide{background:linear-gradient(120deg,rgba(47,184,174,.18),rgba(47,184,174,.04));border:1px solid var(--turquoise);border-radius:var(--radius-md);padding:18px;margin-bottom:12px;}
  .pwa-guide h2{font-size:1rem;line-height:1.6;margin:0;color:var(--paper);}
  .pwa-guide ol{padding-left:24px;line-height:1.7;margin:12px 0;}
  .pwa-guide li{padding-left:4px;margin-bottom:6px;}
  .pwa-guide-actions{display:flex;flex-wrap:wrap;gap:10px;}
  .pwa-tools .pwa-secondary{background:transparent;border:1px solid var(--card-border);color:var(--paper);}
  #weatherSaved{font-size:.85rem;color:var(--sand);margin-bottom:14px;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-ui);
    background:
      radial-gradient(1200px 700px at 82% -8%, rgba(47,184,174,.18), transparent 60%),
      radial-gradient(900px 600px at -10% 15%, rgba(224,168,94,.12), transparent 55%),
      linear-gradient(180deg,var(--night-1),var(--night-2) 55%, #0d2440 100%);
    color:var(--paper);
    min-height:100vh;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:960px;margin:0 auto;padding:20px 18px 48px;}

  header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-mark{width:38px;height:38px;flex:none;}
  .brand h1{font-family:var(--font-display);font-size:1.28rem;font-weight:700;margin:0;letter-spacing:.2px;}
  .brand p{margin:2px 0 0;font-size:.78rem;color:var(--paper-dim);}
  .lang-switch{display:flex;gap:4px;background:rgba(255,255,255,.06);padding:4px;border-radius:999px;border:1px solid var(--card-border);flex:none;}
  .lang-switch button{
    appearance:none;border:none;background:transparent;color:var(--paper-faint);
    font-family:var(--font-ui);font-size:.74rem;font-weight:600;padding:7px 11px;border-radius:999px;cursor:pointer;
    transition:background .18s ease,color .18s ease;
  }
  .lang-switch button.active{background:var(--turquoise);color:#062421;}

  .alert{
    display:none;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--radius-md);
    background:linear-gradient(90deg, rgba(224,104,74,.22), rgba(224,104,74,.08));
    border:1px solid rgba(224,104,74,.45);margin-bottom:18px;
  }
  .alert.show{display:flex;}
  .alert svg{flex:none;width:26px;height:26px;color:var(--clay);}
  .alert-text b{display:block;font-size:.86rem;color:#ffd9cd;}
  .alert-text span{font-size:.76rem;color:var(--paper-dim);}

  .city-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;scrollbar-width:none;}
  .city-scroll::-webkit-scrollbar{display:none;}
  .city-chip{
    flex:none;appearance:none;cursor:pointer;font-family:var(--font-ui);font-weight:500;font-size:.82rem;
    color:var(--paper-dim);background:var(--card);border:1px solid var(--card-border);
    padding:9px 15px;border-radius:999px;white-space:nowrap;transition:all .15s ease;
  }
  .city-chip.active{background:var(--turquoise);border-color:var(--turquoise);color:#062421;font-weight:700;}

  /* ---- location search ---- */
  .locbar{position:relative;margin-bottom:10px;}
  .locbar-row{display:flex;gap:8px;}
  .locbar input{
    flex:1;min-width:0;appearance:none;font-family:var(--font-ui);font-size:.86rem;color:var(--paper);
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:11px 14px;outline:none;transition:border-color .15s ease;
  }
  .locbar input::placeholder{color:var(--paper-faint);}
  .locbar input:focus{border-color:var(--turquoise);}
  .locbar-btn{
    flex:none;appearance:none;cursor:pointer;border:1px solid var(--card-border);background:var(--card);
    color:var(--paper-dim);border-radius:var(--radius-sm);padding:0 14px;font-size:1rem;
    display:flex;align-items:center;justify-content:center;transition:all .15s ease;
  }
  .locbar-btn:hover{color:var(--paper);}
  .locbar-btn.loading{color:var(--turquoise-soft);}
  .locresults{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
    background:#0f2c48;border:1px solid var(--card-border);border-radius:var(--radius-md);
    overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.35);display:none;
  }
  .locresults.show{display:block;}
  .locresults button{
    width:100%;text-align:left;appearance:none;border:none;background:transparent;cursor:pointer;
    color:var(--paper);font-family:var(--font-ui);padding:11px 14px;font-size:.84rem;
    border-bottom:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:1px;
  }
  .locresults button:last-child{border-bottom:none;}
  .locresults button:hover{background:rgba(47,184,174,.14);}
  .locresults button small{color:var(--paper-dim);font-size:.72rem;}
  .locresults .locmsg{padding:12px 14px;font-size:.8rem;color:var(--paper-dim);}
  .site-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scrollbar-width:none;}
  .site-scroll::-webkit-scrollbar{display:none;}
  .site-chip{
    flex:none;appearance:none;cursor:pointer;font-family:var(--font-ui);font-weight:500;font-size:.78rem;
    color:var(--sand);background:rgba(224,168,94,.1);border:1px solid rgba(224,168,94,.3);
    padding:7px 13px;border-radius:999px;white-space:nowrap;transition:all .15s ease;
  }
  .site-chip:hover{background:rgba(224,168,94,.2);}
  .site-chip.active{background:var(--sand);border-color:var(--sand);color:#2a1a06;font-weight:700;}

  .hero-loading{opacity:.55;}
  .hero-err{
    display:none;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--radius-md);
    background:rgba(224,104,74,.12);border:1px solid rgba(224,104,74,.35);margin-bottom:14px;font-size:.82rem;color:var(--paper-dim);
  }
  .hero-err.show{display:flex;justify-content:space-between;}
  .hero-err button{
    appearance:none;border:1px solid var(--card-border);background:transparent;color:var(--paper);
    font-family:var(--font-ui);font-size:.78rem;padding:6px 12px;border-radius:999px;cursor:pointer;flex:none;
  }

  .hero{
    position:relative;overflow:hidden;border-radius:var(--radius-lg);
    background:linear-gradient(135deg,#0f2c4a,#164a52 70%,#1c5a54);
    border:1px solid rgba(255,255,255,.08);
    padding:26px 24px 22px;margin-bottom:18px;
  }
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(420px 260px at 88% -10%, rgba(127,216,207,.25), transparent 65%);
  }
  .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative;}
  .hero-place b{font-family:var(--font-display);font-size:1.3rem;font-weight:700;}
  .hero-place span{display:block;font-size:.78rem;color:var(--paper-dim);margin-top:2px;}
  .hero-cond-icon{width:64px;height:64px;flex:none;}
  .hero-main{display:flex;align-items:flex-end;gap:18px;margin-top:6px;position:relative;flex-wrap:wrap;}
  .hero-temp{font-family:var(--font-display);font-size:4.6rem;line-height:1;font-weight:700;letter-spacing:-2px;}
  .hero-temp sup{font-size:2rem;font-weight:600;vertical-align:14px;}
  .hero-meta{padding-bottom:10px;}
  .hero-meta .cond{font-size:1rem;font-weight:600;}
  .hero-meta .feels{font-size:.8rem;color:var(--paper-dim);margin-top:3px;}
  .hero-lohi{margin-left:auto;text-align:right;padding-bottom:8px;font-size:.85rem;color:var(--paper-dim);position:relative;}
  .hero-lohi b{color:var(--paper);}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:22px;}
  .stat{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-md);
    padding:13px 14px;
  }
  .stat .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--paper-faint);margin-bottom:6px;}
  .stat .v{font-size:1.12rem;font-weight:700;font-family:var(--font-display);}
  .stat .sub{font-size:.72rem;color:var(--paper-dim);margin-top:2px;}
  .dust-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden;}
  .dust-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--turquoise),var(--sand),var(--clay));}

  .sec-h{font-size:.8rem;font-weight:600;color:var(--paper-dim);text-transform:uppercase;letter-spacing:.5px;margin:26px 0 10px 2px;}
  .sec-h:first-of-type{margin-top:0;}

  /* ---- 3-day hourly (Yahoo!-style) ---- */
  .daytabs{display:flex;gap:6px;margin-bottom:10px;}
  .daytab{
    flex:1;appearance:none;cursor:pointer;font-family:var(--font-ui);font-weight:600;font-size:.82rem;
    color:var(--paper-dim);background:var(--card);border:1px solid var(--card-border);
    padding:9px 6px;border-radius:var(--radius-sm);text-align:center;transition:all .15s ease;
  }
  .daytab .d{font-size:.68rem;font-weight:400;color:var(--paper-faint);display:block;margin-top:1px;}
  .daytab.active{background:var(--turquoise);border-color:var(--turquoise);color:#062421;}
  .daytab.active .d{color:#0a2f2a;}
  .hourly-list{display:flex;flex-direction:column;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--card-border);max-height:420px;overflow-y:auto;}
  .hrow{display:grid;grid-template-columns:52px 30px 1fr 44px 62px;align-items:center;gap:10px;padding:9px 14px;background:var(--card);font-size:.85rem;}
  .hrow:nth-child(even){background:rgba(255,255,255,.03);}
  .hrow.now{background:rgba(47,184,174,.18);}
  .hrow .time{color:var(--paper-dim);font-size:.78rem;}
  .hrow svg{width:20px;height:20px;}
  .hrow .cond-name{color:var(--paper-faint);font-size:.76rem;}
  .hrow .precip{color:var(--rain);font-weight:600;font-size:.78rem;text-align:right;}
  .hrow .temp{font-weight:700;text-align:right;font-family:var(--font-display);}

  /* ---- daily list ---- */
  .daily{display:flex;flex-direction:column;gap:1px;margin-bottom:8px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--card-border);background:rgba(255,255,255,.04);}
  .daily-scale{display:grid;grid-template-columns:56px 30px minmax(0,1fr) 26px;gap:12px;padding:10px 14px 9px;background:rgba(7,28,48,.72);border-bottom:1px solid var(--card-border);}
  .daily-scale-inner{grid-column:3;min-width:0;}
  .daily-scale-title{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px;color:var(--paper-dim);font-size:.68rem;font-weight:600;}
  .daily-scale-title strong{color:var(--paper);font-family:var(--font-display);font-size:.72rem;}
  .daily-scale-axis{position:relative;display:flex;justify-content:space-between;color:var(--paper-faint);font-family:var(--font-display);font-size:.64rem;padding-top:7px;}
  .daily-scale-axis::before{content:"";position:absolute;left:0;right:0;top:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--turquoise-soft),var(--sand));opacity:.8;}
  .daily-scale-axis span{position:relative;min-width:30px;}
  .daily-scale-axis span:nth-child(2){text-align:center;}
  .daily-scale-axis span:last-child{text-align:right;}
  .daily-scale-axis span::before{content:"";position:absolute;top:-7px;width:1px;height:5px;background:rgba(255,255,255,.45);}
  .daily-scale-axis span:first-child::before{left:0;}
  .daily-scale-axis span:nth-child(2)::before{left:50%;}
  .daily-scale-axis span:last-child::before{right:0;}
  .drow{display:grid;grid-template-columns:56px 30px minmax(0,1fr) 26px;align-items:center;gap:12px;padding:10px 14px 11px;background:var(--card);}
  .drow:nth-child(even){background:rgba(255,255,255,.03);}
  .drow .day{font-size:.85rem;font-weight:600;}
  .drow .day small{display:block;font-size:.68rem;color:var(--paper-faint);font-weight:400;}
  .drow svg{width:22px;height:22px;}
  .drow .temp-range{min-width:0;}
  .drow .temp-values{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;line-height:1;}
  .drow .bar{height:7px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);}
  .drow .bar i{position:absolute;top:0;bottom:0;min-width:7px;border-radius:99px;background:linear-gradient(90deg,var(--turquoise-soft),var(--sand));box-shadow:0 0 8px rgba(127,216,207,.15);}
  .drow .bar i::before,.drow .bar i::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 2px #173652;}
  .drow .bar i::before{left:0;background:var(--turquoise-soft);}
  .drow .bar i::after{right:0;background:var(--sand);}
  .drow .lo,.drow .hi{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--font-display);font-size:.78rem;font-weight:700;}
  .drow .temp-values small{font-family:var(--font-ui);font-size:.56rem;font-weight:500;letter-spacing:.2px;opacity:.72;}
  .drow .lo{color:#8dceff;}
  .drow .hi{color:#ff9a76;}
  .drow .rel{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.72rem;font-weight:800;color:#0b1d1b;}
  .rel-A{background:#5fd6a0;} .rel-B{background:#f0c75e;} .rel-C{background:#ef8a7a;}
  .range-tabs{display:flex;gap:6px;align-items:center;margin-bottom:10px;}
  .range-tabs .daytab{flex:0 0 auto;padding:6px 14px;}
  .rel-help-btn{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--card-border);background:var(--card);color:var(--paper);font-weight:700;cursor:pointer;}
  .rel-help{display:none;margin-bottom:10px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--card-border);background:var(--card);font-size:.8rem;line-height:1.6;}
  .rel-help.show{display:block;}
  .rel-help div{display:flex;gap:8px;align-items:flex-start;margin-top:6px;}
  .rel-help .rel{flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.72rem;font-weight:800;color:#0b1d1b;}

  /* ---- my places (max 3, one-click switch) ---- */
  .places{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
  .place-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--card-border);background:var(--card);color:var(--paper);font-size:.82rem;cursor:pointer;}
  .place-tab.active{background:var(--turquoise);border-color:var(--turquoise);color:#062421;font-weight:700;}
  .place-tab .x{opacity:.6;font-size:.9rem;padding:0 2px;}
  .place-add{padding:7px 12px;border-radius:999px;border:1px dashed var(--card-border);background:transparent;color:var(--paper-dim);font-size:.8rem;cursor:pointer;}
  .place-add.on{border-style:solid;color:var(--sand);}
  .places-msg{width:100%;font-size:.74rem;color:var(--paper-dim);}
  .geo-ask{display:none;margin-bottom:10px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--card-border);background:var(--card);font-size:.84rem;}
  .geo-ask.show{display:block;}
  .geo-ask .row{display:flex;gap:8px;margin-top:8px;}
  .geo-ask button{padding:7px 14px;border-radius:999px;border:1px solid var(--card-border);background:transparent;color:var(--paper);cursor:pointer;}
  .geo-ask button.primary{background:var(--turquoise);border-color:var(--turquoise);color:#062421;font-weight:700;}

  /* ---- weather report / snapshot ---- */
  .wx-report{margin:-4px 0 12px;font-size:.78rem;}
  .wx-report-btn{background:none;border:none;color:var(--turquoise-soft);text-decoration:underline;cursor:pointer;padding:4px 0;font-size:.78rem;}
  .wx-report-panel{display:none;margin-top:6px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--card-border);background:var(--card);}
  .wx-report-panel.show{display:block;}
  .wx-report-panel .opts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
  .wx-report-panel .opts button,.wx-report-panel .tools button{padding:6px 12px;border-radius:999px;border:1px solid var(--card-border);background:transparent;color:var(--paper);cursor:pointer;font-size:.78rem;}
  .wx-report-panel .opts button.sel{background:var(--turquoise);color:#062421;border-color:var(--turquoise);}
  .wx-report-panel .tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
  .wx-report-panel .msg{color:var(--paper-dim);margin-top:6px;}
  .wx-feedback{margin-bottom:16px;}
  .wx-feedback-btn{
    appearance:none;border:1px solid var(--card-border);background:var(--card);color:var(--paper);
    font-family:var(--font-ui);font-size:.78rem;padding:7px 14px;border-radius:999px;cursor:pointer;
    transition:all .15s ease;
  }
  .wx-feedback-btn:hover{border-color:var(--turquoise);}
  .wx-feedback-panel .fb-title{font-weight:600;color:var(--paper);font-size:.82rem;}
  .wx-feedback-panel textarea{
    width:100%;font-family:var(--font-ui);font-size:.82rem;color:var(--paper);
    background:rgba(0,0,0,.22);border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:9px 11px;margin:4px 0;resize:vertical;outline:none;
  }
  .wx-feedback-panel textarea:focus{border-color:var(--turquoise);}
  .wx-feedback-panel .tools button.primary{background:var(--turquoise);color:#062421;border-color:var(--turquoise);font-weight:700;}

  /* ---- radar ---- */
  .radar-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--card-border);background:#0a1c2c;}
  #radarMap{width:100%;height:360px;background:#0a1c2c;}
  .radar-gate{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:28px;background:linear-gradient(180deg,rgba(11,30,51,.4),rgba(11,30,51,.85));
    z-index:500;
  }
  .radar-gate svg{width:40px;height:40px;color:var(--turquoise-soft);}
  .radar-gate p{max-width:320px;font-size:.85rem;color:var(--paper-dim);margin:0;}
  .radar-gate.busy > :not(#radarGateMsg){display:none;}
  .radar-gate:not(.busy) #radarGateMsg{display:none;}
  .radar-btn{
    appearance:none;border:none;cursor:pointer;background:var(--turquoise);color:#062421;
    font-family:var(--font-ui);font-weight:700;font-size:.85rem;padding:11px 20px;border-radius:999px;
  }
  .radar-btn.ghost{background:transparent;border:1px solid var(--card-border);color:var(--paper-dim);}
  .radar-controls{
    position:absolute;left:0;right:0;bottom:0;z-index:500;display:flex;align-items:center;gap:10px;
    padding:10px 14px;background:linear-gradient(0deg,rgba(10,28,44,.92),rgba(10,28,44,0));
  }
  .radar-play{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--card-border);background:rgba(255,255,255,.08);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .radar-controls input[type=range]{flex:1;accent-color:var(--turquoise);}
  .radar-time{flex:none;font-size:.74rem;color:var(--paper-dim);min-width:92px;text-align:right;white-space:nowrap;}
  .radar-legend{
    position:absolute;top:10px;left:10px;z-index:450;display:flex;flex-direction:column;gap:6px;
    padding:8px 10px;border-radius:12px;background:rgba(10,28,44,.75);font-size:.68rem;color:var(--paper-dim);
  }
  .radar-legend div{display:flex;align-items:center;gap:7px;}
  .radar-legend i{display:block;width:74px;height:8px;border-radius:4px;}
  .radar-legend .lg-cloud{background:linear-gradient(90deg,rgba(207,216,230,0),rgba(207,216,230,.55));border:1px solid rgba(255,255,255,.15);}
  .radar-legend .lg-rain{background:linear-gradient(90deg,#8ecbff,#4aa3ff,#2a6bff,#7a3cff,#d63cff);}
  .radar-note{font-size:.7rem;color:var(--paper-faint);margin-top:8px;text-align:right;}
  .radar-status{font-size:.72rem;color:var(--paper-faint);margin-bottom:8px;}

  footer{margin-top:28px;font-size:.72rem;color:var(--paper-faint);line-height:1.6;border-top:1px solid var(--card-border);padding-top:16px;}
  footer code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;}

  @media (max-width:480px){
    header{flex-wrap:wrap;}
    .lang-switch{flex-wrap:wrap;max-width:100%;}
    .hero-temp{font-size:3.6rem;}
    .daily-scale,.drow{grid-template-columns:48px 24px minmax(0,1fr) 22px;gap:8px;padding-left:10px;padding-right:10px;}
    .daily-scale-title{font-size:.64rem;}
    .hrow{grid-template-columns:44px 24px 1fr 40px 54px;padding:8px 10px;font-size:.8rem;}
  }