/* input(221,212): run-time error CSS1019: Unexpected token, found ' '
input(221,212): run-time error CSS1019: Unexpected token, found ' '
input(221,212): run-time error CSS1042: Expected function, found ' '
input(221,212): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' */
/* ============================================================================
   ARX Presale — Prototype Design System
   Bootstrap 5.3 native dark mode (data-bs-theme) + ARX brand (gold / deep navy).
   Brand rationale: ARX lives on Binance Smart Chain, so a refined gold accent
   ties to the BNB chain while reading as "premium / value".
   ponytail: prototype CDN fonts (Space Grotesk + Inter); production must
   self-host per UI-PERF-V3/V4.
   ============================================================================ */

/* ---------- Tokens: shared ---------- */
:root {
  --arx-gold: #E0A30A;
  --arx-gold-rgb: 224, 163, 10;
  --arx-gold-strong: #F3BA2F;
  --arx-teal: #14B8A6;
  --arx-purple: #7C5CFF;
  --arx-green: #0ECB81;          /* gains / confirmed */
  --arx-green-rgb: 14, 203, 129;
  --arx-red: #F6465D;            /* loss / failed */
  --arx-red-rgb: 246, 70, 93;
  --arx-amber: #F0A020;          /* pending / warning */

  --arx-radius: 0.9rem;
  --arx-radius-sm: 0.6rem;
  --arx-radius-lg: 1.4rem;
  --arx-shadow: 0 10px 30px -12px rgba(8, 12, 24, .35);
  --arx-shadow-lg: 0 30px 70px -25px rgba(8, 12, 24, .55);
  --arx-ring: 0 0 0 .2rem rgba(var(--arx-gold-rgb), .35);

  --arx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arx-font-display: "Space Grotesk", var(--arx-font-body);

  --arx-ease: cubic-bezier(.4, 0, .2, 1);
  --arx-dur: .24s;

  --bs-primary: var(--arx-gold);
  --bs-primary-rgb: var(--arx-gold-rgb);
  --bs-link-color-rgb: var(--arx-gold-rgb);
  --bs-border-radius: var(--arx-radius-sm);
  --bs-font-sans-serif: var(--arx-font-body);
}

/* ---------- Light theme ---------- */
[data-bs-theme="light"] {
  --arx-bg: #F6F8FC;
  --arx-bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(var(--arx-gold-rgb), .10), transparent 60%),
                 radial-gradient(900px 500px at -10% 10%, rgba(124, 92, 255, .08), transparent 55%);
  --arx-surface: #FFFFFF;
  --arx-surface-2: #F0F3FA;
  --arx-surface-3: #E8ECF6;
  --arx-border: #E3E8F1;
  --arx-border-strong: #D2D9E8;
  --arx-text: #0D1424;
  --arx-heading: #0A0F1C;
  --arx-muted: #5A647B;
  --arx-gold: #B8810A;            /* deeper gold for AA contrast on light */
  --arx-gold-rgb: 184, 129, 10;

  --bs-body-bg: var(--arx-bg);
  --bs-body-color: var(--arx-text);
  --bs-emphasis-color: var(--arx-heading);
  --bs-secondary-bg: var(--arx-surface-2);
  --bs-tertiary-bg: var(--arx-surface-3);
  --bs-border-color: var(--arx-border);
}

/* ---------- Dark theme (default) ---------- */
[data-bs-theme="dark"] {
  --arx-bg: #060A14;
  --arx-bg-grad: radial-gradient(1100px 600px at 82% -12%, rgba(var(--arx-gold-rgb), .14), transparent 58%),
                 radial-gradient(900px 520px at -8% 6%, rgba(124, 92, 255, .12), transparent 55%);
  --arx-surface: #0D1424;
  --arx-surface-2: #131C30;
  --arx-surface-3: #1B2740;
  --arx-border: rgba(255, 255, 255, .08);
  --arx-border-strong: rgba(255, 255, 255, .16);
  --arx-text: #E7ECF5;
  --arx-heading: #FFFFFF;
  --arx-muted: #AAB5CC;
  --arx-gold: #F3BA2F;
  --arx-gold-rgb: 243, 186, 47;

  --bs-body-bg: var(--arx-bg);
  --bs-body-color: var(--arx-text);
  --bs-emphasis-color: #fff;
  --bs-secondary-bg: var(--arx-surface-2);
  --bs-tertiary-bg: var(--arx-surface-3);
  --bs-border-color: var(--arx-border);
}

/* ---------- Base ---------- */
* { scrollbar-color: var(--arx-border-strong) transparent; }
body {
  font-family: var(--arx-font-body);
  background-color: var(--arx-bg);
  background-image: var(--arx-bg-grad);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--arx-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4, .navbar-brand {
  font-family: var(--arx-font-display);
  letter-spacing: -.02em;
  color: var(--arx-heading);
}
.lead, p { color: var(--arx-text); }
.text-muted, .text-secondary { color: var(--arx-muted) !important; }
a { color: var(--arx-gold); text-decoration: none; }
a:hover { color: var(--arx-gold-strong); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.eyebrow {
  font-family: var(--arx-font-display);
  text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 600;
  color: var(--arx-gold);
}
.fw-display { font-family: var(--arx-font-display); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: fixed; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 2000;
  background: var(--arx-gold); color: #08101f; padding: .6rem 1rem; border-radius: var(--arx-radius-sm);
  font-weight: 700; transition: inset-block-start var(--arx-dur) var(--arx-ease);
}
.skip-link:focus { inset-block-start: 1rem; color: #08101f; }
:focus-visible { outline: none; box-shadow: var(--arx-ring); border-radius: var(--arx-radius-sm); }
.btn:focus-visible, .form-control:focus-visible, .nav-link:focus-visible { box-shadow: var(--arx-ring) !important; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; border-radius: var(--arx-radius-sm); transition: transform var(--arx-dur) var(--arx-ease), box-shadow var(--arx-dur) var(--arx-ease), background-color var(--arx-dur); }
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.6rem; }
.btn-brand {
  --bs-btn-color: #0A0F1C; --bs-btn-bg: var(--arx-gold); --bs-btn-border-color: var(--arx-gold);
  --bs-btn-hover-color: #0A0F1C; --bs-btn-hover-bg: var(--arx-gold-strong); --bs-btn-hover-border-color: var(--arx-gold-strong);
  --bs-btn-active-bg: var(--arx-gold-strong); --bs-btn-active-border-color: var(--arx-gold-strong);
  --bs-btn-disabled-bg: var(--arx-gold); --bs-btn-disabled-border-color: var(--arx-gold); --bs-btn-disabled-color: #0A0F1C;
  font-weight: 700; box-shadow: 0 8px 24px -10px rgba(var(--arx-gold-rgb), .8);
}
.btn-brand:hover { box-shadow: 0 14px 30px -10px rgba(var(--arx-gold-rgb), .9); }
.btn-outline-brand {
  --bs-btn-color: var(--arx-gold); --bs-btn-border-color: rgba(var(--arx-gold-rgb), .5);
  --bs-btn-hover-color: #0A0F1C; --bs-btn-hover-bg: var(--arx-gold); --bs-btn-hover-border-color: var(--arx-gold);
  --bs-btn-active-bg: var(--arx-gold); --bs-btn-active-color: #0A0F1C;
}
.btn-ghost {
  --bs-btn-color: var(--arx-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--arx-border-strong);
  --bs-btn-hover-color: var(--arx-heading); --bs-btn-hover-bg: var(--arx-surface-2); --bs-btn-hover-border-color: var(--arx-border-strong);
}
.btn-check:focus-visible + .btn, .btn:focus-visible { box-shadow: var(--arx-ring); }

/* ---------- Navbar ---------- */
.navbar {
  background: color-mix(in srgb, var(--arx-bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--arx-border);
  transition: background var(--arx-dur) var(--arx-ease), box-shadow var(--arx-dur);
}
.navbar.is-scrolled { background: color-mix(in srgb, var(--arx-bg) 92%, transparent); box-shadow: var(--arx-shadow); }
.navbar-brand { font-weight: 700; font-size: 1.3rem; display: inline-flex; align-items: center; gap: .55rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: .55rem; color: var(--arx-gold, #f5b800); text-decoration: none; }
.brand-lockup img { display: block; width: 44px; height: 44px; object-fit: contain; }
.brand-lockup > span { font-family: var(--arx-font-display, inherit); font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.footer .brand-lockup img { width: 40px; height: 40px; }
.footer .brand-lockup > span { font-size: 1.25rem; }
.navbar-brand .brand-logo { height: 44px; width: auto; display: block; }
.footer .brand-logo { height: 40px; width: auto; display: block; }
#preloader .pl-mark img { width: 100%; height: 100%; object-fit: contain; }
.navbar .nav-link { color: var(--arx-muted); font-weight: 500; padding-inline: .9rem; border-radius: var(--arx-radius-sm); transition: color var(--arx-dur); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--arx-heading); }
.navbar .nav-link.active { position: relative; }
.icon-btn {
  width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--arx-border); background: var(--arx-surface); color: var(--arx-text);
  transition: transform var(--arx-dur) var(--arx-ease), border-color var(--arx-dur), color var(--arx-dur);
}
.icon-btn:hover { color: var(--arx-gold); border-color: rgba(var(--arx-gold-rgb), .5); }

/* ---------- Cards & surfaces ---------- */
.card {
  --bs-card-bg: var(--arx-surface); --bs-card-border-color: var(--arx-border);
  --bs-card-border-radius: var(--arx-radius); --bs-card-cap-bg: transparent;
  border-radius: var(--arx-radius); box-shadow: var(--arx-shadow);
}
.card-soft { background: var(--arx-surface); border: 1px solid var(--arx-border); border-radius: var(--arx-radius); padding: 1.5rem; }
.surface-2 { background: var(--arx-surface-2); }
.glass {
  background: color-mix(in srgb, var(--arx-surface) 70%, transparent);
  border: 1px solid var(--arx-border-strong); backdrop-filter: blur(16px);
}
.hover-lift { transition: transform var(--arx-dur) var(--arx-ease), box-shadow var(--arx-dur) var(--arx-ease); }
.hover-lift:hover { box-shadow: var(--arx-shadow-lg); }
/* motion review: hover lift transforms gated to fine-pointer + hover-capable devices (no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .btn-brand:hover { transform: translateY(-2px); }
  .icon-btn:hover { transform: translateY(-1px); }
  .hover-lift:hover { transform: translateY(-4px); }
}
.divider { height: 1px; background: var(--arx-border); border: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; }
.hero-grid {
  position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(var(--arx-border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--arx-border) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 35%, transparent 75%);
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: 0; pointer-events: none; }
.glow-text { text-shadow: 0 0 40px rgba(var(--arx-gold-rgb), .25); }
.badge-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 100px;
  background: var(--arx-surface-2); border: 1px solid var(--arx-border-strong); font-size: .85rem; color: var(--arx-text);
}
.badge-pill .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--arx-green); box-shadow: 0 0 0 0 rgba(var(--arx-green-rgb), .7); animation: pulse-dot 2s infinite; }

/* ---------- Presale widget ---------- */
.presale-card { background: var(--arx-surface); border: 1px solid var(--arx-border-strong); border-radius: var(--arx-radius-lg); box-shadow: var(--arx-shadow-lg); overflow: hidden; padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); }
.presale-card .card-glow { height: 4px; background: linear-gradient(90deg, var(--arx-gold), var(--arx-purple), var(--arx-teal)); }
.stat-tile { background: var(--arx-surface-2); border: 1px solid var(--arx-border); border-radius: var(--arx-radius-sm); padding: 1rem; }
.stat-tile .stat-value { font-family: var(--arx-font-display); font-size: 1.4rem; font-weight: 700; color: var(--arx-heading); }
.stat-tile .stat-label { font-size: .78rem; color: var(--arx-muted); text-transform: uppercase; letter-spacing: .08em; }

.progress-wrap { background: var(--arx-surface-2); border-radius: 100px; height: 1.4rem; padding: .22rem; border: 1px solid var(--arx-border); }
.progress-wrap .bar {
  height: 100%; border-radius: 100px; width: 100%;
  background: linear-gradient(90deg, var(--arx-gold), var(--arx-gold-strong));
  box-shadow: 0 0 16px rgba(var(--arx-gold-rgb), .6);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--arx-ease);
  position: relative; overflow: hidden;
}
.progress-wrap .bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%); animation: shimmer 2.4s infinite;
}

/* ---------- Countdown ---------- */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.countdown .unit { display: flex; flex-direction: column; align-items: center; gap: .15rem; background: var(--arx-surface-2); border: 1px solid var(--arx-border); border-radius: var(--arx-radius-sm); padding: .75rem .4rem; text-align: center; }
.countdown .unit [data-cd] { font-family: var(--arx-font-display); font-size: 1.6rem; line-height: 1; color: var(--arx-heading); font-variant-numeric: tabular-nums; }
.countdown .unit small { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--arx-muted); }

/* ---------- Countdown: "Coming Soon" state (no presale date configured yet) ----------
   Occupies the exact same slot as .countdown (same mb-4, same card position) so the widget
   keeps its shape whether or not a date has been scheduled; server swaps between the two
   automatically based on Model.StartTime/EndTime — see Home/Index.cshtml. */
.countdown-soon {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--arx-surface-2);
  border: 1px solid var(--arx-border);
  border-radius: var(--arx-radius-sm);
  padding: .85rem 1rem;
}
.countdown-soon::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(65% 90% at 50% 0%, rgba(var(--arx-gold-rgb), .14), transparent 70%);
  pointer-events: none;
}
.soon-badge {
  position: relative;
  margin-block-end: .5rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--arx-gold);
}
/* .badge-pill .dot (0,2,0) would otherwise beat a bare .dot-soon (0,1,0) and keep the green
   base color/keyframe — match its specificity so the gold "coming soon" styling actually wins. */
.soon-badge .dot-soon { background: var(--arx-gold); box-shadow: 0 0 0 0 rgba(var(--arx-gold-rgb), .7); animation: pulse-dot-soon 2s infinite; }
.countdown-soon-msg { position: relative; color: var(--arx-text); font-weight: 600; font-size: .85rem; line-height: 1.3; }
@keyframes pulse-dot-soon {
  0% { box-shadow: 0 0 0 0 rgba(var(--arx-gold-rgb), .6); }
  70% { box-shadow: 0 0 0 .5rem rgba(var(--arx-gold-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--arx-gold-rgb), 0); }
}

/* ---------- Badges / status ---------- */
.status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 100px; font-size: .78rem; font-weight: 600; border: 1px solid transparent; }
.status i { font-size: .9em; }
.status-confirmed { color: var(--arx-green); background: rgba(var(--arx-green-rgb), .12); border-color: rgba(var(--arx-green-rgb), .3); }
.status-pending   { color: var(--arx-amber); background: rgba(240, 160, 32, .12); border-color: rgba(240, 160, 32, .3); }
.status-failed    { color: var(--arx-red); background: rgba(var(--arx-red-rgb), .12); border-color: rgba(var(--arx-red-rgb), .3); }
.status-locked    { color: var(--arx-purple); background: rgba(124, 92, 255, .12); border-color: rgba(124, 92, 255, .3); }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 100px; background: var(--arx-surface-2); border: 1px solid var(--arx-border); font-size: .8rem; color: var(--arx-muted); text-decoration: none; }
a.chip:hover { color: var(--arx-text); border-color: var(--arx-gold); }
.chip-active { background: var(--arx-gold); border-color: var(--arx-gold); color: #0A0F1E; }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; font-weight: 700; font-size: .82rem; color: #0A0F1E; flex-shrink: 0; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background: var(--arx-surface); border: 1px solid var(--arx-border-strong); color: var(--arx-text);
  border-radius: var(--arx-radius-sm); padding: .7rem .9rem;
}
.form-control::placeholder { color: var(--arx-muted); opacity: .7; }
.form-control:focus, .form-select:focus { background: var(--arx-surface); color: var(--arx-text); border-color: var(--arx-gold); box-shadow: var(--arx-ring); }
.form-label { font-weight: 600; color: var(--arx-text); margin-block-end: .35rem; }
.form-label .req { color: var(--arx-red); margin-inline-start: .15rem; }
.form-text { color: var(--arx-muted); }
.input-icon { position: relative; }
.input-icon .form-control { padding-inline-start: 2.7rem; }
.input-icon > i { position: absolute; inset-block-start: 50%; inset-inline-start: .95rem; transform: translateY(-50%); color: var(--arx-muted); pointer-events: none; }
.input-suffix { position: absolute; inset-block-start: 50%; inset-inline-end: .9rem; transform: translateY(-50%); color: var(--arx-muted); font-weight: 600; }
.input-icon.has-toggle .form-control, .pw-only .form-control { padding-inline-end: 2.5rem; }
.pw-only { position: relative; }
.input-icon .pw-toggle, .pw-only .pw-toggle { position: absolute; inset-block-start: 50%; inset-inline-end: .75rem; transform: translateY(-50%); background: none; border: 0; padding: .25rem; color: var(--arx-muted); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }
.input-icon .pw-toggle:hover, .pw-only .pw-toggle:hover { color: var(--arx-text); }

/* password strength */
.pw-meter { height: 6px; border-radius: 100px; background: var(--arx-surface-3); overflow: hidden; margin-block-start: .5rem; }
.pw-meter > span { display: block; height: 100%; width: 0; border-radius: 100px; transition: width var(--arx-dur) var(--arx-ease), background-color var(--arx-dur); }
.pw-weak > span { width: 33%; background: var(--arx-red); }
.pw-medium > span { width: 66%; background: var(--arx-amber); }
.pw-strong > span { width: 100%; background: var(--arx-green); }

/* OTP */
.otp-group { display: flex; gap: .6rem; justify-content: center; }
.otp-group input {
  width: 3.2rem; height: 3.8rem; text-align: center; font-size: 1.5rem; font-family: var(--arx-font-display); font-weight: 700;
  background: var(--arx-surface); border: 1px solid var(--arx-border-strong); border-radius: var(--arx-radius-sm); color: var(--arx-heading);
}
.otp-group input:focus { border-color: var(--arx-gold); box-shadow: var(--arx-ring); outline: none; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--arx-text); --bs-table-border-color: var(--arx-border); margin: 0; }
.table thead th { color: var(--arx-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; border-block-end: 1px solid var(--arx-border); padding-block: .9rem; }
.table tbody td { padding-block: 1rem; vertical-align: middle; border-block-end: 1px solid var(--arx-border); }
.table-hover tbody tr { transition: background-color var(--arx-dur); }
.table-hover tbody tr:hover { background: var(--arx-surface-2); }
.addr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; color: var(--arx-text); }

/* ---------- Tabs (dashboard) ---------- */
.dash-tabs { display: flex; gap: .35rem; flex-wrap: wrap; background: var(--arx-surface); border: 1px solid var(--arx-border); border-radius: 100px; padding: .35rem; }
.dash-tabs .nav-link {
  border-radius: 100px; color: var(--arx-muted); font-weight: 600; padding: .55rem 1.1rem; display: inline-flex; align-items: center; gap: .45rem; border: 0;
  transition: color var(--arx-dur), background-color var(--arx-dur);
}
.dash-tabs .nav-link:hover { color: var(--arx-heading); }
.dash-tabs .nav-link.active { color: #0A0F1C; background: var(--arx-gold); }
.dash-tabs .nav-link .count { background: var(--arx-surface-2); color: var(--arx-muted); border-radius: 100px; padding: 0 .5rem; font-size: .72rem; }
.dash-tabs .nav-link.active .count { background: rgba(0,0,0,.18); color: #0A0F1C; }

/* ---------- Skeletons (L1) ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--arx-surface-2); border-radius: var(--arx-radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--arx-surface-3) 80%, #fff 6%), transparent); animation: shimmer 1.5s infinite; }
.sk-line { height: .8rem; border-radius: 100px; margin-block-end: .6rem; }
.sk-line.w-60 { width: 60%; } .sk-line.w-40 { width: 40%; } .sk-line.w-80 { width: 80%; }
.sk-block { height: 100px; border-radius: var(--arx-radius); }
.sk-circle { width: 48px; height: 48px; border-radius: 50%; }

/* ---------- Preloader (L7) ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: var(--arx-bg); transition: opacity .4s var(--arx-ease), visibility .4s;
}
#preloader.is-done { opacity: 0; visibility: hidden; }
#preloader .pl-mark { width: 96px; height: 96px; margin-inline: auto; animation: float 2.4s var(--arx-ease) infinite; }
#preloader .pl-bar { width: 160px; height: 4px; border-radius: 100px; background: var(--arx-surface-2); margin-block-start: 1.2rem; overflow: hidden; }
#preloader .pl-bar > span { display: block; height: 100%; width: 40%; border-radius: 100px; background: var(--arx-gold); animation: indeterminate 1.1s var(--arx-ease) infinite; }

/* ---------- Toasts (NF) ---------- */
.toast-container { z-index: 2200; }
.arx-toast { background: var(--arx-surface); border: 1px solid var(--arx-border-strong); border-radius: var(--arx-radius-sm); box-shadow: var(--arx-shadow-lg); color: var(--arx-text); }
.arx-toast .toast-accent { width: 4px; border-radius: 100px; }

/* ---------- Mobile bottom nav (D3) ---------- */
.bottom-nav {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1030;
  background: color-mix(in srgb, var(--arx-bg) 92%, transparent); backdrop-filter: blur(16px);
  border-block-start: 1px solid var(--arx-border); padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
  display: none; grid-auto-flow: column; justify-content: stretch;
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem 0; color: var(--arx-muted); font-size: .7rem; font-weight: 600; min-height: 2.75rem; border-radius: var(--arx-radius-sm); }
.bottom-nav a i { font-size: 1.25rem; }
.bottom-nav a.active { color: var(--arx-gold); }
@media (max-width: 768px) {
  .bottom-nav { display: grid; }
  body.has-bottom-nav { padding-block-end: 4.7rem; }
  body.has-bottom-nav #main { padding-block-start: 4.25rem; }
  .dash-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; border-radius: var(--arx-radius); scrollbar-width: none; }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Footer ---------- */
.footer { background: var(--arx-surface); border-block-start: 1px solid var(--arx-border); }
.footer a { color: var(--arx-muted); }
.footer a:hover { color: var(--arx-gold); }

/* ---------- Misc ---------- */
.text-gradient { background: linear-gradient(100deg, var(--arx-gold-strong), var(--arx-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gain { color: var(--arx-green); } .loss { color: var(--arx-red); }
.icon-tile { width: 3rem; height: 3rem; border-radius: var(--arx-radius-sm); display: inline-grid; place-items: center; background: rgba(var(--arx-gold-rgb), .12); color: var(--arx-gold); font-size: 1.3rem; }
.step-num { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--arx-gold); color: #0A0F1C; font-family: var(--arx-font-display); font-weight: 700; }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--arx-text); --bs-accordion-border-color: var(--arx-border); --bs-accordion-active-bg: var(--arx-surface-2); --bs-accordion-active-color: var(--arx-gold); --bs-accordion-btn-focus-box-shadow: var(--arx-ring); }
.accordion-button { font-weight: 600; background: var(--arx-surface); }
.accordion-button:not(.collapsed) { color: var(--arx-gold); background: var(--arx-surface-2); }
.empty-state { text-align: center; padding: clamp(2rem, 6vw, 4rem); }
.empty-state .es-art { width: 120px; height: 120px; margin-inline: auto; opacity: .9; }
.list-tick { list-style: none; padding: 0; margin: 0; }
.list-tick li { display: flex; gap: .6rem; align-items: flex-start; margin-block-end: .7rem; }
.list-tick li i { color: var(--arx-green); margin-block-start: .2rem; }
textarea.form-control { resize: none; }
.pagination {
  --bs-pagination-color: var(--arx-gold);
  --bs-pagination-bg: var(--arx-surface);
  --bs-pagination-border-color: var(--arx-border);
  --bs-pagination-hover-color: var(--arx-gold-strong);
  --bs-pagination-hover-bg: var(--arx-surface-2);
  --bs-pagination-hover-border-color: var(--arx-gold);
  --bs-pagination-focus-color: var(--arx-gold-strong);
  --bs-pagination-focus-bg: var(--arx-surface-2);
  --bs-pagination-focus-box-shadow: var(--arx-ring);
  --bs-pagination-active-color: #0A0F1C;
  --bs-pagination-active-bg: var(--arx-gold);
  --bs-pagination-active-border-color: var(--arx-gold);
  --bs-pagination-disabled-color: var(--arx-muted);
  --bs-pagination-disabled-bg: var(--arx-surface);
  --bs-pagination-disabled-border-color: var(--arx-border);
}

/* ---------- Animations ---------- */
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(var(--arx-green-rgb), .6); } 70% { box-shadow: 0 0 0 .5rem rgba(var(--arx-green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--arx-green-rgb), 0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes indeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Motion: reduced-motion override (M3) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .progress-wrap .bar::after, .badge-pill .dot, .soon-badge .dot-soon, #preloader .pl-mark { animation: none !important; }
}

/* ============================================================================
   Enhancement layer v2 — craft pass (impeccable · ui-ux-pro-max · design-taste)
   Additive only; appended last so equal-specificity rules win without new
   !important. Builds on the existing components (ponytail: enhance, don't rewrite).
   ============================================================================ */

/* no horizontal scroll — clip stray decorative overflow (sticky-safe, not hidden) */
html, body { overflow-x: clip; }

/* selection + custom scrollbar */
::selection { background: rgba(var(--arx-gold-rgb), .28); color: var(--arx-heading); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--arx-border-strong); border-radius: 100px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--arx-gold-rgb), .5); border: 3px solid transparent; background-clip: padding-box; }

/* fluid type + nicer line wrapping */
h1, h2, .display-1, .display-2, .display-3, .display-4 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.text-balance { text-wrap: balance; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.35rem); line-height: 1.04; }
.section h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.section-lead { max-width: 48ch; }

/* eyebrow — editorial leading rule (suppressed when centered) */
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; }
.eyebrow::before { content: ""; inline-size: 1.7rem; block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--arx-gold), transparent); }
.text-center .eyebrow::before, .eyebrow.mx-auto::before { display: none; }
.eyebrow.mx-auto, .eyebrow.text-center { display: flex; justify-content: center; }
/* step icon + overlapping number badge (Buy-in-N-steps) */
.step-icon { position: relative; display: inline-block; transition: transform var(--arx-dur) var(--arx-ease); }
.step-badge {
  position: absolute; inset-block-start: 0; inset-inline-end: 0; transform: translate(35%, -35%);
  min-inline-size: 1.4rem; block-size: 1.4rem; padding-inline: .32rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; background: var(--arx-gold); color: #0A0F1C;
  font-family: var(--arx-font-display); font-weight: 700; font-size: .82rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(var(--arx-gold-rgb), .45);
}
@media (hover: hover) and (pointer: fine) {
  .card-soft:hover .step-icon { transform: translateY(-3px) scale(1.04); }
}

/* buttons — minted, tactile */
.btn-brand {
  background-image: linear-gradient(180deg, var(--arx-gold-strong), var(--arx-gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px rgba(var(--arx-gold-rgb), .85);
}
.btn-brand:hover { background-image: linear-gradient(180deg, #ffd35a, var(--arx-gold-strong)); }
.btn-brand:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(8, 12, 24, .35); }

/* Full-screen, same-origin preview for the always-current Google Docs PDF export. */
.white-paper-modal .modal-content {
  background: #0c1010;
  color: var(--arx-text, #fff);
}
.white-paper-modal .modal-header {
  min-height: 76px;
  border-color: var(--arx-border, rgba(255,255,255,.08));
  background: linear-gradient(135deg, #101716, #0a0d0d);
}
.white-paper-modal__eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: var(--arx-gold, #d4af37);
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .2em;
}
.white-paper-modal .modal-body { overflow: hidden; }
.white-paper-language {
  display: grid;
  min-height: calc(100dvh - 76px);
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 50% 15%, rgba(var(--arx-gold-rgb), .13), transparent 38%),
    #0c1010;
}
.white-paper-language__card {
  width: min(100%, 42rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--arx-border, rgba(255,255,255,.1));
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
  text-align: center;
}
.white-paper-language__icon {
  display: inline-grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid rgba(var(--arx-gold-rgb), .45);
  border-radius: 50%;
  color: var(--arx-gold, #d4af37);
  font-size: 1.35rem;
  background: rgba(var(--arx-gold-rgb), .08);
}
.white-paper-language__eyebrow {
  margin-bottom: .45rem;
  color: var(--arx-gold, #d4af37);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .18em;
}
.white-paper-language__card h3 { margin-bottom: .5rem; font-size: clamp(1.55rem, 4vw, 2.15rem); }
.white-paper-language__card > p:last-of-type { margin-bottom: 1.5rem; color: var(--arx-muted, #9aa5a1); }
.white-paper-language__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.white-paper-language__option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .85rem;
  align-items: center;
  min-height: 6rem;
  padding: 1rem;
  border: 1px solid var(--arx-border, rgba(255,255,255,.1));
  border-radius: .9rem;
  color: var(--arx-text, #fff);
  text-align: start;
  text-decoration: none;
  background: rgba(255,255,255,.025);
  transition: border-color var(--arx-dur) var(--arx-ease), transform var(--arx-dur) var(--arx-ease), background-color var(--arx-dur) var(--arx-ease);
}
.white-paper-language__option:hover {
  border-color: rgba(var(--arx-gold-rgb), .65);
  color: var(--arx-text, #fff);
  background: rgba(var(--arx-gold-rgb), .08);
  transform: translateY(-2px);
}
.white-paper-language__option strong,
.white-paper-language__option small { display: block; }
.white-paper-language__option small { margin-top: .2rem; color: var(--arx-muted, #9aa5a1); font-size: .73rem; line-height: 1.35; }
.white-paper-language__code {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: .65rem;
  color: #0a0f0e;
  background: var(--arx-gold, #d4af37);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.white-paper-modal iframe {
  display: block;
  width: 100%;
  height: calc(100dvh - 76px);
  border: 0;
  background: #fff;
}
@media (max-width: 520px) {
  .white-paper-modal .modal-header { min-height: 68px; }
  .white-paper-modal__eyebrow { display: none; }
  .white-paper-language { min-height: calc(100dvh - 68px); padding: 1rem; }
  .white-paper-language__card { padding: 1.25rem; }
  .white-paper-language__options { grid-template-columns: 1fr; }
  .white-paper-language__option { min-height: 5.25rem; }
  .white-paper-modal iframe { height: calc(100dvh - 68px); }
}
.btn-outline-brand:hover { box-shadow: 0 10px 26px -12px rgba(var(--arx-gold-rgb), .55); }

/* nav active indicator */
.navbar .nav-link.active::after {
  content: ""; position: absolute; inset-block-end: .28rem; inset-inline-start: 50%;
  transform: translateX(-50%); inline-size: .34rem; block-size: .34rem; border-radius: 50%; background: var(--arx-gold);
}

/* cards — layered depth + gold-tinted hover */
.card-soft { box-shadow: var(--arx-shadow); transition: transform var(--arx-dur) var(--arx-ease), box-shadow var(--arx-dur) var(--arx-ease), border-color var(--arx-dur); }
.card-soft:hover { border-color: var(--arx-border-strong); }

/* premium gradient-hairline border + glow (hero widget + glow CTA cards) */
.presale-card, .card-soft.card-glow {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--arx-surface), var(--arx-surface)) padding-box,
    linear-gradient(135deg, rgba(var(--arx-gold-rgb), .55), rgba(124, 92, 255, .26) 45%, transparent 72%) border-box;
}
.presale-card { box-shadow: var(--arx-shadow-lg), 0 0 60px -30px rgba(var(--arx-gold-rgb), .5); }
.card-soft.card-glow { box-shadow: var(--arx-shadow), 0 30px 70px -40px rgba(var(--arx-gold-rgb), .3); }

/* stat tile — hairline gold accent */
.stat-tile { position: relative; overflow: hidden; }
.stat-tile::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: linear-gradient(90deg, rgba(var(--arx-gold-rgb), .85), transparent); }

/* hero — soft spotlight + slow grid drift */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 48% at 50% -8%, rgba(var(--arx-gold-rgb), .12), transparent 70%); }
/* motion review: grid-drift removed — animating background-position is non-GPU continuous repaint, ambient-only */

/* icon tile — gradient fill + inner ring */
.icon-tile { background: linear-gradient(160deg, rgba(var(--arx-gold-rgb), .2), rgba(var(--arx-gold-rgb), .05)); box-shadow: inset 0 0 0 1px rgba(var(--arx-gold-rgb), .25); }

/* refined glass chips + inset inputs */
.badge-pill { backdrop-filter: blur(8px); }
.form-control, .form-select { box-shadow: inset 0 1px 2px rgba(8, 12, 24, .16); }

/* prose link underlines */
main p a:not(.btn):not(.chip):not(.status) { text-decoration: underline; text-decoration-color: rgba(var(--arx-gold-rgb), .4); text-underline-offset: 3px; transition: text-decoration-color var(--arx-dur); }
main p a:not(.btn):not(.chip):not(.status):hover { text-decoration-color: var(--arx-gold); }

/* footer top hairline glow */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; block-size: 1px; background: linear-gradient(90deg, transparent, rgba(var(--arx-gold-rgb), .5), transparent); }

/* ponytail: global a11y baseline (appended, source-order-last so it overrides). Respect reduced-motion + always-visible keyboard focus ring. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:focus-visible {
  outline: 2px solid #F3BA2F;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auth shell: chrome-free, vertically-centered, crisp GPU entrance (emil) */
html:has(.auth-shell) { overflow: hidden; }
.auth-shell { height: 100dvh; overflow: hidden; }
.auth-shell #main { height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.auth-shell #main > * { margin-block: auto; } /* center when it fits; scroll from top when taller than viewport (no clipping) */
.auth-shell [data-aos] { opacity: 1; transform: none; }
@keyframes arx-auth-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* card stays hidden until the preloader finishes (arx.js adds #preloader.is-done), then enters */
.auth-shell .card-soft { opacity: 0; }
#preloader.is-done ~ #main .card-soft { animation: arx-auth-in 320ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: 120ms; }
#preloader.is-done ~ #main .col-lg-5:nth-of-type(2) .card-soft { animation-delay: 190ms; }
.auth-shell .btn:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .auth-shell .card-soft { opacity: 1; } #preloader.is-done ~ #main .card-soft { animation: none; } }

/* Register: trim section padding on short viewports so the compact form never needs scroll */
.auth-shell .auth-register { padding-block: clamp(0.75rem, 3vh, 2.5rem); }

/* ---------- Auth: "or" divider — thin hairlines, uppercase label ---------- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.5rem;
  color: var(--arx-muted);
  font-family: var(--arx-font-body);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  user-select: none;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--arx-border-strong);
}
.auth-divider span { white-space: nowrap; }

/* ---------- Auth: custom "Continue with Google" button ----------
   GIS's own rendered button can't be recolored/resized to spec and locale-follows the browser
   (it was rendering in Arabic) — so the visible button below is fully custom markup/CSS. The real
   Google button is still rendered via the exact same initialize()/renderButton()/callback as
   before (see Login.cshtml scripts), just painted fully transparent and stacked exactly on top
   via .google-btn-overlay, so every click/tap/keyboard-Enter is still a genuine, unmodified GIS
   interaction — only the paint layer changed, not the auth flow. */
.google-btn-frame {
  position: relative;
  width: 100%;
  height: 52px;
}
.google-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  color: #202124;
  font-family: var(--arx-font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.google-btn-icon { flex: 0 0 auto; display: block; }
.google-btn-frame:hover .google-btn {
  background: #F8F9FA;
  border-color: #C6C9CE;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .15), 0 4px 10px -4px rgba(60, 64, 67, .2);
}
.google-btn-frame:active .google-btn { transform: translateY(1px); }
/* :focus-within fires even when focus lands inside the (invisible) GIS iframe on top, so keyboard
   users still see the same gold focus ring used everywhere else in the app on the visible button. */
.google-btn-frame:focus-within .google-btn { box-shadow: var(--arx-ring); }
@media (prefers-reduced-motion: reduce) {
  .google-btn { transition: none; }
}

/* The real, functional Google button: fully transparent, stacked above the custom paint layer
   (later in DOM order = on top) so it — not the decoy — receives the actual interaction. */
.google-btn-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0; /* invisible but still real + hit-testable, unlike display:none/visibility:hidden */
}