/* ==========================================================================
   Aurora 3D — CreatesOnline's design layer (2026-10)
   One file restyles every page that includes templates/_aurora.html (public site,
   store, sign-in, admin dashboard, owner console). It is loaded last and changes how
   things look, not where they sit: no layout, spacing or text changes, so every locale
   (including right-to-left Arabic and Urdu) keeps working untouched.

   - Colour: the logo's cube faces (deep blue, violet, sky) as one gradient, on an
     animated aurora sky, in light and dark.
   - Depth: glass surfaces, gradient glow on focus/hover, 3D pointer tilt with a glare
     (static/js/aurora.js), depth reveals on scroll, a 3D brand cube.
   - Motion is decoration only and is switched off for "reduce motion".
   ========================================================================== */

/* ---- tokens ----------------------------------------------------------------------------- */
:root {
  --au-blue: #5468f0;
  --au-violet: #7a66ee;
  --au-sky: #5cc8dc;
  --au-pink: #c58bd8;
  --au-grad: linear-gradient(120deg, #5468f0 0%, #7a66ee 48%, #5cc8dc 100%);
  --au-grad-soft: linear-gradient(120deg, rgba(84, 104, 240, .16), rgba(122, 102, 238, .16) 50%, rgba(92, 200, 220, .14));
  --au-grad-text: linear-gradient(100deg, #5468f0 0%, #7a66ee 30%, #a58cf5 50%, #5cc8dc 75%, #5468f0 100%);

  --au-base: #f5f6fe;
  --au-ink: #0f1230;
  --au-ink-muted: #5a5f86;
  --au-glass: rgba(255, 255, 255, .80);
  --au-glass-strong: rgba(255, 255, 255, .92);
  --au-glass-border: rgba(96, 98, 190, .14);
  --au-glass-border-hi: rgba(122, 102, 238, .45);
  --au-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 60px -32px rgba(40, 40, 110, .35);
  --au-shadow-hover: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 34px 80px -34px rgba(84, 74, 210, .55),
                     0 0 0 1px rgba(122, 102, 238, .30);
  --au-glow: 0 8px 22px -10px rgba(98, 92, 228, .35), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  --au-glow-hover: 0 12px 28px -12px rgba(98, 92, 228, .45), 0 0 0 1px rgba(255, 255, 255, .18) inset;
  --au-ring: 0 0 0 3px rgba(122, 102, 238, .28), 0 0 0 1px rgba(122, 102, 238, .7);
  --au-blob-1: rgba(84, 104, 240, .11);
  --au-blob-2: rgba(122, 102, 238, .11);
  --au-blob-3: rgba(92, 200, 220, .08);
  --au-blob-4: rgba(197, 139, 216, .04);
  --au-stars: rgba(70, 70, 150, .06);
  --au-blur: 16px;
  --au-radius: 18px;
  --au-ease: cubic-bezier(.2, .8, .2, 1);

  /* Existing tokens follow the new palette, so older pages change with the rest. */
  --brand-blue: #5f58e6;
  --brand-blue-hover: #4a3bf0;
  --brand-blue-soft: rgba(96, 90, 230, .12);
}

:root[data-theme="dark"],
:root.theme-dark {
  --au-base: #080911;
  --au-ink: #eef0ff;
  --au-ink-muted: #b6bbdc;
  --au-glass: rgba(14, 17, 34, .80);
  --au-glass-strong: rgba(16, 20, 40, .92);
  --au-glass-border: rgba(205, 208, 235, .14);
  --au-glass-border-hi: rgba(160, 150, 240, .55);
  --au-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -36px rgba(0, 0, 0, .9);
  --au-shadow-hover: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 70px -36px rgba(80, 72, 215, .28),
                     0 0 0 1px rgba(150, 140, 235, .38);
  --au-blob-1: rgba(84, 104, 240, .12);
  --au-blob-2: rgba(122, 102, 238, .12);
  --au-blob-3: rgba(92, 200, 220, .06);
  --au-blob-4: rgba(197, 139, 216, .04);
  --au-stars: rgba(200, 200, 255, .07);
  --au-grad-text: linear-gradient(100deg, #a9b8ff 0%, #c3b5fb 30%, #ddc9f7 50%, #9fdde8 75%, #a9b8ff 100%);
  --brand-blue: #7d70ec;
  --brand-blue-hover: #9488ee;
  --brand-blue-soft: rgba(122, 112, 236, .16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --au-base: #080911;
    --au-ink: #eef0ff;
    --au-ink-muted: #b6bbdc;
    --au-glass: rgba(14, 17, 34, .80);
    --au-glass-strong: rgba(16, 20, 40, .92);
    --au-glass-border: rgba(205, 208, 235, .14);
    --au-glass-border-hi: rgba(160, 150, 240, .55);
    --au-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -36px rgba(0, 0, 0, .9);
    --au-shadow-hover: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 70px -36px rgba(80, 72, 215, .28),
                       0 0 0 1px rgba(150, 140, 235, .38);
    --au-blob-1: rgba(84, 104, 240, .12);
    --au-blob-2: rgba(122, 102, 238, .12);
    --au-blob-3: rgba(92, 200, 220, .06);
    --au-blob-4: rgba(197, 139, 216, .04);
    --au-stars: rgba(200, 200, 255, .07);
    --au-grad-text: linear-gradient(100deg, #a9b8ff 0%, #c3b5fb 30%, #ddc9f7 50%, #9fdde8 75%, #a9b8ff 100%);
    --brand-blue: #7d70ec;
    --brand-blue-hover: #9488ee;
    --brand-blue-soft: rgba(122, 112, 236, .16);
  }
}

/* The public site and store are designed dark-only (white text on black), so they always
   use the dark sky, whatever the visitor's light/dark setting. */
html:has(> body.co-public),
html:has(> body.public-site),
body.co-public,
body.public-site {
  --au-base: #080911;
  --au-ink: #eef0ff;
  --au-ink-muted: #b6bbdc;
  --au-glass: rgba(14, 17, 34, .80);
  --au-glass-strong: rgba(16, 20, 40, .92);
  --au-glass-border: rgba(205, 208, 235, .14);
  --au-glass-border-hi: rgba(160, 150, 240, .55);
  --au-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 70px -36px rgba(0, 0, 0, .9);
  --au-shadow-hover: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 70px -36px rgba(80, 72, 215, .28),
                     0 0 0 1px rgba(150, 140, 235, .38);
  --au-blob-1: rgba(84, 104, 240, .12);
  --au-blob-2: rgba(122, 102, 238, .12);
  --au-blob-3: rgba(92, 200, 220, .06);
  --au-blob-4: rgba(197, 139, 216, .04);
  --au-stars: rgba(200, 200, 255, .07);
  --au-grad-text: linear-gradient(100deg, #a9b8ff 0%, #c3b5fb 30%, #ddc9f7 50%, #9fdde8 75%, #a9b8ff 100%);
  color-scheme: dark;
}

/* The admin dashboard is token-driven (admin-theme.css): point its tokens at Aurora. */
:root {
  --admin-bg: transparent;
  --admin-blue: #5f58e6;
  --admin-blue-soft: rgba(96, 90, 230, .10);
  --admin-grad: var(--au-grad);
  --admin-accent-2: var(--au-sky);
  --admin-radius: var(--au-radius);
  --admin-shadow: var(--au-shadow);
  --admin-shadow-soft: var(--au-shadow);
  --admin-glow-1: transparent;
  --admin-glow-2: transparent;
  --motion-accent: var(--au-violet);
}
:root[data-theme="dark"] {
  --admin-card: rgba(15, 18, 38, .72);
  --admin-card-soft: rgba(22, 26, 52, .66);
  --admin-border: rgba(205, 208, 235, .13);
  --admin-blue: #8b7bff;
  --admin-blue-soft: rgba(122, 112, 236, .16);
}

/* ---- the sky: aurora light behind every page ---------------------------------------------- */
html {
  background: var(--au-base);
  color-scheme: light dark;
}
html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html::before {
  inset: -25vmax;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, var(--au-blob-1), transparent 65%),
    radial-gradient(34vmax 28vmax at 82% 16%, var(--au-blob-2), transparent 65%),
    radial-gradient(40vmax 30vmax at 70% 86%, var(--au-blob-3), transparent 65%),
    radial-gradient(26vmax 22vmax at 26% 82%, var(--au-blob-4), transparent 65%);
  animation: au-sky 38s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--au-px, 0) * -18px), calc(var(--au-py, 0) * -14px), 0);
}
html::after {
  /* a fine star/dot field that fades out towards the bottom */
  background-image: radial-gradient(var(--au-stars) 1px, transparent 1.2px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: .9;
}
@keyframes au-sky {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) rotate(-6deg) scale(1.02); }
}

body,
body.admin-body,
body.public-site,
.co-public,
.co-page {
  background: transparent !important;
}
body { color: var(--au-ink); }
/* nothing on a phone should scroll sideways; clip (unlike hidden) keeps sticky headers working */
html, body { overflow-x: clip; }
/* the aurora sky replaces the old grey mesh */
.co-mesh { display: none !important; }
::selection { background: rgba(122, 102, 238, .32); color: inherit; }
* { scrollbar-width: thin; scrollbar-color: rgba(122, 102, 238, .45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--au-violet), var(--au-blue)); border-radius: 999px;
                            border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- gradient text -------------------------------------------------------------------- */
.co-grad-text,
.au-grad-text,
.hero-title em,
.co-hero__headline em,
.sol-hero h1 em {
  /* !important: the old monochrome layer (public-site.css) flattens .co-grad-text */
  background: var(--au-grad-text) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent;
  animation: au-text-flow 18s linear infinite;
}
@keyframes au-text-flow { to { background-position: -220% 0; } }

.co-hero__headline,
.hero-title,
.section-title,
.sol-hero h1,
.auth-card h1,
.home-hero h2 {
  letter-spacing: -.035em;
  text-shadow: 0 18px 50px rgba(98, 92, 228, .18);
}

/* ---- buttons -------------------------------------------------------------------------- */
.btn--primary,
.btn-primary,
.primary-action,
.header-cta,
.sol-btn,
.block-btn--primary,
.co-newsletter-popup__form button[type="submit"],
button.btn-primary,
a.btn-primary {
  position: relative;
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(110deg, #5468f0 0%, #7366ec 55%, #8a7cf0 100%) !important;
  background-size: 220% 100% !important;
  background-position: 0% 0;
  box-shadow: var(--au-glow) !important;
  transition: transform .25s var(--au-ease), box-shadow .25s var(--au-ease), background-position .6s var(--au-ease),
              filter .25s var(--au-ease) !important;
}
.btn--primary:hover,
.btn-primary:hover,
.primary-action:hover,
.header-cta:hover,
.sol-btn:hover,
.block-btn--primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-position: 100% 0 !important;
  box-shadow: var(--au-glow-hover) !important;
  transform: translateY(-1px);
}
.btn--primary:active,
.btn-primary:active,
.primary-action:active,
.header-cta:active { transform: none; box-shadow: var(--au-glow) !important; }

.btn--secondary,
.btn-secondary,
.secondary-action {
  background: var(--au-glass) !important;
  border: 1px solid var(--au-glass-border) !important;
  -webkit-backdrop-filter: blur(var(--au-blur)) saturate(1.4);
          backdrop-filter: blur(var(--au-blur)) saturate(1.4);
  box-shadow: var(--au-shadow);
  transition: transform .25s var(--au-ease), border-color .25s var(--au-ease), box-shadow .25s var(--au-ease) !important;
}
.btn--secondary:hover,
.btn-secondary:hover,
.secondary-action:hover {
  border-color: var(--au-glass-border-hi) !important;
  box-shadow: var(--au-shadow-hover);
  transform: translateY(-1px);
}

/* ---- glass surfaces --------------------------------------------------------------------- */
.site-header,
.topbar,
.dashboard-topbar,
.auth-topbar,
.co-newsletter-popup__card,
.co-whatsapp-panel {
  background: color-mix(in srgb, var(--au-base) 62%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
          backdrop-filter: blur(20px) saturate(1.6);
  border-color: var(--au-glass-border) !important;
}
.site-header { box-shadow: 0 1px 0 var(--au-glass-border), 0 16px 40px -30px rgba(40, 40, 110, .35); }

.feature-card, .product-card, .post-card, .related-card, .wishlist-card, .sol-card, .pricing-card,
.co-services__card, .co-service-card, .co-pricing__card, .service-card, .category-card,
.overview-card, .stat-card, .settings-card, .module-overview-card, .module-card, .home-tile, .form-card,
.content-card, .component-card, .type-card, .action-card, .settings-panel, .home-panel, .quote-send__card,
.auth-card, .cms-setting-tile, .builder-card {
  background: var(--au-glass) !important;
  border: 1px solid var(--au-glass-border) !important;
  border-radius: var(--au-radius);
  -webkit-backdrop-filter: blur(var(--au-blur)) saturate(1.35);
          backdrop-filter: blur(var(--au-blur)) saturate(1.35);
  box-shadow: var(--au-shadow);
  transition: transform .35s var(--au-ease), box-shadow .35s var(--au-ease), border-color .35s var(--au-ease);
}
.feature-card:hover, .product-card:hover, .post-card:hover, .related-card:hover, .wishlist-card:hover, .sol-card:hover,
.pricing-card:hover, .co-services__card:hover, .co-service-card:hover, .co-pricing__card:hover, .service-card:hover, .category-card:hover,
.stat-card:hover, .module-overview-card:hover, .module-card:hover, .home-tile:hover, .action-card:hover,
.type-card:hover, .component-card:hover {
  border-color: var(--au-glass-border-hi) !important;
  box-shadow: var(--au-shadow-hover);
}

/* tables inside glass read better with a soft header band */
.data-table thead th,
table.data-table th {
  background: var(--au-grad-soft) !important;
  border-bottom-color: var(--au-glass-border) !important;
}
.data-table tbody tr { transition: background .2s ease; }
.data-table tbody tr:hover { background: rgba(122, 102, 238, .06); }

/* ---- forms -------------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  transition: border-color .2s ease, box-shadow .25s var(--au-ease), background-color .2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus,
.admin-input:focus,
.admin-select:focus {
  outline: none !important;
  border-color: var(--au-violet) !important;
  box-shadow: var(--au-ring) !important;
}
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--au-violet); }
:focus-visible { outline-color: var(--au-violet); }

/* ---- navigation highlights ------------------------------------------------------------------ */
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
  background: var(--au-grad) !important;
  box-shadow: 0 0 14px rgba(122, 102, 238, .7);
}
.nav-item.active,
.nav-item[aria-current="page"],
.app-rail-item.active {
  background: var(--au-grad-soft) !important;
  box-shadow: inset 0 0 0 1px var(--au-glass-border-hi);
}
.app-rail-item.active svg,
.nav-item.active svg { color: var(--au-violet); filter: drop-shadow(0 0 6px rgba(122, 102, 238, .6)); }

/* icon chips get a little depth */
.feature-icon,
.sol-ico,
.module-card-head .module-icon,
.home-tile__icon,
.stat-icon {
  box-shadow: 0 10px 24px -10px rgba(98, 92, 228, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
  transform: translateZ(30px);
}

/* status badges glow softly */
.badge, .status-badge, .quote-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset; }

/* ---- hero areas ----------------------------------------------------------------------------- */
.co-hero, .hero-section, .sol-hero, .store-hero { position: relative; isolation: isolate; }
.co-hero::after {
  /* a perspective floor grid that recedes into the horizon */
  content: "";
  position: absolute;
  inset-inline: -10%;
  bottom: -2px;
  height: 46%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(122, 102, 238, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 104, 240, .18) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
          mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: au-floor 6s linear infinite;
}
@keyframes au-floor { to { background-position: 0 64px, 0 0; } }

.home-hero {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(122, 102, 238, .28), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(92, 200, 220, .18), transparent 60%),
    var(--au-glass) !important;
  border: 1px solid var(--au-glass-border-hi) !important;
  position: relative;
  overflow: hidden;
}

/* the store banner and empty catalog follow the same look */
.store-hero {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(92, 200, 220, .35), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(197, 139, 216, .22), transparent 60%),
    linear-gradient(125deg, #1b2a8f 0%, #4b2bc4 55%, #2a5ee8 100%) !important;
  box-shadow: 0 40px 90px -40px rgba(84, 74, 210, .7);
}
.store-empty {
  background: var(--au-glass) !important;
  border-color: var(--au-glass-border-hi) !important;
  -webkit-backdrop-filter: blur(var(--au-blur));
          backdrop-filter: blur(var(--au-blur));
}

/* ---- the 3D brand cube (aurora.js puts one into every [data-au-cube]) ---------------------- */
.au-cube-host { perspective: 900px; display: grid; place-items: center; }
.au-cube {
  --s: 96px;
  position: relative;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  animation: au-cube-spin 14s linear infinite;
}
.au-cube__face {
  position: absolute;
  inset: 0;
  border-radius: 18%;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, .18), 0 0 40px rgba(98, 92, 228, .35);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.au-cube__face--front  { background: linear-gradient(135deg, #5468f0, #4656d0); transform: translateZ(calc(var(--s) / 2)); }
.au-cube__face--back   { background: linear-gradient(135deg, #4656d0, #5468f0); transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.au-cube__face--right  { background: linear-gradient(135deg, #7a66ee, #5a4bc8); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.au-cube__face--left   { background: linear-gradient(135deg, #5a4bc8, #7a66ee); transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.au-cube__face--top    { background: linear-gradient(135deg, #8fd8e6, #5cc8dc); transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.au-cube__face--bottom { background: linear-gradient(135deg, #1e3a8a, #312e81); transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.au-cube__shadow {
  position: absolute;
  width: calc(var(--s) * 1.3);
  height: calc(var(--s) * .3);
  bottom: calc(var(--s) * -.85);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(98, 92, 228, .55), transparent);
  filter: blur(6px);
  animation: au-cube-shadow 4s ease-in-out infinite;
}
.au-cube-float { animation: au-float 4s ease-in-out infinite; }
@keyframes au-cube-spin {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to   { transform: rotateX(-24deg) rotateY(360deg); }
}
@keyframes au-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes au-cube-shadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.8); opacity: .55; } }

.home-hero .au-cube-host {
  /* sits between the greeting and the "visit site" link */
  margin-inline-start: auto;
  align-self: center;
  width: 120px;
  height: 110px;
  pointer-events: none;
}
.home-hero .au-cube { --s: 58px; }
@media (max-width: 900px) { .home-hero .au-cube-host { display: none; } }

.auth-brand .au-cube-host { height: 150px; margin-block-end: 18px; }
.auth-brand .auth-brand-logo { display: none; }

/* ---- 3D tilt + glare (aurora.js) ------------------------------------------------------------ */
.au-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
/* entrance animations (fill-mode: both) would otherwise pin the transform */
.au-tilt.au-tilting { animation: none !important; transition: transform .08s linear, box-shadow .35s var(--au-ease), border-color .35s var(--au-ease) !important; }
.au-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--au-ease);
  background: radial-gradient(420px circle at var(--au-gx, 50%) var(--au-gy, 50%), rgba(255, 255, 255, .10), transparent 45%);
  mix-blend-mode: soft-light;
  z-index: 1;
}
.au-tilt:hover .au-glare { opacity: 1; }

/* ---- reveal on scroll (aurora.js adds .au-reveal, then .au-in) ------------------------------ */
.au-reveal {
  opacity: 0;
  /* pushed back in depth so the tilt never makes it wider than the screen */
  transform: translate3d(0, 12px, 0);
  transition: opacity .5s var(--au-ease), transform .5s var(--au-ease);
  transition-delay: var(--au-delay, 0ms);
}
.au-reveal.au-in { opacity: 1; transform: none; }

/* ---- hero globe container gets a halo ------------------------------------------------------ */
.co-system-orbit { filter: drop-shadow(0 30px 80px rgba(98, 92, 228, .35)); }
.co-system-orbit__core {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #c9c2ff 35%, #7a66ee 70%, #5468f0 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 60px rgba(122, 102, 238, .65), 0 0 120px rgba(92, 200, 220, .25) !important;
  text-shadow: 0 1px 8px rgba(40, 20, 120, .6);
}
.co-system-orbit__node {
  background: var(--au-glass-strong) !important;
  border: 1px solid var(--au-glass-border-hi) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(98, 92, 228, .6);
}

.co-whatsapp-float { box-shadow: 0 14px 34px -8px rgba(37, 211, 102, .65), 0 0 0 6px rgba(37, 211, 102, .12); }
.co-scroll-progress { background: var(--au-grad) !important; box-shadow: 0 0 12px rgba(122, 102, 238, .7); }

/* ---- reduced motion: keep the look, drop the movement -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html::before, .au-cube, .au-cube-float, .au-cube__shadow, .co-hero::after,
  .co-grad-text, .au-grad-text, .hero-title em, .co-hero__headline em, .sol-hero h1 em { animation: none !important; }
  .au-reveal { opacity: 1; transform: none; transition: none; }
  .btn--primary:hover, .btn-primary:hover, .primary-action:hover, .header-cta:hover,
  .btn--secondary:hover, .secondary-action:hover { transform: none; }
}

/* Printing a page (quotes, invoices) should not print the sky. */
@media print {
  html::before, html::after, .co-hero::after, .au-glare, .au-cube-host { display: none !important; }
  html { background: #fff; }
}

/* ==========================================================================
   Innovation layer (2026-10)
   ========================================================================== */

/* ---- live aurora (aurora.js draws it with WebGL; html.au-gl means it is running) ------------ */
.au-sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  filter: blur(24px) saturate(.85);
  opacity: .32;
  transform: scale(1.08);           /* hides the blur's soft edges */
}
:root[data-theme="light"] .au-sky { opacity: .18; mix-blend-mode: multiply; filter: blur(22px) saturate(1.1); }
html:has(> body.co-public) .au-sky,
html:has(> body.public-site) .au-sky { opacity: .38; mix-blend-mode: normal; }
html.au-gl::before { opacity: .5; }   /* the CSS blobs stay underneath as a soft base */

/* ---- holographic edge on tilting cards ------------------------------------------------------- */
@property --au-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.au-holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--au-angle), #5468f0, #7a66ee, #c58bd8, #5cc8dc, #5468f0);
  -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);
  transition: opacity .4s var(--au-ease);
  animation: au-spin-angle 4s linear infinite;
  z-index: 2;
}
.au-tilt:hover .au-holo { opacity: .4; }
@keyframes au-spin-angle { to { --au-angle: 360deg; } }

/* Copilot launcher in the same calm indigo as the primary buttons */
.copilot-launcher {
  background: linear-gradient(110deg, #5468f0 0%, #7366ec 55%, #8a7cf0 100%) !important;
  box-shadow: var(--au-glow) !important;
}
.copilot-launcher:hover { box-shadow: var(--au-glow-hover) !important; filter: brightness(1.06); }

/* magnetic buttons settle back smoothly */
.btn--primary, .btn-primary, .primary-action, .header-cta, .sol-btn, .copilot-launcher { transition-property: transform, box-shadow, background-position, filter, translate !important; }

/* ---- page-to-page morphing (cross-document View Transitions) --------------------------------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: au-header; }
.icon-sidebar { view-transition-name: au-rail; }
.expanded-sidebar { view-transition-name: au-sidebar; }
::view-transition-old(root) { animation: au-vt-out .15s ease-out both; }
::view-transition-new(root) { animation: au-vt-in .2s ease-out both; }
@keyframes au-vt-out { to { opacity: 0; } }
@keyframes au-vt-in { from { opacity: 0; } }

/* ---- command bar (Ctrl/Cmd+K) ------------------------------------------------------------------ */
.au-cmd-trigger {
  display: inline-flex;
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding-inline: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--au-glass-border);
  background: var(--au-glass);
  color: var(--admin-muted, var(--au-ink-muted));
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: border-color .2s ease, box-shadow .25s var(--au-ease), color .2s ease;
}
.au-cmd-trigger:hover { border-color: var(--au-glass-border-hi); color: var(--admin-text, var(--au-ink)); box-shadow: var(--au-shadow-hover); }
.au-cmd-trigger kbd, .au-cmd kbd {
  white-space: nowrap;
  font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--au-glass-border);
  background: var(--au-grad-soft);
  color: inherit;
}
@media (max-width: 720px) { .au-cmd-trigger span, .au-cmd-trigger kbd { display: none; } }

.au-cmd { position: fixed; inset: 0; z-index: 10000; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.au-cmd[hidden] { display: none; }
.au-cmd__backdrop { position: absolute; inset: 0; background: rgba(5, 6, 20, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
                    opacity: 0; transition: opacity .25s ease; }
.au-cmd__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--au-glass-border-hi);
  background: var(--au-glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
          backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 50px 120px -30px rgba(40, 20, 140, .65), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  color: var(--admin-text, var(--au-ink));
  overflow: hidden;
  opacity: 0;
  transform: perspective(900px) translateY(-14px) rotateX(8deg) scale(.98);
  transition: opacity .25s ease, transform .35s var(--au-ease);
}
.au-cmd.is-open .au-cmd__backdrop { opacity: 1; }
.au-cmd.is-open .au-cmd__panel { opacity: 1; transform: none; }
.au-cmd__search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--au-glass-border); }
.au-cmd__search svg { color: var(--au-violet); flex: none; }
.au-cmd__input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
                 font: inherit; font-size: 1.05rem; color: inherit; outline: none; }
/* the panel itself is the focus frame; the global field ring would draw a box inside it */
.au-cmd .au-cmd__search .au-cmd__input.au-cmd__input:focus { border: 0 !important; box-shadow: none !important; outline: none !important; }
.au-cmd__heading { padding: 12px 18px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                   color: var(--admin-muted, var(--au-ink-muted)); }
.au-cmd__list { list-style: none; margin: 0; padding: 4px 8px 8px; overflow-y: auto; }
.au-cmd__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px;
                cursor: pointer; transition: background .15s ease; }
.au-cmd__item.is-active { background: var(--au-grad-soft); box-shadow: inset 0 0 0 1px var(--au-glass-border-hi); }
.au-cmd__label { font-weight: 600; }
.au-cmd__sub { font-size: .8rem; color: var(--admin-muted, var(--au-ink-muted)); white-space: nowrap; }
.au-cmd__item--ask .au-cmd__label { background: var(--au-grad-text); -webkit-background-clip: text; background-clip: text;
                                     -webkit-text-fill-color: transparent; }
.au-cmd__empty { padding: 10px 12px; color: var(--admin-muted, var(--au-ink-muted)); font-size: .9rem; }
.au-cmd__foot { padding: 10px 18px; border-top: 1px solid var(--au-glass-border); font-size: .75rem; color: var(--admin-muted, var(--au-ink-muted)); }

@media (prefers-reduced-motion: reduce) {
  .au-holo { animation: none; }
  .au-cmd__panel, .au-cmd__backdrop { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print { .au-sky, .au-holo, .au-cmd { display: none !important; } }

/* ==========================================================================
   Sidebar and icons (dashboard)
   Each module has its own colour (--tone); icons sit on small tinted tiles; the active
   page gets a gradient pill and a glowing edge; the rail shows each module's name on hover.
   ========================================================================== */
.admin-body [data-module], .admin-body .menu-row { --tone: #7a66ee; --tone-2: #5468f0; }
.admin-body [data-module="dashboard"]  { --tone: #7a66ee; --tone-2: #5468f0; }
.admin-body [data-module="users"]      { --tone: #10b981; --tone-2: #5cc8dc; }
.admin-body [data-module="erp"]        { --tone: #f59e0b; --tone-2: #f97316; }
.admin-body [data-module="cms"]        { --tone: #3b82f6; --tone-2: #6366f1; }
.admin-body [data-module="ecommerce"]  { --tone: #f97316; --tone-2: #c58bd8; }
.admin-body [data-module="messaging"]  { --tone: #22c55e; --tone-2: #14b8a6; }
.admin-body [data-module="settings"]   { --tone: #94a3b8; --tone-2: #64748b; }

/* ---- the rail ---------------------------------------------------------------------------------- */
.admin-body .icon-sidebar {
  background: color-mix(in srgb, var(--admin-card) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
          backdrop-filter: blur(18px) saturate(1.5);
  border-inline-end-color: var(--au-glass-border) !important;
  gap: 4px;
}
.admin-body .rail-nav { display: grid; gap: 8px; }
.admin-body .rail-link { transition: background .2s ease, color .2s ease, transform .25s var(--au-ease), box-shadow .25s var(--au-ease) !important; }
.admin-body .rail-link svg { width: 22px; height: 22px; transition: transform .3s var(--au-ease); }
.admin-body .rail-link[data-module]:hover {
  color: var(--tone) !important;
  background: color-mix(in srgb, var(--tone) 14%, transparent) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px var(--tone);
}
.admin-body .rail-link[data-module]:hover svg { transform: scale(1.08); }
.admin-body .rail-link[data-module].active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tone), var(--tone-2)) !important;
  box-shadow: 0 12px 26px -10px var(--tone), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.admin-body .rail-link[data-module].active::before {
  /* glowing indicator on the edge facing the content */
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--tone);
  box-shadow: 0 0 12px var(--tone);
}
:root[dir="rtl"] .admin-body .rail-link[data-module].active::before { border-radius: 4px 0 0 4px; }
/* name on hover (localized: it comes from the module label) */
.admin-body .rail-link[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  inset-inline-start: calc(100% + 14px);
  top: 50%;
  translate: -6px -50%;
  padding: 6px 10px;
  border-radius: 9px;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 650;
  color: #fff;
  background: rgba(14, 16, 36, .92);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, translate .25s var(--au-ease);
  z-index: 60;
}
:root[dir="rtl"] .admin-body .rail-link[data-tip]::after { translate: 6px -50%; }
.admin-body .rail-link[data-tip]:hover::after,
.admin-body .rail-link[data-tip]:focus-visible::after { opacity: 1; translate: 0 -50%; }
@media (hover: none) { .admin-body .rail-link[data-tip]::after { display: none; } }

/* ---- the module sidebar ------------------------------------------------------------------------ */
.admin-body .expanded-card {
  background: var(--au-glass) !important;
  border: 1px solid var(--au-glass-border) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--au-shadow);
}
.admin-body .module-title-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--tone), var(--tone-2)) !important;
  box-shadow: 0 10px 22px -10px var(--tone), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.admin-body .module-title-icon svg { width: 19px; height: 19px; }

.admin-body .menu-list { display: grid; gap: 3px; }
.admin-body .menu-row {
  min-height: 42px;
  padding-block: 6px;
  gap: 11px;
  font-weight: 600;
  color: var(--admin-muted);
  transition: background-color .2s ease, color .2s ease, transform .25s var(--au-ease), box-shadow .25s ease !important;
}
/* labels wrap to a second line instead of being cut off ("ERP overv…") */
.admin-body .menu-row span:not(.badge):not(.erp-arrow) { white-space: normal; text-overflow: clip; line-height: 1.25; overflow-wrap: anywhere; }
.admin-body .menu-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-style: normal;
  color: var(--admin-muted);
  background: color-mix(in srgb, var(--admin-text) 5%, transparent);
  transition: background .2s ease, color .2s ease, transform .3s var(--au-ease), box-shadow .25s ease;
}
.admin-body .menu-ico svg { width: 17px; height: 17px; }
.admin-body .menu-row:hover { color: var(--admin-text); background: color-mix(in srgb, var(--au-violet) 7%, transparent) !important; }
.admin-body .menu-row:hover .menu-ico { color: var(--au-violet); background: color-mix(in srgb, var(--au-violet) 14%, transparent); transform: rotate(-6deg) scale(1.06); }
.admin-body .menu-row.active {
  color: var(--admin-text) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--au-violet) 18%, transparent), color-mix(in srgb, var(--au-blue) 6%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--au-violet) 28%, transparent);
}
:root[dir="rtl"] .admin-body .menu-row.active {
  background: linear-gradient(-90deg, color-mix(in srgb, var(--au-violet) 18%, transparent), color-mix(in srgb, var(--au-blue) 6%, transparent)) !important;
}
.admin-body .menu-row.active .menu-ico {
  color: #fff;
  background: var(--au-grad);
  box-shadow: 0 8px 18px -8px rgba(98, 92, 228, .9);
}
.admin-body .menu-row.active::before {
  background: var(--au-grad) !important;
  box-shadow: 0 0 12px rgba(122, 102, 238, .8);
  width: 3px;
}
/* collapsed sidebar: only the tiles remain */
.admin-body .admin-layout.sidebar-collapsed .menu-ico { margin: 0; }

/* ---- icons everywhere else get the same depth ------------------------------------------------- */
.admin-body .stat-icon,
.admin-body .module-card-head .module-icon,
.admin-body .home-tile__icon {
  border-radius: 12px;
  box-shadow: 0 10px 22px -12px currentColor, inset 0 1px 0 rgba(255, 255, 255, .3);
}
.admin-body .card-icon svg, .admin-body .stat-icon svg { stroke-width: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .admin-body .menu-row:hover .menu-ico, .admin-body .rail-link[data-module]:hover svg { transform: none; }
}