:root{
    --ink:#0F1424;
    --panel:#161C33;
    --panel-2:#1D2440;
    --line:rgba(237,239,245,0.10);
    --line-strong:rgba(237,239,245,0.18);
    --cloud:#EDEFF5;
    --slate:#8891A8;
    --amber:#F2A65A;
    --amber-dim:rgba(242,166,90,0.15);
    --green:#7FBA8B;
    --red:#E27D6A;
    --font-display:'JetBrains Mono', monospace;
    --font-body:'Public Sans', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(242,166,90,0.08), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 10%, rgba(127,186,139,0.06), transparent 60%),
      var(--ink);
    color:var(--cloud);
    font-family:var(--font-body);
    min-height:100vh;
    padding:32px 20px 60px;
  }
  .wrap{max-width:920px;margin:0 auto;}

  /* header */
  .station-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:18px;margin-bottom:28px;
    flex-wrap:wrap;gap:14px;
  }
  .station-id{
    font-family:var(--font-display);
    font-size:11px;letter-spacing:.18em;color:var(--slate);
    text-transform:uppercase;margin-bottom:6px;
  }
  .station-title{
    font-family:var(--font-display);
    font-size:26px;font-weight:800;letter-spacing:-0.01em;color:var(--cloud);
  }
  .station-title span{color:var(--amber);}
  .clock{
    font-family:var(--font-display);
    font-size:12px;color:var(--slate);
    text-align:right;line-height:1.6;
  }
  .clock b{color:var(--cloud);font-weight:600;}

  /* search */
  .search-row{
    display:flex;gap:10px;margin-bottom:26px;
  }
  .search-row input{
    flex:1;
    background:var(--panel);
    border:1px solid var(--line-strong);
    color:var(--cloud);
    font-family:var(--font-body);
    font-size:15px;
    padding:13px 16px;
    border-radius:3px;
    outline:none;
    transition:border-color .15s ease;
  }
  .search-row input::placeholder{color:var(--slate);}
  .search-row input:focus{border-color:var(--amber);}
  .search-row button{
    font-family:var(--font-display);
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    font-weight:700;
    background:var(--amber);
    color:var(--ink);
    border:none;
    padding:0 22px;
    border-radius:3px;
    cursor:pointer;
    transition:filter .15s ease, transform .1s ease;
  }
  .search-row button:hover{filter:brightness(1.08);}
  .search-row button:active{transform:scale(.98);}
  .search-row button:disabled{opacity:.5;cursor:not-allowed;}

  .use-loc{
    font-family:var(--font-display);
    font-size:11px;letter-spacing:.05em;color:var(--slate);
    background:none;border:none;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;
    padding:0;margin:-16px 0 24px 2px;display:inline-block;
  }
  .use-loc:hover{color:var(--amber);}

  /* status states */
  #status-area{margin-bottom:20px;}
  .msg{
    font-family:var(--font-display);
    font-size:13px;
    padding:14px 16px;
    border-radius:3px;
    border:1px solid var(--line-strong);
    display:flex;align-items:center;gap:10px;
  }
  .msg.loading{color:var(--slate);}
  .msg.error{color:var(--red);border-color:rgba(226,125,106,0.4);background:rgba(226,125,106,0.06);}
  .dot{
    width:7px;height:7px;border-radius:50%;background:var(--amber);
    animation:pulse 1.1s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

  /* main readout */
  .readout{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    padding:30px;
    margin-bottom:20px;
    position:relative;
    overflow:hidden;
  }
  .readout::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg, var(--amber), transparent 70%);
  }
  .place-line{
    display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:22px;flex-wrap:wrap;gap:10px;
  }
  .place-name{font-size:20px;font-weight:700;color:var(--cloud);}
  .place-meta{font-family:var(--font-display);font-size:11px;color:var(--slate);margin-top:4px;letter-spacing:.03em;}
  .condition-tag{
    font-family:var(--font-display);
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--amber);background:var(--amber-dim);
    border:1px solid rgba(242,166,90,0.3);
    padding:6px 12px;border-radius:20px;
    white-space:nowrap;
  }

  .temp-row{display:flex;align-items:baseline;gap:18px;margin-bottom:6px;flex-wrap:wrap;}
  .temp-big{font-family:var(--font-display);font-size:76px;font-weight:800;line-height:1;color:var(--cloud);}
  .temp-unit{font-size:32px;color:var(--slate);font-weight:400;}
  .feels{font-family:var(--font-display);font-size:13px;color:var(--slate);}
  .feels b{color:var(--cloud);}

  /* instrument grid */
  .instruments{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:20px;
  }
  .inst{
    background:var(--panel);
    padding:18px 16px;
  }
  .inst-label{
    font-family:var(--font-display);
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--slate);margin-bottom:10px;
  }
  .inst-val{
    font-family:var(--font-display);
    font-size:22px;font-weight:700;color:var(--cloud);
  }
  .inst-val small{font-size:12px;color:var(--slate);font-weight:400;}

  .compass{
    display:flex;align-items:center;gap:10px;
  }
  .compass-dial{
    width:34px;height:34px;border-radius:50%;
    border:1.5px solid var(--line-strong);
    position:relative;flex-shrink:0;
  }
  .compass-needle{
    position:absolute;top:50%;left:50%;
    width:2px;height:13px;background:var(--amber);
    transform-origin:bottom center;
    margin-left:-1px;margin-top:-13px;
    border-radius:1px;
  }

  /* forecast strip */
  .forecast-head{
    font-family:var(--font-display);
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--slate);margin:28px 0 12px;
  }
  .forecast-strip{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
  }
  .fday{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:3px;
    padding:14px 6px;
    text-align:center;
  }
  .fday-name{font-family:var(--font-display);font-size:10px;color:var(--slate);letter-spacing:.05em;margin-bottom:8px;}
  .fday-icon{font-size:20px;margin-bottom:8px;}
  .fday-hi{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--cloud);}
  .fday-lo{font-family:var(--font-display);font-size:12px;color:var(--slate);}

  .empty-state{
    text-align:center;padding:60px 20px;color:var(--slate);
  }
  .empty-state .big-icon{font-size:40px;margin-bottom:14px;opacity:.6;}
  .empty-state p{font-family:var(--font-display);font-size:13px;max-width:340px;margin:0 auto;line-height:1.7;}

  footer{
    margin-top:34px;text-align:center;
    font-family:var(--font-display);font-size:10px;color:var(--slate);
    letter-spacing:.05em;
  }

  @media (max-width:640px){
    .instruments{grid-template-columns:repeat(2,1fr);}
    .forecast-strip{grid-template-columns:repeat(4,1fr);row-gap:8px;}
    .temp-big{font-size:56px;}
    .station-head{flex-direction:column;align-items:flex-start;}
    .clock{text-align:left;}
  }

  button:focus-visible, input:focus-visible{
    outline:2px solid var(--amber);outline-offset:2px;
  }
  @media (prefers-reduced-motion: reduce){
    .dot{animation:none;}
  }