:root { --bg:#0b0f14; --card:#121923; --text:#e6edf3; --muted:#8aa1b5; --accent:#3ea6ff; --alert:#ffd166; }

body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto; }

header {
  position: sticky;
  top: 0;
  padding: 10px 20px 8px;
  background: #0f151f;
  border-bottom: 1px solid #1e2a38;
  z-index: 5;
}

.title-row {
  text-align: center;
}

h1 {
  margin: 4px 0 6px;
  font-size: 18px;
  text-align: center;
}

.slot-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
}

.left-slot {
  justify-self: start;
}

.center-slot {
  justify-self: center;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.right-slot {
  justify-self: end;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bigClock { font-variant-numeric:tabular-nums; font-size:28px; font-weight:700; }
.bigDate { font-size:12px; color:var(--muted); margin-top:2px; }

.pill { display:inline-block; background:#0e1420; border:1px solid #1e2a38; border-radius:999px; padding:6px 10px; color:#c9d7e1; text-decoration:none; cursor:pointer; }
.pill:hover { color:#cfe6ff; border-color:#2b3c52; }
.pill.status { background:#0e1a10; border-color:#1f3b27; color:#43d17d; }
.pill.slim { padding:2px 8px; font-size:11px; display:inline-flex; gap:6px; align-items:center; }

main { padding:12px 20px 60px; }

table { width:100%; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden; }

thead th { text-align:center; font-size:12px; color:var(--muted); padding:10px 12px; border-bottom:1px solid #203045; }

tbody td { padding:10px 12px; border-bottom:1px solid #152130; vertical-align:middle; text-align:center; }

tbody tr:last-child td { border-bottom:none; }

.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; }

.temp {
  border-radius:8px;
  padding:6px 8px;
  display:inline-flex;
  min-width:70px;
  justify-content:center;
  text-align:center;
  transition: background-color .3s;
}

td.temp-cell { text-align:center; }

.temp-range-pill {
  background:var(--card);
  border:1px solid #223243;
  border-radius:6px;
  padding:6px 8px;
  font-size:12px;
  min-width:45px;
  text-align:center;
  color:var(--muted);
}

.t-cold { background:#132238; }
.t-cool { background:#0f2d3b; }
.t-mild { background:#123023; }
.t-warm { background:#332611; }
.t-hot  { background:#3a1b1b; }

button:hover { border-color:#2b3c52; }

input[type="number"] { width:80px; }
input[type="range"] { width:160px; }

.last5 .list { display:inline-flex; flex-direction:column; gap:2px; align-items:center; }

.last5 .item { display:flex; gap:6px; align-items:baseline; }

.last5 .item .t { opacity:.8; font-size:12px; }

.last5 .item .v { font-weight:600; }

.last5.up { border-left:3px solid #ff4d4f; padding-left:8px; }
.last5.down { border-left:3px solid #3ea6ff; padding-left:8px; }

.last5 .item.up .t,
.last5 .item.up .v { color:#ff4d4f; }

.last5 .item.down .t,
.last5 .item.down .v { color:#3ea6ff; }

.age { color:var(--muted); font-size:11px; }

.madis-count-wide {
  text-align:center;
  font-size:20px;
  font-weight:bold;
  margin-top:8px;
  transition: color 0.2s ease;
}

.madis-count-wide.red { color:#ff4d4f; }

@keyframes temp-pop {
  0% { transform:scale(1); }
  30% { transform:scale(1.12); }
  100% { transform:scale(1); }
}

@keyframes sweep-up {
  0% { box-shadow: inset 0 0 0 0 rgba(255,77,79,.35); }
  100% { box-shadow: inset 0 0 0 28px rgba(255,77,79,0); }
}

@keyframes sweep-down {
  0% { box-shadow: inset 0 0 0 0 rgba(62,166,255,.35); }
  100% { box-shadow: inset 0 0 0 28px rgba(62,166,255,0); }
}

.temp.pop { animation: temp-pop 300ms ease-out; }

.temp.rise {
  animation: sweep-up 600ms ease-out, temp-pop 300ms ease-out;
  outline:1px solid rgba(255,77,79,.35);
}

.temp.fall {
  animation: sweep-down 600ms ease-out, temp-pop 300ms ease-out;
  outline:1px solid rgba(62,166,255,.35);
}

@keyframes gold-blink {
  0%,49% {}
  50%,100% { background:#d4af37!important; color:#111!important; outline:2px solid #d4af37; }
}

.flash-gold {
  animation: gold-blink 1s steps(2, start) infinite;
}

.col-location { width: 20%; }
.col-temp     { width: 15%; }
.col-last5    { width: 17%; }
.col-hourly   { width: 9%; }
.col-high24   { width: 15%; }
.col-fcast    { width: 24%; }
.col-alerts   { width: 10%; }

.sparkline {
  background:#0b0f14;
  border:1px solid #1e2a38;
  border-radius:4px;
  margin:4px 0;
}

.spark-link { cursor:zoom-in; }

.fcast-block {
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.fcast-day {
  border: 1px solid #1e2a38;
  border-radius: 6px;
  padding: 6px;
  flex: 1;
  min-width: 90px;
  position: relative;
}

.fcast-day .day-title {
  font-weight:700;
  color:var(--text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}

.fcast-day .f-label { color:var(--muted); min-width:30px; display:inline-block; }

.fcast-day .f-avg { color:var(--accent); font-weight:700; }

.fcast-day .f-spread { color:var(--alert); }

.fcast-day .f-spread.good { color:#43d17d; }

.fcast-day .f-spread.bad { color:#ff4d4f; }

footer {
  margin-top: 20px;
  padding: 12px 20px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid #1e2a38;
  line-height: 1.4;
}

.countdown {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--alert);
  min-width: 50px;
  text-align: right;
}

.countdown.zero { color:#43d17d; }

.modal {
  display:none;
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
}

.modal-overlay {
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
}

.modal-content {
  position:relative;
  z-index:101;
  background:var(--card);
  color:var(--text);
  margin:8vh auto;
  padding:20px;
  border:1px solid #1e2a38;
  border-radius:12px;
  width:90%;
  max-width:700px;
  box-shadow:0 5px 25px rgba(0,0,0,0.4);
}

.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #1e2a38;
  padding-bottom:10px;
  margin-bottom:15px;
}

.modal-header h2 { margin:0; font-size:20px; }

.close-btn {
  color:var(--muted);
  font-size:32px;
  font-weight:bold;
  line-height:1;
  cursor:pointer;
  background:none;
  border:none;
}

.close-btn:hover,
.close-btn:focus { color:var(--text); }

.time-controls {
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:15px;
}

.time-controls button {
  background:var(--bg);
  border:1px solid var(--card);
}

.time-controls button.active {
  border-color:var(--accent);
  color:var(--accent);
}

#largeGraphContainer {
  background:var(--bg);
  border:1px solid #1e2a38;
  border-radius:8px;
  padding:10px;
  height:240px;
}

#largeGraphContainer svg {
  width:100%;
  height:100%;
}

.modal-stats {
  display:flex;
  justify-content:space-around;
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}

#cfChartContainer table {
  width:100%;
  border-collapse:collapse;
  color:var(--text);
}

#cfChartContainer th,
#cfChartContainer td {
  padding:4px 8px;
  text-align:left;
  border-bottom:1px solid #1e2a38;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.table-wrapper {
  width:100%;
  overflow-x:auto;
}

@media (max-width: 768px) {

  header {
    padding:8px 10px;
  }

  title-row {
    text-align:center;
  }

  h1 {
    font-size:16px;
    margin:4px 0;
    text-align:center;
  }

  .slot-row {
    margin-top:6px;
    display:flex;
    flex-direction:column;
    row-gap:6px;
    align-items:center;
  }

  .left-slot,
  .center-slot,
  .right-slot {
    justify-self:center;
    text-align:center;
  }

  .center-slot {
    display:none;
  }

  .status-row {
    justify-content:center;
  }

  .right-slot {
    display:none;
  }

  .bigClock {
    font-size:22px;
  }

  .bigDate {
    font-size:11px;
  }

  main {
    padding:10px 10px 40px;
  }

  .table-wrapper {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  table {
    min-width:900px;
    font-size:12px;
  }

  thead th,
  tbody td {
    padding:6px 8px;
  }

  .controls {
    display:none;
  }

  .tip-container {
    transform:scale(0.5);
    transform-origin:center top;
    margin-top:4px;
  }

  .kalshi-daily-pill {
    display:none;
  }
}

@keyframes pulseGlow {
  0% { filter: drop-shadow(0 0 3px #5865F2); }
  50% { filter: drop-shadow(0 0 12px #5865F2); }
  100% { filter: drop-shadow(0 0 3px #5865F2); }
}

.discord-glow {
  animation:pulseGlow 2.4s ease-in-out infinite;
  transition:transform 0.2s ease;
}

.discord-glow:hover {
  transform:scale(1.08);
}