:root {
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --card: #0E1116;
  --pill-off: #191F27;
  --toggle-on: #23303F;

  --bd-pill: #262F3A;
  --bd-toggle: #2E3D4F;
  --bd-day: #1C232C;

  --text: #E6EDF3;
  --text-2: #C2CCD8;
  --muted: #8A97A5;
  --muted-2: #7E8B99;

  --red: #E5484D;
  --temp: #FF6B4D;
  --accent: #E5484D; /* active location + current temp; overridden by config */
}

* { box-sizing: border-box; }
body { margin: 0; background: #08090c; color: var(--text); font-family: var(--sans); }

#scroll { padding: 20px; }
#card {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .30);
}

/* Header bar: location tabs (left) + view toggle (right, inline by default) */
#header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
#tabs button {
  cursor: pointer; font-family: var(--sans); white-space: nowrap;
  background: transparent; border: none;
}

/* Underline tabs (default) */
#header[data-locstyle="underline"] #tabs { display: flex; gap: 2px; flex-wrap: wrap; }
#header[data-locstyle="underline"] #tabs button {
  padding: 9px 14px; font-weight: 500; font-size: 14px; color: #AEB8C4;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
#header[data-locstyle="underline"] #tabs button[aria-selected="true"] {
  color: var(--text); font-weight: 600; border-bottom-color: var(--accent);
}

/* Segmented control */
#header[data-locstyle="segmented"] #tabs {
  display: flex; gap: 2px; background: var(--pill-off);
  border: 1px solid var(--bd-pill); border-radius: 9px; padding: 3px;
}
#header[data-locstyle="segmented"] #tabs button {
  padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 14px; color: #AEB8C4;
}
#header[data-locstyle="segmented"] #tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }

/* Separate pills */
#header[data-locstyle="pills"] #tabs { display: flex; gap: 8px; flex-wrap: wrap; }
#header[data-locstyle="pills"] #tabs button {
  padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
  background: var(--pill-off); color: #AEB8C4; border: 1px solid var(--bd-pill);
}
#header[data-locstyle="pills"] #tabs button[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* View toggle pills */
#resolution { display: flex; gap: 8px; flex-wrap: wrap; }
#resolution.below { margin-top: 14px; }
#resolution button {
  padding: 7px 14px; border-radius: 7px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 13px; white-space: nowrap;
  background: transparent; color: var(--muted); border: 1px solid var(--bd-pill);
}
#resolution button[aria-selected="true"] { background: var(--toggle-on); color: #CFE0F2; border-color: var(--bd-toggle); }

/* Current-conditions line (own row beneath the header) */
#statusline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; margin-bottom: 20px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
#statusline > span { white-space: nowrap; }
#statusline:empty { margin: 0; }
#statusline .sl-city { color: var(--text); font-weight: 600; }
#statusline .sl-temp { color: var(--accent); font-weight: 600; font-size: 19px; }
#statusline .sl-label { color: #5C6776; }

#message { padding: 2.5rem; text-align: center; color: var(--muted); }
#message button {
  margin-top: 12px; padding: 7px 14px; border-radius: 7px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  background: var(--toggle-on); color: #CFE0F2; border: 1px solid var(--bd-toggle);
}

/* Radiator: day strip + hourly rows + chart, all sharing the column model.
   Only this area scrolls horizontally; the rest of the card fits the viewport. */
#radiator { overflow-x: auto; }
#radiator .day-strip { display: flex; margin-bottom: 12px; }
#radiator .day-head { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 5px; }
#radiator .day-line { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); margin-bottom: 3px; }
#radiator .day-summary { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--text-2); }
#radiator .day-line span, #radiator .day-summary span { display: flex; flex: none; }

#radiator .row { display: flex; }
#radiator .row.center { align-items: center; }
#radiator .row.bottom { align-items: flex-end; }
#radiator .cell { flex: none; display: flex; justify-content: center; }
#radiator .hour-label { font-family: var(--mono); font-size: 10.5px; color: #67727F; text-align: center; }
#radiator .wind-speed { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: center; }
#radiator .ms-label { flex: none; text-align: right; padding-right: 9px; font-family: var(--mono); font-size: 10px; color: #5C6776; }
#radiator svg { display: block; }

/* "+" add-location button at the end of the tab strip (placed after the
   tab rules so it overrides their borders/padding) */
#header #tabs button.add-loc {
  border: none; background: transparent; color: var(--muted-2, #7E8B99);
  font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1;
  padding: 6px 10px; margin-bottom: -1px; border-bottom: 2.5px solid transparent;
}
#header #tabs button.add-loc:hover { color: var(--accent); }

/* Remove-location button on the conditions line */
#statusline .remove-loc {
  margin-left: auto; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  background: transparent; border: 1px solid #3A2A2E; color: #C97F84;
}
#statusline .remove-loc:hover { background: rgba(229, 72, 77, .12); border-color: #E5484D; color: #FF8A8E; }

/* Overlay + dialogs */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, 0.72); backdrop-filter: blur(3px);
}
.modal-card {
  width: 460px; max-width: calc(100vw - 32px); background: #161B22;
  border: 1px solid var(--bd-pill); border-radius: 14px; padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); color: var(--text);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-title { font-family: var(--sans); font-weight: 700; font-size: 16px; }
.modal-close { background: transparent; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.modal-close:hover { color: var(--text); }
.modal-search {
  width: 100%; background: var(--card); border: 1px solid var(--bd-toggle); border-radius: 9px;
  padding: 10px 12px; color: var(--text); font-family: var(--sans); font-size: 14px;
}
.modal-search::placeholder { color: #5C6776; }
.modal-search:focus { outline: none; border-color: var(--accent); }
.modal-list { margin-top: 12px; max-height: 320px; overflow-y: auto; }
.modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; }
.modal-row:hover { background: var(--bd-day); }
.row-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-name { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--text); }
.row-region { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.row-add, .row-added { flex: none; padding: 6px 12px; border-radius: 7px; font-family: var(--sans); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.row-add { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.row-added { background: transparent; color: #67727F; border: 1px solid var(--bd-toggle); cursor: default; }
.modal-empty { padding: 24px; text-align: center; color: var(--muted); font-family: var(--sans); font-size: 14px; }

.confirm-card {
  width: 380px; max-width: calc(100vw - 32px); background: #161B22;
  border: 1px solid var(--bd-pill); border-radius: 14px; padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); color: var(--text);
}
.confirm-title { font-family: var(--sans); font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.confirm-body { font-family: var(--sans); font-size: 14px; color: var(--text-2); margin-bottom: 18px; }
.confirm-body strong { color: var(--text); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-ghost, .btn-danger { padding: 8px 16px; border-radius: 7px; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--bd-toggle); }
.btn-ghost:hover { background: var(--bd-day); }
.btn-danger { background: #E5484D; color: #fff; border: 1px solid #E5484D; }
.btn-danger:hover { background: #C93B40; border-color: #C93B40; }

/* Tighten chrome on small screens so more fits */
@media (max-width: 600px) {
  #scroll { padding: 8px; }
  #card { padding: 14px; }
  #statusline { font-size: 12px; }
}