:root {
      --bg: #0b1020;
      --panel: #141b34;
      --text: #eaf2ff;
      --muted: #a8b7d8;
      --accent: #4da3ff;
      --border: rgba(255, 255, 255, 0.16);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      color: var(--text);
      background: radial-gradient(1200px 700px at 10% 10%, #1a2450 0%, var(--bg) 50%);
      min-height: 100vh;
      padding: 20px;
      display: grid;
      place-items: center;
      transition: background 0.35s ease;
    }
    body.theme-night {
      background: radial-gradient(1200px 700px at 10% 10%, #1b2140 0%, #090d19 52%);
    }
    body.theme-morning {
      background: radial-gradient(1200px 700px at 10% 10%, #415f89 0%, #17243c 55%);
    }
    body.theme-day {
      background: radial-gradient(1200px 700px at 10% 10%, #4f7ebf 0%, #1b3157 55%);
    }
    body.theme-evening {
      background: radial-gradient(1200px 700px at 10% 10%, #8b5f68 0%, #25172d 55%);
    }
    .app {
      width: min(980px, 100%);
      border: 1px solid var(--border);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
      backdrop-filter: blur(8px);
      box-shadow: 0 12px 35px rgba(0, 0, 0, .32);
      padding: 20px;
    }
    .top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .brand {
      font-size: 22px;
      font-weight: 700;
    }
    .controls {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-bottom: 12px;
    }
    select, button, input[type="range"] {
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 15px;
      color: var(--text);
      background: #101938;
      padding: 10px 12px;
      outline: none;
    }
    button {
      cursor: pointer;
      background: linear-gradient(180deg, #2b63be, #1b4e9b);
      border-color: #2f6ccf;
    }
    .quick {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .quick button {
      background: #152448;
      border-color: rgba(255,255,255,.16);
    }
    .cards {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 12px;
    }
    .card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(11, 17, 35, .62);
      padding: 14px;
    }
    .city {
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 4px;
    }
    .muted { color: var(--muted); }
    .temp {
      font-size: 56px;
      font-weight: 700;
      line-height: 1;
      margin: 8px 0 10px;
    }
    .metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 8px;
    }
    .metric {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 10px;
      padding: 8px;
      background: rgba(255,255,255,.02);
    }
    .metric .k { color: var(--muted); font-size: 13px; }
    .metric .v { font-size: 18px; margin-top: 4px; }
    .timeline {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .time-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .timeline-track-wrap {
      margin-top: 8px;
      padding: 8px 8px 2px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      background: rgba(255,255,255,.03);
    }
    #hourRange {
      width: 100%;
      padding: 0;
      appearance: none;
      -webkit-appearance: none;
      height: 6px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(90deg, #6ec1ff 0%, #6ec1ff var(--range-progress, 0%), rgba(255,255,255,.2) var(--range-progress, 0%), rgba(255,255,255,.2) 100%);
      cursor: pointer;
    }
    #hourRange::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.95);
      background: #9bd6ff;
      box-shadow: 0 0 0 3px rgba(109, 183, 255, .25);
    }
    #hourRange::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.95);
      background: #9bd6ff;
      box-shadow: 0 0 0 3px rgba(109, 183, 255, .25);
    }
    .timeline-marks {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(24, minmax(0, 1fr));
      gap: 2px;
      align-items: end;
      min-height: 44px;
    }
    .time-mark {
      border: none;
      background: transparent;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      font-size: 10px;
      color: rgba(234, 242, 255, .6);
      user-select: none;
      cursor: pointer;
      transition: transform .12s ease, color .12s ease;
    }
    .time-mark .ico {
      font-size: 11px;
      line-height: 1;
      margin-bottom: 2px;
      opacity: .9;
    }
    .time-mark .tick {
      width: 2px;
      border-radius: 2px;
      background: rgba(255,255,255,.35);
      margin-bottom: 3px;
      height: 7px;
    }
    .time-mark.major .tick {
      height: 12px;
      background: rgba(255,255,255,.55);
    }
    .time-mark .lbl {
      min-height: 12px;
      line-height: 1;
      opacity: .95;
    }
    .time-mark.active {
      color: #cde8ff;
      transform: translateY(-2px);
    }
    .time-mark.active .tick {
      background: #7bc7ff;
      box-shadow: 0 0 0 2px rgba(123,199,255,.22);
    }
    .advice.ok { color: #8de0ba; }
    .advice.rain { color: #ffcf7c; }
    .allergen-list {
      margin-top: 10px;
      display: grid;
      gap: 6px;
    }
    .allergen-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.02);
      font-size: 13px;
    }
    .allergen-level {
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 12px;
      white-space: nowrap;
    }
    .level-low { color: #91e3bd; border-color: rgba(145,227,189,.45); background: rgba(145,227,189,.15); }
    .level-mid { color: #ffe08a; border-color: rgba(255,224,138,.45); background: rgba(255,224,138,.14); }
    .level-high { color: #ffb27a; border-color: rgba(255,178,122,.5); background: rgba(255,178,122,.16); }
    .level-very-high { color: #ff8f8f; border-color: rgba(255,143,143,.55); background: rgba(255,143,143,.17); }
    .allergen-muted { color: var(--muted); font-size: 13px; }
    .err { color: #ff8b8b; }
    @media (max-width: 840px) {
      .cards { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .controls { grid-template-columns: 1fr; }
      .temp { font-size: 44px; }
    }