/* astromonte public site — dark, calm, mobile-first. No framework. (v0.19.5) */

:root {
  --bg: #0b0f17;
  --panel: #121826;
  --panel-2: #182033;
  --line: #222b3d;
  --text: #d7dde7;
  --muted: #8a94a6;
  --accent: #7aa2f7;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Background (v0.6.5): faint nebulosity in the colours of the filters (blue,
   H-alpha red, OIII teal) and a sprinkle of stars behind the page. A fixed
   layer, so scrolling costs nothing; the cards stay opaque enough to read. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22480%22%20height=%22480%22%3E%3Ccircle%20cx=%2257.2%22%20cy=%22241.2%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.45%22/%3E%3Ccircle%20cx=%22457.4%22%20cy=%22424.4%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.44%22/%3E%3Ccircle%20cx=%22201.9%22%20cy=%22274.8%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.51%22/%3E%3Ccircle%20cx=%22235.6%22%20cy=%22371.1%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.28%22/%3E%3Ccircle%20cx=%22294.8%22%20cy=%2253.2%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.37%22/%3E%3Ccircle%20cx=%22391.1%22%20cy=%22328.9%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.31%22/%3E%3Ccircle%20cx=%22190.7%22%20cy=%22166.9%22%20r=%220.7%22%20fill=%22#fff%22%20fill-opacity=%220.52%22/%3E%3Ccircle%20cx=%22479.8%22%20cy=%22246.5%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.48%22/%3E%3Ccircle%20cx=%2243.0%22%20cy=%22258.3%22%20r=%220.7%22%20fill=%22#fff%22%20fill-opacity=%220.37%22/%3E%3Ccircle%20cx=%22420.7%22%20cy=%22337.9%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.31%22/%3E%3Ccircle%20cx=%22406.9%22%20cy=%22177.0%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.36%22/%3E%3Ccircle%20cx=%22191.4%22%20cy=%22281.1%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.54%22/%3E%3Ccircle%20cx=%22204.2%22%20cy=%22385.2%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.55%22/%3E%3Ccircle%20cx=%22191.1%22%20cy=%22251.8%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.42%22/%3E%3Ccircle%20cx=%22471.5%22%20cy=%22246.2%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.42%22/%3E%3Ccircle%20cx=%22367.6%22%20cy=%22392.7%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.4%22/%3E%3Ccircle%20cx=%22321.8%22%20cy=%22344.3%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.38%22/%3E%3Ccircle%20cx=%22231.4%22%20cy=%22109.9%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.44%22/%3E%3Ccircle%20cx=%22219.3%22%20cy=%22225.3%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.29%22/%3E%3Ccircle%20cx=%22193.0%22%20cy=%22479.1%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.52%22/%3E%3Ccircle%20cx=%22240.9%22%20cy=%22229.9%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.36%22/%3E%3Ccircle%20cx=%22141.3%22%20cy=%22129.1%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.24%22/%3E%3Ccircle%20cx=%22423.4%22%20cy=%22461.1%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.57%22/%3E%3Ccircle%20cx=%22172.8%22%20cy=%2295.9%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.38%22/%3E%3Ccircle%20cx=%22245.4%22%20cy=%22396.6%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.41%22/%3E%3Ccircle%20cx=%22435.5%22%20cy=%22399.1%22%20r=%220.7%22%20fill=%22#fff%22%20fill-opacity=%220.37%22/%3E%3Ccircle%20cx=%22389.7%22%20cy=%22210.5%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.51%22/%3E%3Ccircle%20cx=%22247.3%22%20cy=%22217.4%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.59%22/%3E%3Ccircle%20cx=%22404.4%22%20cy=%22230.0%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.45%22/%3E%3Ccircle%20cx=%22433.6%22%20cy=%22177.7%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.49%22/%3E%3Ccircle%20cx=%22197.4%22%20cy=%22215.7%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.22%22/%3E%3Ccircle%20cx=%22216.6%22%20cy=%22262.4%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.44%22/%3E%3Ccircle%20cx=%2295.4%22%20cy=%2258.0%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.5%22/%3E%3Ccircle%20cx=%22459.1%22%20cy=%22320.9%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.33%22/%3E%3Ccircle%20cx=%222.5%22%20cy=%22319.0%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.5%22/%3E%3Ccircle%20cx=%22456.0%22%20cy=%22236.2%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.57%22/%3E%3Ccircle%20cx=%22262.0%22%20cy=%22227.0%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.58%22/%3E%3Ccircle%20cx=%22420.5%22%20cy=%22242.3%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.36%22/%3E%3Ccircle%20cx=%2276.9%22%20cy=%2265.0%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.31%22/%3E%3Ccircle%20cx=%22197.8%22%20cy=%22387.8%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.52%22/%3E%3Ccircle%20cx=%22180.5%22%20cy=%22460.2%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.55%22/%3E%3Ccircle%20cx=%2224.7%22%20cy=%22166.6%22%20r=%220.7%22%20fill=%22#fff%22%20fill-opacity=%220.57%22/%3E%3Ccircle%20cx=%22453.6%22%20cy=%2212.3%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.32%22/%3E%3Ccircle%20cx=%22145.8%22%20cy=%22156.5%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.39%22/%3E%3Ccircle%20cx=%22224.0%22%20cy=%22296.9%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.24%22/%3E%3Ccircle%20cx=%22249.4%22%20cy=%22208.1%22%20r=%220.7%22%20fill=%22#fff%22%20fill-opacity=%220.37%22/%3E%3Ccircle%20cx=%22112.0%22%20cy=%22341.2%22%20r=%221.0%22%20fill=%22#fff%22%20fill-opacity=%220.35%22/%3E%3Ccircle%20cx=%2293.8%22%20cy=%22442.3%22%20r=%220.5%22%20fill=%22#fff%22%20fill-opacity=%220.45%22/%3E%3Ccircle%20cx=%22446.9%22%20cy=%2223.1%22%20r=%221.2%22%20fill=%22#fff%22%20fill-opacity=%220.26%22/%3E%3Ccircle%20cx=%22341.3%22%20cy=%22421.4%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.45%22/%3E%3Ccircle%20cx=%22105.0%22%20cy=%22423.7%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.25%22/%3E%3Ccircle%20cx=%22405.3%22%20cy=%22187.2%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.4%22/%3E%3Ccircle%20cx=%22416.7%22%20cy=%22183.9%22%20r=%220.6%22%20fill=%22#fff%22%20fill-opacity=%220.32%22/%3E%3Ccircle%20cx=%22126.5%22%20cy=%22238.8%22%20r=%220.8%22%20fill=%22#fff%22%20fill-opacity=%220.3%22/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 60% 45% at 18% 8%, rgba(122, 162, 247, 0.17), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 28%, rgba(214, 96, 120, 0.12), transparent 70%),
    radial-gradient(ellipse 55% 45% at 62% 92%, rgba(72, 170, 190, 0.11), transparent 70%),
    radial-gradient(ellipse 45% 35% at 38% 58%, rgba(180, 140, 220, 0.07), transparent 70%),
    var(--bg);
}
[hidden] { display: none !important; }

.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  max-width: 1040px; margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand:hover h1 { color: var(--accent); }
.brand .logo { width: 42px; height: 31px; align-self: center; flex: none; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand .logo .dome { fill: #fff; stroke: none; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .region { color: var(--muted); font-size: 13px; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.brand-col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.site-switch { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-left: 52px; }   /* under the name, past the logo */
.site-switch select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 13px;
}
.age.stale { color: var(--warn); }

.banner {
  max-width: 1040px; margin: 12px auto 0; padding: 10px 16px; border-radius: var(--radius);
  background: rgba(251, 191, 36, 0.12); color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.35); font-size: 14px;
}
.banner.bad { background: rgba(248, 113, 113, 0.12); color: var(--bad); border-color: rgba(248, 113, 113, 0.35); }

.tabs {
  display: flex; gap: 4px; overflow-x: auto; padding: 10px 12px 0; max-width: 1040px; margin: 0 auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  color: var(--muted); padding: 8px 12px; border-radius: 8px 8px 0 0; white-space: nowrap; font-weight: 500;
}
.tabs a.active { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-bottom-color: var(--panel); }

main { max-width: 1040px; margin: 0 auto; padding: 16px 12px 40px; }
.view > h2 { font-size: 16px; font-weight: 600; margin: 4px 0 12px; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }

.card {
  background: rgba(18, 24, 38, 0.86); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h3 .sub { font-weight: 400; font-size: 12px; }
.card.stale { opacity: 0.55; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 20px 0; text-align: center; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tile { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; min-height: 68px; }
.tile .label { color: var(--muted); font-size: 12px; }
.tile .value { font-size: 22px; font-weight: 600; margin-top: 2px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile .value small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; }
.tile .value.ok { color: var(--ok); }
.tile .value.warn { color: var(--warn); }
.tile .value.bad { color: var(--bad); }
.tile.wide { grid-column: span 2; }

.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.chart { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; }
.chart .title { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.chart svg { display: block; width: 100%; height: 72px; margin-top: 6px; overflow: visible; }
.chart path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
/* Series colours come from --c0/--c1/--c2 set per chart (v0.19.5, see LINE_COLORS in app.js); the accent set is the fallback. */
.chart .s0 { stroke: var(--c0, var(--accent)); }
.chart .s1 { stroke: var(--c1, var(--muted)); stroke-dasharray: 3 3; }
.chart .s2 { stroke: var(--c2, var(--warn)); stroke-dasharray: 1 3; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .range { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; margin-top: 4px; font-variant-numeric: tabular-nums; }
.chart .title > span:first-child { flex: 1 1 auto; min-width: 0; }
.chart .title > span:last-child { flex: none; }
.chart { position: relative; }
.chart .corner-ico { position: absolute; top: 9px; left: 9px; width: 12px; height: 12px; color: var(--muted); opacity: .75; pointer-events: none; }
.chart .corner-ico svg { width: 12px; height: 12px; display: block; }
.chart.has-ico .title { padding-left: 16px; }
.chart .title svg.icon { width: 14px; height: 14px; }
.chart .legend { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chart .plot { position: relative; }
.chart .xaxis { position: relative; height: 14px; margin-top: 2px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart .xaxis span { position: absolute; transform: translateX(-50%); top: 0; white-space: nowrap; }
.chart .tick { stroke: var(--line); stroke-width: 1; }

table.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.kv th, table.kv td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
table.kv th { color: var(--muted); font-weight: 500; width: 40%; }
table.kv td { font-variant-numeric: tabular-nums; word-break: break-word; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; }

.about dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.about dt { color: var(--muted); }
.about dd { margin: 0; }
.about ul { margin: 0; padding-left: 18px; }
.about p { margin: 0 0 10px; }

footer { max-width: 1040px; margin: 0 auto; padding: 0 16px 24px; color: var(--muted); font-size: 12px; }

@media (min-width: 720px) {
  .top { padding: 18px 16px; }
  .brand h1 { font-size: 20px; }
  body { font-size: 16px; }
}

/* Captures (v0.3.0) */
.capture-main { display: grid; gap: 14px; }
.capture-main figure { margin: 0; }
.capture-main img { width: 100%; height: auto; border-radius: 10px; display: block; background: #000; }
.capture-main figcaption { color: var(--muted); font-size: 12px; margin-top: 6px; }
.capture-main .kv th { width: 45%; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.thumbs a { flex: none; text-align: center; color: var(--muted); font-size: 11px; }
.thumbs img { height: 96px; width: auto; border-radius: 6px; display: block; background: #000; margin-bottom: 3px; }
.session table.kv td.num { text-align: right; }
.session .per-filter { color: var(--muted); font-size: 12px; }
.now-capture { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.now-capture img { width: 120px; border-radius: 8px; display: block; background: #000; }
.now-capture .line { font-size: 14px; }
.now-capture .line strong { font-weight: 600; }
@media (min-width: 720px) {
  .capture-main { grid-template-columns: 3fr 2fr; align-items: start; }
  .now-capture { grid-template-columns: 160px 1fr; }
  .now-capture img { width: 160px; }
}

/* Icons, moon, seeing, briefing (v0.5.0) */
.ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.tile .label .ico { opacity: 0.7; }
.moon-row { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.moon-row .moon-ico { color: var(--text); display: block; }
.moon-row .phase { font-size: 18px; font-weight: 600; }
.moon-row .phase small { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 6px; }
.moon-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.moon-facts .k { color: var(--muted); }
.moon-facts .v { font-variant-numeric: tabular-nums; }
.tile .value .q { font-size: 13px; color: var(--muted); font-weight: 400; }
.md { line-height: 1.55; }
.md h1 { font-size: 20px; margin: 0 0 10px; }
.md h2 { font-size: 16px; margin: 18px 0 6px; color: var(--text); }
.md h3 { font-size: 14px; margin: 14px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md a { text-decoration: underline; text-decoration-color: rgba(122, 162, 247, 0.4); }
.md code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2); padding: 1px 4px; border-radius: 4px; }
.md pre { background: var(--panel-2); padding: 10px; border-radius: 8px; overflow: auto; }
.md table { border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.md blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding: 2px 12px; color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.week-meta { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.week-sources { margin-top: 14px; font-size: 12px; color: var(--muted); }
.week-sources ul { margin: 4px 0 0; padding-left: 18px; }
details.archive { border-top: 1px solid var(--line); padding: 8px 0; }
details.archive summary { cursor: pointer; color: var(--text); font-size: 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.archive summary::-webkit-details-marker { display: none; }
details.archive summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
details.archive[open] summary::before { content: '▾'; }
details.archive summary .t { color: var(--muted); font-size: 12px; }
details.archive .md { padding: 10px 0 4px 18px; }
.thumbs a small { display: block; color: var(--muted); font-size: 10px; }

/* Chart axis labels + current-value pills (v0.5.0) */
.chart .title { align-items: center; gap: 8px; }
.chart .pill { display: inline-block; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart .pill.s0 { color: var(--c0, var(--text)); }
.chart .pill.s1 { color: var(--c1, var(--muted)); }
.chart .pill.s2 { color: var(--c2, var(--muted)); }
.chart .plot { display: grid; grid-template-columns: auto 1fr; gap: 6px; margin-top: 6px; }
.chart .y { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; line-height: 1; padding: 1px 0; }
.chart .plot svg { margin-top: 0; }
.chart .x { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 3px; padding-left: 0; }
.capture-head { margin-bottom: 10px; }
.capture-head .name { font-size: 20px; font-weight: 700; }
.capture-head .common { color: var(--muted); font-size: 14px; }
.capture-head .blurb { margin-top: 8px; font-size: 14px; color: var(--text); }
.capture-head .blurb a { color: var(--accent); }
.capture-head .facts { font-size: 12px; margin: 2px 0 4px; }
#captures-card h3 .when { color: var(--text); font-size: 16px; font-weight: 700; }
.capture-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: -4px 0 10px; font-size: 13px; }
.capture-stats .total { color: var(--text); font-weight: 600; }
.capture-stats .pf { color: var(--muted); font-variant-numeric: tabular-nums; }
.capture-stats .pf b { color: var(--text); }
.capture-head .tagline { font-size: 14px; color: var(--text); margin: 4px 0 6px; }
.capture-head ul.trivia { margin: 6px 0 8px 18px; padding: 0; font-size: 13px; color: var(--text); }
.capture-head ul.trivia li { margin: 2px 0; }
.now-capture .tagline { color: var(--text); font-size: 13px; margin-top: 3px; }
.now-capture .comparison { color: var(--muted); font-size: 12px; margin-top: 2px; font-style: italic; }
.now-capture .facts { font-size: 12px; margin-top: 2px; }
.log .obj-facts { flex-basis: 100%; font-size: 12px; color: var(--muted); padding-left: 18px; }

.photos-card { display: grid; gap: 12px; }
.photos-card .btn { display: inline-block; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); font-weight: 600; }
.photos-card .btn:hover { border-color: var(--accent); text-decoration: none; }
.about p { margin: 0 0 10px; }
.photos-card iframe.gallery { width: 100%; height: 75vh; min-height: 480px; border: 1px solid var(--line); border-radius: 10px; background: #000; }
.header-right .clock { font-variant-numeric: tabular-nums; color: var(--text); }
.header-right .header-moon { display: inline-flex; align-items: center; color: var(--text); }
.header-right .header-moon .moon-ico { display: block; }
.brand .region .obs { color: var(--text); font-weight: 500; }
.faq details { border-top: 1px solid var(--line); padding: 8px 0; }
.faq details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
.faq details[open] summary::before { content: '▾'; }
.faq .md { padding: 6px 0 4px 18px; color: var(--text); }
@media (max-width: 760px) { .tabs { flex-wrap: wrap; overflow: visible; white-space: normal; } .tabs a { padding: 6px 10px; font-size: 14px; } .header-right .clock { display: none; } .brand .region { font-size: 12px; } .brand h1 { font-size: 17px; } .header-right { font-size: 12px; } }

/* Start view (v0.5.5): weather with charts on top, moon + seeing side by side */
.two-col { display: grid; gap: 14px; margin-bottom: 14px; }
.two-col .card { margin-bottom: 0; }
#weather-card .charts { margin-top: 12px; }
#weather-card details.raw { margin-top: 12px; }
@media (min-width: 900px) { .two-col { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } }
.tonight-lists h4.gap { margin-top: 16px; }
.tonight-lists .moon-row .phase { font-size: 15px; }
.faq .faq-h { margin: 22px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.faq .faq-h:first-child { margin-top: 4px; }

/* Invitation to the Telegram channel (v0.10.3): a small teaser in the header, a layer on click */
.cta-teaser { display: inline-flex; align-items: center; gap: 8px; background: rgba(248, 113, 113, 0.06); border: 1.5px solid #f87171; padding: 5px 12px 5px 8px; margin: 0 8px; color: #f87171; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 999px; white-space: nowrap; max-width: 100%; min-width: 0; animation: teaser-glow 2.4s ease-in-out infinite; transition: background .15s, transform .15s; }
.cta-teaser:hover { background: rgba(248, 113, 113, 0.16); transform: translateY(-1px); }
.cta-teaser:active { transform: translateY(0); }
@keyframes teaser-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); } }
@media (prefers-reduced-motion: reduce) { .cta-teaser { animation: none; } }
.cta-teaser .cta-mini { width: 42px; height: 28px; flex: none; }
.cta-teaser .cta-mini .cta-iss { animation-duration: 6s; }
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 14, 0.7); }
.modal-box { position: relative; width: min(560px, 100%); background: var(--panel); border: 1px solid rgba(122, 162, 247, 0.35); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: modal-in .25s ease-out; }
.modal-box.cta { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, rgba(122, 162, 247, 0.16), var(--panel) 55%); }
.modal-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.modal-close:hover { color: var(--text); }
.cta-art svg { width: 100%; height: auto; display: block; }
.cta-title { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.cta-text p { margin: 0 0 12px; font-size: 13px; color: var(--text); }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #0b0f17; font-weight: 700; padding: 9px 14px; border-radius: 999px; font-size: 13px; animation: cta-pulse 3s ease-in-out infinite; text-decoration: none; }
.cta-btn:hover { text-decoration: none; filter: brightness(1.08); }
.cta-btn svg { width: 16px; height: 16px; }
.cta-handle { font-weight: 500; opacity: .8; }
.cta-iss { animation: cta-orbit 9s linear infinite; }
.cta-slit { animation: cta-slit 9s ease-in-out infinite; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 162, 247, 0.45); } 50% { box-shadow: 0 0 0 9px rgba(122, 162, 247, 0); } }
@keyframes cta-orbit { from { transform: translate(112px, 40px); } 12.5% { transform: translate(96.8px, 57px); } 25% { transform: translate(60px, 64px); } 37.5% { transform: translate(23.2px, 57px); } 50% { transform: translate(8px, 40px); } 62.5% { transform: translate(23.2px, 23px); } 75% { transform: translate(60px, 16px); } 87.5% { transform: translate(96.8px, 23px); } to { transform: translate(112px, 40px); } }
@keyframes cta-slit { 0%, 35% { opacity: 0; } 45%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (max-width: 760px) { .cta-teaser { order: 3; width: 100%; justify-content: center; margin: 2px 0 0; padding: 2px 4px; font-size: 12px; white-space: normal; text-align: left; line-height: 1.2; } .cta-teaser .cta-mini { width: 32px; height: 22px; } .modal-box.cta { grid-template-columns: 1fr; } .modal-box .cta-art { max-width: 160px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .cta-btn, .cta-iss, .cta-slit, .modal-box { animation: none; } .cta-iss { transform: translate(60px, 16px); } .cta-slit { opacity: 1; } }

/* Tonight from here (v0.10.0) */
.tl svg { width: 100%; height: auto; display: block; }
.tl text { font-family: system-ui, sans-serif; fill: var(--muted); font-size: 12px; }
.tl text.name { fill: var(--text); font-size: 13px; }
.tl .now { stroke: #f87171; stroke-width: 1.5; }
.tl text.now { fill: #f87171; font-weight: 400; }
.tl text.dim { fill: var(--muted); }
.tl .bar { fill: var(--accent); opacity: .85; }
.tl .bar.dim { fill: var(--muted); opacity: .35; }
.tl .bar.moon { fill: #e8e6d8; opacity: .55; }
.tl .iss { fill: #fbbf24; }
.tl .best { fill: #fff; }
.tl .legend { font-size: 11px; color: var(--muted); margin-top: 6px; }
.tonight-lists { margin-top: 12px; }
.tonight-lists h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tonight-lists ul { margin: 0; padding-left: 18px; font-size: 13px; }
.tonight-lists li { margin: 3px 0; }
.tonight-lists .muted { font-size: 12px; }
.tonight-lists .filters { font-size: 12px; color: var(--text); }
.tonight-lists .filters b { font-weight: 600; }

/* Contact form (v0.11.0) */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.form-grid label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.form-grid input, .form-grid select, .form-grid textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--accent); }
.form-grid label.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.form-row .btn { background: var(--accent); color: #0b0f17; border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.form-row .btn:disabled { opacity: .5; cursor: default; }
#contact-status.ok { color: var(--ok); }
#contact-status.bad { color: var(--bad); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span2 { grid-column: 1 / -1; } }

/* Object log (v0.10.3): a directory of objects → nights; frames live on the night page */
.log details.obj { border-top: 1px solid var(--line); padding: 7px 0; }
.log details.obj > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.log details.obj > summary::-webkit-details-marker { display: none; }
.log details.obj > summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
.log details.obj[open] > summary::before { content: '▾'; }
.log .obj-name { font-weight: 600; }
.log .obj-name .common { color: var(--muted); font-weight: 400; }
.log .obj-stats { font-size: 12px; color: var(--muted); }
.log ul.nights { margin: 6px 0 4px 18px; padding: 0; list-style: none; }
.log ul.nights li { padding: 4px 0; font-size: 13px; border-top: 1px dashed var(--line); }
.log ul.nights li a { font-weight: 600; }
.log ul.nights .per { color: var(--muted); font-size: 12px; margin-left: 6px; }
#view-night h3 .back { color: var(--accent); font-weight: 600; }
.night-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 4px 0 8px; }
.night-head .name { font-size: 18px; font-weight: 700; color: var(--text); }
.night-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.night-grid figure { margin: 0; }
.night-grid img { width: 100%; height: auto; border-radius: 8px; background: #000; display: block; }
.night-grid figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (min-width: 700px) { .night-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .night-grid { grid-template-columns: repeat(3, 1fr); } }

/* Sites compared (v0.18.0): one column per site, a small grouped bar chart below */
.compare table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.compare th { color: var(--muted); font-weight: 500; }
.compare td:first-child, .compare th:first-child { text-align: left; }
.compare td:first-child small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.compare td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.compare td.num small { color: var(--muted); font-weight: 400; margin-left: 4px; font-size: 11px; }
.compare .chart { margin-top: 10px; }
.compare .chart svg { width: 100%; height: auto; display: block; }
.compare .chart text { font-family: system-ui, sans-serif; font-size: 10px; fill: var(--muted); }
.compare .legend { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.compare .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.compare .defs { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* All-sky night archive (v0.19.0): keogram cards, newest first */
.sky-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sky-history figure { margin: 0; background: var(--panel-2); border-radius: 10px; padding: 8px; }
.sky-history img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; background: #000; display: block; }
.sky-history figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.sky-history figcaption b { color: var(--text); font-weight: 600; display: block; }
.sky-history a { display: block; }

/* Mount model (v0.17.0): wide tile with an orbitable SVG sketch of the mount */
.tile.mount3d { padding: 8px 10px 6px; }
.mount3d .scene { touch-action: none; cursor: grab; user-select: none; margin-top: 4px; }
.mount3d .scene:active { cursor: grabbing; }
.mount3d .scene svg { width: 100%; height: auto; display: block; max-height: 260px; }
.mount3d-svg text.rose { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; }
.mount3d .hint { font-size: 11px; margin-top: 2px; }

/* All-sky camera (v0.16.0): one large frame, keogram and star trails below */
.sky-main figure { margin: 0; }
.sky-main img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #000; display: block; }
.sky-main figcaption, .sky-products figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.sky-products { display: grid; gap: 14px; margin-top: 14px; }
.sky-products figure { margin: 0; }
.sky-products img { width: 100%; border-radius: 8px; background: #000; display: block; }
.sky-products h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.sky-products .explain { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
@media (min-width: 720px) { .sky-products { grid-template-columns: 1fr 1fr; } .sky-products .wide { grid-column: 1 / -1; } }
.now-sky { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; text-decoration: none; color: inherit; }
.now-sky img { width: 120px; border-radius: 8px; display: block; background: #000; }
.now-sky .line { font-size: 14px; }
@media (min-width: 720px) { .now-sky { grid-template-columns: 160px 1fr; } }

/* Rig switch (v0.14.0): one chip per telescope when a site runs several N.I.N.A. instances */
.rig-switch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.rig-switch .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rig-switch .chip.on { border-color: var(--accent); color: var(--accent); }
.rig-switch .chip .live { margin-left: 6px; }

/* Enlarged chart (v0.13.0) */
.chart[data-chart] { cursor: pointer; }
.chart[data-chart]:hover { outline: 1px solid var(--accent); }
.chart .pill .pl { color: var(--muted); font-weight: 400; margin-right: 4px; }
.chart-modal-box { width: min(980px, 100%); display: block; }
.chart-modal-box h3 { margin: 0 24px 8px 0; font-size: 16px; color: var(--text); }
.chart-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chart-controls .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.chart-controls .chip.on { border-color: var(--accent); color: var(--accent); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.chart-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--c0, var(--accent)); vertical-align: middle; margin-right: 6px; }
.chart-legend i.s1 { border-top-style: dashed; border-color: var(--c1, var(--muted)); }
.chart-legend i.s2 { border-top-style: dotted; border-color: var(--c2, var(--warn)); }
.chart-legend i.avg { border-top-width: 4px; opacity: .5; }
#chart-big svg { width: 100%; height: auto; display: block; }
#chart-big text { font-family: system-ui, sans-serif; font-size: 11px; fill: var(--muted); }
#chart-big .grid { stroke: var(--line); stroke-width: 1; }
#chart-big path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#chart-big .s0 { stroke: var(--c0, var(--accent)); } #chart-big .s1 { stroke: var(--c1, var(--muted)); stroke-dasharray: 4 3; } #chart-big .s2 { stroke: var(--c2, var(--warn)); stroke-dasharray: 1 4; }
#chart-big .avg { stroke-width: 4; opacity: .45; stroke-dasharray: none; }
.chart-modal-box .explain { font-size: 13px; color: var(--text); margin: 10px 0 0; }

/* Image viewer (v0.12.7): the big picture, paging, download, X; the page underneath stays as it was */
.viewer { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; }
.viewer-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, 0.94); }
.viewer img { position: relative; max-width: 100vw; max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px); object-fit: contain; display: block; background: #000; }
.viewer-x { position: absolute; top: 8px; right: 10px; z-index: 2; background: rgba(0,0,0,.5); border: 1px solid var(--line); color: #fff; font-size: 26px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 72px; background: rgba(0,0,0,.45); border: 1px solid var(--line); color: #fff; font-size: 34px; line-height: 1; border-radius: 10px; cursor: pointer; }
.viewer-nav.prev { left: 8px; } .viewer-nav.next { right: 8px; }
.viewer-nav:disabled { opacity: .25; cursor: default; }
.viewer-bar { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; font-size: 13px; color: var(--text); background: rgba(3, 5, 10, 0.94); }
.viewer-dl { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #0b0f17; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.viewer-dl svg { width: 16px; height: 16px; }
[data-vset] { cursor: zoom-in; }
.log .scope { font-size: 12px; font-weight: 600; color: var(--text); margin: 8px 0 0 18px; display: flex; align-items: center; gap: 6px; }
.log .scope svg.ico { width: 14px; height: 14px; }

/* "NOW LIVE" (v0.12.6): white, bold, with a pulsing red dot wherever something is running right now */
.live-now { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; }
.live-now i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 0 rgba(248, 113, 113, .6); animation: live-pulse 1.4s ease-out infinite; }
.card h3 .sub.live-now, .card h3 .sub .live-now { font-size: 13px; font-weight: 700; }
#live-badge { font-size: 12px; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .6); } 70% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } }
@media (prefers-reduced-motion: reduce) { .live-now i { animation: none; } }

/* Palette mixer invitation (v0.12.5): the card itself promises colour */
.card.mixer { position: relative; border-color: transparent; background-clip: padding-box; }
.card.mixer::before { content: ''; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px; background: conic-gradient(from var(--mix-angle, 0deg), #f87171, #fbbf24, #4ade80, #22d3ee, #7aa2f7, #e879f9, #f87171); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: mix-spin 12s linear infinite; }
.card.mixer h3 > span:first-child { background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #22d3ee, #7aa2f7, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; font-size: 15px; }
.mixer-invite { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
.mixer-blobs { position: relative; width: 140px; height: 120px; }
.mixer-blobs span { position: absolute; width: 78px; height: 78px; border-radius: 50%; mix-blend-mode: screen; filter: blur(2px); opacity: .95; }
.mixer-blobs .r { background: radial-gradient(circle, #ff4d4d, rgba(255,77,77,0) 70%); left: 10px; top: 8px; animation: blob-a 7s ease-in-out infinite; }
.mixer-blobs .g { background: radial-gradient(circle, #44e07a, rgba(68,224,122,0) 70%); left: 52px; top: 4px; animation: blob-b 8s ease-in-out infinite; }
.mixer-blobs .b { background: radial-gradient(circle, #4d8bff, rgba(77,139,255,0) 70%); left: 30px; top: 40px; animation: blob-c 9s ease-in-out infinite; }
.mixer-blobs .star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; animation: twinkle 3s ease-in-out infinite; }
.mixer .btn.go { background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #22d3ee, #7aa2f7, #e879f9); background-size: 300% 100%; color: #0b0f17; border: 0; font-weight: 700; animation: mix-sheen 6s linear infinite, cta-pulse 3s ease-in-out infinite; }
.mixer .sw:hover { transform: scale(1.25); transition: transform .15s; }
@property --mix-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes mix-spin { to { --mix-angle: 360deg; } }
@keyframes mix-sheen { to { background-position: 300% 0; } }
@keyframes blob-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, 18px); } }
@keyframes blob-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 14px); } }
@keyframes blob-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -16px); } }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (max-width: 600px) { .mixer-invite { grid-template-columns: 1fr; } .mixer-blobs { margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .card.mixer::before, .mixer-blobs span, .mixer .btn.go { animation: none; } }

/* Palette mixer (v0.6.1) */
.mixer canvas { width: 100%; height: auto; display: block; border-radius: 8px; background: #000; }
.mixer .btn { display: inline-block; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--text); font-weight: 600; cursor: pointer; font: inherit; }
.mixer .btn:hover { border-color: var(--accent); }
.mixer-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mixer .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.mixer .chip.on, .mixer .chip:hover { border-color: var(--accent); color: var(--accent); }
.mixer-channels { display: grid; gap: 10px; }
.mixer-ch { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: start; border-top: 1px solid var(--line); padding-top: 10px; }
.mixer-ch img { width: 72px; height: auto; border-radius: 6px; background: #000; }
.mixer-ch .meta { font-size: 13px; min-width: 0; }
.mixer-ch .swatches { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.mixer-ch .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.mixer-ch .sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.sw-red { background: #f00; } .sw-orange { background: #ff8000; } .sw-yellow { background: #fff200; } .sw-green { background: #0f0; }
.sw-cyan { background: #0ff; } .sw-blue { background: #1a66ff; } .sw-magenta { background: #f0f; } .sw-white { background: #fff; }
.sw-off { background: transparent; border-color: var(--line) !important; position: relative; }
.sw-off::after { content: '×'; color: var(--muted); position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.mixer label.gain, .mixer-global label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mixer input[type=range] { flex: 1; min-width: 80px; max-width: 260px; accent-color: var(--accent); }
.mixer-ch .align { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mixer .nudge button { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; width: 24px; height: 22px; font-size: 10px; cursor: pointer; margin-right: 2px; }
.mixer-global { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.mixer-hint { font-size: 12px; margin-top: 10px; }