/* Loupe — the portal as a designer's desk: look closer.
   Off-white paper, near-black ink and one signal red. Huge Bricolage Grotesque titles end in a red dot, the
   interface speaks Space Grotesk, labels are IBM Plex Mono. Pixel rulers run along the top and left edges like a
   design tool, a red marker on each tracking the cursor; a red dot rides the scroll track on the right. X-ray
   (the header button, or hold ⌥ Option) turns the page into its blueprint: every panel outlined in red with its
   size, a grid beneath, a lens ring following the cursor (theme-loupe.js). Buttons are ink pills with a red
   arrow disc. Station cards are spec sheets. The pages open as a full-screen menu of giant words (theme-navs.js,
   M to open, Esc to close). Dark mode is the same desk at night. Motion is transform/opacity only and stops under
   prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="loupe"] {
  color-scheme: light;
  --lp-paper: #f4f4f2; --lp-ink: #121214; --lp-red: #ff3e3e; --lp-red-ink: #e02424; --lp-soft: #e9e9e6; --lp-line: rgba(18, 18, 20, .1); --lp-line-2: rgba(18, 18, 20, .2);
  --lp-card: #ffffff;
  --tint: #ff3e3e; --accent: #121214; --accent-2: #ff3e3e; --accent-3: #8a8a8f;
  --font: "Space Grotesk", "Inter", system-ui, sans-serif;
  --lp-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --lp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --bg: #f4f4f2; --panel: #ffffff; --panel-2: #f0f0ed; --border: rgba(18, 18, 20, .1);
  --text: #121214; --muted: #6b6b70; --input-bg: #ffffff; --link: #121214;
  --green: #12924d; --red: #e02424; --amber: #b8740a; --orange: #e2541b;
  --radius: 22px; --radius-btn: 999px; --radius-input: 14px;
  --surface: #ffffff; --surface-border-color: rgba(18, 18, 20, .1);
  --grad-brand: linear-gradient(90deg, #121214, #121214);
  --grad-primary: linear-gradient(#121214, #121214); --grad-primary-hover: linear-gradient(#000, #000);
  --grad-success: linear-gradient(#12924d, #12924d); --grad-danger: linear-gradient(#ff3e3e, #e02424);
  --grad-warn: linear-gradient(#f0a020, #d88a10); --grad-info: linear-gradient(#6b6b70, #6b6b70);
  --btn-soft: #ffffff; --btn-soft-hover: #f0f0ed;
  --app-bg: #f4f4f2;
  --elev: 0 1px 2px rgba(18, 18, 20, .04), 0 18px 40px -26px rgba(18, 18, 20, .22);
  --shadow: 0 18px 40px -26px rgba(18, 18, 20, .22); --shadow-glow: 0 0 0 1px rgba(255, 62, 62, .4);
  --glow1: transparent; --glow2: transparent; --glow-blend: normal;
  --lp-ease: cubic-bezier(.16, 1, .3, 1);
  --lp-spring: linear(0, .25 7%, .7 17%, 1.02 29%, 1.06 36%, 1.02 46%, .995 60%, 1);
  --lp-ruler: 22px;
}
html[data-theme="loupe"][data-mode="dark"] {
  color-scheme: dark;
  --lp-paper: #121214; --lp-ink: #f4f4f2; --lp-soft: #1c1c1f; --lp-line: rgba(244, 244, 242, .1); --lp-line-2: rgba(244, 244, 242, .2); --lp-card: #19191c;
  --accent: #f4f4f2; --accent-3: #8a8a8f;
  --bg: #121214; --panel: #19191c; --panel-2: #202024; --border: rgba(244, 244, 242, .1);
  --text: #f4f4f2; --muted: #9a9aa0; --input-bg: #19191c; --link: #f4f4f2;
  --green: #4fd38a; --red: #ff5a5a; --amber: #f0b44a; --orange: #ff7a45;
  --surface: #19191c; --surface-border-color: rgba(244, 244, 242, .1);
  --grad-primary: linear-gradient(#f4f4f2, #f4f4f2); --grad-primary-hover: linear-gradient(#fff, #fff);
  --btn-soft: #19191c; --btn-soft-hover: #202024;
  --app-bg: #121214;
  --elev: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 44px -26px rgba(0, 0, 0, .8);
}

/* ---------- Motion vocabulary ---------- */
@keyframes lp-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes lp-dot { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes lp-pulse { 50% { transform: scale(1.6); opacity: .25; } }

/* ---------- The desk: paper, the rulers' room, the scroll dot ---------- */
html[data-theme="loupe"][data-mode] body { background: var(--lp-paper); color: var(--lp-ink); font-family: var(--font); }
html[data-theme="loupe"][data-mode] body::before, html[data-theme="loupe"][data-mode] body::after { content: none; }
html[data-theme="loupe"][data-mode] #app-view { padding-left: var(--lp-ruler); }
html[data-theme="loupe"][data-mode] ::selection { background: var(--lp-red); color: #fff; }
html[data-theme="loupe"][data-mode] ::-webkit-scrollbar { width: 0; height: 8px; }
/* rulers (theme-loupe.js draws the ticks; these are their frames) */
.lp-ruler { position: fixed; z-index: 55; pointer-events: none; color: var(--lp-ink); background: color-mix(in srgb, var(--lp-paper) 92%, transparent); }
.lp-ruler.v { left: 0; top: 0; bottom: 0; width: var(--lp-ruler); border-right: 1px solid var(--lp-line); }
.lp-ruler.h { left: var(--lp-ruler); right: 0; top: 0; height: 18px; border-bottom: 1px solid var(--lp-line); display: none; }
html[data-xray] .lp-ruler.h { display: block; }
.lp-ruler canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-mark { position: absolute; background: var(--lp-red); will-change: transform; }
.lp-ruler.v .lp-mark { left: 0; right: 0; top: 0; height: 1px; }
.lp-ruler.h .lp-mark { top: 0; bottom: 0; left: 0; width: 1px; }
.lp-ruler.v .lp-mark::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-red); }
.lp-scroll { position: fixed; right: 10px; top: 90px; bottom: 90px; width: 1px; z-index: 55; pointer-events: none; background: var(--lp-line-2); }
.lp-scroll i { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-red); will-change: transform; }
html.lp-menu-on :is(.lp-ruler, .lp-scroll, .lp-lens) { display: none !important; }   /* the full-screen menu is open */
@media (max-width: 760px) { .lp-ruler, .lp-scroll { display: none !important; } html[data-theme="loupe"][data-mode] #app-view { padding-left: 0; } }

/* ---------- Header: the wordmark with its red dot, plain words, an ink pill ---------- */
html[data-theme="loupe"][data-mode] .topbar { background: color-mix(in srgb, var(--lp-paper) 92%, transparent); border-bottom: 0; box-shadow: none; }
html[data-theme="loupe"][data-mode] .brand { font: 600 22px var(--font); letter-spacing: -.03em; color: var(--lp-ink); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="loupe"][data-mode] .brand::after { content: "."; color: var(--lp-red); }
html[data-theme="loupe"][data-mode] .brand img, html[data-theme="loupe"][data-mode] .brand svg { display: none; }
html[data-theme="loupe"][data-mode] :is(.crumb, .crumb-back) { font: 500 14px var(--font); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 6px 10px; transition: color .2s, background .2s; }
html[data-theme="loupe"][data-mode] :is(.crumb, .crumb-back):hover { color: var(--lp-ink); background: var(--lp-soft); }
html[data-theme="loupe"][data-mode] .crumb.current { color: var(--lp-ink); background: none; }
html[data-theme="loupe"][data-mode] .topbar .btn.ghost { font: 500 14px var(--font); color: var(--lp-ink); background: none; border: 0; box-shadow: none; }
.lp-xray { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 14px var(--font); color: var(--lp-ink); background: none; border: 0; padding: 7px 12px; border-radius: 999px; transition: background .2s; }
.lp-xray:hover { background: var(--lp-soft); }
.lp-xray svg { width: 17px; height: 17px; }
.lp-xray[aria-pressed="true"] { background: var(--lp-ink); color: var(--lp-paper); }
.lp-xray kbd { font: 400 10px var(--lp-mono); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--lp-line-2); color: var(--muted); }
.lp-xray[aria-pressed="true"] kbd { border-color: rgba(255, 255, 255, .3); color: inherit; }

/* ---------- Type: huge display titles ending in a red dot; mono labels ---------- */
html[data-theme="loupe"][data-mode] :is(h1, h2, h3, h4) { font-family: var(--font); letter-spacing: -.02em; color: var(--lp-ink); }
html[data-theme="loupe"][data-mode] .section-head { align-items: flex-end; margin: 18px 0 28px; }
html[data-theme="loupe"][data-mode] .section-head h2 { font: 500 clamp(46px, 7vw, 96px)/.92 var(--lp-display); letter-spacing: -.045em; }
html[data-theme="loupe"][data-mode] .section-head h2::after { content: ""; display: inline-block; width: .17em; height: .17em; margin-left: .06em; border-radius: 50%; background: var(--lp-red); animation: lp-dot .7s var(--lp-spring) .2s backwards; }
html[data-theme="loupe"][data-mode] :is(.stat .label, .sc-bal-label, table thead th, .ov-l, .sc-flag-l, .sc-day) {
  font: 400 11.5px var(--lp-mono) !important; letter-spacing: .02em !important; text-transform: none; color: var(--muted);
}
html[data-theme="loupe"][data-mode] :is(.stat .value, .sc-bal-num, td, .num, .money) { font-variant-numeric: tabular-nums; }

/* ---------- Surfaces: white sheets on paper ---------- */
html[data-theme="loupe"][data-mode] .card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--radius); box-shadow: var(--elev); animation: lp-rise .8s var(--lp-ease) backwards; }
html[data-theme="loupe"][data-mode] .card::before { content: none; }
html[data-theme="loupe"][data-mode] .stat { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 18px; box-shadow: var(--elev); }
html[data-theme="loupe"][data-mode] .stat .value { font: 500 30px/1.05 var(--lp-display); letter-spacing: -.03em; }

/* ---------- Controls: ink pills with a red arrow disc; outline pills ---------- */
html[data-theme="loupe"][data-mode] .btn {
  font: 500 14px var(--font); letter-spacing: -.005em; border-radius: 999px; background: var(--lp-card); color: var(--lp-ink); border: 1px solid var(--lp-line-2); box-shadow: none;
  transition: transform .45s var(--lp-spring), background .2s, border-color .2s, color .2s;
}
html[data-theme="loupe"][data-mode] .btn:hover { border-color: var(--lp-ink); transform: translateY(-2px); }
html[data-theme="loupe"][data-mode] .btn:active { transform: scale(.96); transition-duration: .1s; }
html[data-theme="loupe"][data-mode] .btn.primary { background: var(--lp-ink); color: var(--lp-paper); border-color: var(--lp-ink); display: inline-flex; align-items: center; gap: 10px; padding-right: 6px; }
html[data-theme="loupe"][data-mode] .btn.primary::after {
  content: "↗"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lp-red); color: #fff; font-size: 13px; flex: none;
  transition: transform .5s var(--lp-spring);
}
html[data-theme="loupe"][data-mode] .btn.primary.small::after { width: 20px; height: 20px; font-size: 11px; }
html[data-theme="loupe"][data-mode] .btn.primary:hover::after { transform: rotate(45deg) scale(1.08); }
html[data-theme="loupe"][data-mode] .btn.danger { color: var(--lp-red-ink); border-color: color-mix(in srgb, var(--lp-red) 50%, transparent); }
html[data-theme="loupe"][data-mode] .btn.danger:hover { background: var(--lp-red); color: #fff; border-color: var(--lp-red); }
html[data-theme="loupe"][data-mode] :is(input, select, textarea) { border-radius: var(--radius-input); background: var(--input-bg); border: 1px solid var(--lp-line-2); color: var(--lp-ink); font-family: var(--font); transition: border-color .2s, box-shadow .2s; }
html[data-theme="loupe"][data-mode] :is(input, select, textarea):focus { outline: none; border-color: var(--lp-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-red) 18%, transparent); }
html[data-theme="loupe"][data-mode] :is(.chip, .badge, .sc-badge, .sc-owed, .gp) { border-radius: 999px; background: var(--lp-soft); border: 1px solid var(--lp-line); color: var(--lp-ink); font: 400 11.5px var(--lp-mono); box-shadow: none; }
html[data-theme="loupe"][data-mode] .sc-flag { border-radius: 999px; font: 400 11.5px var(--lp-mono); background: var(--lp-soft); border: 1px solid var(--lp-line); color: var(--lp-ink); }
html[data-theme="loupe"][data-mode] .sc-flag.hot { background: var(--lp-red); color: #fff; border-color: var(--lp-red); }
html[data-theme="loupe"][data-mode] .sc-flag.hot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #fff; vertical-align: middle; animation: lp-pulse 1.6s ease-in-out infinite; }

/* ---------- Tables ---------- */
html[data-theme="loupe"][data-mode] table thead th { border-bottom: 1px solid var(--lp-line-2); }
html[data-theme="loupe"][data-mode] table tbody td { border-bottom: 1px solid var(--lp-line); }
html[data-theme="loupe"][data-mode] table tbody tr { transition: background .2s; }
html[data-theme="loupe"][data-mode] table tbody tr:hover { background: var(--lp-soft); }
html[data-theme="loupe"][data-mode] table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--lp-red); }

/* ---------- Dashboard: each station a spec sheet ---------- */
html[data-theme="loupe"][data-mode] .station-grid { counter-reset: lp-st; gap: 22px !important; }
html[data-theme="loupe"][data-mode] .station-grid > .station-card {
  counter-increment: lp-st; position: relative; padding: 26px 26px 22px; border-radius: 28px; cursor: pointer;
  transition: transform .6s var(--lp-spring), box-shadow .4s, border-color .3s;
}
html[data-theme="loupe"][data-mode] .station-grid > .station-card:hover { transform: translateY(-6px); border-color: var(--lp-line-2); box-shadow: 0 30px 60px -30px rgba(18, 18, 20, .35); }
html[data-theme="loupe"][data-mode] .station-grid > .station-card:nth-child(2) { animation-delay: .08s; }
html[data-theme="loupe"][data-mode] .station-grid > .station-card:nth-child(n+3) { animation-delay: .16s; }
/* the red arrow disc, top right, that wakes up on hover */
html[data-theme="loupe"][data-mode] .station-grid > .station-card::after {
  content: "↗"; position: absolute; right: 22px; top: 22px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font: 500 18px var(--font); color: var(--lp-ink); background: var(--lp-soft); transition: transform .55s var(--lp-spring), background .25s, color .25s;
}
html[data-theme="loupe"][data-mode] .station-grid > .station-card:hover::after { background: var(--lp-red); color: #fff; transform: rotate(45deg) scale(1.06); }
html[data-theme="loupe"][data-mode] .station-card .sc-head { display: block; padding-right: 56px; }
html[data-theme="loupe"][data-mode] .station-card .sc-head::before {
  content: "Station " counter(lp-st, decimal-leading-zero); display: block; margin-bottom: 6px; font: 400 11.5px var(--lp-mono); color: var(--muted);
}
html[data-theme="loupe"][data-mode] .station-card h3 { font: 500 clamp(34px, 3.4vw, 50px)/.95 var(--lp-display); letter-spacing: -.04em; margin: 0; }
html[data-theme="loupe"][data-mode] .station-card h3::after { content: "."; color: var(--lp-red); }
html[data-theme="loupe"][data-mode] .station-card .meta { font: 400 13px var(--font); color: var(--muted); margin-top: 6px; }
html[data-theme="loupe"][data-mode] .station-card .sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* the spec grid: mono label above a big figure, ruled like a datasheet */
html[data-theme="loupe"][data-mode] .station-card .sc-balance.sc-live {
  background: none; border: 0; padding: 0; margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--lp-line);
}
html[data-theme="loupe"][data-mode] .station-card .sc-cash { display: contents; }
html[data-theme="loupe"][data-mode] .station-card :is(.sc-stat, .sc-cash-box) {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 14px 0; margin: 0; border: 0; border-radius: 0; background: none !important;
  border-bottom: 1px solid var(--lp-line); min-width: 0;
}
html[data-theme="loupe"][data-mode] .station-card .sc-stat + .sc-stat, html[data-theme="loupe"][data-mode] .station-card .sc-cash-box + .sc-cash-box { padding-left: 14px; border-left: 1px solid var(--lp-line); }
html[data-theme="loupe"][data-mode] .station-card .sc-stat .sc-bal-label { order: -1; margin: 0; }
html[data-theme="loupe"][data-mode] .station-card .sc-bal-num { font: 500 30px/1 var(--lp-display) !important; letter-spacing: -.03em; color: var(--lp-ink); }
html[data-theme="loupe"][data-mode] .station-card .sc-bal-suffix { font: 400 13px var(--font); color: var(--muted); margin-left: 4px; }
html[data-theme="loupe"][data-mode] .station-card .sc-cash-box .sc-cash-v { font: 500 26px/1 var(--lp-display) !important; letter-spacing: -.03em; color: var(--lp-ink) !important; }
html[data-theme="loupe"][data-mode] .station-card .sc-cash-box .sc-cash-s { font: 400 12px var(--font) !important; color: var(--muted); }
html[data-theme="loupe"][data-mode] .station-card .sc-cash-box.now .sc-cash-l::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--lp-red); vertical-align: middle; animation: lp-pulse 1.6s ease-in-out infinite; }
html[data-theme="loupe"][data-mode] .station-card .sc-stat .sc-spark { width: 100%; height: 22px; margin-top: 6px; }
html[data-theme="loupe"][data-mode] .station-card .sc-spark rect { fill: var(--lp-line-2); transition: fill .3s; }
html[data-theme="loupe"][data-mode] .station-card .sc-spark rect.now { fill: var(--lp-red); }
html[data-theme="loupe"][data-mode] .station-card:hover .sc-spark rect { fill: color-mix(in srgb, var(--lp-ink) 55%, transparent); }
html[data-theme="loupe"][data-mode] .station-card:hover .sc-spark rect.now { fill: var(--lp-red); }
html[data-theme="loupe"][data-mode] .station-card .sc-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--lp-line); }
html[data-theme="loupe"][data-mode] .station-card .sc-flag .sc-bal-label { font: inherit !important; color: inherit; }
html[data-theme="loupe"][data-mode] .station-card .sc-day { grid-column: 1 / -1; padding-top: 12px; }
html[data-theme="loupe"][data-mode] .station-card .sc-prices { margin-top: 14px; }
html[data-theme="loupe"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: lp-rise .6s var(--lp-spring); }

/* ---------- Calendar ---------- */
html[data-theme="loupe"][data-mode] .cal .day { border-radius: 16px; background: var(--lp-card); border: 1px solid var(--lp-line); transition: transform .45s var(--lp-spring), border-color .2s; }
html[data-theme="loupe"][data-mode] .cal .day:hover { transform: translateY(-3px); border-color: var(--lp-ink); }
html[data-theme="loupe"][data-mode] .cal .day .num { font: 400 12px var(--lp-mono); }
html[data-theme="loupe"][data-mode] .cal .day.today { border-color: var(--lp-red); }
html[data-theme="loupe"][data-mode] .cal .day.today .num { color: var(--lp-red-ink); }

/* ---------- Pop-ups ---------- */
html[data-theme="loupe"][data-mode] .modal { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(18, 18, 20, .45); transition: opacity .3s, transform .6s var(--lp-spring); }
@starting-style { html[data-theme="loupe"][data-mode] .modal { opacity: 0; transform: translateY(20px) scale(.97); } }
html[data-theme="loupe"][data-mode] .modal-backdrop { background: rgba(18, 18, 20, .4); }
html[data-theme="loupe"][data-mode] .login-card { border-radius: 28px; animation: lp-rise .9s var(--lp-spring); }

/* ---------- X-ray: the page as its blueprint (theme-loupe.js labels each panel with its size) ---------- */
html[data-theme="loupe"][data-xray] body { background-color: var(--lp-paper); background-image: linear-gradient(var(--lp-line) 1px, transparent 1px), linear-gradient(90deg, var(--lp-line) 1px, transparent 1px); background-size: 16px 16px; }
html[data-theme="loupe"][data-xray] :is(.card, .stat, .btn, table, .sc-cash-box, .sc-stat, .cal .day, input, select) { outline: 1px dashed color-mix(in srgb, var(--lp-red) 65%, transparent); outline-offset: 2px; }
html[data-theme="loupe"][data-xray] :is(.card, .stat) { position: relative; overflow: visible; }
html[data-theme="loupe"][data-xray] [data-lp-size]::before {
  content: attr(data-lp-size); position: absolute; left: 0; top: -20px; z-index: 5; pointer-events: none;
  font: 400 10.5px var(--lp-mono); color: #fff; background: var(--lp-red); padding: 1px 6px; border-radius: 4px; white-space: nowrap; display: block; height: auto; width: max-content; right: auto; opacity: 1;
}
.lp-lens { position: fixed; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 90; pointer-events: none; border-radius: 50%; will-change: transform;
  border: 2px solid var(--lp-red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lp-red) 12%, transparent), inset 0 0 30px color-mix(in srgb, var(--lp-red) 10%, transparent);
  background: radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--lp-red) 6%, transparent)); opacity: 0; transition: opacity .25s; }
.lp-lens::before, .lp-lens::after { content: ""; position: absolute; background: var(--lp-red); }
.lp-lens::before { left: 50%; top: 40%; bottom: 40%; width: 1px; }
.lp-lens::after { top: 50%; left: 40%; right: 40%; height: 1px; }
html[data-xray] .lp-lens { opacity: 1; }

/* ---------- Page entrance ---------- */
html[data-theme="loupe"][data-mode] .station-main > * { animation: lp-rise .7s var(--lp-ease) backwards; }
html[data-theme="loupe"][data-mode] .station-main > :nth-child(2) { animation-delay: .06s; }
html[data-theme="loupe"][data-mode] .station-main > :nth-child(n+3) { animation-delay: .12s; }

/* ---------- Own surfaces, not the shared "sculpted forms" layer (see styles.css) ---------- */
html[data-theme="loupe"][data-mode]:root { --form-shadow: var(--elev); --form-lit: transparent; --form-shade: transparent; --form-cast: transparent; }
html[data-theme="loupe"][data-mode]:root :is(.card, .stat, .add-card, .cal .day:not(.empty)) { transition: transform .5s var(--lp-spring), border-color .2s !important; }
html[data-theme="loupe"][data-mode]:root :is(.card, .add-card):not(.station-card):hover { transform: none !important; }
html[data-theme="loupe"][data-mode]:root .station-grid > .station-card { transition: transform .6s var(--lp-spring), box-shadow .4s, border-color .3s !important; }
html[data-theme="loupe"][data-mode]:root .station-grid > .station-card:hover { transform: translateY(-6px) !important; --form-shadow: 0 30px 60px -30px rgba(18, 18, 20, .35); }
html[data-theme="loupe"][data-mode]:root :is(.btn, .tab, .seg button) { transition: transform .45s var(--lp-spring), background-color .2s, border-color .2s, color .2s !important; }
html[data-theme="loupe"][data-mode]:root .btn:active { transform: scale(.96) !important; }
html[data-theme="loupe"][data-mode]:root .btn.primary { box-shadow: none !important; }

/* ---------- Pointers: an ink arrow with a red dot, a red ring for anything you can press ---------- */
html[data-theme="loupe"] { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 L4 24 L9.6 18.6 L13.6 27 L17.4 25.4 L13.6 17.2 L21 17.2 Z' fill='%23121214' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='24' r='3.4' fill='%23ff3e3e' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") 4 3; }
html[data-theme="loupe"] :is(a, button, .btn, [role="button"], .tab, select, summary, label, .station-card, .add-card, .cal .day:not(.empty), .chip, input[type="checkbox"], input[type="radio"], input[type="range"]) {
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='9' fill='rgba(255,62,62,.12)' stroke='%23ff3e3e' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23ff3e3e'/%3E%3C/svg%3E") 16 16;
}

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="loupe"] *, html[data-theme="loupe"] *::before, html[data-theme="loupe"] *::after { animation: none !important; transition: none !important; }
}


/* ---------- Selected segment / tab / pill: the theme's pill colour with text that reads on it, in light and dark
   (the shared style puts white text on --grad-primary, which vanishes on a light pill) ---------- */
html[data-theme="loupe"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--lp-ink); color: var(--lp-paper); text-shadow: none; }