/* ============================================================
   REPRIX — dashboard design system
   Dark, glassy, cyan/blue neon. Three theme skins + neon logo.
   ============================================================ */

:root {
  --cyan:   #22d3ee;
  --cyan-2: #67e8f9;
  --sky:    #38bdf8;
  --blue:   #3b82f6;
  --indigo: #6366f1;
  --violet: #8b5cf6;
  --green:  #34d399;
  --rose:   #fb7185;
  --amber:  #fbbf24;
}

/* ---- shared element resets within an artboard ---- */
.rx, .rx * { box-sizing: border-box; }
.rx {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11";
}
.rx button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============================================================
   THEME SKINS  — set CSS vars consumed by the component classes
   ============================================================ */

/* MIDNIGHT GLASS — closest to the reference */
.theme-midnight {
  --bg: radial-gradient(1200px 700px at 72% -8%, #122036 0%, #0a0f1a 55%, #070b13 100%);
  --text: #e8eef7;
  --muted: #8a97ab;
  --faint: #5b6678;
  --panel: rgba(255,255,255,0.035);
  --panel-2: rgba(255,255,255,0.05);
  --panel-border: rgba(255,255,255,0.085);
  --panel-blur: 16px;
  --panel-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px -20px rgba(0,0,0,0.7);
  --field-bg: rgba(8,12,20,0.55);
  --field-border: rgba(255,255,255,0.1);
  --rail-bg: rgba(255,255,255,0.025);
  --accent: var(--cyan);
  --accent-2: var(--blue);
  --radius: 16px;
}

/* AURORA GLASS — frosted, more glow, neon edge-lights, color bleed */
.theme-aurora {
  --bg: #060a13;
  --text: #eaf1fb;
  --muted: #93a1ba;
  --faint: #5f6c84;
  --panel: rgba(255,255,255,0.055);
  --panel-2: rgba(255,255,255,0.075);
  --panel-border: rgba(255,255,255,0.12);
  --panel-blur: 26px;
  --panel-shadow: 0 1px 0 rgba(255,255,255,0.09) inset, 0 24px 60px -22px rgba(0,0,0,0.8);
  --field-bg: rgba(255,255,255,0.05);
  --field-border: rgba(255,255,255,0.14);
  --rail-bg: rgba(255,255,255,0.05);
  --accent: var(--cyan);
  --accent-2: var(--sky);
  --radius: 20px;
}

/* CARBON NEON — near-black, hairline outlines, mono numerals, minimal glow */
.theme-carbon {
  --bg: #08090d;
  --text: #dfe5ee;
  --muted: #7c8696;
  --faint: #4b5462;
  --panel: rgba(255,255,255,0.018);
  --panel-2: rgba(255,255,255,0.03);
  --panel-border: rgba(255,255,255,0.07);
  --panel-blur: 6px;
  --panel-shadow: 0 0 0 1px rgba(255,255,255,0.015) inset, 0 16px 40px -24px rgba(0,0,0,0.9);
  --field-bg: rgba(255,255,255,0.02);
  --field-border: rgba(255,255,255,0.08);
  --rail-bg: rgba(255,255,255,0.012);
  --accent: var(--cyan);
  --accent-2: var(--blue);
  --radius: 12px;
}
.theme-carbon .rx-mono,
.theme-carbon .rx-stat,
.theme-carbon .rx-chip,
.theme-carbon .rx-price,
.theme-carbon .rx-ean { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Aurora ambient color bleed */
.rx-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.rx-aurora::before, .rx-aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
}
.rx-aurora::before { width: 620px; height: 480px; left: -120px; top: -160px;
  background: radial-gradient(circle, rgba(34,211,238,0.55), transparent 65%); }
.rx-aurora::after { width: 560px; height: 460px; right: -120px; top: 30px;
  background: radial-gradient(circle, rgba(59,130,246,0.5), transparent 65%); }
.rx-aurora i { position: absolute; width: 460px; height: 360px; left: 42%; bottom: -180px;
  background: radial-gradient(circle, rgba(139,92,246,0.32), transparent 65%);
  border-radius: 50%; filter: blur(70px); }

/* Carbon dotted grid */
.rx-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: radial-gradient(120% 120% at 70% 0%, #000 30%, transparent 90%); }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.rx-shell { position: relative; z-index: 1; display: flex; height: 100%; }

/* Sidebar rail */
.rx-side {
  width: 76px; flex: 0 0 76px; display: flex; flex-direction: column; align-items: center;
  padding: 20px 0 18px; gap: 10px;
  background: var(--rail-bg);
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(var(--panel-blur));
}
.rx-railmark { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 14px; }
.rx-railmark svg { filter: drop-shadow(0 0 8px rgba(34,211,238,0.65)); }
.rx-ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: var(--faint); position: relative; transition: color .18s, background .18s;
}
.rx-ico svg { width: 21px; height: 21px; }
.rx-ico:hover { color: var(--muted); background: rgba(255,255,255,0.04); }
.rx-ico.active { color: #eaffff; background: linear-gradient(180deg, rgba(34,211,238,0.16), rgba(59,130,246,0.10)); }
.rx-ico.active::before {
  content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow: 0 0 10px var(--cyan), 0 0 18px rgba(59,130,246,0.6);
}
.rx-ico.active svg { filter: drop-shadow(0 0 6px rgba(34,211,238,0.7)); }
.rx-side .rx-spacer { flex: 1; }

/* Main column */
.rx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Top bar */
.rx-top {
  height: 88px; flex: 0 0 88px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 28px; gap: 16px;
  border-bottom: 1px solid var(--panel-border);
}
.rx-pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--panel-border);
  backdrop-filter: blur(var(--panel-blur)); color: var(--text);
  font-size: 14px; font-weight: 600; box-shadow: var(--panel-shadow);
}
.rx-pill .rx-cog { color: var(--cyan); display: grid; place-items: center; }
.rx-pill .rx-chev { color: var(--faint); margin-left: 2px; }

.rx-topright { justify-self: end; display: flex; align-items: center; gap: 18px; }
.rx-bell { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--muted); background: var(--panel); border: 1px solid var(--panel-border); }
.rx-bell:hover { color: var(--text); }
.rx-badge { position: absolute; top: 8px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: linear-gradient(180deg, var(--cyan), var(--blue)); color: #04141b;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 8px rgba(34,211,238,0.8); border: 1.5px solid var(--bg, #0a0f1a); }
.rx-user { display: flex; align-items: center; gap: 11px; }
.rx-avatar { width: 42px; height: 42px; border-radius: 12px; object-fit: cover;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.12), 0 0 14px rgba(34,211,238,0.25); }
.rx-user-name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.rx-user-mail { font-size: 12px; color: var(--faint); line-height: 1.2; }
.rx-user .rx-chev { color: var(--faint); }

/* Body */
.rx-body { flex: 1; min-height: 0; padding: 24px 28px 26px; }
.rx-h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; margin: 2px 0 20px; }
.rx-h1 .rx-accent { background: linear-gradient(90deg, var(--cyan), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   GLASS CARDS / STAT TILES
   ============================================================ */
.rx-cards { display: grid; grid-template-columns: 1fr 1.05fr 1.05fr; gap: 18px; margin-bottom: 18px; }
.rx-card {
  position: relative; border-radius: var(--radius); padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--panel-border);
  backdrop-filter: blur(var(--panel-blur)); box-shadow: var(--panel-shadow);
  overflow: hidden;
}
/* aurora neon top edge */
.theme-aurora .rx-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.8;
}
.theme-aurora .rx-card { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); }

.rx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rx-card-title { font-size: 14px; font-weight: 600; color: var(--muted); }
.rx-stat { font-size: 38px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; margin-top: 8px; }
.rx-stat .rx-unit { font-size: 16px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.rx-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.rx-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--green); }
.rx-delta svg { width: 14px; height: 14px; }

/* subscription tile */
.rx-plan-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.rx-plan { font-size: 24px; font-weight: 800; letter-spacing: -0.8px; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.rx-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: var(--green);
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); }
.rx-meta { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.rx-meta b { color: var(--text); font-weight: 700; }
.rx-meta .rx-ok { color: var(--green); font-weight: 700; }

/* progress bar */
.rx-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 14px; }
.rx-progress > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--blue) 45%, var(--cyan));
  box-shadow: 0 0 12px rgba(34,211,238,0.55); }

/* ============================================================
   PRODUCTS PANEL + TABLE
   ============================================================ */
.rx-panel {
  border-radius: var(--radius); padding: 20px 22px 14px;
  background: var(--panel); border: 1px solid var(--panel-border);
  backdrop-filter: blur(var(--panel-blur)); box-shadow: var(--panel-shadow);
}
.rx-panel-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.rx-panel-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.rx-panel-sub { font-size: 13px; color: var(--faint); margin-top: 3px; }
.rx-filter { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 11px;
  background: var(--field-bg); border: 1px solid var(--field-border); font-size: 13px; font-weight: 600; color: var(--text); }
.rx-filter .rx-chev { color: var(--faint); }

.rx-thead, .rx-tr {
  display: grid; grid-template-columns: 56px 2.1fr 1fr 1.1fr 1fr 0.9fr 0.9fr; align-items: center; gap: 14px;
}
.rx-thead { padding: 0 14px 10px; border-bottom: 1px solid var(--panel-border); }
.rx-th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 5px; }
.rx-th .rx-sort { opacity: 0.55; }
.rx-tr { padding: 12px 14px; border-radius: 13px; transition: background .15s, box-shadow .15s; }
.rx-tr:hover { background: rgba(255,255,255,0.03); }
.rx-tr + .rx-tr { border-top: 1px solid rgba(255,255,255,0.05); }

.rx-thumb { width: 40px; height: 40px; border-radius: 10px; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 6px, rgba(255,255,255,0.02) 6px 12px);
  border: 1px solid var(--panel-border); display: grid; place-items: center; color: var(--faint);
  font-size: 8px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.5px; }
.rx-pname { font-size: 14px; font-weight: 700; line-height: 1.25; }
.rx-ean { font-size: 12px; color: var(--faint); margin-top: 2px; letter-spacing: 0.3px; }
.rx-price { font-size: 14.5px; font-weight: 800; letter-spacing: -0.2px; }
.rx-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9px; font-size: 13px; font-weight: 800;
  background: rgba(34,211,238,0.10); color: var(--cyan-2); border: 1px solid rgba(34,211,238,0.28); letter-spacing: -0.2px; }
.rx-cell-muted { color: var(--faint); font-size: 14px; }
.rx-buybox { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.rx-buybox .dot { width: 7px; height: 7px; border-radius: 50%; }
.rx-buybox.win { color: var(--green); }
.rx-buybox.win .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.rx-buybox.lose { color: var(--rose); }
.rx-buybox.lose .dot { background: var(--rose); box-shadow: 0 0 8px var(--rose); }

.rx-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; }
.rx-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.rx-status.on { color: var(--green); background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.3); }
.rx-status.on .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.rx-status.off { color: var(--faint); background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); }
.rx-status.off .dot { background: var(--faint); }
/* "bezig"-staat: meteen oranje + ripple-pulse zolang de request loopt */
.rx-status.pending { color: #f59e0b; background: rgba(245,158,11,0.13); border: 1px solid rgba(245,158,11,0.45);
  animation: rxStatusPulse 1s ease-out infinite; }
.rx-status.pending .dot { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; animation: rxDotBlink .8s ease-in-out infinite; }
@keyframes rxStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
@keyframes rxDotBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .rx-status.pending, .rx-status.pending .dot { animation: none; }
}

/* expanded editing row */
.rx-tr.exp { background: rgba(34,211,238,0.045);
  box-shadow: 0 0 0 1.5px rgba(34,211,238,0.35), 0 0 26px -6px rgba(34,211,238,0.4); }
.rx-edit { grid-column: 3 / 7; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rx-field-label { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.rx-field { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: 10px;
  background: var(--field-bg); border: 1px solid var(--field-border); font-size: 13.5px; font-weight: 700; }
.rx-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.16); }
.rx-field .pre { color: var(--faint); font-weight: 600; }
.rx-field input { width: 100%; background: none; border: none; outline: none; color: var(--text); font: inherit; }
.rx-field.sel { justify-content: space-between; color: var(--text); cursor: pointer; }
.rx-field.sel .rx-chev { color: var(--faint); }

/* footer / pager */
.rx-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 4px; margin-top: 6px; }
.rx-foot-txt { font-size: 12.5px; color: var(--faint); }
.rx-pager { display: flex; align-items: center; gap: 8px; }
.rx-pg { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted);
  background: var(--field-bg); border: 1px solid var(--field-border); }
.rx-pg:hover { color: var(--text); }
.rx-pg.cur { color: #04141b; background: linear-gradient(180deg, var(--cyan), var(--blue)); border-color: transparent;
  box-shadow: 0 0 12px rgba(34,211,238,0.5); font-weight: 800; }
.rx-pg.dis { opacity: 0.4; }

/* mini chart helpers */
.rx-chart { margin-top: 14px; }
.rx-glow-stroke { filter: drop-shadow(0 0 4px rgba(34,211,238,0.7)) drop-shadow(0 0 9px rgba(59,130,246,0.45)); }
.rx-bars rect { filter: drop-shadow(0 0 5px rgba(34,211,238,0.4)); }

/* repricing-ring (neon donut) — "producten gerepriced" */
/* titel uit de flow zodat de ring (net als het neon-glyph links) over de
   volle kaarthoogte centreert → subtekst valt op gelijke hoogte als
   ".rx-plan-neon-lab" van de abonnement-kaart */
.rx-card-ring { display: flex; flex-direction: column; }
.rx-card-ring .rx-card-head { position: absolute; top: 20px; left: 22px; right: 22px; }
.rx-ring-body { flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; min-height: 0;
  transform: translateY(14px); }
/* zelfde font als "Producten repricen" links (.rx-plan-neon-lab) */
.rx-ring-sub { font-size: 11.5px; font-weight: 700; color: #eef3fa; letter-spacing: 0.2px; text-align: center; }
.rx-ring { display: flex; align-items: center; gap: 26px; }
.rx-ring-fig { flex: 0 0 auto; line-height: 0; height: 124px; display: flex; align-items: center; }
.rx-ring-arc {
  filter: drop-shadow(0 0 4px rgba(34,211,238,0.7)) drop-shadow(0 0 9px rgba(59,130,246,0.45));
}
.rx-ring-pct { fill: var(--text); font-size: 27px; font-weight: 800; letter-spacing: -1px; }
.rx-ring-cap { fill: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.rx-ring-legend { display: flex; flex-direction: column; gap: 14px; }
.rx-ring-li { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.rx-ring-li b { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); }
.rx-ring-li .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rx-ring-li.on .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.rx-ring-li.off .dot { background: var(--faint); }
.rx-ring-li.off b { color: var(--muted); }

/* odometer-cijfers (telraam-roll) */
.rx-odo { display: inline-flex; line-height: 1; }
.rx-odo-d { display: inline-block; height: 1em; overflow: hidden; }
.rx-odo-strip { display: flex; flex-direction: column; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.rx-odo-n { height: 1em; display: flex; align-items: center; justify-content: center; }
.rx-odo-sep { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .rx-odo-strip { transition: none; } }

/* Free-plan boven de limiet (>5 producten met repricing aan):
   rode "5" op de plan-kaart + rode, "gepauzeerde" ring + rode melding.
   Hogere specificiteit (.theme-carbon …) om de neon-cyaan te overrulen. */
.theme-carbon .rx-plan-card.rx-over-limit .rx-plan-glyph,
.theme-carbon .rx-plan-card.rx-over-limit .rx-plan-neon-stage.hot .rx-plan-glyph {
  -webkit-text-stroke-color: #f87171;
  text-shadow: 0 0 7px rgba(248,113,113,0.9), 0 0 18px rgba(248,113,113,0.55), 0 0 30px rgba(220,38,38,0.45);
}
.rx-card-ring.rx-over-limit .rx-ring-arc { stroke: #f87171; filter: drop-shadow(0 0 4px rgba(248,113,113,0.75)); }
.rx-card-ring.rx-over-limit .rx-ring-pct { fill: #f87171; }
.rx-card-ring.rx-over-limit .rx-ring-li.on .dot { background: #f87171; box-shadow: 0 0 8px #f87171; }
.rx-card-ring.rx-over-limit .rx-ring-sub { color: #f87171; }

/* ============================================================
   NEON LOGO
   ============================================================ */
.neon-wrap { position: relative; display: inline-flex; align-items: center; gap: 16px; }
.neon-icon { display: grid; place-items: center; }
.neon-word {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700; letter-spacing: 2px; line-height: 1; position: relative; white-space: nowrap;
}

/* 1 — TUBE: light core + colored stroke + layered halo */
.neon--tube .neon-word {
  color: #eafdff;
  text-shadow:
    0 0 2px #fff,
    0 0 7px var(--cyan-2),
    0 0 14px var(--cyan),
    0 0 28px var(--blue),
    0 0 52px rgba(59,130,246,0.7);
}
.neon--tube .neon-icon svg { filter: drop-shadow(0 0 4px var(--cyan-2)) drop-shadow(0 0 12px var(--blue)); }

/* 2 — GLASS 3D TUBE: cylindrical gradient fill + bloom + reflection + flicker */
.neon--glass .neon-word {
  background: linear-gradient(180deg, #0b4a5e 0%, #6cf0ff 26%, #ffffff 49%, #2fd6f2 70%, #0c6f8c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.5))
    drop-shadow(0 0 6px var(--cyan-2))
    drop-shadow(0 0 16px var(--cyan))
    drop-shadow(0 0 34px var(--blue))
    drop-shadow(0 0 60px rgba(59,130,246,0.55));
}
.neon--glass .neon-reflect {
  position: absolute; left: 0; top: 100%; margin-top: 6px;
  background: linear-gradient(180deg, #0b4a5e 0%, #6cf0ff 26%, #ffffff 49%, #2fd6f2 70%, #0c6f8c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: scaleY(-1); transform-origin: top; opacity: 0.22; filter: blur(1px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 62%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 62%);
  pointer-events: none;
}
.neon--glass .neon-icon svg { filter: drop-shadow(0 0 5px var(--cyan-2)) drop-shadow(0 0 16px var(--blue)) drop-shadow(0 0 30px rgba(59,130,246,0.5)); }
.neon--glass.flicker .neon-word { animation: neonFlicker 6s infinite steps(1, end); }
.neon--glass.flicker .neon-icon { animation: neonFlickerSoft 6s infinite steps(1, end); }

@keyframes neonFlicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; } 41.6% { opacity: 0.55; } 42.2% { opacity: 1; }
  43% { opacity: 0.7; } 43.5% { opacity: 1; }
  72% { opacity: 1; } 72.4% { opacity: 0.4; } 72.9% { opacity: 1; }
  84.5% { opacity: 0.85; } 85% { opacity: 1; }
}
@keyframes neonFlickerSoft {
  0%, 100% { opacity: 1; }
  41.6% { opacity: 0.7; } 42.2% { opacity: 1; }
  72.4% { opacity: 0.6; } 72.9% { opacity: 1; }
}

/* 3 — OUTLINE: hollow gas tubes, transparent core */
.neon--outline .neon-word {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--cyan-2);
  text-shadow:
    0 0 6px var(--cyan),
    0 0 14px var(--cyan),
    0 0 30px var(--blue),
    0 0 56px rgba(59,130,246,0.6);
}
.neon--outline .neon-icon svg { filter: drop-shadow(0 0 5px var(--cyan)) drop-shadow(0 0 14px var(--blue)); }

/* a touch more bloom for the carbon dashboard wordmark */
.theme-carbon .neon--outline .neon-word {
  -webkit-text-stroke-width: 1.5px;
  text-shadow:
    0 0 7px var(--cyan-2),
    0 0 16px var(--cyan),
    0 0 34px var(--blue),
    0 0 64px rgba(59,130,246,0.7);
}
.theme-carbon .neon--outline .neon-icon svg {
  filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 18px var(--blue)) drop-shadow(0 0 32px rgba(59,130,246,0.5));
}

/* slow "breathing" pulse — very subtle */
.neon--outline.breath .neon-word { animation: neonBreath 4.6s ease-in-out infinite; }
.neon--outline.breath .neon-icon { animation: neonBreath 4.6s ease-in-out infinite; }
@keyframes neonBreath {
  0%, 100% { opacity: 1; filter: none; }
  50% { opacity: 0.82; }
}

/* 4 — BLOOM: solid gradient fill, heavy soft bloom, no stroke */
.neon--bloom .neon-word {
  background: linear-gradient(95deg, var(--cyan) 0%, var(--sky) 45%, var(--blue) 78%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(0 0 10px rgba(34,211,238,0.6))
    drop-shadow(0 0 26px rgba(59,130,246,0.55))
    drop-shadow(0 0 50px rgba(139,92,246,0.4));
}
.neon--bloom .neon-icon svg { filter: drop-shadow(0 0 8px rgba(34,211,238,0.6)) drop-shadow(0 0 22px rgba(99,102,241,0.5)); }

@media (prefers-reduced-motion: reduce) {
  .neon--glass.flicker .neon-word, .neon--glass.flicker .neon-icon,
  .neon--outline.breath .neon-word, .neon--outline.breath .neon-icon { animation: none; }
}