*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Catppuccin Mocha neutrals */
  --ctp-base:     #1e1e2e;
  --ctp-mantle:   #181825;
  --ctp-crust:    #11111b;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-text:     #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  /* Catppuccin Mocha accent colors */
  --ctp-blue:     #89b4fa;
  --ctp-green:    #a6e3a1;
  --ctp-red:      #f38ba8;
  --ctp-yellow:   #f9e2af;
  --ctp-peach:    #fab387;
  --ctp-mauve:    #cba6f7;
  --ctp-teal:     #94e2d5;
  --ctp-lavender: #b4befe;
  --ctp-sky:      #89dceb;
  --ctp-pink:     #f5c2e7;
  /* Semantic aliases */
  --color-bg:              var(--ctp-base);
  --color-surface:         var(--ctp-surface0);
  --color-surface-alt:     var(--ctp-surface1);
  --color-border:          var(--ctp-surface1);
  --color-text:            var(--ctp-text);
  --color-muted:           var(--ctp-subtext0);
  --color-open:            var(--ctp-green);
  --color-closed:          var(--ctp-red);
  --color-open-bg:         rgba(166,227,161,0.15);
  --color-closed-bg:       rgba(243,139,168,0.15);
  --color-badge-prob-bg:   var(--ctp-surface1);
  --color-badge-prob-text: var(--ctp-subtext1);
  --radius: 8px;
  --shadow: 0 1px 6px rgba(0,0,0,0.35);
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────── */

header {
  background: var(--ctp-mantle);
  color: var(--ctp-text);
  padding: 1.5rem 2rem;
}

header h1 { font-size: 1.75rem; font-weight: 700; }
.subtitle  { color: var(--ctp-subtext0); margin-top: 0.25rem; font-size: 0.95rem; }

/* ── Main ─────────────────────────────────────────────────────── */

main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

section h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.5rem;
}

/* ── Cards ────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

/* Status cards */
.status-card.open   { border-left: 4px solid var(--color-open); }
.status-card.closed { border-left: 4px solid var(--color-closed); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.card-header h3 { font-size: 1rem; font-weight: 600; }

.badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.badge.open   { background: var(--color-open-bg);   color: var(--color-open); }
.badge.closed { background: var(--color-closed-bg); color: var(--color-closed); }

.badge-sev {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: capitalize;
}
.sev-high   { background: rgba(243,139,168,0.2); color: var(--ctp-red); }
.sev-medium { background: rgba(249,226,175,0.2); color: var(--ctp-yellow); }
.sev-low    { background: rgba(166,227,161,0.2); color: var(--ctp-green); }

.badge-prob {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--color-badge-prob-bg);
  color: var(--color-badge-prob-text);
  text-transform: capitalize;
}

/* Stat cards */
.stat-card h3    { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.stat-card dl    { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.88rem; }
.stat-card dt    { color: var(--color-muted); }
.stat-card dd    { font-weight: 600; }

/* Event detail inside status card */
.event-detail    { font-size: 0.875rem; margin-top: 0.5rem; }
.event-detail p  { margin-top: 0.2rem; }
.event-detail .loc { color: var(--color-muted); font-size: 0.82rem; }

/* ── Map ──────────────────────────────────────────────────────── */

#map {
  height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.map-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ctp-crust);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.map-pin--cluster {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ctp-crust);
}

.popup-content      { font-size: 0.85rem; line-height: 1.5; min-width: 200px; max-height: 260px; overflow-y: auto; }
.popup-count        { font-weight: 600; font-size: 0.78rem; color: var(--color-muted); margin-bottom: 0.35rem; }
.popup-event        { padding: 0.35rem 0; border-top: 1px solid var(--color-border); }
.popup-event:first-of-type { border-top: 0; padding-top: 0; }
.popup-road         { font-weight: 600; margin-left: 0.4rem; }
.popup-loc          { color: var(--color-muted); }
.popup-time         { font-size: 0.78rem; color: var(--color-muted); }
.popup-comments     { margin-top: 0.4rem; padding-left: 1rem; font-size: 0.82rem; }
.popup-comments li  { margin-top: 0.2rem; }

/* ── Toolbar ──────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.toolbar label  { font-size: 0.88rem; color: var(--color-muted); }
.toolbar select {
  font-size: 0.88rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Event cards ──────────────────────────────────────────────── */

#events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.event-day-group { display: flex; flex-direction: column; gap: 0.5rem; }
.event-day-header {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.55rem 0.85rem;
  background: var(--ctp-surface0);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer; font-size: 0.95rem;
  text-align: left;
}
.event-day-header:hover { background: var(--ctp-surface1); }
.event-day-arrow { font-size: 0.85rem; width: 0.8rem; color: var(--color-muted); }
.event-day-label { font-weight: 600; flex: 1; }
.event-day-count { font-size: 0.8rem; color: var(--color-muted); }
.event-day-body { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0.4rem; }
.event-day-group.collapsed .event-day-body { display: none; }

.event-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  gap: 0.5rem;
  flex-wrap: wrap;
}

.event-type-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(137,180,250,0.2);
  color: var(--ctp-blue);
  margin-right: 0.4rem;
}

.event-road { font-weight: 600; font-size: 0.9rem; }

.event-meta { display: flex; align-items: center; gap: 0.4rem; }

.event-card-body { padding: 0.75rem 1rem; font-size: 0.875rem; }

.event-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-bottom: 0.4rem;
  color: var(--color-muted);
  font-size: 0.83rem;
}

.event-times strong { color: var(--color-text); }

.event-loc   { color: var(--color-muted); font-size: 0.83rem; margin-bottom: 0.3rem; }
.event-coords { font-size: 0.8rem; margin-bottom: 0.4rem; }
.coord-link  { color: var(--ctp-blue); text-decoration: none; }
.coord-link:hover { text-decoration: underline; }

.comment-list {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  color: var(--color-text);
  font-size: 0.875rem;
}
.comment-list li { margin-top: 0.2rem; }

/* ── Charts ───────────────────────────────────────────────────── */

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.chart-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}

.chart-box h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-muted);
}

/* ── Utility ──────────────────────────────────────────────────── */

/* .loading now uses flex + spinner; keep .error standalone */
.error { color: var(--color-closed); }

/* ── Date inputs ──────────────────────────────────────────────── */

.toolbar input[type="date"] {
  font-size: 0.88rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
}

.btn-clear {
  font-size: 0.82rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  cursor: pointer;
  color: var(--color-muted);
}
.btn-clear:hover { background: var(--color-surface-alt); }

/* ── Header link ──────────────────────────────────────────────── */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.header-link {
  color: var(--ctp-subtext0);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.header-link:hover { color: var(--ctp-text); }

/* ── Scraper status pill ──────────────────────────────────────── */

.scraper-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ctp-subtext0);
  white-space: nowrap;
}

.scraper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ctp-overlay0);
  flex-shrink: 0;
}
.scraper-dot.ok    { background: var(--ctp-green); }
.scraper-dot.error { background: var(--ctp-red); }

/* ── Cameras ──────────────────────────────────────────────────── */

.cameras-grid { display: flex; flex-direction: column; gap: 1.25rem; }

.camera-group-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--color-muted); }

.camera-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.camera-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 220px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.camera-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.4); transform: translateY(-2px); }
.camera-more-link { margin-top: 0.75rem; font-size: 0.9rem; }

.camera-thumb {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: var(--ctp-surface1);
}

.camera-info {
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.camera-name { font-weight: 600; font-size: 0.85rem; }
.camera-dir  { font-size: 0.78rem; color: var(--color-muted); }
.camera-dist { font-size: 0.75rem; color: var(--color-muted); }

.muted { color: var(--color-muted); }

/* ── Landing page ─────────────────────────────────────────────── */

.landing-body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ctp-crust) 0%, var(--ctp-mantle) 100%);
  color: var(--ctp-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.landing-wrap {
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.landing-hero { text-align: center; }

.landing-eyebrow {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ctp-lavender);
  margin-bottom: 0.5rem;
}

.landing-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--ctp-text);
  margin-bottom: 0.5rem;
}

.landing-sub {
  font-size: 1.05rem;
  color: var(--ctp-subtext0);
}

.landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  width: 100%;
}

.landing-card {
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lc-open   { background: rgba(166,227,161,0.12); border: 1px solid rgba(166,227,161,0.35); }
.lc-closed { background: rgba(243,139,168,0.12); border: 1px solid rgba(243,139,168,0.35); }

.lc-status-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lc-emoji { font-size: 2.5rem; line-height: 1; }

.lc-road-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ctp-text);
  margin-bottom: 0.2rem;
}

.lc-status-word {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.word-open   { color: var(--ctp-green); }
.word-closed { color: var(--ctp-red); }

.lc-stats { display: flex; flex-direction: column; gap: 0.6rem; }

.pct-bar-wrap {
  height: 8px;
  background: var(--ctp-surface1);
  border-radius: 4px;
  overflow: hidden;
}
.pct-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.fill-open   { background: var(--ctp-green); }
.fill-closed { background: var(--ctp-red); }

.pct-label {
  font-size: 0.82rem;
  color: var(--ctp-subtext0);
}

.last-closure-label { font-size: 0.78rem; color: var(--ctp-overlay0); text-transform: uppercase; letter-spacing: 0.06em; }
.last-closure-value { font-size: 0.95rem; color: var(--ctp-subtext1); font-weight: 500; }
.lc-active  { color: var(--ctp-red); font-weight: 600; }
.lc-unknown { color: var(--ctp-overlay1); }

.landing-footer-row { text-align: center; }

.landing-dashboard-link {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: rgba(137,180,250,0.1);
  border: 1px solid rgba(137,180,250,0.3);
  border-radius: 8px;
  color: var(--ctp-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s;
}
.landing-dashboard-link:hover { background: rgba(137,180,250,0.18); }

.landing-disclaimer {
  font-size: 0.75rem;
  color: var(--ctp-overlay0);
  text-align: center;
}
.landing-disclaimer a { color: var(--ctp-overlay0); }

/* ── Footer ───────────────────────────────────────────────────── */

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

footer a { color: var(--color-muted); }

/* ── Section nav ──────────────────────────────────────────────── */

.section-nav {
  background: var(--ctp-crust);
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.section-nav a {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.section-nav a:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* ── KPI tiles ────────────────────────────────────────────────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.kpi-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.kpi-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

.kpi-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}

/* ── Stats road block ─────────────────────────────────────────── */

.stats-road-block {
  margin-bottom: 2rem;
}

.stats-road-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.stats-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 700px) {
  .stats-charts-row { grid-template-columns: 1fr; }
}

/* ── Status history ─────────────────────────────────────────────────────── */

#sh-box { margin-bottom: 1rem; }

.sh-nav { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.75rem; }
.sh-nav-btn { padding:0.2rem 0.6rem; border:1px solid var(--color-border);
  border-radius:4px; background:var(--color-surface); color:var(--color-muted);
  cursor:pointer; font-size:0.85rem; }
.sh-nav-btn:hover { background:var(--color-surface-alt); color:var(--color-text); }
.sh-nav-btn:disabled { opacity:0.35; cursor:default; }
.sh-nav-title { font-weight:600; font-size:0.95rem; min-width:110px; text-align:center; }

.sh-grid { display:grid; gap:3px; width:100%; overflow-x:auto; }

.sh-header-cell { font-size:0.68rem; color:var(--color-muted);
  text-align:center; line-height:20px; }
.sh-row-label { font-size:0.78rem; color:var(--color-muted);
  display:flex; align-items:center; padding-right:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-cell { height:28px; border-radius:3px; cursor:default;
  transition:filter 0.12s; min-width:16px; }
.sh-cell:hover { filter:brightness(1.25);
  outline:1px solid var(--ctp-overlay0); }
.sh-cell--clickable { cursor:pointer; }
.sh-summary { font-size:0.85rem; color:var(--color-muted);
  margin:0.25rem 0 0.65rem; }
.chart-scope { font-weight:400; font-size:0.85em; color:var(--color-muted);
  margin-left:0.4em; }

.trend-header { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.5rem; flex-wrap:wrap; gap:0.5rem; }
.trend-granularity { display:flex; gap:0.25rem; }
.trend-gran-btn { font-size:0.78rem; padding:0.3rem 0.7rem;
  border:1px solid var(--color-border); background:var(--ctp-surface0);
  color:var(--color-text); border-radius:4px; cursor:pointer; }
.trend-gran-btn:hover { background:var(--ctp-surface1); }
.trend-gran-btn.active { background:var(--ctp-surface1); color:var(--ctp-lavender);
  border-color:var(--ctp-lavender); }

.sh-legend { display:flex; gap:1rem; margin-top:0.65rem;
  font-size:0.75rem; color:var(--color-muted); flex-wrap:wrap;
  align-items:center; }
.sh-swatch { display:inline-block; width:13px; height:13px;
  border-radius:2px; margin-right:3px; vertical-align:middle; }

/* ── Stats tabs ───────────────────────────────────────────────── */

.stats-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.stats-tab {
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stats-tab:hover  { background: var(--color-surface-alt); color: var(--color-text); }
.stats-tab.active { background: var(--ctp-surface1); color: var(--ctp-lavender); border-color: var(--ctp-lavender); }

/* ── Map-event sync ───────────────────────────────────────────── */

.event-card--highlighted {
  box-shadow: 0 0 0 3px var(--color-closed);
  transition: box-shadow 0.3s;
}

.event-day-group--highlighted .event-day-header {
  box-shadow: 0 0 0 3px var(--color-closed);
  background: rgba(243, 139, 168, 0.18);
  animation: dayGroupPulse 1.4s ease-in-out 2;
}
@keyframes dayGroupPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-closed); }
  50%      { box-shadow: 0 0 0 6px rgba(243, 139, 168, 0.55); }
}

.btn-view-map {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-view-map:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* ── Loading spinner ────────────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }

.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
}

.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border: 2px solid var(--ctp-surface2);
  border-top-color: var(--ctp-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Retry button ───────────────────────────────────────────────── */

.btn-retry {
  display: block;
  margin-top: 8px;
  padding: 6px 14px;
  background: var(--ctp-surface1);
  color: var(--ctp-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}

.btn-retry:hover {
  background: var(--ctp-surface2);
}

/* ── Toast notification ─────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 70px;
  right: 18px;
  background: var(--ctp-surface1);
  color: var(--ctp-text);
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
  font-size: 0.9rem;
  pointer-events: none;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}