/* System font stack */
  .wd-wrap{max-width:1400px;margin:0 auto;padding:0 1.25rem;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;}

  /* Hero */
  .wd-hero{padding:2.5rem 1.5rem 1.5rem;text-align:center;background:linear-gradient(180deg,#0c1220 0%,#111827 100%);margin-bottom:.5rem;}
  .wd-hero h1{font-family:inherit;font-size:clamp(2.2rem,5vw,3.2rem);color:#f5f5f7;margin:0 0 .5rem;font-weight:600;letter-spacing:-.03em;}
  .wd-hero h1 span{color:#58a6ff;}
  .wd-hero p{color:#a1a1a6;font-size:1.1rem;max-width:48rem;margin:0 auto;line-height:1.5;}

  /* Location bar */
  .wd-loc{display:flex;align-items:center;gap:.75rem;justify-content:center;padding:1.25rem 0;flex-wrap:wrap;}
  .wd-loc input{background:rgba(255,255,255,0.07);border:2px solid rgba(255,255,255,0.2);color:#f5f5f7;padding:.75rem 1.2rem;border-radius:.75rem;font-size:1.1rem;width:10rem;font-family:inherit;transition:border-color .2s,box-shadow .2s;}
  .wd-loc input:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 4px rgba(88,166,255,0.2);}
  .wd-loc input::placeholder{color:#86868b;}
  .wd-loc button{background:#58a6ff;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.75rem;font-size:1rem;cursor:pointer;font-weight:600;font-family:inherit;transition:all .2s;}
  .wd-loc button:hover{background:#79b8ff;transform:scale(1.02);}
  .wd-loc button#wd-geo-btn{background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.15);color:#d1d1d6;font-size:1rem;}
  .wd-loc button#wd-geo-btn:hover{background:rgba(255,255,255,0.1);color:#f5f5f7;border-color:rgba(255,255,255,0.25);}
  .wd-loc .wd-loc-status{font-size:1rem;color:#a1a1a6;font-weight:500;}

  /* Tabs */
  .wd-tabs{display:flex;gap:.3rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:rgba(255,255,255,0.04);border-radius:.75rem;padding:.4rem;}
  .wd-tabs::-webkit-scrollbar{display:none;}
  .wd-tab{white-space:nowrap;padding:.7rem 1.2rem;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;border:none;color:#a1a1a6;background:transparent;transition:all .2s;font-family:inherit;}
  .wd-tab:hover{color:#f5f5f7;background:rgba(255,255,255,0.06);}
  .wd-tab.active{color:#f5f5f7;background:rgba(255,255,255,0.12);box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.08);font-weight:600;}

  /* Current conditions hero */
  .wx-current{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center;border-radius:1.25rem;padding:2.5rem;margin-bottom:2rem;font-family:'Inter',sans-serif;}
  .wx-temp-ring{width:200px;height:200px;border-radius:50%;border:5px solid #58a6ff;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(88,166,255,0.06);box-shadow:0 0 40px rgba(88,166,255,0.1);}
  .wx-temp-big{font-size:5rem;font-weight:300;color:#f5f5f7;line-height:1;letter-spacing:-.06em;}
  .wx-temp-unit{font-size:1.4rem;color:#86868b;font-weight:300;}
  .wx-feels{font-size:1.15rem;color:#58a6ff;font-weight:500;margin-top:.35rem;}
  .wx-details{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem 2rem;margin-top:1.5rem;}
  .wx-detail-item{display:flex;flex-direction:column;gap:.35rem;}
  .wx-detail-label{font-size:.85rem;color:#6e6e73;font-weight:500;text-transform:uppercase;letter-spacing:.06em;}
  .wx-detail-value{font-size:1.5rem;color:#f5f5f7;font-weight:600;letter-spacing:-.02em;}
  .wx-condition{font-size:1.8rem;color:#e5e5ea;font-weight:300;margin-bottom:.5rem;letter-spacing:-.02em;}
  .wx-location{font-size:1.4rem;color:#a1a1a6;margin-bottom:.35rem;font-weight:500;}
  .wx-updated{font-size:.95rem;color:#6e6e73;font-weight:400;}

  /* Panels */
  .wd-panel{display:none;padding:1.5rem 0;}
  .wd-panel.active{display:block;}
  .wd-panel h2{font-family:inherit;font-size:1.8rem;color:#f5f5f7;margin:0 0 .5rem;font-weight:600;letter-spacing:-.02em;}
  .wd-panel .wd-desc{font-size:1.1rem;color:#a1a1a6;margin:0 0 1.5rem;max-width:56rem;line-height:1.6;}

  /* Cards grid */
  .wd-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
  .wd-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:1rem;padding:1.5rem;font-size:1.1rem;color:#d1d1d6;overflow:hidden;transition:all .2s;line-height:1.6;}
  .wd-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);}
  .wd-card h3{font-size:1.3rem;color:#f5f5f7;margin:0 0 .6rem;font-weight:600;}
  .wd-card p{font-size:1rem;line-height:1.6;}

  /* Iframe container */
  .wd-iframe{position:relative;width:100%;padding-bottom:56%;border-radius:1rem;overflow:hidden;background:#0c1220;border:1px solid rgba(255,255,255,0.08);}
  .wd-iframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
  .wd-iframe-tall{padding-bottom:75%;}

  /* Satellite selector */
  .wd-sat-btns{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem;background:rgba(255,255,255,0.04);border-radius:.625rem;padding:.35rem;}
  .wd-sat-btn{padding:.55rem 1rem;border-radius:.4rem;font-size:.95rem;font-weight:500;cursor:pointer;border:none;color:#a1a1a6;background:transparent;font-family:inherit;transition:all .2s;}
  .wd-sat-btn.active,.wd-sat-btn:hover{color:#f5f5f7;background:rgba(255,255,255,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.2);}

  /* Table */
  .wd-table{width:100%;border-collapse:collapse;font-size:1rem;font-family:inherit;}
  .wd-table th{text-align:left;padding:.85rem 1rem;color:#a1a1a6;font-size:.95rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.08);text-transform:uppercase;letter-spacing:.05em;}
  .wd-table td{padding:.85rem 1rem;color:#e5e5ea;border-bottom:1px solid rgba(255,255,255,0.04);font-size:1.05rem;}
  .wd-table tr:hover td{background:rgba(255,255,255,0.03);}

  /* Loading */
  .wd-loading{color:#86868b;font-size:1.1rem;padding:3rem;text-align:center;}

  /* Satellite image */
  .wd-sat-img{width:100%;border-radius:1rem;background:#0c1220;border:1px solid rgba(255,255,255,0.08);}

  /* Alert severity colors */
  .wd-alert{padding:1rem 1.25rem;border-radius:.875rem;margin-bottom:.75rem;border-left:4px solid;}
  .wd-alert-extreme{background:rgba(255,69,58,0.08);border-color:#ff453a;color:#ff6961;}
  .wd-alert-severe{background:rgba(255,159,10,0.08);border-color:#ff9f0a;color:#ffb340;}
  .wd-alert-moderate{background:rgba(255,214,10,0.08);border-color:#ffd60a;color:#ffe047;}
  .wd-alert-minor{background:rgba(100,160,255,0.08);border-color:#64a0ff;color:#8ab4f8;}
  .wd-alert h4{font-size:1.1rem;margin:0 0 .4rem;font-weight:600;}
  .wd-alert p{font-size:1rem;margin:0;line-height:1.6;}

  /* METAR decoded */
  .wd-metar{font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:.9rem;color:#a1a1a6;background:rgba(255,255,255,0.03);padding:1rem;border-radius:.75rem;margin-top:.75rem;white-space:pre-wrap;line-height:1.7;border:1px solid rgba(255,255,255,0.06);}

  /* Refresh toggle */
  .wd-refresh{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#6e6e73;justify-content:flex-end;padding:.35rem 0;}
  .wd-refresh label{cursor:pointer;display:flex;align-items:center;gap:.4rem;}

  /* Forecast blocks */
  .wd-forecast{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
  .wd-fperiod{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:.875rem;padding:1.1rem;font-size:1rem;color:#a1a1a6;transition:all .2s;}
  .wd-fperiod:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);}
  .wd-fperiod h4{color:#f5f5f7;font-size:1.05rem;margin:0 0 .4rem;font-weight:600;}
  .wd-fperiod .wd-ftemp{font-size:1.5rem;color:#58a6ff;font-weight:600;}

  /* Compare table */
  .fc-compare{width:100%;border-collapse:collapse;font-size:1rem;font-family:inherit;}
  .fc-compare th{text-align:left;padding:.7rem;color:#58a6ff;font-weight:600;border-bottom:1px solid rgba(88,166,255,0.12);position:sticky;top:0;background:#111827;font-size:.9rem;}
  .fc-compare td{padding:.7rem;color:#d1d1d6;border-bottom:1px solid rgba(255,255,255,0.04);font-size:1rem;}
  .fc-compare tr:hover td{background:rgba(255,255,255,0.03);}
  .fc-model-label{display:inline-block;font-size:1rem;padding:.2rem .6rem;border-radius:.375rem;font-weight:600;margin-right:.25rem;}
  .fc-model-label.nws{background:rgba(88,166,255,0.12);color:#58a6ff;}
  .fc-model-label.gfs{background:rgba(255,165,0,0.1);color:#ffa500;}
  .fc-model-label.ecmwf{background:rgba(175,130,255,0.1);color:#af82ff;}
  .fc-model-label.icon{background:rgba(48,209,88,0.1);color:#30d158;}
  .fc-model-label.gem{background:rgba(255,69,58,0.1);color:#ff453a;}
  .fc-model-label.jma{background:rgba(255,214,10,0.1);color:#ffd60a;}

  /* Section containers with wave/glass background */
  .wx-section{position:relative;margin-bottom:2.5rem;padding:1.75rem;border-radius:1.25rem;overflow:hidden;
    background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.05) 100%);
    border:1px solid rgba(255,255,255,0.08);}
  .wx-section::before{content:'';position:absolute;top:-50%;right:-30%;width:80%;height:200%;
    background:radial-gradient(ellipse,rgba(88,166,255,0.04) 0%,transparent 70%);pointer-events:none;}
  .wx-section::after{content:'';position:absolute;bottom:-40%;left:-20%;width:70%;height:150%;
    background:radial-gradient(ellipse,rgba(56,189,248,0.03) 0%,transparent 70%);pointer-events:none;}
  .wx-section-title{position:relative;z-index:1;font-size:1.5rem;color:#58a6ff;font-weight:600;margin:0 0 1.25rem;letter-spacing:-.01em;}

  /* Chart container inside sections */
  .wx-chart-wrap{position:relative;z-index:1;background:rgba(0,0,0,0.2);border-radius:.875rem;padding:1.25rem;
    border:1px solid rgba(255,255,255,0.05);backdrop-filter:blur(4px);}

  /* Panel content wave backgrounds */
  .wd-panel h2{position:relative;z-index:1;}
  .wd-panel .wd-desc{position:relative;z-index:1;}
  .wd-panel>.wd-iframe,.wd-panel>.wd-grid,.wd-panel>#wd-alerts-content{position:relative;z-index:1;}

  /* The decorative glow below is deliberately wider than its panel (left:-5%,
     width:110%) so it bleeds past the edges. On a 1280px viewport that put its
     right edge at 1322px and gave the whole page a 42px horizontal scrollbar.
     Clipping the panel container contains it — `clip` rather than `hidden` so
     this doesn't become a scroll container and change how anything inside
     positions itself. The glow still bleeds into the wrap's own padding, so it
     looks unchanged. Measured 2026-08-04. */
  #wd-panels{overflow-x:clip;}

  /* Subtle wave bg on all panels */
  .wd-panel.active{position:relative;}
  .wd-panel.active::before{content:'';position:absolute;top:0;left:-5%;width:110%;height:100%;
    background:
      radial-gradient(ellipse at 20% 20%,rgba(88,166,255,0.025) 0%,transparent 50%),
      radial-gradient(ellipse at 80% 60%,rgba(56,189,248,0.02) 0%,transparent 50%),
      radial-gradient(ellipse at 50% 90%,rgba(99,102,241,0.02) 0%,transparent 50%);
    pointer-events:none;}

  /* Better text contrast on darker bg */
  .wx-current{background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(88,166,255,0.04) 30%,rgba(255,255,255,0.03) 100%);
    border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(8px);}
  .wx-condition{text-shadow:0 1px 2px rgba(0,0,0,0.3);}
  .wx-detail-value{text-shadow:0 1px 1px rgba(0,0,0,0.2);}

  @media(max-width:768px){
    .wd-grid{grid-template-columns:1fr;}
    .wd-forecast{grid-template-columns:1fr 1fr;}
    .wx-current{grid-template-columns:1fr;text-align:center;gap:1.5rem;}
    .wx-temp-ring{margin:0 auto;}
    .wx-details{grid-template-columns:1fr 1fr;justify-items:center;}
    .wx-section{padding:1.25rem;}
  }