/* ───────────────────────────── حاسبي · base
   Tokens, fonts, reset, typography and the animated cosmos background.
   Light by default, dark by the person's choice (ADR 0002, amended 2026-10-13). CSP: no inline styles — dynamic values arrive as
   CSS custom properties set through CSSOM. */

@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/fonts/readex-pro-arabic.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(/fonts/readex-pro-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(/fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 500; font-display: swap; src: url(/fonts/plex-arabic-500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(/fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(/fonts/plex-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Plex Arabic'; font-weight: 500; font-display: swap; src: url(/fonts/plex-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(/fonts/plex-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* The dark tokens: the page by default (before theme.js), and any element that keeps the dark face inside the light
   theme (`.theme-dark`: the scanner's camera chrome, whose typed code was ink on black otherwise, 2026-10-13). */
:root,
.theme-dark {
  color-scheme: dark;

  --bg-0: #05040e;
  --bg-1: #0a0820;
  --bg-2: #110e2c;
  --bg-3: #1a1540;
  --bg-4: #241d55;

  --text-0: #f4f2ff;
  --text-1: #cdc7ef;
  --text-2: #9d97c7;
  --text-3: #6f69a0;

  --line: rgba(167, 139, 250, 0.14);
  --line-2: rgba(167, 139, 250, 0.26);
  --line-3: rgba(196, 181, 253, 0.42);

  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --magenta-400: #e879f9;

  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, 0.14);

  --accent: var(--violet-500);
  --grad-brand: linear-gradient(135deg, #a855f7 0%, #7c3aed 32%, #4f46e5 64%, #2563eb 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(37, 99, 235, 0.18));
  --grad-text: linear-gradient(95deg, #f5d0fe 0%, #c4b5fd 38%, #a5b4fc 62%, #93c5fd 100%);
  --grad-live: linear-gradient(90deg, #22d3ee, #818cf8, #e879f9);

  --glow-violet: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 8px 32px -6px rgba(139, 92, 246, 0.55);
  --glow-blue: 0 0 0 1px rgba(96, 165, 250, 0.35), 0 8px 32px -6px rgba(59, 130, 246, 0.5);
  --shadow-card: 0 24px 48px -24px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.25);

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --font-display: 'Readex Pro', 'Plex Arabic', system-ui, sans-serif;
  --font-body: 'Plex Arabic', 'Readex Pro', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --gutter: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Role tokens (2026-10-13): the inks and surfaces the screens used to hard-code, so the light theme can restate
     them. The dark values are the literals of before; a status ink is text on a soft tint, never a fill. */
  --fg-rgb: 255, 255, 255;
  --on-brand: #fff;
  --field-bg: rgba(8, 6, 24, 0.55);
  --field-focus-bg: rgba(20, 14, 52, 0.7);
  /* Raised surfaces (a bubble, a sheet's panel, the tab bar, the cart bar), a bar, a tooltip, an inset panel. */
  --surface-raised: rgba(28, 22, 66, 0.94);
  --surface-raised-2: rgba(16, 13, 42, 0.94);
  --surface-bar: rgba(16, 12, 42, 0.95);
  --tip-bg: rgba(16, 12, 42, 0.95);
  --inset-bg: rgba(5, 4, 20, 0.35);
  /* The scrim behind a sheet, and the overlay a success fills the screen with. */
  --scrim: rgba(3, 2, 10, 0.6);
  --overlay-bg: rgba(4, 3, 14, 0.62);
  --ok-ink: #6ee7b7;
  --ok-ink-2: #a7f3d0;
  --ok-ink-3: #d1fae5;
  --bad-ink: #fda4af;
  --bad-ink-2: #fecdd3;
  --warn-ink: #fcd34d;
  --warn-ink-2: #fde68a;
  --orange-ink: #fed7aa;
  --orange-ink-2: #fdba74;
  --pink-ink: #fbcfe8;
  --pink-ink-2: #f5d0fe;
  --blue-ink: #93c5fd;
  --blue-ink-2: #bfdbfe;
  --blue-ink-3: #bae6fd;
  --cyan-ink: #a5f3fc;
  --indigo-ink: #e0e7ff;
  --violet-ink: #c4b5fd;
  --violet-ink-2: #ddd6fe;
  --violet-ink-3: #e9d5ff;
  --surface-card-a: #17123a;
  --surface-card-b: #110d2c;
  --surface-deep-a: #1d1552;
  --surface-deep-b: #120d36;
  --ring-bg: #120e30;
  /* The station's pictures (ADR 0034): foam and glints, the closing sparkles, the Z slip's paper and its ink. */
  --art-foam: rgba(255, 255, 255, 0.92);
  --art-spark: #ffffff;
  --art-paper: #ece9fb;
  --art-paper-ink: #4c1d95;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-0);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: var(--violet-300);
  text-decoration: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(139, 92, 246, 0.45);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--violet-300);
  outline-offset: 3px;
  border-radius: 10px;
}

.num,
.tabular {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Amounts read left-to-right as one unit ("+6.500 د.أ"), even inside RTL text. */
.num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Amount columns sit flush right in both directions: every amount has three
   decimals, so the decimal points line up down the column. */
td.num,
th.num {
  text-align: right;
}

[dir='rtl'] .ltr,
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--text-2);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hidden {
  display: none !important;
}

/* ───────────────────────────── the cosmos (background) */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 85% -12%, rgba(76, 29, 149, 0.55) 0%, transparent 62%),
    radial-gradient(900px 700px at -10% 108%, rgba(30, 58, 138, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, #07061a 0%, #05040e 100%);
}

.aurora {
  position: absolute;
  inset: -25%;
}

.aurora i {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 0.6;
}

.aurora i:nth-child(1) {
  top: -8%;
  right: 2%;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.5) 0%, rgba(139, 92, 246, 0.12) 38%, transparent 64%);
  animation: drift-a 28s var(--ease-in-out) infinite alternate;
}

.aurora i:nth-child(2) {
  bottom: -12%;
  left: -6%;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.42) 0%, rgba(59, 130, 246, 0.1) 40%, transparent 64%);
  animation: drift-b 34s var(--ease-in-out) infinite alternate;
}

.aurora i:nth-child(3) {
  top: 28%;
  left: 26%;
  width: 48vmax;
  height: 48vmax;
  background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.2) 0%, transparent 60%);
  animation: drift-c 40s var(--ease-in-out) infinite alternate;
}

.aurora i:nth-child(4) {
  top: 8%;
  left: 8%;
  width: 40vmax;
  height: 40vmax;
  background: radial-gradient(circle at 50% 50%, rgba(232, 121, 249, 0.16) 0%, transparent 60%);
  animation: drift-d 46s var(--ease-in-out) infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(-14vw, 12vh, 0) scale(1.18) rotate(24deg);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(16vw, -10vh, 0) scale(1.12) rotate(-18deg);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(-10vw, -14vh, 0) scale(1.25);
  }
}
@keyframes drift-d {
  to {
    transform: translate3d(20vw, 18vh, 0) scale(0.9);
  }
}

.stars,
.stars::after {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

.stars {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(var(--fg-rgb), 0.85), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(221, 214, 254, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 64%, rgba(191, 219, 254, 0.8), transparent 60%),
    radial-gradient(1px 1px at 86% 72%, rgba(var(--fg-rgb), 0.7), transparent 60%),
    radial-gradient(1px 1px at 22% 88%, rgba(196, 181, 253, 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 34%, rgba(var(--fg-rgb), 0.65), transparent 60%),
    radial-gradient(1px 1px at 94% 40%, rgba(147, 197, 253, 0.7), transparent 60%);
  background-size: 520px 520px;
  opacity: 0.55;
  animation: twinkle 7s ease-in-out infinite alternate;
}

.stars::after {
  content: '';
  background-image:
    radial-gradient(1px 1px at 30% 40%, rgba(var(--fg-rgb), 0.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 80% 26%, rgba(233, 213, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 52% 82%, rgba(191, 219, 254, 0.7), transparent 60%),
    radial-gradient(1px 1px at 8% 56%, rgba(var(--fg-rgb), 0.6), transparent 60%);
  background-size: 780px 780px;
  animation: twinkle 9s ease-in-out -4s infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 0.8;
  }
}

.grid-floor {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -18%;
  height: 58%;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.24) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 72%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 72%);
  opacity: 0.38;
  animation: grid-move 9s linear infinite;
}

@keyframes grid-move {
  to {
    background-position:
      0 64px,
      0 0;
  }
}

.noise {
  position: absolute;
  inset: 0;
  background-image: url(/img/noise.svg);
  background-size: 180px 180px;
  opacity: 0.05;
  /* A full-screen blend mode made every repaint pass through a compositing step; plain alpha reads the same. */
  mix-blend-mode: normal;
}

/* Surfaces where calm matters more than drama. */
body.surface-counter .grid-floor {
  opacity: 0.16;
}
body.surface-books .grid-floor,
body.surface-books .stars {
  display: none;
}
body.surface-books .aurora i {
  opacity: 0.32;
}

/* The sky moves only on the sign-in screens. On the work surfaces the aurora, the stars and the grid stand still,
   so nothing behind the cards changes from frame to frame and the phone draws only what the person touches
   (2026-10-12: a moving sky under 150+ translucent cards was what people felt as "heavy"). */
body.surface-counter .aurora i,
body.surface-owner .aurora i,
body.surface-books .aurora i,
body.surface-counter .stars,
body.surface-owner .stars,
body.surface-books .stars,
body.surface-counter .stars::after,
body.surface-owner .stars::after,
body.surface-books .stars::after,
body.surface-counter .grid-floor,
body.surface-owner .grid-floor,
body.surface-books .grid-floor {
  animation-play-state: paused;
}

/* ───────────────────────────── entrance motion */

.enter {
  animation: enter 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + var(--delay, 0ms));
}

/* Opacity and transform only: both run on the compositor. A blur filter here re-rendered every entering element on
   every frame of its 0.7s, dozens at a time on each screen. */
@keyframes enter {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fade-in {
  animation: fade-in 0.5s var(--ease-out) both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-angle {
  to {
    --angle: 360deg;
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
    opacity: 0.7;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(4px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-8px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(8px, 0, 0);
  }
}

/* View transitions between screens (Chrome/Android). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) {
  animation-name: vt-out;
}
::view-transition-new(root) {
  animation-name: vt-in;
}
@keyframes vt-out {
  to {
    opacity: 0;
    transform: scale(0.985);
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
}

/* ───────────────────────────── performance & accessibility modes */

html.lite .aurora i,
html.lite .noise {
  mix-blend-mode: normal;
}
html.lite .grid-floor {
  display: none;
}
/* Lite (a weak phone, the data saver, or the person's own choice in «المزيد»): the sky never moves, entrances are
   brief, and the overlays drop their blur. */
html.lite .aurora i,
html.lite .stars,
html.lite .stars::after {
  animation: none;
}
html.lite .enter {
  animation-duration: 0.3s;
}
html.lite .netbar,
html.lite .cart-bar,
html.lite .success-overlay,
html.lite .tour,
html.lite .setup-sticky,
html.lite .scan-btn,
html.lite .scan-hint,
html.lite .scan-result,
html.lite .scan-chip {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora i,
  .stars,
  .stars::after,
  .grid-floor {
    animation: none !important;
  }
}

/* ───────────────────────────── the light theme (ADR 0002, amended 2026-10-13)
   The same futuristic language on a lavender-white surface: the purple and blue gradients stay saturated, the glass
   turns whiter than the page, the sky's aurora multiplies softly, the stars go out. The default since 2026-10-13
   (the owner's call); dark stays the person's choice in «المزيد» (theme.js). Inks step down to their 700s so text
   keeps ≥ 4.5:1. */

html[data-theme='light'] {
  color-scheme: light;

  --bg-0: #f7f5ff;
  --bg-1: #f1edfd;
  --bg-2: #e9e3fb;
  --bg-3: #ded5f7;
  --bg-4: #d2c6f1;

  --text-0: #17132f;
  --text-1: #2f2958;
  --text-2: #5d5786;
  --text-3: #6f6a96; /* 4.4:1 on the page, 5:1 on a card: the floor for small labels (2026-10-14) */

  --line: rgba(109, 40, 217, 0.14);
  --line-2: rgba(109, 40, 217, 0.24);
  --line-3: rgba(109, 40, 217, 0.4);

  /* The named steps are read as "accent text and icons" by the screens: on a light surface they darken. */
  --violet-200: #5b21b6;
  --violet-300: #6d28d9;
  --violet-400: #7c3aed;
  --indigo-400: #4f46e5;
  --blue-300: #1d4ed8;
  --blue-400: #2563eb;
  --cyan-300: #0e7490;
  --cyan-400: #0891b2;
  --magenta-400: #c026d3;

  --ok: #059669;
  --ok-soft: rgba(5, 150, 105, 0.14);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.14);
  --bad: #be123c;
  --bad-soft: rgba(190, 18, 60, 0.12);

  --accent: var(--violet-600);
  --grad-text: linear-gradient(95deg, #7e22ce 0%, #6d28d9 38%, #4338ca 62%, #1d4ed8 100%);
  --glow-violet: 0 0 0 1px rgba(124, 58, 237, 0.25), 0 8px 28px -8px rgba(124, 58, 237, 0.35);
  --glow-blue: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 8px 28px -8px rgba(37, 99, 235, 0.3);
  --shadow-card: 0 18px 40px -26px rgba(76, 29, 149, 0.3), 0 1px 3px rgba(40, 20, 90, 0.06);

  --fg-rgb: 23, 19, 47;
  --field-bg: rgba(255, 255, 255, 0.78);
  --field-focus-bg: rgba(255, 255, 255, 0.98);
  --surface-raised: rgba(255, 255, 255, 0.94);
  --surface-raised-2: rgba(247, 244, 255, 0.96);
  --surface-bar: rgba(255, 255, 255, 0.92);
  --tip-bg: rgba(255, 255, 255, 0.97);
  --inset-bg: rgba(23, 19, 47, 0.05);
  --scrim: rgba(23, 19, 47, 0.42);
  --overlay-bg: rgba(247, 245, 255, 0.84);
  --ok-ink: #047857;
  --ok-ink-2: #065f46;
  --ok-ink-3: #064e3b;
  --bad-ink: #be123c;
  --bad-ink-2: #9f1239;
  --warn-ink: #b45309;
  --warn-ink-2: #92400e;
  --orange-ink: #c2410c;
  --orange-ink-2: #c2410c;
  --pink-ink: #be185d;
  --pink-ink-2: #a21caf;
  --blue-ink: #1d4ed8;
  --blue-ink-2: #1e40af;
  --blue-ink-3: #0369a1;
  --cyan-ink: #0e7490;
  --indigo-ink: #3730a3;
  --violet-ink: #6d28d9;
  --violet-ink-2: #5b21b6;
  --violet-ink-3: #7e22ce;
  --surface-card-a: #ffffff;
  --surface-card-b: #f4f1fc;
  --surface-deep-a: #ede8fb;
  --surface-deep-b: #e2dbf7;
  --ring-bg: #f7f5ff;
  --art-foam: #ffffff;
  --art-spark: #7c3aed;
  --art-paper: #ffffff;
  --art-paper-ink: #6d28d9;
}

html[data-theme='light'] .cosmos {
  background:
    radial-gradient(1100px 760px at 85% -12%, rgba(167, 139, 250, 0.38) 0%, transparent 62%),
    radial-gradient(900px 700px at -10% 108%, rgba(147, 197, 253, 0.42) 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff 0%, #f3f0fd 100%);
}

html[data-theme='light'] .aurora i {
  mix-blend-mode: multiply;
  opacity: 0.55;
}

html[data-theme='light'] .stars,
html[data-theme='light'] .stars::after {
  display: none;
}

html[data-theme='light'] .grid-floor {
  opacity: 0.2;
}

html[data-theme='light'] .noise {
  opacity: 0.035;
}

html[data-theme='light'] ::selection {
  background: rgba(124, 58, 237, 0.25);
  color: var(--text-0);
}