/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   ULTRA GLOW UI STYLE · v1.0 · 2026-10-09
   Dark neon glass: a holographic aurora behind everything, dark glass cards with an iridescent neon
   rim, Orbitron gradient titles, glowing numbers, rings, bars and pills, glass chrome with neon edges
   and a neon bottom dock. Reference: reference/glow.jpg. First shipped in SaleGrowth (salegrowth.app).

   Drop-in and framework-free. Tokens on :root, page styles in @layer base, components (.ug-*) in
   @layer components, so unlayered project CSS and every Tailwind utility still win. Import it AFTER
   tailwindcss in a Tailwind project. Tailwind 4 + DaisyUI 5: also add ultra-glow-daisyui.css.

   Fonts are not loaded here. Orbitron is for titles and headline numbers only, Inter for everything
   else (npm: @fontsource-variable/orbitron + @fontsource-variable/inter, or Google Fonts). Khmer and
   other scripts fall through to Kantumruy Pro.

   Readability rules this file enforces (WCAG AA, measured on the rendered page over the aurora):
   - Text sitting straight on the aurora gets a dark halo (body); panes and filled controls drop it.
   - Glass is 75 % opaque, so text on a card is ≥ 5:1 even where the brightest band passes behind.
   - Secondary text never goes below 70 % (--ug-text-muted). Menus and dialogs are opaque.
   Decorative only: no colour or glow encodes data. State keeps its words and icons.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@layer base, components;

/* ── Tokens ───────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ug-page: #0d0b2c; /* page colour under the aurora (also the browser theme-color) */
  --ug-surface: #191542; /* opaque floating surfaces: dialogs, menus, sticky bars */
  --ug-surface-2: #0e0b2a;
  --ug-surface-3: #2c2668;
  --ug-glass: rgb(20 16 56 / 0.75); /* cards */
  --ug-glass-sheen: linear-gradient(155deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.015) 40%, transparent 65%);
  --ug-glass-panel: rgb(255 255 255 / 0.04); /* a pane inside a pane */
  --ug-glass-chrome: rgb(11 9 32 / 0.72); /* sidebar, top bar, dock (with --ug-blur) */
  --ug-glass-capsule: rgb(14 11 42 / 0.62); /* pills and tab strips that may sit on the aurora */
  --ug-blur: blur(20px) saturate(155%);

  /* Ink */
  --ug-text: #ecebff;
  --ug-text-strong: #f5f4ff;
  --ug-text-muted: rgb(236 235 255 / 0.78); /* the floor for secondary text: never lower */
  --ug-text-label: rgb(214 210 255 / 0.74); /* small uppercase labels */
  --ug-text-head: rgb(196 190 255 / 0.8); /* table heads */

  /* Neon brand + status. As text, each is ≥ 5.9:1 on the glass and on --ug-surface; --ug-on-* is the
     dark ink for a solid fill of that colour (≥ 6.8:1). */
  --ug-cyan: #22d3ee;
  --ug-on-cyan: #03161d;
  --ug-violet: #a78bfa;
  --ug-on-violet: #140a31;
  --ug-pink: #e879f9;
  --ug-on-pink: #2a0630;
  --ug-info: #60a5fa;
  --ug-on-info: #04142e;
  --ug-success: #4ade80;
  --ug-on-success: #03200f;
  --ug-warning: #fbbf24;
  --ug-on-warning: #231300;
  --ug-error: #fb7185;
  --ug-on-error: #2b0610;

  /* Lines */
  --ug-line: rgb(167 139 250 / 0.22);
  --ug-hairline: rgb(167 139 250 / 0.14);
  --ug-track: rgb(167 139 250 / 0.16);
  --ug-edge: rgb(167 139 250 / 0.32); /* control borders */

  /* Gradients */
  --ug-iridescent: linear-gradient(135deg, rgb(94 242 255 / 0.95) 0%, rgb(124 139 255 / 0.85) 30%, rgb(192 132 252 / 0.9) 55%, rgb(240 171 252 / 0.95) 75%, rgb(103 232 249 / 0.9) 100%);
  --ug-neon-line: linear-gradient(90deg, transparent, rgb(94 242 255 / 0.85) 18%, rgb(167 139 250 / 0.85) 50%, rgb(240 171 252 / 0.85) 82%, transparent);
  --ug-neon-fill: linear-gradient(120deg, #2fe0f4 0%, #7f8cff 52%, #d78bff 100%);
  --ug-bar-fill: linear-gradient(90deg, #22d3ee, #818cf8 55%, #e879f9);
  --ug-column-fill: linear-gradient(0deg, #e879f9, #818cf8 50%, #22d3ee);
  /* Titles: laid out in em, so a short title is cyan → violet and a long one runs on to pink. */
  --ug-title-fill: linear-gradient(90deg, #8ff6ff 0, #b9b4ff 7em, #f2b6ff 14em, #f2b6ff);
  --ug-page-title-fill: linear-gradient(90deg, #8ff6ff 0, #c4b5fd 6em, #f5c2ff 12em, #f5c2ff);

  /* Glows and shadows */
  --ug-title-glow: drop-shadow(0 0 6px rgb(94 234 255 / 0.4));
  --ug-page-title-glow: drop-shadow(0 0 10px rgb(94 234 255 / 0.42));
  --ug-value-glow: 0 0 14px rgb(129 140 248 / 0.55), 0 0 2px rgb(255 255 255 / 0.3);
  --ug-card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 26px -6px rgb(139 92 246 / 0.5), 0 0 46px -18px rgb(34 211 238 / 0.45), 0 26px 50px -30px rgb(0 0 0 / 0.95);
  --ug-shadow-sm: 0 0 14px -6px rgb(139 92 246 / 0.55), 0 8px 18px -12px rgb(0 0 0 / 0.8);
  --ug-float-shadow: 0 0 32px -10px rgb(139 92 246 / 0.6), 0 24px 48px -18px rgb(0 0 0 / 0.9);
  --ug-focus-ring: 0 0 0 3px rgb(34 211 238 / 0.14), 0 0 22px -4px rgb(34 211 238 / 0.55);
  --ug-halo: 0 0 1px rgb(8 6 28), 0 0 2px rgb(8 6 28), 0 0 6px rgb(8 6 28 / 0.9), 0 0 16px rgb(8 6 28 / 0.65);

  /* Data-viz: categorical slots in this FIXED order (never cycled) + their text-safe ink twins.
     Validated on the glass (#17133e): adjacent CVD ΔE ≥ 13.5, normal-vision ΔE ≥ 22.9, all ≥ 3:1;
     the inks are ≥ 8.2:1 on a 14 % tint of their slot. Values and labels use the inks, never the slots. */
  --ug-chart-1: #2597e9; /* blue */
  --ug-chart-2: #28ab5e; /* green */
  --ug-chart-3: #a765f4; /* purple */
  --ug-chart-4: #c4851a; /* amber */
  --ug-chart-5: #e840a0; /* magenta */
  --ug-chart-other: #5d5a84;
  --ug-ink-1: #99cdfc;
  --ug-ink-2: #73e396;
  --ug-ink-3: #d3b9fc;
  --ug-ink-4: #fcb957;
  --ug-ink-5: #fdabd1;

  /* Shape, type, motion */
  --ug-radius: 1.5rem; /* cards */
  --ug-radius-inner: 1rem; /* panes inside cards, list rows */
  --ug-radius-field: 0.75rem; /* buttons, inputs */
  --ug-rim: 1.5px; /* the iridescent rim */
  --ug-font-display: "Orbitron Variable", "Orbitron", "Kantumruy Pro", ui-sans-serif, system-ui, sans-serif;
  --ug-font-body: "Inter Variable", "Inter", "Kantumruy Pro", ui-sans-serif, system-ui, sans-serif;
  --ug-pulse-time: 6s;
  --ug-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");

  /* Background: film grain + the holographic aurora — silky curved bands (rings of off-screen
     ellipses) of cyan, violet and magenta over deep indigo, a darker pocket behind the page title
     (top left) and a vignette. Tuned so text with the halo stays ≥ 4.5:1 everywhere. */
  --ug-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ug-aurora:
    radial-gradient(85% 34% at 40% 11%, rgb(9 7 32 / 0.55), transparent 80%),
    radial-gradient(135% 100% at 50% 40%, transparent 58%, rgb(6 5 22 / 0.45) 100%),
    radial-gradient(ellipse 100% 78% at 108% 118%, transparent 45%, rgb(99 102 241 / 0.32) 50%, rgb(165 250 255 / 0.62) 55.5%, rgb(34 211 238 / 0.56) 58%, rgb(129 140 248 / 0.45) 63%, rgb(192 132 252 / 0.28) 68%, transparent 75%),
    radial-gradient(ellipse 92% 74% at -10% -16%, transparent 61%, rgb(124 58 237 / 0.3) 65%, rgb(250 180 255 / 0.58) 70.5%, rgb(217 70 239 / 0.52) 73.5%, rgb(124 58 237 / 0.38) 79%, transparent 88%),
    radial-gradient(ellipse 120% 90% at 122% -28%, transparent 53%, rgb(232 121 249 / 0.4) 60%, rgb(129 140 248 / 0.6) 65%, rgb(56 189 248 / 0.5) 70%, transparent 79%),
    radial-gradient(ellipse 80% 64% at -22% 64%, transparent 49%, rgb(56 222 255 / 0.55) 59%, rgb(99 102 241 / 0.32) 65%, transparent 73%),
    radial-gradient(44% 36% at 92% 4%, rgb(240 171 252 / 0.7), transparent 72%),
    radial-gradient(42% 34% at 62% 50%, rgb(139 92 246 / 0.38), transparent 72%),
    radial-gradient(50% 44% at 2% 98%, rgb(217 70 239 / 0.6), transparent 72%),
    radial-gradient(42% 42% at 100% 62%, rgb(56 189 248 / 0.45), transparent 72%),
    linear-gradient(160deg, #2a1670 0%, #1a1152 36%, #140e44 60%, #261463 100%);
  /* Brighter, for a brand panel with little text on it (sign-in hero). */
  --ug-aurora-vivid:
    radial-gradient(ellipse 110% 80% at 110% 120%, transparent 44%, rgb(99 102 241 / 0.35) 50%, rgb(175 252 255 / 0.85) 55%, rgb(34 211 238 / 0.75) 58%, rgb(129 140 248 / 0.5) 64%, rgb(192 132 252 / 0.3) 70%, transparent 77%),
    radial-gradient(ellipse 95% 78% at -12% -18%, transparent 58%, rgb(124 58 237 / 0.35) 63%, rgb(252 190 255 / 0.8) 68.5%, rgb(217 70 239 / 0.7) 72%, rgb(124 58 237 / 0.4) 78%, transparent 86%),
    radial-gradient(ellipse 120% 90% at 125% -30%, transparent 52%, rgb(232 121 249 / 0.45) 59%, rgb(129 140 248 / 0.65) 65%, rgb(56 189 248 / 0.5) 71%, transparent 79%),
    radial-gradient(50% 40% at 0% 100%, rgb(217 70 239 / 0.6), transparent 72%),
    radial-gradient(45% 38% at 100% 0%, rgb(240 171 252 / 0.65), transparent 72%),
    linear-gradient(160deg, #2a1670 0%, #181052 40%, #110d3c 62%, #24125f 100%);
}

/* Paper is white: the inks and the neon colours used as text turn dark for print. */
@media print {
  :root {
    --ug-text: #1b2420;
    --ug-text-strong: #111827;
    --ug-text-muted: #4b5563;
    --ug-text-label: #4b5563;
    --ug-text-head: #374151;
    --ug-cyan: #0e7490;
    --ug-violet: #6d28d9;
    --ug-pink: #a21caf;
    --ug-info: #1d4ed8;
    --ug-success: #15803d;
    --ug-warning: #a35a00;
    --ug-error: #be123c;
  }
}

/* The light pulse that runs round a .ug-card--pulse rim (a registered angle, so it can animate). */
@property --ug-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ug-orbit {
  to { --ug-angle: 360deg; }
}
@keyframes ug-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

/* ── Page ─────────────────────────────────────────────────────────────────────────────────────────── */
@layer base {
  html {
    color-scheme: dark;
    background-color: var(--ug-page);
    scrollbar-color: rgb(139 92 246 / 0.5) transparent;
    -webkit-tap-highlight-color: transparent;
  }
  /* The aurora is a fixed layer behind everything (background-attachment: fixed repaints on every
     scroll and is ignored on iOS). The body must stay transparent, and so must full-page wrappers,
     or they cover it. */
  body {
    min-height: 100dvh;
    margin: 0;
    background-color: transparent;
    color: var(--ug-text);
    font-family: var(--ug-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Text straight on the aurora stays readable where a bright band passes behind it. Panes and
       filled controls reset it (see "Halo reset"): their own background does the job. */
    text-shadow: var(--ug-halo);
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--ug-page);
    background-image: var(--ug-grain), var(--ug-aurora);
  }
  ::selection {
    background-color: rgb(34 211 238 / 0.35);
    color: #fff;
  }
  :focus-visible {
    outline: 2px solid var(--ug-cyan);
    outline-offset: 2px;
  }
  :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
    accent-color: var(--ug-cyan);
  }
}

@layer components {
  /* ── Halo reset: anything with its own background drops the page halo (a dark halo would smudge
     dark ink on a bright fill, and a text-shadow is painted over gradient-clipped text). ── */
  :where(.ug-card, .ug-panel, .ug-item, .ug-modal, .ug-menu, .ug-alert, .ug-badge, .ug-pill, .ug-tabs, .ug-btn--primary, .ug-topbar, .ug-sidebar, .ug-dock, .ug-title, .ug-page-title, .ug-dialog-title, .ug-gradient-text, .ug-neon-text) {
    text-shadow: none;
  }

  /* ── Glass card: a translucent indigo pane with a sheen, a neon outer glow and an iridescent rim.
     The rim is a masked ring painted behind the content (::before), so the card never needs
     overflow: hidden and tooltips are not clipped. ── */
  .ug-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 1.25rem;
    border-radius: var(--ug-radius);
    background-color: var(--ug-glass);
    background-image: var(--ug-glass-sheen);
    box-shadow: var(--ug-card-shadow);
    color: var(--ug-text);
  }
  .ug-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: var(--ug-rim);
    border-radius: inherit;
    background: var(--ug-iridescent);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  @media (width >= 40rem) {
    .ug-card { padding: 1.5rem; }
  }
  /* A light pulse runs round the rim. Use it on a few hero cards, not on every list row. */
  .ug-card--pulse::before {
    --ug-angle: 0deg;
    background:
      conic-gradient(from var(--ug-angle), transparent 0 70%, rgb(111 246 255 / 0.95) 78%, #fff 83%, rgb(245 168 255 / 0.95) 88%, transparent 96%),
      var(--ug-iridescent);
    animation: ug-orbit var(--ug-pulse-time) linear infinite;
  }
  .ug-card--pulse:nth-child(3n + 2)::before { animation-delay: calc(var(--ug-pulse-time) / -3); }
  .ug-card--pulse:nth-child(3n)::before { animation-delay: calc(var(--ug-pulse-time) / -1.5); }
  /* One rim per surface: a card inside a card or a dialog becomes a quiet inset panel. */
  :is(.ug-card, .ug-modal) .ug-card {
    padding: 1rem;
    border: 1px solid var(--ug-hairline);
    border-radius: var(--ug-radius-inner);
    background-color: var(--ug-glass-panel);
    background-image: none;
    box-shadow: none;
  }
  :is(.ug-card, .ug-modal) .ug-card::before {
    content: none;
  }
  .ug-panel {
    padding: 1rem;
    border: 1px solid var(--ug-hairline);
    border-radius: var(--ug-radius-inner);
    background-color: var(--ug-glass-panel);
  }
  /* Small repeated rows that sit on the page (list items, agenda entries): glass, no rim. */
  .ug-item {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ug-line);
    border-radius: var(--ug-radius-inner);
    background-color: var(--ug-glass);
    background-image: var(--ug-glass-sheen);
  }
  :is(.ug-card, .ug-modal) .ug-item {
    background-color: var(--ug-glass-panel);
    background-image: none;
  }
  /* KPI tile (with .ug-card): a short neon tube on the leading edge in the tile's tone. */
  .ug-kpi { position: relative; }
  .ug-kpi::after {
    content: "";
    position: absolute;
    inset-block: 0.875rem;
    inset-inline-start: 0;
    width: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background-color: var(--ug-c, var(--ug-cyan));
    box-shadow: 0 0 10px 1px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 75%, transparent);
    pointer-events: none;
  }

  /* ── Type: Orbitron for titles and headline numbers, neon gradient fill + glow on titles, a soft
     halo on numbers. Gradient text never takes a text-shadow (it would cover the fill). ── */
  .ug-title {
    margin: 0;
    font-family: var(--ug-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: transparent;
    background-image: var(--ug-title-fill);
    -webkit-background-clip: text;
    background-clip: text;
    filter: var(--ug-title-glow);
  }
  .ug-page-title {
    margin: 0;
    font-family: var(--ug-font-display);
    font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: transparent;
    background-image: var(--ug-page-title-fill);
    -webkit-background-clip: text;
    background-clip: text;
    filter: var(--ug-page-title-glow);
  }
  .ug-dialog-title {
    margin: 0;
    font-family: var(--ug-font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: transparent;
    background-image: var(--ug-title-fill);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .ug-gradient-text {
    color: transparent;
    background-image: var(--ug-title-fill);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .ug-display {
    font-family: var(--ug-font-display);
    letter-spacing: 0.02em;
  }
  /* Headline number. Orbitron digits run ~20 % wider than Inter's: these sizes keep the footprint. */
  .ug-value {
    font-family: var(--ug-font-display);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ug-text-strong);
    text-shadow: var(--ug-value-glow);
  }
  .ug-value--lg { font-size: 1.75rem; }
  .ug-label {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ug-text-label);
  }
  .ug-muted { color: var(--ug-text-muted); }
  /* Neon-sign display text (a clock, a hero figure): hollow letters lit in pink. Display sizes only
     (≥ 2rem) — a hollow glyph is not readable small. */
  .ug-neon-text {
    font-family: var(--ug-font-display);
    font-weight: 500;
    line-height: 1;
    color: rgb(255 255 255 / 0.04);
    -webkit-text-stroke: 1.5px #f9b4ff;
    filter: drop-shadow(0 0 3px rgb(240 171 252 / 0.95)) drop-shadow(0 0 12px rgb(217 70 239 / 0.65));
  }
  .ug-neon-frame {
    border: 2px solid rgb(94 242 255 / 0.85);
    border-radius: 1rem;
    box-shadow: 0 0 12px rgb(34 211 238 / 0.55), inset 0 0 12px rgb(34 211 238 / 0.3);
  }
  .ug-wordmark {
    font-family: var(--ug-font-display);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow: 0 0 12px rgb(167 139 250 / 0.6);
  }
  /* Khmer (and other caseless scripts) take no uppercase tracking and need more room. */
  :lang(km) :is(.ug-title, .ug-label, .ug-dock-label, .ug-nav-label) {
    letter-spacing: 0;
    text-transform: none;
  }
  :lang(km) .ug-title { font-size: 0.9375rem; line-height: 1.6; }
  :lang(km) .ug-dialog-title { font-size: 1.125rem; line-height: 1.6; }

  /* ── Tones: set --ug-c (neon), --ug-on-c (dark ink for a solid fill) and --ug-ink (text-safe twin)
     on a component or any ancestor. Components default to cyan. ── */
  .ug-tone-cyan { --ug-c: var(--ug-cyan); --ug-on-c: var(--ug-on-cyan); --ug-ink: #a5f3fc; }
  .ug-tone-violet { --ug-c: var(--ug-violet); --ug-on-c: var(--ug-on-violet); --ug-ink: #ddd6fe; }
  .ug-tone-pink { --ug-c: var(--ug-pink); --ug-on-c: var(--ug-on-pink); --ug-ink: #f5d0fe; }
  .ug-tone-info { --ug-c: var(--ug-info); --ug-on-c: var(--ug-on-info); --ug-ink: #bfdbfe; }
  .ug-tone-success { --ug-c: var(--ug-success); --ug-on-c: var(--ug-on-success); --ug-ink: #bbf7d0; }
  .ug-tone-warning { --ug-c: var(--ug-warning); --ug-on-c: var(--ug-on-warning); --ug-ink: #fde68a; }
  .ug-tone-error { --ug-c: var(--ug-error); --ug-on-c: var(--ug-on-error); --ug-ink: #fecdd3; }
  .ug-tone-1 { --ug-c: var(--ug-chart-1); --ug-on-c: #03111f; --ug-ink: var(--ug-ink-1); }
  .ug-tone-2 { --ug-c: var(--ug-chart-2); --ug-on-c: #03170a; --ug-ink: var(--ug-ink-2); }
  .ug-tone-3 { --ug-c: var(--ug-chart-3); --ug-on-c: #120626; --ug-ink: var(--ug-ink-3); }
  .ug-tone-4 { --ug-c: var(--ug-chart-4); --ug-on-c: #1c1000; --ug-ink: var(--ug-ink-4); }
  .ug-tone-5 { --ug-c: var(--ug-chart-5); --ug-on-c: #24031a; --ug-ink: var(--ug-ink-5); }

  /* ── Buttons: glass with a violet edge; primary is the neon gradient with dark ink (≥ 6.8:1 along
     the whole gradient) and a glow. ── */
  .ug-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ug-edge);
    border-radius: var(--ug-radius-field);
    background-color: rgb(255 255 255 / 0.05);
    color: var(--ug-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, filter 0.15s, transform 0.15s;
  }
  .ug-btn:hover {
    border-color: rgb(34 211 238 / 0.55);
    background-color: rgb(255 255 255 / 0.1);
    box-shadow: 0 0 16px -5px rgb(34 211 238 / 0.6);
  }
  .ug-btn:active { transform: translateY(1px); }
  .ug-btn--primary {
    border-color: transparent;
    background-image: var(--ug-neon-fill);
    color: #050418;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 0 18px -3px rgb(34 211 238 / 0.6), 0 0 32px -8px rgb(192 132 252 / 0.55);
  }
  .ug-btn--primary:hover {
    border-color: transparent;
    filter: brightness(1.08) saturate(1.1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 24px -2px rgb(34 211 238 / 0.75), 0 0 40px -6px rgb(192 132 252 / 0.7);
  }
  .ug-btn--tone {
    border-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 50%, transparent);
    background-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 14%, transparent);
    color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 62%, white);
  }
  .ug-btn--tone:hover {
    border-color: var(--ug-c, var(--ug-cyan));
    background-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 22%, transparent);
    box-shadow: 0 0 18px -5px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 75%, transparent);
  }
  .ug-btn--ghost {
    border-color: transparent;
    background-color: transparent;
  }
  .ug-btn--ghost:hover {
    border-color: transparent;
    background-color: rgb(255 255 255 / 0.07);
    box-shadow: none;
  }
  .ug-btn--sm { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
  .ug-btn--lg { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 1rem; }
  .ug-btn--icon { padding: 0; aspect-ratio: 1; }
  .ug-btn:is(:disabled, [aria-disabled="true"]) {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
    transform: none;
  }

  /* ── Fields: recessed dark glass with a violet edge; focus lights the edge cyan with a halo. ── */
  .ug-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ug-edge);
    border-radius: var(--ug-radius-field);
    background-color: rgb(8 6 28 / 0.55);
    color: var(--ug-text);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    text-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .ug-input::placeholder { color: rgb(236 235 255 / 0.55); }
  .ug-input:hover { border-color: rgb(167 139 250 / 0.5); }
  .ug-input:focus,
  .ug-input:focus-visible {
    outline: none;
    border-color: var(--ug-cyan);
    box-shadow: var(--ug-focus-ring);
  }
  .ug-input:is([aria-invalid="true"], .is-invalid) { border-color: var(--ug-error); }
  .ug-input:is([aria-invalid="true"], .is-invalid):focus {
    box-shadow: 0 0 0 3px rgb(251 113 133 / 0.14), 0 0 22px -4px rgb(251 113 133 / 0.55);
  }
  .ug-input:disabled {
    background-color: rgb(255 255 255 / 0.03);
    opacity: 0.6;
    cursor: not-allowed;
  }
  select.ug-input {
    appearance: none;
    padding-inline-end: 2.25rem;
    background-image: var(--ug-chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.875rem;
  }
  .ug-input option {
    background-color: var(--ug-surface);
    color: var(--ug-text);
  }
  textarea.ug-input { min-height: 5.5rem; resize: vertical; }
  .ug-field-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ug-text-muted);
  }
  .ug-field-hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--ug-text-muted); }
  .ug-field-error { margin-top: 0.375rem; font-size: 0.75rem; color: var(--ug-error); }

  /* ── Badges, pills, legend dots: capsules with a neon edge in their own tone, on a dark base so
     they stay readable even straight on the aurora. ── */
  .ug-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.125rem 0.625rem;
    border: 1px solid color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 45%, transparent);
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 16%, rgb(12 10 36 / 0.72));
    color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 62%, white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    box-shadow: 0 0 10px -3px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 60%, transparent);
  }
  .ug-badge--solid {
    border-color: transparent;
    background-color: var(--ug-c, var(--ug-cyan));
    color: var(--ug-on-c, var(--ug-on-cyan));
    box-shadow: 0 0 14px -3px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 80%, transparent);
  }
  .ug-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--ug-line);
    border-radius: 9999px;
    background-color: var(--ug-glass-capsule);
    color: var(--ug-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
  }
  .ug-dot {
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--ug-c, var(--ug-cyan));
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 85%, transparent);
  }
  .ug-dot--fill { background-color: var(--ug-c, var(--ug-cyan)); }

  /* ── Tabs: a glass capsule strip; the selected tab is lit cyan. Idle labels are 76 %. ── */
  .ug-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 9999px;
    background-color: var(--ug-glass-capsule);
    box-shadow: inset 0 0 0 1px rgb(167 139 250 / 0.2);
  }
  .ug-tab {
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: rgb(236 235 255 / 0.76);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
  }
  .ug-tab:hover { color: #fff; background-color: rgb(255 255 255 / 0.06); }
  .ug-tab:is(.is-active, [aria-selected="true"], [aria-current="page"]) {
    color: #e9fdff;
    background-color: rgb(34 211 238 / 0.14);
    box-shadow: inset 0 0 0 1px rgb(34 211 238 / 0.45), 0 0 16px -4px rgb(34 211 238 / 0.6);
  }

  /* ── Table: lavender uppercase heads, violet hairlines, a cyan wash under the pointer. ── */
  .ug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }
  .ug-table :is(th, td) {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--ug-hairline);
    text-align: start;
  }
  .ug-table thead th {
    color: var(--ug-text-head);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ug-table tbody tr:last-child > * { border-bottom: 0; }
  .ug-table tbody tr { transition: background-color 0.12s; }
  .ug-table tbody tr:hover { background-color: rgb(34 211 238 / 0.07); }
  .ug-table .ug-num { text-align: end; font-variant-numeric: tabular-nums; }
  :lang(km) .ug-table thead th { font-size: 0.75rem; letter-spacing: 0; text-transform: none; }

  /* ── Meters: progress bars are neon tubes, rings are gradient arcs with round caps, columns are
     gradient bars. One gradient for every mark of a series: length carries the value, not colour.
     Always print the value next to the mark (and offer a table for charts). ── */
  .ug-progress {
    --v: 50;
    position: relative;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--ug-track);
  }
  .ug-progress::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(min(max(var(--v), 0), 100) * 1%);
    border-radius: inherit;
    background-image: var(--ug-bar-fill);
    box-shadow: 0 0 12px -2px rgb(139 92 246 / 0.7);
  }
  .ug-bar {
    border-radius: 9999px;
    background-image: var(--ug-bar-fill);
    box-shadow: 0 0 12px -2px rgb(139 92 246 / 0.7);
  }
  /* Ring: <div class="ug-ring" style="--v: 75" role="img" aria-label="75 %"><span class="ug-value">75%</span></div>.
     Size it with --size (the end cap is placed from it), not with width utilities. */
  .ug-ring {
    --v: 50;
    --size: 6rem;
    --thick: 0.5rem;
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--size);
    height: var(--size);
    filter: drop-shadow(0 0 5px rgb(139 92 246 / 0.6));
  }
  .ug-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle calc(var(--thick) / 2) at 50% calc(var(--thick) / 2), #22d3ee 98%, transparent),
      conic-gradient(#22d3ee 0, #a78bfa calc(var(--v) * 0.5%), #e879f9 calc(var(--v) * 1%), var(--ug-track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + 0.5px));
  }
  .ug-ring::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - var(--thick) / 2);
    width: var(--thick);
    height: var(--thick);
    border-radius: 50%;
    background-color: #e879f9;
    transform-origin: 50% calc(var(--size) / 2);
    transform: rotate(calc(var(--v) * 3.6deg));
  }
  .ug-ring > * { position: relative; }
  .ug-ring .ug-value { font-size: calc(var(--size) * 0.2); }
  .ug-columns {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 6rem;
  }
  .ug-column {
    flex: 1;
    min-height: 4px;
    height: calc(min(max(var(--v, 50), 0), 100) * 1%);
    border-radius: 0.375rem 0.375rem 0.1875rem 0.1875rem;
    background-image: var(--ug-column-fill);
    box-shadow: 0 0 14px -3px rgb(192 132 252 / 0.6);
  }

  /* ── Timeline (agenda): glowing cyan nodes on a neon rail. ── */
  .ug-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ug-timeline > li {
    position: relative;
    padding: 0 0 1rem 1.75rem;
  }
  .ug-timeline > li:last-child { padding-bottom: 0; }
  .ug-timeline > li::before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: radial-gradient(circle, #e9fdff 0 28%, #22d3ee 32% 58%, rgb(34 211 238 / 0.25) 62%);
    box-shadow: 0 0 10px rgb(34 211 238 / 0.85);
  }
  .ug-timeline > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(0.25em + 1rem);
    bottom: 0.125rem;
    left: calc(0.5625rem - 1px);
    width: 2px;
    border-radius: 2px;
    background-image: linear-gradient(#22d3ee, #a78bfa);
    box-shadow: 0 0 6px rgb(34 211 238 / 0.6);
  }
  .ug-timeline time { color: var(--ug-cyan); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* ── Floating surfaces: opaque indigo with a neon edge (a translucent menu lets page text through,
     and a blur nested inside a blurred bar sees nothing). The page behind a dialog dims and blurs. ── */
  .ug-modal {
    width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid rgb(167 139 250 / 0.3);
    border-radius: var(--ug-radius);
    background-color: var(--ug-surface);
    background-image: linear-gradient(160deg, rgb(139 92 246 / 0.16), transparent 40%), linear-gradient(330deg, rgb(34 211 238 / 0.08), transparent 45%);
    color: var(--ug-text);
    box-shadow: 0 0 0 1px rgb(34 211 238 / 0.06), 0 0 44px -10px rgb(139 92 246 / 0.65), 0 30px 60px -24px rgb(0 0 0 / 0.95);
  }
  .ug-modal::backdrop,
  .ug-backdrop {
    background-color: rgb(4 3 18 / 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .ug-menu {
    min-width: 12rem;
    padding: 0.375rem;
    border: 1px solid rgb(167 139 250 / 0.32);
    border-radius: 1rem;
    background-color: var(--ug-surface);
    background-image: linear-gradient(160deg, rgb(139 92 246 / 0.14), transparent 45%);
    color: var(--ug-text);
    box-shadow: var(--ug-float-shadow);
  }
  .ug-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--ug-text);
    font-family: inherit;
    font-size: 0.875rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .ug-menu-item:is(:hover, :focus-visible) {
    outline: none;
    background-color: rgb(34 211 238 / 0.1);
    color: #fff;
  }

  /* ── Alerts and toasts: dark indigo tinted in their tone, a neon edge, text in the tone itself
     (≥ 5.9:1). Opaque: a toast floats over whatever is on screen. Pair the colour with an icon. ── */
  .ug-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 45%, transparent);
    border-radius: 1rem;
    background-color: color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 12%, #100d30);
    color: var(--ug-c, var(--ug-cyan));
    font-size: 0.875rem;
    box-shadow: 0 0 24px -10px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 70%, transparent);
  }

  /* ── Chrome: glass top bar, sidebar and bottom dock with neon edges. ── */
  .ug-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: rgb(11 9 32 / 0.6);
    -webkit-backdrop-filter: var(--ug-blur);
    backdrop-filter: var(--ug-blur);
  }
  .ug-topbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background-image: var(--ug-neon-line);
    opacity: 0.75;
    pointer-events: none;
  }
  .ug-sidebar {
    border-inline-end: 1px solid rgb(167 139 250 / 0.16);
    background-color: var(--ug-glass-chrome);
    background-image: linear-gradient(180deg, rgb(139 92 246 / 0.12), transparent 28%, transparent 72%, rgb(34 211 238 / 0.08));
    -webkit-backdrop-filter: var(--ug-blur);
    backdrop-filter: var(--ug-blur);
    box-shadow: 1px 0 0 rgb(94 242 255 / 0.08), 24px 0 48px -36px rgb(139 92 246 / 0.7);
  }
  .ug-nav-label {
    font-family: var(--ug-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ug-text-label);
  }
  .ug-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    color: rgb(226 224 255 / 0.76);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
  }
  .ug-nav-item:hover {
    background-color: rgb(255 255 255 / 0.06);
    color: #fff;
  }
  .ug-nav-item:is([aria-current="page"], .is-active) {
    background-image: linear-gradient(90deg, rgb(34 211 238 / 0.2), rgb(139 92 246 / 0.12) 70%, rgb(139 92 246 / 0.04));
    color: #8ff6ff;
    box-shadow: inset 0 0 0 1px rgb(34 211 238 / 0.32), 0 0 18px -6px rgb(34 211 238 / 0.65);
    text-shadow: 0 0 10px rgb(34 211 238 / 0.6);
  }
  .ug-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    background-color: rgb(10 8 30 / 0.74);
    -webkit-backdrop-filter: var(--ug-blur);
    backdrop-filter: var(--ug-blur);
    box-shadow: 0 -16px 36px -24px rgb(139 92 246 / 0.75);
  }
  .ug-dock::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background-image: var(--ug-neon-line);
    pointer-events: none;
  }
  .ug-dock-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.375rem 0.25rem;
    color: rgb(205 200 255 / 0.74);
    text-decoration: none;
  }
  .ug-dock-item :is(svg, img) { width: 1.5rem; height: 1.5rem; }
  .ug-dock-label {
    font-family: var(--ug-font-display);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  :lang(km) .ug-dock-label { font-family: var(--ug-font-body); font-size: 0.6875rem; }
  .ug-dock-item:is([aria-current="page"], .is-active) { color: #7df9ff; }
  .ug-dock-item:is([aria-current="page"], .is-active) :is(svg, img) {
    filter: drop-shadow(0 0 6px rgb(34 211 238 / 0.95));
  }
  .ug-dock-item:is([aria-current="page"], .is-active)::after {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2px;
    border-radius: 2px;
    background-color: #22d3ee;
    box-shadow: 0 0 10px 1px rgb(34 211 238 / 0.85);
  }
  /* Content scrolls clear of the fixed dock. */
  .ug-above-dock { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

  /* ── Brand surfaces, icons, small helpers ── */
  .ug-aurora {
    background-color: #160f48;
    background-image: var(--ug-grain), var(--ug-aurora-vivid);
    color: #f6f5ff;
    text-shadow: 0 0 14px rgb(12 6 40 / 0.75), 0 1px 2px rgb(12 6 40 / 0.7);
  }
  .ug-icon-glow { filter: drop-shadow(0 0 6px rgb(167 139 250 / 0.45)) drop-shadow(0 5px 6px rgb(0 0 0 / 0.5)); }
  .ug-glow { box-shadow: 0 0 22px -4px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 70%, transparent); }
  .ug-text-glow { text-shadow: 0 0 10px color-mix(in oklab, var(--ug-c, var(--ug-cyan)) 80%, transparent); }
  .ug-divider {
    height: 1px;
    margin-block: 1rem;
    border: 0;
    background-image: var(--ug-neon-line);
    opacity: 0.6;
  }
  .ug-skeleton {
    border-radius: 0.5rem;
    background-color: rgb(167 139 250 / 0.1);
    background-image: linear-gradient(105deg, transparent 0% 40%, rgb(167 139 250 / 0.18) 50%, transparent 60% 100%);
    background-size: 200% 100%;
    animation: ug-shimmer 1.6s linear infinite;
  }
  .ug-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ug-gap, 1rem);
  }
  .ug-grid {
    display: grid;
    gap: var(--ug-gap, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ug-min, 16rem)), 1fr));
  }

  /* ── Reduced motion: the pulse rests, the shimmer stops. ── */
  @media (prefers-reduced-motion: reduce) {
    .ug-card--pulse::before,
    .ug-skeleton { animation: none; }
    :is(.ug-btn, .ug-input, .ug-tab, .ug-nav-item) { transition: none; }
  }

  /* ── Forced colours: drop the decoration, keep the edges. ── */
  @media (forced-colors: active) {
    .ug-card::before,
    .ug-kpi::after { display: none; }
    :is(.ug-card, .ug-item, .ug-panel) { border: 1px solid CanvasText; }
    :is(.ug-title, .ug-page-title, .ug-dialog-title, .ug-gradient-text, .ug-neon-text) {
      color: CanvasText;
      background: none;
      filter: none;
      -webkit-text-stroke: 0;
    }
  }

  /* ── Print: paper is white (the ink tokens turn dark above). Drop the aurora, the chrome, glass and
     glows; titles print in dark ink. ── */
  @media print {
    html { color-scheme: light; background: #fff; }
    body { text-shadow: none; }
    body::before,
    .ug-card::before,
    .ug-kpi::after,
    .ug-topbar,
    .ug-sidebar,
    .ug-dock { display: none; }
    :is(.ug-card, .ug-panel, .ug-item, .ug-modal, .ug-menu, .ug-alert, .ug-tabs, .ug-pill, .ug-badge, .ug-input) {
      border: 1px solid #d9dce3;
      background: #fff;
      box-shadow: none;
    }
    :is(.ug-card, .ug-panel, .ug-item, .ug-modal, .ug-menu, .ug-pill, .ug-input) { color: var(--ug-text); }
    :is(.ug-badge, .ug-alert) { color: var(--ug-c, var(--ug-cyan)); }
    :is(.ug-tab, .ug-btn) { color: var(--ug-text); }
    :is(.ug-title, .ug-page-title, .ug-dialog-title, .ug-gradient-text, .ug-neon-text) {
      color: #1c2a48;
      background: none;
      filter: none;
      -webkit-text-stroke: 0;
    }
    :is(.ug-value, .ug-wordmark, .ug-text-glow) { color: #1c2a48; text-shadow: none; }
    :is(.ug-ring, .ug-icon-glow) { filter: none; }
    :is(.ug-bar, .ug-column, .ug-glow, .ug-btn) { box-shadow: none; }
    .ug-progress::after { box-shadow: none; }
  }
}