/* ==========================================================================
   AIQuorix — theme layer  (v2, conservative)
   --------------------------------------------------------------------------
   Loaded AFTER app.css and animations.css. Changes how the site LOOKS.
   It deliberately does not touch anything that decides how the site is
   LAID OUT — that was the mistake in v1 and it broke alignment everywhere.

   Three rules this file now keeps to:

   1. Never change the root font-size. Bootstrap's whole spacing scale
      (mb-3, py-5, gap-2, g-4) is in rem. Move the root and every margin on
      every page moves with it.
   2. Never change control padding or heights. A button that is 2px shorter
      than the input beside it is a broken form on 128 pages.
   3. Never change z-index or position on page elements. The backdrop sits
      behind the body itself, so nothing on the page has to be re-stacked.

   Load order in partials/head.php:
       app.css  →  animations.css  →  theme.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- tokens */
:root {
  --aqx-bg:        #080c15;
  --aqx-bg-2:      #0e1424;
  --aqx-card:      #111828;
  --aqx-card-2:    #17203a;
  --aqx-border:    #1b2440;
  --aqx-border-2:  #2b3860;
  --aqx-text:      #e6eaf4;
  --aqx-muted:     #8b94ad;
  --aqx-dim:       #5e6b85;
  --aqx-primary:   #4f7cff;
  --aqx-primary-2: #6a8dff;
  --aqx-accent:    #22d3ae;
  --aqx-danger:    #ff5d6c;
  --aqx-warning:   #ffc555;
  --aqx-radius:    16px;

  /* Cards sit over a moving scene, so they must be near-solid. Glass that
     lets a bright animation through is not glass, it is noise. */
  --aqx-glass:     rgba(15, 21, 36, .94);
  --aqx-shadow:    0 22px 52px rgba(0, 0, 0, .45);
  --aqx-ease:      cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ typography */
/* NOTE: no font-size here. Only the family changes. */
html { background: var(--aqx-bg); }
body {
  background: transparent;          /* lets the fixed canvas show through */
  color: var(--aqx-text);
  font-family: "Manrope", "Inter Fallback", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.brand-logo, .display-1, .display-2, .display-3, .display-4, .aqx-sg {
  font-family: "Space Grotesk", "Manrope", system-ui, sans-serif;
  letter-spacing: -.028em;
}

.mono, code, kbd, .font-monospace {
  font-family: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}

.small-caps { letter-spacing: .15em; color: var(--aqx-dim); }

.aqx-grad, .text-gradient-animated {
  background: linear-gradient(96deg, var(--aqx-primary-2), var(--aqx-accent) 55%, var(--aqx-warning));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aqxHue 8s ease-in-out infinite;
}
@keyframes aqxHue { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ------------------------------------------------------- the 3D backdrop */
/* z-index -1 puts it behind the body's own content without touching a
   single element on the page. body is transparent, html carries the colour. */
#aqx-gl {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* The balance that matters: the shape must be readable AS a shape, and the
     text must never fight it. Shape comes from low blur; safety comes from
     low opacity — not the other way round. A sharp faint object reads better
     than a bright blurry one, and costs the text nothing. */
  /* Bright and barely blurred — it can be, now that theme.js moves the object
     out into the right-hand margin instead of parking it under the text.
     Legibility is bought by POSITION, not by dimming. */
  filter: blur(1.6px) saturate(1.35) brightness(1.04); opacity: .92;
  transition: opacity .5s ease;
}
#aqx-tint {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* The veil now protects only the reading column — roughly the middle
     55% — and lets the right margin, where the object actually lives, stay
     completely clear. That is the whole trick: full brightness where there
     is no text, full protection where there is. */
  background:
    linear-gradient(90deg,
      rgba(7,10,18,.55) 0%,
      rgba(7,10,18,.86) 16%,
      rgba(7,10,18,.88) 56%,
      rgba(7,10,18,.30) 74%,
      transparent 86%);
}
#aqx-rail {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 2000;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--aqx-primary), var(--aqx-accent));
}

/* --------------------------------------------------------------- surface */
/* Colour, border and shadow only. No padding, no radius on layout wrappers. */
.card, .stat-card, .dropdown-menu, .aqxnav-menu, .modal-content, .offcanvas {
  background: var(--aqx-glass);
  backdrop-filter: blur(16px);
  border-color: var(--aqx-border);
  border-radius: var(--aqx-radius);
}
.card { transition: border-color .3s, box-shadow .3s, transform .3s var(--aqx-ease); }
.card:hover { border-color: var(--aqx-border-2); }

/* Only true tiles lift. A tall form card that jumps while you type in it is
   irritating, not delightful — so the lift is limited to small grid cells. */
.col-lg-3 > .card:hover, .col-lg-4 > .card:hover,
.col-md-4 > .card:hover, .col-sm-6 > .card:hover,
.stat-card:hover, .card.aqx-tile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}

.card-header, .card-footer { background: transparent; border-color: var(--aqx-border); }
hr { border-color: var(--aqx-border); opacity: 1; }

/* --------------------------------------------------------------- buttons */
/* Radius, colour and hover only — never padding or font-size, so every
   button keeps the exact height it has today. */
.btn { border-radius: 11px; transition: transform .26s cubic-bezier(.2,.9,.3,1.2), box-shadow .26s, border-color .26s, background .26s; }
.btn-lg { border-radius: 13px; }
.btn-sm { border-radius: 9px; }

.btn-primary { box-shadow: 0 8px 22px rgba(79,124,255,.24); }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(79,124,255,.4); }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(34,211,174,.3); }
.btn-ghost:hover, .btn-outline-secondary:hover, .btn-outline-light:hover {
  transform: translateY(-2px); border-color: var(--aqx-primary-2); color: #fff;
}
.btn:disabled, .btn.disabled { transform: none !important; box-shadow: none !important; }

/* ----------------------------------------------------------------- forms */
/* Colour and focus ring only. Padding untouched, so nothing shifts. */
.form-control, .form-select {
  background: rgba(11,15,25,.7);
  border-color: var(--aqx-border-2);
  border-radius: 11px;
  color: var(--aqx-text);
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.form-control:focus, .form-select:focus {
  background: rgba(11,15,25,.92);
  border-color: var(--aqx-primary);
  box-shadow: 0 0 0 3px rgba(79,124,255,.16);
  color: var(--aqx-text);
}
.form-control::placeholder { color: var(--aqx-dim); }
.form-label { color: var(--aqx-muted); }
.form-check-input { background-color: rgba(11,15,25,.8); border-color: var(--aqx-border-2); }
.form-check-input:checked { background-color: var(--aqx-primary); border-color: var(--aqx-primary); }
.input-group-text { background: rgba(11,15,25,.7); border-color: var(--aqx-border-2); color: var(--aqx-muted); }

/* ---------------------------------------------------------------- tables */
.table {
  --bs-table-color: var(--aqx-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: #141c2e;
  --bs-table-hover-color: var(--aqx-text);
  --bs-table-hover-bg: rgba(79,124,255,.05);
}
.table > thead th {
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--aqx-dim); font-weight: 500; border-bottom-color: var(--aqx-border);
}
.table > tbody > tr { transition: background .2s; }

/* ---------------------------------------------------------------- badges */
.badge { border-radius: 999px; }
.bg-success { background: rgba(34,211,174,.15) !important; color: var(--aqx-accent) !important; }
.bg-warning { background: rgba(255,197,85,.15) !important; color: var(--aqx-warning) !important; }
.bg-danger  { background: rgba(255,93,108,.15) !important; color: var(--aqx-danger) !important; }
.bg-primary { background: rgba(79,124,255,.17) !important; color: var(--aqx-primary-2) !important; }

/* ---------------------------------------------------------------- alerts */
.alert { border-radius: 13px; background: var(--aqx-glass); backdrop-filter: blur(12px); }
.alert-success { border-color: rgba(34,211,174,.3); color: #8ff0da; }
.alert-warning { border-color: rgba(255,197,85,.3); color: #f4d79a; }
.alert-danger  { border-color: rgba(255,93,108,.3); color: #ffb3b3; }
.alert-info    { border-color: rgba(79,124,255,.3);  color: #b9c9ff; }

/* ---------------------------------------------------------------- navbar */
.navbar-aqx {
  background: rgba(8,12,21,.66);
  backdrop-filter: blur(16px);
  transition: background .3s, border-color .3s;
}
.navbar-aqx.aqx-stuck { background: rgba(8,12,21,.94); border-bottom-color: var(--aqx-border); }

/* --------------------------------------------------- dashboard / sidebar */
.sidebar { background: rgba(14,20,36,.9); backdrop-filter: blur(16px); border-right-color: var(--aqx-border); }
.dash-topbar { background: rgba(8,12,21,.9); backdrop-filter: blur(14px); border-bottom-color: var(--aqx-border); }

/* ---------------------------------------------------------------- motion */
/* Added by theme.js, and always removed again — see the safety net there.
   Nothing on the page depends on JavaScript to become visible. */
.aqx-rv { opacity: 0; transform: translateY(24px); }
.aqx-rv.aqx-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--aqx-ease), transform .7s var(--aqx-ease);
}
.aqx-kin { display: inline-block; overflow: hidden; vertical-align: bottom; }
.aqx-kin > i { display: inline-block; font-style: normal; transform: translateY(108%); opacity: 0;
               transition: transform .9s var(--aqx-ease), opacity .9s; }
.aqx-kin.aqx-in > i { transform: none; opacity: 1; }

/* ------------------------------------------------------------------ misc */
::selection { background: rgba(79,124,255,.35); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--aqx-bg); }
::-webkit-scrollbar-thumb { background: #1e2942; border-radius: 999px; border: 3px solid var(--aqx-bg); }
::-webkit-scrollbar-thumb:hover { background: #2b3860; }

.list-group-item { background: transparent; border-color: var(--aqx-border); color: var(--aqx-text); }
.nav-tabs { border-bottom-color: var(--aqx-border); }
.nav-tabs .nav-link { color: var(--aqx-muted); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--aqx-text); background: transparent; border-bottom-color: var(--aqx-primary); }
.progress { background: #1a2340; }
.progress-bar { background: linear-gradient(90deg, var(--aqx-primary), var(--aqx-accent)); }
.pagination .page-link { background: transparent; border-color: var(--aqx-border); color: var(--aqx-muted); }
.pagination .page-item.active .page-link { background: rgba(79,124,255,.16); border-color: var(--aqx-primary); color: var(--aqx-text); }

/* footer, wherever it lives, sits on solid ground so nothing shows under it */
footer, .site-footer { background: rgba(6,9,17,.92); border-top: 1px solid var(--aqx-border); }

.aqx-solid { background: var(--aqx-card) !important; backdrop-filter: none !important; }

@media (max-width: 991px) {
  #aqx-gl, #aqx-tint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aqx-rv { opacity: 1 !important; transform: none !important; }
  .aqx-kin > i { opacity: 1 !important; transform: none !important; }
  #aqx-gl, #aqx-tint { display: none; }
}

/* ==========================================================================
   Home page only — the classes the new site/home.php uses.
   Nothing here can affect any other page: every selector starts with aqx-.
   ========================================================================== */
.hero-pills { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.aqx-live-pill { display: inline-flex; align-items: center; gap: .55rem; }
.aqx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aqx-accent); animation: aqxDot 2.4s ease-in-out infinite; }
@keyframes aqxDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.aqx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; max-width: 430px; }
.aqx-tile { border: 1px solid var(--aqx-border); border-radius: 12px; background: rgba(17,23,40,.72);
            backdrop-filter: blur(12px); padding: .8rem .9rem; }
.aqx-tile-n { font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.aqx-tile-c { font-size: .76rem; color: var(--aqx-dim); margin-top: .1rem; }

.aqx-stack { position: relative; height: 470px; }
.aqx-stack > * { position: absolute; }
.aqx-panel { border: 1px solid var(--aqx-border-2); border-radius: 16px; background: rgba(15,21,36,.94);
             backdrop-filter: blur(14px); box-shadow: 0 24px 54px rgba(0,0,0,.5); overflow: hidden; }
.aqx-panel-hd  { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem;
                 border-bottom: 1px solid var(--aqx-border); font-size: .86rem; }
.aqx-panel-row { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem;
                 border-bottom: 1px solid #141c2e; font-size: .86rem; }
.aqx-panel-row:last-child { border-bottom: 0; }
.aqx-panel-body { padding: 1.1rem 1rem; }
.aqx-big  { font-family: "Space Grotesk", sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.aqx-sub  { font-size: .8rem; color: var(--aqx-muted); margin-top: .25rem; }
.aqx-key  { font-size: .8rem; color: #c3cbdd; padding: .55rem .7rem; border: 1px solid var(--aqx-border-2);
            border-radius: 9px; background: rgba(11,15,25,.8); }
.aqx-toast-t { font-size: .84rem; font-weight: 600; }
.aqx-toast-s { font-size: .74rem; color: var(--aqx-dim); }

.aqx-panel-main  { width: 340px; top: 20px;  left: 36px; }
.aqx-panel-toast { width: 262px; top: 0;     right: 0; padding: .8rem .95rem; display: flex; gap: .7rem; align-items: flex-start; }
.aqx-panel-dl    { width: 250px; top: 252px; right: -8px; padding: .85rem .95rem; }
.aqx-panel-pause { width: 226px; bottom: 4px; left: 0; padding: .8rem .95rem; display: flex; gap: .7rem; align-items: center; }

.aqx-switch { margin-left: auto; width: 32px; height: 18px; border-radius: 999px; background: #223056; position: relative; flex-shrink: 0; }
.aqx-switch i { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--aqx-warning); }

.aqx-float { animation: aqxFloat 7s ease-in-out infinite; }
@keyframes aqxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

.aqx-steps { display: flex; flex-direction: column; }
.aqx-step  { display: flex; gap: .9rem; padding: .55rem 0; }
.aqx-step b { font-family: "Space Grotesk", sans-serif; color: var(--aqx-primary-2); font-weight: 600; }
.aqx-step span { color: #c3cbdd; line-height: 1.62; }

.aqx-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.aqx-best { border-color: var(--aqx-primary); background: linear-gradient(180deg, rgba(79,124,255,.14), rgba(17,24,40,.86) 62%); }

@media (max-width: 991px) {
  .aqx-stack { height: auto; display: grid; gap: 1rem; margin-top: 2rem; }
  .aqx-stack > * { position: static !important; width: 100% !important; }
  .aqx-float { animation: none; }
  .aqx-tiles { max-width: none; }
}

/* icon motion, shared by the panels and the feature tiles */
@keyframes aqxKey  { 0%,34% { transform: rotate(0); } 58%,84% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes aqxDl   { 0%,14% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 58%,100% { transform: translateY(1px); opacity: 1; } }
@keyframes aqxBeat { from { stroke-dashoffset: 92; } to { stroke-dashoffset: -92; } }
@keyframes aqxBell { 0%,60%,100% { transform: rotate(0); } 65% { transform: rotate(10deg); } 71% { transform: rotate(-8deg); } 78% { transform: rotate(5deg); } 85% { transform: rotate(0); } }
@keyframes aqxSpin { 0%,20% { transform: rotate(0); } 74%,100% { transform: rotate(360deg); } }
@keyframes aqxCoin { 0% { transform: translateX(-5px); opacity: 0; } 24% { opacity: 1; } 72% { transform: translateX(5px); opacity: 1; } 88%,100% { transform: translateX(5px); opacity: 0; } }
@keyframes aqxTyp  { 0%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes aqxChk  { 0%,12% { stroke-dashoffset: 26; } 48%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } }
@keyframes aqxRng  { 0%,6%  { stroke-dashoffset: 63; } 42%,94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 63; } }

.aqx-key-i { transform-origin: 8px 12px; animation: aqxKey 5s cubic-bezier(.6,0,.3,1) infinite; }
.aqx-dl    { animation: aqxDl 3s cubic-bezier(.3,.7,.3,1) infinite; }
.aqx-beat  { stroke-dasharray: 46 46; animation: aqxBeat 2.2s linear infinite; }
.aqx-bell  { transform-origin: 12px 4px; animation: aqxBell 5s ease-in-out infinite; }
.aqx-spin  { transform-origin: 12px 12px; animation: aqxSpin 4.5s cubic-bezier(.5,0,.3,1) infinite; }
.aqx-coin  { animation: aqxCoin 3.4s cubic-bezier(.4,.1,.3,1) infinite; }
.aqx-t1 { animation: aqxTyp 1.4s ease-in-out infinite; }
.aqx-t2 { animation: aqxTyp 1.4s ease-in-out .18s infinite; }
.aqx-t3 { animation: aqxTyp 1.4s ease-in-out .36s infinite; }
.aqx-chk  { stroke-dasharray: 26; animation: aqxChk 3.6s ease-in-out infinite; }
.aqx-ring { stroke-dasharray: 63; animation: aqxRng 3.6s ease-in-out infinite; }

/* ==========================================================================
   Dashboards — customer overview and admin "Today"
   --------------------------------------------------------------------------
   These classes exist only on the two dashboard views. Nothing here leaks
   onto any other page, and none of it changes a control's height.
   ========================================================================== */

/* A label that is a label: small, wide, quiet. */
.aqx-track { letter-spacing: .14em; color: var(--aqx-muted); font-weight: 600; }

/* The one number the page is about. Tabular figures so a countdown does not
   jiggle as it goes 10 → 9. */
.aqx-bignum { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.aqx-bignum > span {
  font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.aqx-bignum > small { color: var(--aqx-muted); font-size: .9rem; }

/* Status panel. Tone is carried by a left edge and a wash, never by the
   text colour alone — colour-blind readers get the position too. */
.aqx-status { position: relative; overflow: hidden; }
.aqx-status::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--aqx-accent);
}
.aqx-status::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 0% 0%, rgba(34,211,174,.10), transparent 60%);
}
.aqx-status--ok   .aqx-bignum > span { color: var(--aqx-accent); }
.aqx-status--warn::before { background: var(--aqx-warning); }
.aqx-status--warn::after  { background: radial-gradient(80% 120% at 0% 0%, rgba(255,197,85,.12), transparent 60%); }
.aqx-status--warn .aqx-bignum > span { color: var(--aqx-warning); }
.aqx-status--crit::before { background: var(--aqx-danger); }
.aqx-status--crit::after  { background: radial-gradient(80% 120% at 0% 0%, rgba(255,93,108,.14), transparent 60%); }
.aqx-status--crit .aqx-bignum > span { color: var(--aqx-danger); }
.aqx-status--none::before { background: var(--aqx-border-2); }
.aqx-status--none::after  { background: none; }
.aqx-status--none .aqx-bignum > span { color: var(--aqx-muted); }

/* A live dot. It only means one thing — something checked in recently. */
.aqx-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--aqx-accent);
  box-shadow: 0 0 0 0 rgba(34,211,174,.55); animation: aqxPulse 2.4s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes aqxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,174,.5); }
  70%  { box-shadow: 0 0 0 11px rgba(34,211,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,174,0); }
}

/* The small figures. Two by two on the phone, four across on a laptop. */
.aqx-mini {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.aqx-mini--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575.98px) { .aqx-mini--6 { grid-template-columns: repeat(2, 1fr); } }
.aqx-mini-cell {
  background: rgba(255,255,255,.028); border: 1px solid var(--aqx-border);
  border-radius: 13px; padding: .8rem .9rem;
  transition: border-color .3s, background .3s, transform .3s var(--aqx-ease);
}
.aqx-mini-cell:hover { border-color: var(--aqx-border-2); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.aqx-mini-cell i  { font-style: normal; display: block; font-size: 1rem; opacity: .8; margin-bottom: .3rem; }
.aqx-mini-cell b  { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.aqx-mini-cell span { display: block; font-size: .74rem; color: var(--aqx-muted); }

/* The animated glyphs, driven only when the cell is hovered or the card is
   in view — a page of permanently jiggling emoji is a page nobody can read. */
.aqx-ic-key  { animation: aqxKey  6s cubic-bezier(.6,0,.3,1) infinite; transform-origin: 50% 50%; }
.aqx-ic-bell { animation: aqxBell 6s ease-in-out infinite; transform-origin: 50% 20%; }
.aqx-ic-coin { animation: aqxCoin 4.2s cubic-bezier(.4,.1,.3,1) infinite; }
.aqx-ic-check{ color: var(--aqx-accent); animation: aqxPop .6s var(--aqx-ease) both; }
@keyframes aqxPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Licence rows and notification rows — separators without inline styles. */
.aqx-lic-row + .aqx-lic-row,
.aqx-note + .aqx-note { border-top: 1px solid var(--aqx-border); }
.aqx-note--new { background: rgba(79,124,255,.06); box-shadow: inset 2px 0 0 var(--aqx-primary); }

/* ------------------------------------------------------------ admin queue */
.aqx-queue { display: grid; gap: 10px; }
.aqx-q {
  position: relative; overflow: hidden;
  animation: aqxQIn .5s var(--aqx-ease) both;
  animation-delay: calc(var(--aqx-i, 0) * 70ms);
}
@keyframes aqxQIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aqx-q::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--aqx-border-2); }
.aqx-q-ic { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.aqx-q-title { font-weight: 700; }
.aqx-q--crit::before { background: var(--aqx-danger); }
.aqx-q--crit { background: rgba(255,93,108,.06); }
.aqx-q--crit .aqx-q-title { color: var(--aqx-danger); }
.aqx-q--crit .aqx-q-ic { animation: aqxShake 4s ease-in-out infinite; }
@keyframes aqxShake { 0%,84%,100% { transform: none; } 88% { transform: rotate(-9deg); } 92% { transform: rotate(9deg); } 96% { transform: rotate(-4deg); } }
.aqx-q--warn::before { background: var(--aqx-warning); }
.aqx-q--warn { background: rgba(255,197,85,.055); }
.aqx-q--warn .aqx-q-title { color: var(--aqx-warning); }
.aqx-q--info::before { background: var(--aqx-primary); }
.aqx-queue-clear { border-color: rgba(34,211,174,.35); background: rgba(34,211,174,.05); }

/* Revenue card — the split line under the big figure. */
.aqx-rev-split { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--aqx-border); }
.aqx-rev-split strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .aqx-pulse, .aqx-q, .aqx-ic-key, .aqx-ic-bell, .aqx-ic-coin,
  .aqx-ic-check, .aqx-q--crit .aqx-q-ic { animation: none !important; }
}

/* ==========================================================================
   The shell — sidebar and top bar for both dashboards
   --------------------------------------------------------------------------
   This is the part that was missing. The inner pages had changed but the
   frame around them had not, and the frame is most of what you see. These
   rules match the approved AIQuorix Dashboard / Admin designs exactly.
   ========================================================================== */

.aqx-side {
  background: rgba(12, 17, 30, .93);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--aqx-border);
  display: flex; flex-direction: column;
}

.aqx-side-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px 14px; font-size: 1.05rem; font-weight: 700;
  color: var(--aqx-text); text-decoration: none;
}
.aqx-side-brand svg { color: var(--aqx-primary-2); flex: 0 0 auto; }
.aqx-side-brand span { color: var(--aqx-primary-2); }
.aqx-side-tag {
  padding: 0 10px 12px; font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--aqx-dim); font-weight: 600;
}

/* The menu scrolls on its own so the log-out button never leaves the bottom
   of the screen — with 22 admin links it used to. */
.aqx-side-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 2px; }
.aqx-side-nav::-webkit-scrollbar { width: 6px; }
.aqx-side-nav::-webkit-scrollbar-thumb { background: var(--aqx-border-2); border-radius: 3px; }

.aqx-side-grp {
  padding: 15px 12px 6px; font-size: .63rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--aqx-dim); font-weight: 600;
}

.aqx-nav {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px; margin-bottom: 1px;
  color: var(--aqx-muted); text-decoration: none; font-size: .875rem;
  transition: background .22s, color .22s, transform .22s var(--aqx-ease);
}
.aqx-nav span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqx-nav:hover { background: rgba(79,124,255,.08); color: var(--aqx-text); transform: translateX(2px); }

/* Active is an edge, not a filled block. The block made every page look like
   the menu was the subject; the edge lets the page be the subject. */
.aqx-nav.on { background: rgba(79,124,255,.13); color: var(--aqx-text); font-weight: 600; }
.aqx-nav.on::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--aqx-primary);
}
.aqx-nav.on .aqx-nic { color: var(--aqx-primary-2); }

.aqx-nav-pill {
  margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--aqx-danger); color: #24070c;
}
.aqx-nic { flex: 0 0 auto; opacity: .92; }

.aqx-side-foot { padding-top: 12px; border-top: 1px solid var(--aqx-border); margin-top: 10px; }

/* Icons animate only for the item you are on, or the one under the cursor.
   Twenty-two icons all moving at once is a menu nobody can read. */
.aqx-nav.on .aqx-nic-key,  .aqx-nav:hover .aqx-nic-key  { transform-origin: 8px 12px; animation: aqxKey 5s cubic-bezier(.6,0,.3,1) infinite; }
.aqx-nav.on .aqx-nic-dl,   .aqx-nav:hover .aqx-nic-dl   { animation: aqxDl 3s cubic-bezier(.3,.7,.3,1) infinite; }
.aqx-nav.on .aqx-nic-bell, .aqx-nav:hover .aqx-nic-bell { transform-origin: 12px 4px; animation: aqxBell 5s ease-in-out infinite; }
.aqx-nav.on .aqx-nic-gear, .aqx-nav:hover .aqx-nic-gear { transform-origin: 12px 12px; animation: aqxSpin 4.5s cubic-bezier(.5,0,.3,1) infinite; }
.aqx-nav.on .aqx-nic-star, .aqx-nav:hover .aqx-nic-star { transform-origin: 12px 12px; animation: aqxStarP 3.6s ease-in-out infinite; }
.aqx-nav.on .aqx-nic-chk,  .aqx-nav:hover .aqx-nic-chk  { stroke-dasharray: 26; animation: aqxChk 3.6s ease-in-out infinite; }
.aqx-nav.on .aqx-nic-day,  .aqx-nav:hover .aqx-nic-day  { animation: aqxDayOn 4.5s ease-in-out infinite; }
.aqx-nav.on .aqx-nic-live, .aqx-nav:hover .aqx-nic-live { animation: aqxLive 2.2s ease-in-out infinite; }
.aqx-nav .aqx-nic-t1 { animation: aqxTyp 1.4s ease-in-out infinite; }
.aqx-nav .aqx-nic-t2 { animation: aqxTyp 1.4s ease-in-out .18s infinite; }
.aqx-nav .aqx-nic-t3 { animation: aqxTyp 1.4s ease-in-out .36s infinite; }
@keyframes aqxStarP { 0%,100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.16) rotate(-9deg); } }
@keyframes aqxDayOn { 0%,32% { opacity: .2; } 52%,82% { opacity: 1; } 100% { opacity: .2; } }
@keyframes aqxLive  { 0%,100% { opacity: 1; } 50% { opacity: .28; } }

/* ------------------------------------------------------------- the top bar */
.aqx-top {
  background: rgba(8,12,21,.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--aqx-border);
}
.aqx-top-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; color: var(--aqx-muted);
  border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.aqx-top-bell:hover { color: var(--aqx-text); background: rgba(255,255,255,.05); border-color: var(--aqx-border-2); }
.aqx-top-bell .aqx-nic-bell { transform-origin: 12px 4px; animation: aqxBell 6s ease-in-out infinite; }

.aqx-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 800; color: #061018; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--aqx-primary), var(--aqx-accent));
}
.aqx-ava--admin { background: linear-gradient(135deg, var(--aqx-primary), var(--aqx-warning)); }

@media (prefers-reduced-motion: reduce) {
  .aqx-nic, .aqx-nic * , .aqx-top-bell * { animation: none !important; }
}

/* ------------------------------------------------------------- the logo */
/* The real mark, inline, taking currentColor. It sits on the text baseline
   rather than above it, so the lockup reads as one thing. */
.aqx-brand, .aqx-side-brand, .aqx-logo {
  display: inline-flex; align-items: center; gap: 9px;
}
.aqx-logo-mark { flex: 0 0 auto; }
.aqx-brand .aqx-logo-mark, .aqx-side-brand .aqx-logo-mark {
  color: var(--aqx-text);
  transition: transform .5s var(--aqx-ease), color .3s;
}
.aqx-brand:hover .aqx-logo-mark, .aqx-side-brand:hover .aqx-logo-mark {
  color: var(--aqx-primary-2); transform: translateY(-2px) rotate(-4deg);
}

/* ==========================================================================
   The join between two sections
   --------------------------------------------------------------------------
   The gap between "Bound, not shared" and "Four steps" was dead space: too
   tall to ignore, with nothing in it. It is now a passage — a line the eye
   follows down while one 3D object leaves and the next arrives. It also
   gives the scroll somewhere to be during the handover, which is why the
   two scenes no longer look like they are fighting.
   ========================================================================== */
.aqx-join { display: flex; justify-content: center; padding: 6px 0 14px; }
.aqx-join-line {
  position: relative; display: block; width: 1px; height: 84px;
  background: linear-gradient(180deg, transparent, var(--aqx-border-2) 22%, var(--aqx-border-2) 78%, transparent);
}
.aqx-join-line > i {
  position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--aqx-accent);
  box-shadow: 0 0 12px rgba(34,211,174,.8);
  animation: aqxJoin 3.4s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes aqxJoin {
  0%       { top: 4%;  opacity: 0; }
  16%      { opacity: 1; }
  76%      { opacity: 1; }
  100%     { top: 96%; opacity: 0; }
}

/* ==========================================================================
   Plan cards on the home page
   --------------------------------------------------------------------------
   Three cards that each said a name, a number and "Choose" gave a reader no
   way to compare them — which is exactly the question they are there to
   answer. They now carry the daily rate and how much less it is than the
   shortest plan, both worked out from the prices themselves.
   ========================================================================== */
.aqx-plan { position: relative; display: flex; flex-direction: column; }

.aqx-plan-name {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--aqx-muted); font-weight: 600; margin-bottom: .5rem;
}
.aqx-plan-price { display: flex; align-items: baseline; gap: .35rem; line-height: 1; }
.aqx-plan-price > span {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.aqx-plan-price > small { font-size: .8rem; color: var(--aqx-muted); font-weight: 600; }

.aqx-plan-was { margin-top: .3rem; font-size: .78rem; color: var(--aqx-dim); }
.aqx-plan-was s  { opacity: .8; }
.aqx-plan-was em { font-style: normal; color: var(--aqx-warning); }

.aqx-plan-rate {
  margin-top: .55rem; font-size: .78rem; color: var(--aqx-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.aqx-plan-rate b {
  font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(34,211,174,.14); color: var(--aqx-accent);
}

.aqx-plan-list {
  list-style: none; padding: 0; margin: 1rem 0 1.2rem;
  font-size: .8rem; color: var(--aqx-muted);
}
.aqx-plan-list li { position: relative; padding-left: 1.1rem; margin-bottom: .35rem; }
.aqx-plan-list li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aqx-border-2);
}
.aqx-plan--best .aqx-plan-list li::before { background: var(--aqx-accent); }

/* The recommended card is raised and lit rather than merely badged, so the
   answer to "which one" is visible before any word is read. */
.aqx-plan--best {
  border-color: rgba(79,124,255,.5);
  box-shadow: 0 0 0 1px rgba(79,124,255,.22), 0 26px 60px rgba(79,124,255,.14);
}
.aqx-plan--best::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, rgba(79,124,255,.14), transparent 70%);
}
.aqx-plan-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(96deg, var(--aqx-primary), var(--aqx-accent));
  color: #06101c;
}

@media (prefers-reduced-motion: reduce) { .aqx-join-line > i { animation: none; top: 46%; } }

/* Home plan grid: three or four cards, no Bootstrap column maths to keep in
   sync with however many plans exist in the database. */
.aqx-plangrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
@media (max-width: 575.98px) { .aqx-plangrid { grid-template-columns: 1fr 1fr; } }
.aqx-plan-save {
  margin-top: .5rem; font-size: .72rem; font-weight: 700;
  padding: 4px 9px; border-radius: 8px; display: inline-block;
  background: rgba(34,211,174,.12); color: var(--aqx-accent);
}
.aqx-plan-rate { color: var(--aqx-accent); font-weight: 600; }

/* ==========================================================================
   AUTH — log in, create account, forgot password
   --------------------------------------------------------------------------
   Everything here is prefixed .aqxa- and only ever appears inside
   <body class="aqxa">. Nothing in this block can reach another page.

   (The last version of this had a class called .slide, which the tab pill
   was already using — the pill inherited "one third of a 300% rail" and the
   header fell apart. Hence the prefix on every single name below.)
   ========================================================================== */

body.aqxa { min-height: 100vh; }

/* The backdrop is theme.js's own scene. On this page the card sits on the
   right, so the object is dimmed and the middle is protected — the form has
   to win here, not the animation. */
body.aqxa #aqx-gl   { opacity: .45; filter: blur(3px) saturate(1.25); }
body.aqxa #aqx-tint {
  background:
    linear-gradient(90deg, transparent 0%, rgba(8,12,21,.5) 16%, rgba(8,12,21,.82) 42%, rgba(8,12,21,.86) 100%);
}

.aqxa-stage { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ top -- */
.aqxa-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 30px; }
.aqxa-brand { display: flex; align-items: center; gap: 10px; color: var(--aqx-text); text-decoration: none; }
.aqxa-brand b { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 700; }
.aqxa-brand b span { color: var(--aqx-primary-2); }
.aqxa-back { font-size: 13px; color: var(--aqx-muted); text-decoration: none; }
.aqxa-back:hover { color: var(--aqx-text); }

/* ------------------------------------------------------------------ grid -- */
/* The card column is a DEFINITE width, never `auto`. The rail inside the card
   is 300% wide by design, so an auto-sized column asks the card how wide it
   wants to be, gets three cards' worth, and crushes the left column to one
   word per line. Naming the width here is what keeps the two honest. */
.aqxa-mid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aqxa-cardw, 460px);
  transition: grid-template-columns .62s var(--aqx-ease);
  align-items: center; gap: 56px;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 6px 46px 44px;
}
.aqxa-mid[data-wide="1"] { --aqxa-cardw: 660px; }

@media (max-width: 1180px) {
  .aqxa-mid { grid-template-columns: 1fr; gap: 26px; padding: 6px 20px 36px; justify-items: center; }
  .aqxa-pitch { display: none; }
}

/* ----------------------------------------------------------------- pitch -- */
.aqxa-pitch { max-width: 560px; }

.aqxa-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aqx-accent); font-weight: 700; margin-bottom: 14px;
}
.aqxa-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aqx-accent);
  box-shadow: 0 0 0 0 rgba(34,211,174,.6); animation: aqxaBeat 2.6s ease-out infinite;
}
@keyframes aqxaBeat {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,174,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,211,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,174,0); }
}

.aqxa-pitch h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; line-height: 1.1;
  letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
}
.aqxa-pitch h2 em { font-style: normal; color: var(--aqx-primary-2); }
.aqxa-lead { color: var(--aqx-muted); font-size: 15px; margin: 0 0 26px; max-width: 46ch; }

.aqxa-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.aqxa-fig {
  border: 1px solid var(--aqx-border); border-radius: 13px; padding: 14px 16px;
  background: rgba(14,20,36,.72); backdrop-filter: blur(10px);
  transition: border-color .3s, transform .3s var(--aqx-ease);
}
.aqxa-fig:hover { border-color: var(--aqx-border-2); transform: translateY(-3px); }
.aqxa-fig b {
  display: block; font-family: "Space Grotesk", sans-serif;
  font-size: 26px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.aqxa-fig b.teal { color: var(--aqx-accent); }
.aqxa-fig span { display: block; font-size: 11.5px; color: var(--aqx-dim); margin-top: 3px; }

.aqxa-steps { display: grid; gap: 0; }
.aqxa-step { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--aqx-border); }
.aqxa-step:last-child { border-bottom: 1px solid var(--aqx-border); }
.aqxa-step b {
  flex: 0 0 auto; width: 22px; padding-top: 1px;
  font-family: "Space Grotesk", sans-serif; font-size: 12px; color: var(--aqx-primary-2);
}
.aqxa-step p { margin: 0; font-size: 13.5px; color: var(--aqx-muted); }
.aqxa-step p strong { color: var(--aqx-text); font-weight: 600; }

/* ------------------------------------------------------------------ card -- */
.aqxa-card {
  position: relative; width: 100%; min-width: 0; max-width: 660px;
  background: var(--aqx-glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--aqx-border);
  border-radius: var(--aqx-radius);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  padding: 30px 32px 26px;
}
.aqxa-card--solo { max-width: 460px; margin: 0 auto; }
@media (max-width: 560px) { .aqxa-card { padding: 24px 20px 20px; } }

.aqxa-card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aqx-accent), transparent);
  opacity: .6;
}

/* ------------------------------------------------------------------ tabs -- */
.aqxa-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; margin-bottom: 22px; border-radius: 12px;
  background: rgba(8,12,21,.6); border: 1px solid var(--aqx-border);
}
.aqxa-tabslide {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 9px; background: rgba(79,124,255,.16); border: 1px solid rgba(79,124,255,.4);
  transition: transform .62s var(--aqx-ease);
}
.aqxa-tabs[data-i="1"] .aqxa-tabslide { transform: translateX(100%); }
.aqxa-tabs a {
  position: relative; z-index: 1; text-align: center; text-decoration: none;
  padding: 9px 6px; border-radius: 9px;
  font-family: "Space Grotesk", sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--aqx-dim); transition: color .3s;
}
.aqxa-tabs a.on { color: var(--aqx-text); }
.aqxa-tabs a:hover { color: var(--aqx-text); text-decoration: none; }

/* ------------------------------------------------------------------ rail -- */
/* Three forms on one rail. Switching slides — at every moment of the movement
   both forms are on screen, one leaving and one arriving. That is the whole
   difference between a transition and a swap. */
.aqxa-well { position: relative; overflow: hidden; transition: height .62s var(--aqx-ease); }
.aqxa-track { display: flex; width: 300%; transform: translateX(0); transition: transform .62s var(--aqx-ease); }
.aqxa-panel { flex: 0 0 33.3333%; width: 33.3333%; align-self: flex-start; }
.aqxa-panel[aria-hidden="true"] { pointer-events: none; }

/* While a target height is being measured nothing may animate its own size. */
.aqxa-measuring, .aqxa-measuring * { transition: none !important; animation: none !important; }

/* ------------------------------------------------------------------ head -- */
.aqxa-head { text-align: center; margin-bottom: 22px; }
.aqxa-head h1 { font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.028em; }
.aqxa-head p  { color: var(--aqx-muted); font-size: 13.5px; margin: 0; }

/* ---------------------------------------------------------------- fields -- */
.aqxa-rows { display: grid; gap: 12px; }
.aqxa-rows--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .aqxa-rows--two { grid-template-columns: 1fr; } }
.aqxa-span2 { grid-column: 1 / -1; }

.aqxa-field { position: relative; }
.aqxa-input {
  width: 100%; padding: 20px 38px 9px 14px; border-radius: 11px;
  background: rgba(11,15,25,.78); border: 1px solid var(--aqx-border-2);
  color: var(--aqx-text); font: inherit; font-size: 14.5px;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.aqxa-input:focus {
  outline: none; border-color: var(--aqx-primary);
  background: rgba(11,15,25,.96); box-shadow: 0 0 0 3px rgba(79,124,255,.16);
}
.aqxa-field label {
  position: absolute; left: 14px; top: 15px; font-size: 14px; color: var(--aqx-dim);
  pointer-events: none; transform-origin: 0 0;
  transition: transform .3s var(--aqx-ease), color .22s;
}
.aqxa-input:focus + label,
.aqxa-input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(.72); }
.aqxa-input:focus + label { color: var(--aqx-primary-2); }

.aqxa-tick {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%) scale(.4); opacity: 0; color: var(--aqx-accent);
  transition: opacity .28s, transform .38s cubic-bezier(.3,1.5,.5,1);
}
.aqxa-field.is-ok .aqxa-input { border-color: rgba(34,211,174,.45); }
.aqxa-field.is-ok .aqxa-tick { opacity: 1; transform: translateY(-50%) scale(1); }

.aqxa-meter { display: flex; align-items: center; gap: 10px; }
.aqxa-bar { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--aqx-border-2); overflow: hidden; }
.aqxa-bar i { display: block; height: 100%; width: 0; background: var(--aqx-danger); transition: width .4s var(--aqx-ease), background .4s; }
.aqxa-meter span { font-size: 11.5px; color: var(--aqx-dim); white-space: nowrap; }

.aqxa-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 18px; font-size: 13px; }
.aqxa-row a { color: var(--aqx-primary-2); }
.aqxa-note { font-size: 12.5px; color: var(--aqx-dim); margin: 12px 0 16px; }

.aqxa-btn {
  width: 100%; padding: 13px; border: 0; border-radius: 11px;
  background: var(--aqx-primary); color: #fff; cursor: pointer;
  font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(79,124,255,.24);
  transition: transform .26s cubic-bezier(.2,.9,.3,1.2), box-shadow .26s;
}
.aqxa-form .aqxa-btn { margin-top: 18px; }
.aqxa-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(79,124,255,.4); }
.aqxa-btn:active { transform: translateY(0); }
.aqxa-btn[disabled] { opacity: .7; transform: none; box-shadow: none; cursor: default; }

.aqxa-terms { font-size: 11.5px; color: var(--aqx-dim); margin: 12px 0 0; }
.aqxa-divider { height: 1px; background: var(--aqx-border); margin: 22px 0 16px; }
.aqxa-foot { text-align: center; font-size: 13px; color: var(--aqx-muted); margin: 0; }

.aqxa-promise {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--aqx-border);
  font-size: 12px; color: var(--aqx-dim);
}
.aqxa-promise svg { flex: 0 0 auto; margin-top: 2px; color: var(--aqx-accent); opacity: .8; }

.aqxa-backlink { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; color: var(--aqx-dim); }
.aqxa-backlink:hover { color: var(--aqx-muted); text-decoration: none; }

.aqxa-top, .aqxa-pitch, .aqxa-card { animation: aqxaEnter .8s var(--aqx-ease) both; }
.aqxa-pitch { animation-delay: .1s; }
.aqxa-card  { animation-delay: .2s; }
@keyframes aqxaEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .aqxa-top, .aqxa-pitch, .aqxa-card, .aqxa-live { animation: none !important; }
  .aqxa-well, .aqxa-track, .aqxa-mid { transition: none !important; }
}

/* ==========================================================================
   AUTH — Chrome autofill
   --------------------------------------------------------------------------
   Two things the browser does that broke these fields, and neither is
   anything the page asked for:

   1. Chrome paints its own near-white background on an autofilled input.
      There is no property that turns it off — the only thing that works is
      an inset box-shadow thick enough to cover it, plus -webkit-text-fill-color
      for the text, because `color` is ignored on autofill too.

   2. An input filled by the password manager BEFORE the user touches the page
      can still match :placeholder-shown in Chrome. Our floating label reads
      that selector to decide whether to lift — so it stayed sitting on top of
      the dots. Hence .is-filled, set from JavaScript, which does not depend on
      that selector being honest.
   ========================================================================== */

.aqxa-input:-webkit-autofill,
.aqxa-input:-webkit-autofill:hover,
.aqxa-input:-webkit-autofill:focus,
.aqxa-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--aqx-text) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(11,15,25,.96) inset !important;
  box-shadow: 0 0 0 1000px rgba(11,15,25,.96) inset !important;
  caret-color: var(--aqx-text);
  border-color: var(--aqx-border-2);
  /* Chrome animates its own background in; an absurd delay means it never
     arrives. This is the standard way round it. */
  transition: background-color 100000s ease-in-out 0s;
}
.aqxa-input:-webkit-autofill:focus {
  border-color: var(--aqx-primary) !important;
  box-shadow: 0 0 0 1000px rgba(11,15,25,.96) inset, 0 0 0 3px rgba(79,124,255,.16) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(11,15,25,.96) inset, 0 0 0 3px rgba(79,124,255,.16) !important;
}

/* The label lifts for a value the browser put there, not only for one the
   customer typed. Three routes to the same state, so whichever the browser
   honours, the label is out of the way. */
.aqxa-input:-webkit-autofill + label,
.aqxa-field.is-filled label {
  transform: translateY(-9px) scale(.72);
}

/* Chrome puts its own reveal-password eye inside the box. Without room for
   it, it lands on the last characters of the value. */
.aqxa-input[type="password"] { padding-right: 46px; }