/* IAVirtuals — Light Mode. Every rule here applies only to :root[data-theme="light"]
   (set by early.js from the visitor's choice), so the dark theme in base.css, site.css
   and app.css stays exactly as it is. Calm off-white ground, white cards with a thin
   border, charcoal text, one solid indigo for actions. The two phones keep their dark
   screens (they are device mockups), so their insides get the dark tokens back. */

:root[data-theme="light"] {
  color-scheme: light;
  /* Ground and surfaces */
  --bg: #f5f7fb;
  --bg-2: #eef2f8;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-raised: #f3f5fa;
  --surface-hover: #eef0ff;
  --border: #e2e7f0;
  --border-strong: #cbd3e1;
  /* Text */
  --text: #0f172a;
  --muted: #475569;
  --faint: #5b6679;
  /* Accents: one indigo for actions and links, a deep cyan for small highlights */
  --blue: #4f46e5;
  --blue-bright: #4338ca;
  --cyan: #0e7490;
  --violet: #6d28d9;
  --purple: #7e22ce;
  --gradient: linear-gradient(#4f46e5, #4f46e5);
  --gradient-text: linear-gradient(90deg, #3b5bdb 0%, #5145cd 48%, #7c3aed 100%);
  --gradient-soft: linear-gradient(#eef0ff, #eef0ff);
  --glow: 0 0 0 1px rgba(79, 70, 229, 0.25), 0 8px 24px rgba(79, 70, 229, 0.16);
  /* Status */
  --success: #047857; --success-bg: #ecfdf5;
  --danger: #be123c; --danger-bg: #fff1f2;
  --warning: #b45309; --warning-bg: #fffbeb;
  --info: #1d4ed8; --info-bg: #eff6ff;
  /* Light only: the resting shadow of cards */
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
}

/* Device mockups keep their dark screens: the dark tokens apply inside them. */
:root[data-theme="light"] .phone,
:root[data-theme="light"] .how-phone {
  color-scheme: dark;
  --surface-raised: #121b40;
  --border: rgba(110, 140, 255, 0.16);
  --border-strong: rgba(126, 156, 255, 0.36);
  --text: #eef2ff;
  --muted: #a3aed3;
  --faint: #7d88b0;
  --blue-bright: #60a5fa;
  --cyan: #22d3ee;
  --gradient-text: linear-gradient(90deg, #4f8dff 0%, #7b6dff 48%, #b46cff 100%);
  --success: #34d399; --success-bg: rgba(52, 211, 153, 0.13);
  --info: #60a5fa; --info-bg: rgba(96, 165, 250, 0.13);
  color: var(--text);
}

/* ---------- Base ---------- */
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] ::selection { background: rgba(79, 70, 229, 0.18); color: var(--text); }
:root[data-theme="light"] .logo__mark { filter: drop-shadow(0 3px 8px rgba(79, 70, 229, 0.25)); }

:root[data-theme="light"] .btn { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(79, 70, 229, 0.2); }
:root[data-theme="light"] .btn:hover { background: #4338ca; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(79, 70, 229, 0.26); }
:root[data-theme="light"] .btn--ghost { background: #ffffff; color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
:root[data-theme="light"] .btn--ghost:hover { background: var(--surface-hover); box-shadow: 0 0 0 1px #c7d2fe; }
:root[data-theme="light"] .btn--danger { color: #ffffff; }
:root[data-theme="light"] .btn--danger:hover { background: #9f1239; }
:root[data-theme="light"] .link-button:hover { color: #312e81; }
:root[data-theme="light"] .link-button--danger:hover { color: #9f1239; }

:root[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.86); border-color: var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.08);
}
:root[data-theme="light"] .panel { background: #ffffff; border-color: var(--border); box-shadow: var(--card-shadow); }
:root[data-theme="light"] .icon-badge { color: #4338ca; border-color: #dfe3fb; }
:root[data-theme="light"] .pill--neutral { background: #eef1f6; }
:root[data-theme="light"] .flag { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1); }

:root[data-theme="light"] .input { background: #ffffff; }
:root[data-theme="light"] .input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16); }
:root[data-theme="light"] .alert--error { color: #9f1239; border-color: #fecdd3; }
:root[data-theme="light"] .alert--success { color: #065f46; border-color: #a7f3d0; }
:root[data-theme="light"] .alert--info { color: #1e3a8a; border-color: #bfdbfe; }

:root[data-theme="light"] .table th,
:root[data-theme="light"] .table td { border-bottom-color: #e8ecf3; }
:root[data-theme="light"] .table thead th { border-bottom-color: var(--border); }

/* ---------- Theme switch (all pages): the icon shows the theme a click switches to ---------- */
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }

/* ---------- Site: header and hero ---------- */
:root[data-theme="light"] .site-nav__link { color: #334155; }
:root[data-theme="light"] .site-nav__link:hover { color: var(--text); background: rgba(79, 70, 229, 0.06); }
:root[data-theme="light"] .site-nav__link.is-current { color: var(--text); }
:root[data-theme="light"] .site-nav__link.is-current::after { box-shadow: none; }
:root[data-theme="light"] .site-header__lang:hover { color: var(--text); background: rgba(79, 70, 229, 0.06); }
:root[data-theme="light"] .site-menu__toggle { background: #ffffff; }
:root[data-theme="light"] .site-menu__list { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .hero__pill { background: #ffffff; color: #334155; border-color: var(--border); }

:root[data-theme="light"] .hero-scene__halo { background: radial-gradient(circle at 50% 45%, rgba(79, 70, 229, 0.16), rgba(99, 102, 241, 0.06) 45%, transparent 70%); }
:root[data-theme="light"] .pedestal::before {
  background: radial-gradient(ellipse at 50% 40%, rgba(129, 140, 248, 0.35), rgba(79, 70, 229, 0.16) 45%, rgba(79, 70, 229, 0) 72%);
  box-shadow: none;
}
:root[data-theme="light"] .pedestal__ring { border-color: rgba(79, 70, 229, 0.45); box-shadow: 0 0 12px rgba(79, 70, 229, 0.25); }
:root[data-theme="light"] .float-flag { background: #ffffff; box-shadow: 0 0 0 1px var(--border), 0 6px 16px rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .float-tile { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
:root[data-theme="light"] .cube__face { border-color: rgba(79, 70, 229, 0.5); background: rgba(79, 70, 229, 0.06); box-shadow: none; }

/* ---------- Site: sections ---------- */
:root[data-theme="light"] .steps__track { background: #e0e5f2; }
:root[data-theme="light"] .steps__range::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.22), 0 2px 6px rgba(15, 23, 42, 0.25); }
:root[data-theme="light"] .steps__range::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.22), 0 2px 6px rgba(15, 23, 42, 0.25); }
:root[data-theme="light"] .how__stage::before { background: radial-gradient(circle, rgba(79, 70, 229, 0.12), transparent 65%); }
:root[data-theme="light"] .how-phone { box-shadow: 0 0 0 1px rgba(170, 190, 255, 0.45), 14px 18px 0 -4px #0e1856, 0 30px 60px rgba(15, 23, 42, 0.22); }

:root[data-theme="light"] .prices__name { color: #64748b; }
:root[data-theme="light"] .prices__name:hover,
:root[data-theme="light"] .prices__name[aria-pressed='true'] { color: var(--text); }
:root[data-theme="light"] .prices__name::before { box-shadow: none; }

:root[data-theme="light"] .apps__band { background: #eef0ff; border-color: #dfe3fb; }
:root[data-theme="light"] .apps__track { color: #1e293b; }
:root[data-theme="light"] .apps__dot { box-shadow: none; }

:root[data-theme="light"] .faq__item { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
:root[data-theme="light"] .faq__item[open] { background: #ffffff; border-color: #c7d2fe; box-shadow: var(--card-shadow); }

:root[data-theme="light"] .start::before { background: radial-gradient(circle, rgba(79, 70, 229, 0.1), transparent 65%); }
:root[data-theme="light"] .start__form { background: var(--bg); border-color: var(--border); }
:root[data-theme="light"] .segmented label { background: #ffffff; }
:root[data-theme="light"] .segmented input:checked + label { background: #eef0ff; border-color: #4f46e5; color: #312e81; }

:root[data-theme="light"] .site-footer { background: #ffffff; }
:root[data-theme="light"] .site-footer__list a:hover,
:root[data-theme="light"] .site-footer__legal a:hover { color: var(--text); }
:root[data-theme="light"] .site-footer__credits a { text-decoration-color: rgba(79, 70, 229, 0.4); }

/* ---------- Dashboard and admin: frame ---------- */
:root[data-theme="light"] .sidebar { background: #ffffff; }
:root[data-theme="light"] .sidebar__link { color: #334155; }
:root[data-theme="light"] .sidebar__icon { background: #f1f3f9; }
:root[data-theme="light"] .sidebar__link:hover { background: rgba(79, 70, 229, 0.06); color: var(--text); }
:root[data-theme="light"] .sidebar__link.is-current { background: #eef0ff; color: #312e81; box-shadow: inset 0 0 0 1px #dfe3fb; }
:root[data-theme="light"] .sidebar__link.is-current .sidebar__icon { background: var(--gradient); color: #ffffff; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25); }
:root[data-theme="light"] .sidebar__site:hover { color: var(--text); background: rgba(79, 70, 229, 0.06); }
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.86); }
:root[data-theme="light"] .icon-button { background: #ffffff; }
:root[data-theme="light"] .topbar__search { background: #ffffff; }
:root[data-theme="light"] .topbar__search:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14); }
:root[data-theme="light"] .topbar__dot { box-shadow: 0 0 0 2px #ffffff; }
:root[data-theme="light"] .profile__summary:hover { background: rgba(15, 23, 42, 0.04); }
:root[data-theme="light"] .avatar { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15); }
:root[data-theme="light"] .profile__menu { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); }
@media (max-width: 900px) {
  :root[data-theme="light"] .sidebar { box-shadow: 12px 0 40px rgba(15, 23, 42, 0.16); }
  :root[data-theme="light"] .sidebar-scrim { background: rgba(15, 23, 42, 0.35); }
}

/* ---------- Dashboard and admin: blocks ---------- */
/* The light base rules above outrank the dark state rules (:hover, .is-current, :checked),
   so each state is restated here with the same prefix. */
:root[data-theme="light"] .chip { background: #ffffff; color: #334155; }
:root[data-theme="light"] .chip:hover { background: var(--surface-hover); }
:root[data-theme="light"] .chip.is-current { background: var(--gradient); color: #ffffff; border-color: transparent; }
:root[data-theme="light"] .icon-button:hover { background: var(--surface-hover); }
:root[data-theme="light"] .is-out { color: var(--text); }

:root[data-theme="light"] .welcome { background: #ffffff; }
:root[data-theme="light"] .mini-globe { background: radial-gradient(circle at 35% 30%, #c7d2fe, #6366f1 45%, #312e81 76%); box-shadow: 0 16px 40px rgba(79, 70, 229, 0.28); }
:root[data-theme="light"] .mini-globe::after { background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, 0.2) 13px 14px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(255, 255, 255, 0.16) 13px 14px); }
:root[data-theme="light"] .mini-orbit { border-color: rgba(79, 70, 229, 0.35); box-shadow: none; }
:root[data-theme="light"] .cube--mini .cube__face { border-color: rgba(79, 70, 229, 0.5); background: rgba(79, 70, 229, 0.08); }
:root[data-theme="light"] .balance-card { background: var(--bg); border-color: var(--border); }

:root[data-theme="light"] .stat__icon--teal { background: #ccfbf1; color: #0f766e; }
:root[data-theme="light"] .stat__icon--violet { background: #ede9fe; color: #6d28d9; }
:root[data-theme="light"] .stat__icon--green { background: #d1fae5; color: #047857; }
:root[data-theme="light"] .stat__icon--blue { background: #dbeafe; color: #1d4ed8; }

:root[data-theme="light"] .offer-row,
:root[data-theme="light"] .activity__row,
:root[data-theme="light"] .confirm__facts > div,
:root[data-theme="light"] .kv > div,
:root[data-theme="light"] .log-list li,
:root[data-theme="light"] .signin-method { border-bottom-color: #e8ecf3; }
:root[data-theme="light"] .admin-form + .admin-form { border-top-color: var(--border); }
:root[data-theme="light"] .activity__icon { background: #dbeafe; color: #1d4ed8; }
:root[data-theme="light"] .activity__icon--deposit,
:root[data-theme="light"] .activity__icon--refund { background: #d1fae5; color: #047857; }
:root[data-theme="light"] .activity__icon--sms { background: #ede9fe; color: #6d28d9; }
:root[data-theme="light"] .cta-banner { background: #eef0ff; border-color: #dfe3fb; }
:root[data-theme="light"] .cta-banner__art { color: #ffffff; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28); }

:root[data-theme="light"] .sms-card:target { box-shadow: 0 0 0 2px #4f46e5, var(--card-shadow); }
:root[data-theme="light"] .sms-card.sms-card--new { box-shadow: 0 0 0 2px var(--success), 0 8px 24px rgba(4, 120, 87, 0.18); }
:root[data-theme="light"] .sms-card__number,
:root[data-theme="light"] .sms-card__code { background: var(--bg); }
:root[data-theme="light"] .spinner { border-color: #c7d2fe; border-top-color: #4f46e5; }

:root[data-theme="light"] .wallet-hero { background: #ffffff; }
:root[data-theme="light"] .choice span { background: #ffffff; }
:root[data-theme="light"] .choice input:checked + span { background: var(--gradient); border-color: transparent; color: #ffffff; }
:root[data-theme="light"] .method__card { background: #ffffff; }
:root[data-theme="light"] .method input:checked + .method__card { border-color: #4f46e5; background: #eef0ff; box-shadow: inset 0 0 0 1px #4f46e5; }
:root[data-theme="light"] .method__icon { background: #eef0ff; }
:root[data-theme="light"] .topup-form__summary { background: #eef0ff; color: #312e81; }

/* ---------- Sign-in pages ---------- */
:root[data-theme="light"] .auth__art { background: radial-gradient(600px 400px at 60% 35%, rgba(79, 70, 229, 0.12), transparent 70%), var(--bg-2); }
:root[data-theme="light"] .auth__orb { background: radial-gradient(circle at 35% 30%, #c7d2fe, #6366f1 45%, #312e81 76%); box-shadow: 0 30px 80px rgba(79, 70, 229, 0.28); }
:root[data-theme="light"] .auth__orbit { border-color: rgba(79, 70, 229, 0.35); box-shadow: none; }
:root[data-theme="light"] .auth__orbit--2 { border-color: rgba(124, 58, 237, 0.3); }
:root[data-theme="light"] .auth__flag { background: #ffffff; box-shadow: 0 0 0 1px var(--border), 0 6px 16px rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .auth__lang:hover { color: var(--text); background: rgba(79, 70, 229, 0.06); }
:root[data-theme="light"] .auth-card__legal a { text-decoration-color: rgba(79, 70, 229, 0.4); }