/* Velocity — the portal at full throttle.
   Graphite chassis, electric-lime throttle, hot-coral alerts, ultraviolet trim. Unbounded display type over Manrope,
   tabular figures everywhere money moves. Motion is physical: spring easing (CSS linear()), a scroll-progress
   gauge across the header, cards that reveal as they scroll into view, bars that grow from the floor, a rev
   indicator that glides to the open page. Built for frame budget: only transform and opacity ever animate,
   no backdrop blur, no filters, no animated shadows, and one ambient layer. All motion stops under
   prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="velocity"] {
  color-scheme: dark;
  --vl-lime: #d4ff3a; --vl-coral: #ff4f6d; --vl-violet: #8b6cff; --vl-ink: #0a0c10;
  --tint: #d4ff3a; --accent: #d4ff3a; --accent-2: #8b6cff; --accent-3: #ff4f6d;
  --font: "Manrope", "Inter", system-ui, sans-serif;
  --vl-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --bg: #0a0c10; --panel: #12151c; --panel-2: #191d26; --border: #262b37;
  --text: #f3f5f8; --muted: #8d95a6; --input-bg: #0c0e13; --link: #d4ff3a;
  --green: #3ee89a; --red: #ff4f6d; --amber: #ffb547; --orange: #ff8a3d;
  --radius: 18px; --radius-btn: 999px; --radius-input: 12px;
  --surface: linear-gradient(180deg, #151922, #11141b); --surface-border-color: #232835;
  --grad-brand: linear-gradient(90deg, #d4ff3a, #8b6cff 60%, #ff4f6d);
  --grad-primary: linear-gradient(180deg, #e2ff6b, #c6f51f);
  --grad-primary-hover: linear-gradient(180deg, #ecff8f, #d4ff3a);
  --grad-success: linear-gradient(180deg, #6ef3b4, #2fd889);
  --grad-danger: linear-gradient(180deg, #ff7189, #f23a5a);
  --grad-warn: linear-gradient(180deg, #ffc977, #ff9f2e);
  --grad-info: linear-gradient(180deg, #a891ff, #7a58ff);
  --btn-soft: linear-gradient(180deg, #1c212c, #171b24);
  --btn-soft-hover: linear-gradient(180deg, #232937, #1c212c);
  --app-bg: #0a0c10;
  --elev: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 20px 44px -26px rgba(0, 0, 0, .85);
  --shadow: 0 20px 44px -26px rgba(0, 0, 0, .85);
  --shadow-glow: 0 0 0 1px rgba(212, 255, 58, .3), 0 14px 34px -16px rgba(212, 255, 58, .4);
  --glow1: transparent; --glow2: transparent; --glow-blend: normal;
  --vl-hair: rgba(255, 255, 255, .07);
  --vl-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --vl-out: cubic-bezier(.16, 1, .3, 1);
}
html[data-theme="velocity"][data-mode="light"] {
  color-scheme: light;
  --accent: #5a7a00; --link: #4a6600; --tint: #9fd400;
  --accent-2: #5b3df0; --accent-3: #e0244a;
  --bg: #f1f2ee; --panel: #ffffff; --panel-2: #f6f7f3; --border: #dcdfd6;
  --text: #0e1014; --muted: #5d6470; --input-bg: #ffffff;
  --green: #12895a; --red: #d42347; --amber: #a86400; --orange: #c2560d;
  --surface: linear-gradient(180deg, #ffffff, #fbfbf9); --surface-border-color: #e1e3dc;
  --btn-soft: linear-gradient(180deg, #ffffff, #f2f3ef); --btn-soft-hover: linear-gradient(180deg, #f7f8f4, #ebede6);
  --grad-primary: linear-gradient(180deg, #d9ff4d, #c2f000);
  --grad-primary-hover: linear-gradient(180deg, #e4ff7a, #cdf72a);
  --app-bg: #f1f2ee;
  --elev: 0 1px 0 #fff inset, 0 16px 34px -24px rgba(20, 24, 12, .35);
  --shadow-glow: 0 0 0 1px rgba(90, 122, 0, .3), 0 14px 30px -18px rgba(90, 122, 0, .45);
  --vl-hair: rgba(14, 16, 20, .08);
}

/* ---------- Motion vocabulary (transform / opacity only) ---------- */
@keyframes vl-in { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes vl-fade { from { opacity: 0; } }
@keyframes vl-grow { from { transform: scaleY(0); } }
@keyframes vl-gauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vl-drift { 50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); } }
@keyframes vl-drift2 { 50% { transform: translate3d(-5vw, -3vh, 0) scale(.94); } }
@keyframes vl-ping { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes vl-blink { 50% { opacity: .25; } }
@keyframes vl-tick { 0% { transform: translateY(-6px) scale(1.06); opacity: .4; } }

/* ---------- Page and ambient light ---------- */
html[data-theme="velocity"][data-mode] body { background: var(--app-bg); letter-spacing: -.005em; }
html[data-theme="velocity"][data-mode] ::selection { background: var(--vl-lime); color: var(--vl-ink); }
/* Two soft light pools that drift on the compositor: painted once (radial gradients, no blur), then only moved. */
html[data-theme="velocity"][data-mode] body::before,
html[data-theme="velocity"][data-mode] body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none; inset: auto; width: 70vmax; height: 70vmax; border-radius: 50%;
  mix-blend-mode: normal; will-change: transform;
}
html[data-theme="velocity"][data-mode] body::before {
  left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(212, 255, 58, .12), transparent);
  animation: vl-drift 26s ease-in-out infinite;
}
html[data-theme="velocity"][data-mode] body::after {
  right: -26vmax; bottom: -34vmax; background: radial-gradient(closest-side, rgba(139, 108, 255, .16), transparent);
  animation: vl-drift2 32s ease-in-out infinite;
}
html[data-theme="velocity"][data-mode="light"] body::before { background: radial-gradient(closest-side, rgba(180, 230, 0, .22), transparent); }
html[data-theme="velocity"][data-mode="light"] body::after { background: radial-gradient(closest-side, rgba(110, 80, 255, .12), transparent); }
html[data-theme="velocity"][data-mode] :is(#app-view, #login-view, #modal-root) { position: relative; z-index: 1; }
html[data-theme="velocity"][data-mode] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="velocity"][data-mode] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, var(--panel-2)); border-radius: 99px; border: 3px solid var(--bg); }
html[data-theme="velocity"][data-mode] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Header: a solid bar with a scroll-progress gauge along its foot ---------- */
html[data-theme="velocity"][data-mode] .topbar {
  position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--vl-hair); box-shadow: none;
}
html[data-theme="velocity"][data-mode] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(0);
  animation: vl-gauge linear both; animation-timeline: scroll(root block);
}
html[data-theme="velocity"][data-mode] .brand {
  font-family: var(--vl-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor; display: inline-flex; align-items: center; gap: 10px;
}
html[data-theme="velocity"][data-mode] .brand::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--vl-lime); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vl-lime) 22%, transparent);
}
html[data-theme="velocity"][data-mode="light"] .brand::before { background: #9fd400; }
html[data-theme="velocity"][data-mode] .crumb.current { background: var(--vl-lime); color: var(--vl-ink); border-radius: 999px; font-weight: 700; }
html[data-theme="velocity"][data-mode] .crumb-back { border-radius: 999px; }
html[data-theme="velocity"][data-mode] .vl-speedo {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font-family: var(--vl-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text);
}
html[data-theme="velocity"][data-mode] .vl-speedo i { font-style: normal; font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html[data-theme="velocity"][data-mode] .vl-speedo b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); position: relative; align-self: center; }
html[data-theme="velocity"][data-mode] .vl-speedo b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: vl-ping 2.2s var(--vl-out) infinite; }
@media (max-width: 760px) { html[data-theme="velocity"][data-mode] .vl-speedo { display: none; } }

/* ---------- Type ---------- */
html[data-theme="velocity"][data-mode] :is(h1, h2, h3) { font-family: var(--vl-display); letter-spacing: -.025em; font-weight: 700; }
html[data-theme="velocity"][data-mode] h4 { font-family: var(--font); font-weight: 800; letter-spacing: -.01em; }
html[data-theme="velocity"][data-mode] .section-head h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1; letter-spacing: -.04em; }
html[data-theme="velocity"][data-mode] .section-head h2::after {
  content: ""; display: block; width: 56px; height: 5px; margin-top: 12px; border-radius: 99px; background: var(--grad-brand);
  transform-origin: 0 50%; animation: vl-gauge .9s var(--vl-out) .15s backwards;
}
html[data-theme="velocity"][data-mode] :is(.stat .value, .sc-bal-num, td, .num, .money) { font-variant-numeric: tabular-nums; }

/* ---------- Surfaces ---------- */
html[data-theme="velocity"][data-mode] .card {
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius);
  box-shadow: var(--elev); transition: transform .6s var(--vl-spring), border-color .25s;
}
/* the trim line: a lime-to-coral stripe that sweeps in from the left on hover (a scaled pseudo, never repainted) */
html[data-theme="velocity"][data-mode] .card::before {
  height: 3px; opacity: 1; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(.18);
  transition: transform .7s var(--vl-out);
}
html[data-theme="velocity"][data-mode] .card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-border-color)); box-shadow: var(--elev); }
html[data-theme="velocity"][data-mode] .card:hover::before { transform: scaleX(1); }
html[data-theme="velocity"][data-mode] .card:active { transform: translateY(-2px) scale(.995); transition-duration: .15s; }
/* panels reveal as they scroll in: scroll-driven, so it runs off the main thread and costs nothing at rest */
@supports (animation-timeline: view()) {
  html[data-theme="velocity"][data-mode] .station-main .card:not(.station-card) {
    animation: vl-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
  }
}
html[data-theme="velocity"][data-mode] .stat {
  border-radius: 16px; border: 1px solid var(--surface-border-color); background: var(--surface); box-shadow: var(--elev);
}
html[data-theme="velocity"][data-mode] .stat .value { font-family: var(--vl-display); font-weight: 700; letter-spacing: -.03em; }
html[data-theme="velocity"][data-mode] .stat .label { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 800; }
/* Unbounded runs wide: the narrow side rail sets its figures in the reading face so long totals fit */
html[data-theme="velocity"][data-mode] .station-rail-right .stat .value { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }

/* ---------- Controls ---------- */
html[data-theme="velocity"][data-mode] .btn { border-radius: 999px; font-weight: 700; transition: transform .45s var(--vl-spring), background .2s, border-color .2s, color .2s; }
html[data-theme="velocity"][data-mode] .btn:hover { transform: translateY(-2px); box-shadow: none; }
html[data-theme="velocity"][data-mode] .btn:active { transform: scale(.96); transition-duration: .12s; }
html[data-theme="velocity"][data-mode] .btn.primary { color: var(--vl-ink); position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 24px -14px rgba(212, 255, 58, .9); }
/* a light sweep across the primary button on hover (a moved pseudo, not an animated gradient) */
html[data-theme="velocity"][data-mode] .btn.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-110%); transition: transform .7s var(--vl-out);
}
html[data-theme="velocity"][data-mode] .btn.primary:hover::after { transform: translateX(110%); }
html[data-theme="velocity"][data-mode] .btn.danger { color: #fff; }
html[data-theme="velocity"][data-mode] :is(input, select, textarea) { border-radius: var(--radius-input); transition: border-color .2s, box-shadow .2s; }
html[data-theme="velocity"][data-mode] :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }
html[data-theme="velocity"][data-mode] :is(.chip, .badge) { border-radius: 999px; }

/* ---------- Tables ---------- */
html[data-theme="velocity"][data-mode] table thead th { text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; font-weight: 800; color: var(--muted); }
html[data-theme="velocity"][data-mode] table tbody tr { transition: background .15s; }
html[data-theme="velocity"][data-mode] table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
html[data-theme="velocity"][data-mode] .live-gal { color: var(--accent-2); font-weight: 700; }

/* ---------- Station rail: pill tabs and a rev indicator that glides to the open page (theme-velocity.js) ---------- */
html[data-theme="velocity"][data-mode] .station-rail-left { border-radius: 22px; }
html[data-theme="velocity"][data-mode] .station-tabs-v { position: relative; }
html[data-theme="velocity"][data-mode] .station-tabs-v .tab {
  border-radius: 12px; border: 0; box-shadow: none; background: transparent; position: relative; z-index: 1;
  transition: color .2s, transform .45s var(--vl-spring);
}
html[data-theme="velocity"][data-mode] .station-tabs-v .tab:hover { transform: translateX(4px); background: transparent; color: var(--text); }
html[data-theme="velocity"][data-mode] .station-tabs-v .tab.active { background: transparent; color: var(--text); box-shadow: none; }
html[data-theme="velocity"][data-mode] .vl-rev {
  position: absolute; left: 0; right: 0; top: 0; height: var(--vl-h, 0px); z-index: 0; pointer-events: none;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
  box-shadow: inset 3px 0 0 var(--accent); opacity: 0;
  transform: translateY(var(--vl-y, 0px)); transition: transform .55s var(--vl-spring), height .3s var(--vl-out), opacity .2s;
}
html[data-theme="velocity"][data-mode] .vl-rev.on { opacity: 1; }
html[data-theme="velocity"][data-mode] .vl-rev.instant { transition: none; }

/* ---------- Calendar ---------- */
html[data-theme="velocity"][data-mode] .cal .day { border-radius: 14px; transition: transform .5s var(--vl-spring), border-color .2s; }
html[data-theme="velocity"][data-mode] .cal .day:hover { transform: translateY(-3px); }
html[data-theme="velocity"][data-mode] .cal .day .num { font-family: var(--vl-display); font-weight: 600; }
html[data-theme="velocity"][data-mode] .cal .day.today { box-shadow: inset 0 0 0 2px var(--accent); }
html[data-theme="velocity"][data-mode] .cal .day.today .num { color: var(--accent); }

/* ---------- Dashboard: each station is an instrument cluster ---------- */
html[data-theme="velocity"][data-mode] .station-grid > * { animation: vl-in .8s var(--vl-spring) backwards; }
html[data-theme="velocity"][data-mode] .station-grid > :nth-child(2) { animation-delay: .07s; }
html[data-theme="velocity"][data-mode] .station-grid > :nth-child(n+3) { animation-delay: .14s; }
html[data-theme="velocity"][data-mode] .station-card { padding: 22px; }
html[data-theme="velocity"][data-mode] .station-card h3 { font-size: 20px; }
html[data-theme="velocity"][data-mode] .station-card .sc-badge { border-radius: 999px; font-weight: 800; letter-spacing: .06em; }
html[data-theme="velocity"][data-mode] .sc-owed { border-radius: 999px; font-variant-numeric: tabular-nums; }
html[data-theme="velocity"][data-mode] .sc-balance.sc-live {
  border-radius: 16px; border: 1px solid var(--vl-hair); padding: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 80%, transparent), transparent);
}
html[data-theme="velocity"][data-mode] .sc-live .sc-bal-num { font-family: var(--vl-display); font-weight: 700; font-size: 30px; letter-spacing: -.04em; color: var(--text); }
html[data-theme="velocity"][data-mode] .sc-live .sc-stat:first-child .sc-bal-num { color: var(--accent); }
html[data-theme="velocity"][data-mode] .sc-live .sc-bal-suffix { font-family: var(--font); color: var(--muted); font-size: 13px; }
html[data-theme="velocity"][data-mode] .sc-live .sc-bal-label { font-weight: 800; letter-spacing: .1em; font-size: 10.5px; }
html[data-theme="velocity"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: vl-tick .7s var(--vl-spring); }
/* hourly bars grow from the floor, one after another */
html[data-theme="velocity"][data-mode] .sc-spark rect { transform-box: fill-box; transform-origin: 50% 100%; animation: vl-grow .7s var(--vl-spring) backwards; }
html[data-theme="velocity"][data-mode] .sc-spark rect:nth-child(4n+2) { animation-delay: .04s; }
html[data-theme="velocity"][data-mode] .sc-spark rect:nth-child(4n+3) { animation-delay: .08s; }
html[data-theme="velocity"][data-mode] .sc-spark rect:nth-child(4n+4) { animation-delay: .12s; }
html[data-theme="velocity"][data-mode] .sc-spark rect { fill: color-mix(in srgb, var(--accent) 34%, transparent); }
html[data-theme="velocity"][data-mode] .sc-spark rect.now { fill: var(--accent); }
html[data-theme="velocity"][data-mode] .sc-spark.store rect { fill: color-mix(in srgb, var(--accent-2) 40%, transparent); }
html[data-theme="velocity"][data-mode] .sc-spark.store rect.now { fill: var(--accent-2); }
/* net cash: the shift box is the live one */
html[data-theme="velocity"][data-mode] .sc-cash-box { border-radius: 12px; border-color: var(--vl-hair); background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
html[data-theme="velocity"][data-mode] .sc-cash-box.now { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
html[data-theme="velocity"][data-mode] .station-card .sc-live .sc-cash-v.sc-bal-num { font-family: var(--vl-display) !important; font-size: 17px !important; color: var(--text); }
html[data-theme="velocity"][data-mode] .station-card .sc-live .sc-cash-box.now .sc-cash-v.sc-bal-num { color: var(--green); }
/* voids and no-sales: quiet chips; a hot one gets a coral ping */
html[data-theme="velocity"][data-mode] .sc-flag { border-radius: 999px; }
html[data-theme="velocity"][data-mode] .sc-flag.hot { position: relative; color: #fff; background: var(--vl-coral); border-color: transparent; font-weight: 800; }
html[data-theme="velocity"][data-mode] .sc-flag.hot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--vl-coral); animation: vl-ping 2.4s var(--vl-out) infinite;
}
html[data-theme="velocity"][data-mode] .sc-live .sc-day { border-top-color: var(--vl-hair); }
html[data-theme="velocity"][data-mode] .sc-live .sc-day::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 7px; vertical-align: 1px;
  animation: vl-blink 2s steps(1) infinite;
}
html[data-theme="velocity"][data-mode] .sc-prices .gp { border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Feature pages: payouts history, pump health ---------- */
html[data-theme="velocity"][data-mode] .pay-hist-chips > * { border-radius: 999px; }
html[data-theme="velocity"][data-mode] .pay-hist-total { font-family: var(--vl-display); letter-spacing: -.03em; }
html[data-theme="velocity"][data-mode] .pump-card { border-radius: 16px; }
html[data-theme="velocity"][data-mode] .pump-progress-track { border-radius: 99px; overflow: hidden; }
html[data-theme="velocity"][data-mode] .pump-progress-fill { border-radius: 99px; }

/* ---------- Modals, login ---------- */
html[data-theme="velocity"][data-mode] .modal { border-radius: 22px; border: 1px solid var(--surface-border-color); animation: vl-in .45s var(--vl-spring); }
html[data-theme="velocity"][data-mode] .modal-backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); animation: vl-fade .25s ease-out; }
html[data-theme="velocity"][data-mode] .login-card { border-radius: 26px; animation: vl-in .6s var(--vl-spring); }

/* ---------- Page entrance: content only (never the layout that holds fixed or sticky parts) ---------- */
html[data-theme="velocity"][data-mode] .station-main > * { animation: vl-in .55s var(--vl-out) backwards; }
html[data-theme="velocity"][data-mode] .station-main > :nth-child(2) { animation-delay: .05s; }
html[data-theme="velocity"][data-mode] .station-main > :nth-child(n+3) { animation-delay: .1s; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html[data-theme="velocity"][data-mode] .section-head h2 { font-size: clamp(24px, 7.5vw, 36px); }
  html[data-theme="velocity"][data-mode] .sc-live .sc-bal-num { font-size: 25px; }
  html[data-theme="velocity"][data-mode] body::before, html[data-theme="velocity"][data-mode] body::after { animation: none; }
}

/* ---------- Own motion, not the shared "sculpted forms" layer ----------
   styles.css gives every theme a bevel shadow and quick generic transitions with !important. This theme brings its
   own depth and spring motion, so it opts out here (:root lifts these rules just above that shared block). */
html[data-theme="velocity"][data-mode]:root { --form-shadow: var(--elev); --form-lit: transparent; --form-shade: transparent; --form-cast: transparent; }
html[data-theme="velocity"][data-mode]:root :is(.card, .stat, .station-card, .add-card, .cal .day:not(.empty)) { transition: transform .6s var(--vl-spring), border-color .25s !important; }
html[data-theme="velocity"][data-mode]:root :is(.card, .station-card, .add-card):hover { transform: translateY(-5px) !important; --form-shadow: var(--elev); }
html[data-theme="velocity"][data-mode]:root .cal .day:not(.empty):hover { transform: translateY(-3px) !important; }
html[data-theme="velocity"][data-mode]:root :is(.btn, .tab, .seg button) { transition: transform .45s var(--vl-spring), color .2s, background-color .2s, border-color .2s !important; }
html[data-theme="velocity"][data-mode]:root .btn:active { transform: scale(.96) !important; transition-duration: .12s !important; }
html[data-theme="velocity"][data-mode]:root .btn.primary { box-shadow: 0 10px 24px -14px rgba(212, 255, 58, .9) !important; }
html[data-theme="velocity"][data-mode]:root .station-tabs-v .tab { box-shadow: none !important; }
html[data-theme="velocity"][data-mode]:root .station-tabs-v .tab:active { transform: scale(.98) !important; }

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="velocity"] *, html[data-theme="velocity"] *::before, html[data-theme="velocity"] *::after { animation: none !important; transition: none !important; }
  html[data-theme="velocity"][data-mode] .topbar::after { transform: scaleX(0); }
}


/* ---------- Pointers: this theme's own arrow, and a ring for anything you can press (the shared rule in
   styles.css reads --cur-hand everywhere and keeps the I-beam in text fields) ---------- */
html[data-theme="velocity"] { --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='%23d4ff3a' stroke='%230a0c10' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3; }
html[data-theme="velocity"] :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='8' fill='rgba(10,12,16,.5)' stroke='%23d4ff3a' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23ff4f6d'/%3E%3C/svg%3E") 16 16; }


/* ---------- 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="velocity"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--grad-primary); color: #0a0c10; text-shadow: none; }