/*
 * site.css - the IPTV 8K look for the server pages (checkout, payment, line,
 * My lines, free trial, admin). Loaded last, after styles.css / app.css,
 * and matches the React site (client/src/index.css, .ref-page): near-black
 * ink, white cards with soft shadows, a peach-to-violet glow and gradient
 * accents, black pill buttons.
 *
 * Selectors start with `:root:not([data-theme="dark"]) body .page-frame` so
 * they win over app.css's light theme rules without !important.
 */
:root {
  --ink: #0a0a0c;
  --ink2: #414149;
  --muted: #707079;
  --faint: #a0a0a8;
  --line: #e9e9ed;
  --bg: #fafafa;
  --peach: #ffb37a;
  --coral: #ff8a6b;
  --pink: #ff7ea8;
  --violet: #a78cf7;
  --mint: #8fe0b0;
  --grad: linear-gradient(96deg, var(--peach) 4%, var(--coral) 34%, var(--pink) 62%, var(--violet) 92%);
  --card-shadow: 0 1px 2px rgba(14,14,20,.04), 0 6px 18px rgba(14,14,20,.05);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--sans);
}

/* MARK: Page */
:root:not([data-theme="dark"]):has(body:not(.home-light)),
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) body:not(.home-light) { background: var(--bg); }
body, button, input, select, textarea { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
:root:not([data-theme="dark"]) body .page-frame {
  color: var(--ink);
  background:
    radial-gradient(ellipse 45% 38% at 0% 0%, rgba(255,179,122,.20), transparent 72%),
    radial-gradient(ellipse 40% 42% at 100% 0%, rgba(167,140,247,.22), transparent 72%),
    radial-gradient(ellipse 35% 30% at 85% 100%, rgba(143,224,176,.12), transparent 75%),
    var(--bg);
}

/* MARK: Header and footer */
:root:not([data-theme="dark"]) body .page-frame .site-nav { border-bottom-color: var(--line); }
.brand { color: var(--ink); }
.brand-logo { display: inline-block; font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -.01em; color: #0a0a0a; white-space: nowrap; }
.brand-logo sup { position: relative; top: -6px; vertical-align: baseline; margin-left: 4px; padding: 2px 5px; border-radius: 5px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; line-height: 1.2; color: #fff; background: #0a0a0a; }
:root:not([data-theme="dark"]) body .page-frame .page-links a { color: var(--ink2); font-size: 13px; font-weight: 500; }
:root:not([data-theme="dark"]) body .page-frame .page-links a:hover,
:root:not([data-theme="dark"]) body .page-frame .page-links a:focus-visible { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .page-footer { border-top-color: var(--line); color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .page-footer a { color: var(--ink); }
.lang-menu summary { border-color: var(--line) !important; background: #fff !important; color: var(--ink) !important; box-shadow: var(--card-shadow) !important; }
.lang-menu ul { border-color: var(--line) !important; background: #fff !important; box-shadow: 0 18px 40px rgba(14,14,20,.12) !important; }
.lang-menu a { color: var(--ink2) !important; }
.lang-menu a:hover, .lang-menu a[aria-current] { background: #f3f3f5 !important; color: var(--ink) !important; }
.lang-banner { background: var(--ink) !important; color: #fff !important; }

/* MARK: Buttons - the React site's .ref-dark-btn / .ref-line-btn */
:root:not([data-theme="dark"]) body .page-frame .button,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav {
  min-height: 46px; gap: 8px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0;
  transform: none; transition: background .2s, box-shadow .2s, color .2s;
}
:root:not([data-theme="dark"]) body .page-frame .button-primary,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav {
  background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(14,14,20,.12);
}
:root:not([data-theme="dark"]) body .page-frame .button-primary:hover,
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav:hover { background: #26262b; box-shadow: 0 10px 24px rgba(14,14,20,.16); transform: none; }
:root:not([data-theme="dark"]) body .page-frame .site-nav .button-nav { min-height: 38px; padding: 0 16px; font-size: 13px; }
:root:not([data-theme="dark"]) body .page-frame .button-quiet,
:root:not([data-theme="dark"]) body .page-frame .button-outline {
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow);
}
:root:not([data-theme="dark"]) body .page-frame .button-quiet:hover,
:root:not([data-theme="dark"]) body .page-frame .button-outline:hover { background: #f5f5f7; transform: none; }
:root:not([data-theme="dark"]) body .page-frame .button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
:root:not([data-theme="dark"]) body .page-frame .button[disabled] { opacity: .4; }
:root:not([data-theme="dark"]) body .page-frame .text-link,
:root:not([data-theme="dark"]) body .page-frame .mini-link,
:root:not([data-theme="dark"]) body .page-frame .back-link { color: var(--ink); font-weight: 600; }
:root:not([data-theme="dark"]) body .page-frame .back-link:hover { color: var(--ink2); }

/* Small buttons (copy, admin actions) */
:root:not([data-theme="dark"]) body .page-frame .mini-btn,
:root:not([data-theme="dark"]) body .page-frame .copy-btn {
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); box-shadow: none; font-weight: 600;
}
:root:not([data-theme="dark"]) body .page-frame .mini-btn:hover,
:root:not([data-theme="dark"]) body .page-frame .copy-btn:hover { background: #f3f3f5; }
:root:not([data-theme="dark"]) body .page-frame .mini-btn.danger { border-color: #f3c8c4; background: #fff6f5; color: #b4231a; }

/* MARK: Cards, headings, text */
:root:not([data-theme="dark"]) body .page-frame .panel {
  border-radius: 22px; background: radial-gradient(ellipse at 100% 0%, rgba(143,224,176,.16), transparent 42%), #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(14,14,20,.06);
}
:root:not([data-theme="dark"]) body .page-frame .panel h1,
:root:not([data-theme="dark"]) body .page-frame .panel h2,
:root:not([data-theme="dark"]) body .page-frame .section-heading h2 { color: var(--ink); font-family: var(--sans); font-weight: 720; letter-spacing: -.045em; }
:root:not([data-theme="dark"]) body .page-frame .panel h1 span,
:root:not([data-theme="dark"]) body .page-frame .panel h2 span,
:root:not([data-theme="dark"]) body .page-frame .section-heading h2 span {
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
}
:root:not([data-theme="dark"]) body .page-frame .eyebrow,
:root:not([data-theme="dark"]) body .page-frame .panel .eyebrow,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-label,
:root:not([data-theme="dark"]) body .page-frame .summary .summary-head dt {
  color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .15em;
}
:root:not([data-theme="dark"]) body .page-frame .eyebrow-line { background: var(--grad); }
:root:not([data-theme="dark"]) body .page-frame .lede,
:root:not([data-theme="dark"]) body .page-frame .howto { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .lede strong,
:root:not([data-theme="dark"]) body .page-frame .howto strong { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .fine-print,
:root:not([data-theme="dark"]) body .page-frame .hint { color: var(--muted); }

/* MARK: Steps */
:root:not([data-theme="dark"]) body .page-frame .steps li { background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .steps li span { background: #f3f3f5; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .steps li.done { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .steps li.done span { background: #e7f8ee; color: #1f7a4c; }
:root:not([data-theme="dark"]) body .page-frame .steps li.current { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .steps li.current span { background: var(--ink); color: #fff; }

/* MARK: Forms */
:root:not([data-theme="dark"]) body .page-frame .field > label,
:root:not([data-theme="dark"]) body .page-frame .field > legend { color: var(--ink); font-weight: 600; }
:root:not([data-theme="dark"]) body .page-frame .flow-form input:not([type=radio]):not([type=checkbox]),
:root:not([data-theme="dark"]) body .page-frame .flow-form select,
:root:not([data-theme="dark"]) body .page-frame .admin-form input,
:root:not([data-theme="dark"]) body .page-frame .admin-form select,
:root:not([data-theme="dark"]) body .page-frame .admin-search input,
:root:not([data-theme="dark"]) body .page-frame .mini-input {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
:root:not([data-theme="dark"]) body .page-frame .flow-form input::placeholder { color: var(--faint); }
:root:not([data-theme="dark"]) body .page-frame .flow-form input:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .flow-form select:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .admin-form input:focus-visible,
:root:not([data-theme="dark"]) body .page-frame .admin-form select:focus-visible {
  outline: 2px solid rgba(167,140,247,.45); outline-offset: 1px; border-color: var(--violet);
}
:root:not([data-theme="dark"]) body .page-frame .check { color: var(--ink2); }

/* Choice tiles (format, payment method, devices) */
:root:not([data-theme="dark"]) body .page-frame .tile > span { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .tile:hover > span { background: #fcfcfd; box-shadow: inset 0 0 0 1px #d7d7dd; }
:root:not([data-theme="dark"]) body .page-frame .tile input:checked + span { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .tile b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .tile small { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .tile strong { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .tile strong em,
:root:not([data-theme="dark"]) body .page-frame .tile em { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .pick-device > span { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { box-shadow: inset 0 0 0 1.5px var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span .pick-check { background: var(--ink); color: #fff; box-shadow: none; }

/* Notices */
:root:not([data-theme="dark"]) body .page-frame .notice-error { border-radius: 12px; background: #fff6f5; box-shadow: inset 0 0 0 1px #f3c8c4; color: #b4231a; }
:root:not([data-theme="dark"]) body .page-frame .notice-ok { border-radius: 12px; background: #f1fbf5; box-shadow: inset 0 0 0 1px #bfe8cf; color: #1f7a4c; }

/* MARK: Checkout and payment */
:root:not([data-theme="dark"]) body .page-frame .chosen-plan {
  border-radius: 16px; background: radial-gradient(ellipse at 0% 0%, rgba(255,179,122,.16), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(167,140,247,.14), transparent 60%), #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-main strong,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-price strong { color: var(--ink); letter-spacing: -.02em; }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-main small,
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-price small { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-change { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .chosen-plan-change:hover { background: #f3f3f5; }
:root:not([data-theme="dark"]) body .page-frame .summary { border-radius: 16px; background: #fcfcfd; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .summary div { border-bottom-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .summary dt { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .summary dd,
:root:not([data-theme="dark"]) body .page-frame .summary .summary-total dd { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pay-option { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .pay-option:hover { box-shadow: inset 0 0 0 1px #d7d7dd, 0 14px 30px rgba(14,14,20,.08); }
:root:not([data-theme="dark"]) body .page-frame .pay-icon { background: #f3f3f5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pay-copy b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pay-copy small,
:root:not([data-theme="dark"]) body .page-frame .pay-secure { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .pay-secure svg { color: #1f7a4c; }
:root:not([data-theme="dark"]) body .page-frame .spinner { border-color: var(--line); border-top-color: var(--ink); }

/* MARK: Line page, credentials, account */
:root:not([data-theme="dark"]) body .page-frame .line-status { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .line-status b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pill-live { background: #e7f8ee; color: #1f7a4c; }
:root:not([data-theme="dark"]) body .page-frame .pill-dead { background: #fff0ee; color: #b4231a; }
:root:not([data-theme="dark"]) body .page-frame .pill-ready { background: #f3f0ff; color: #5b45b8; }
:root:not([data-theme="dark"]) body .page-frame .creds div { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .creds dt { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .creds code { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame code.mini { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .line-card,
:root:not([data-theme="dark"]) body .page-frame .sub-card,
:root:not([data-theme="dark"]) body .page-frame .sub-devices a { background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .line-card b,
:root:not([data-theme="dark"]) body .page-frame .sub-devices b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .line-card:hover,
:root:not([data-theme="dark"]) body .page-frame .sub-devices a:hover { background: #fcfcfd; }
:root:not([data-theme="dark"]) body .page-frame .device-tabs { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .device-tab { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .device-tab:hover { background: #f3f3f5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .device-tab.is-active { background: var(--ink); color: #fff; box-shadow: none; }
:root:not([data-theme="dark"]) body .page-frame .device-tab-add { border-color: var(--line); color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .add-device-card,
:root:not([data-theme="dark"]) body .page-frame .support-card,
:root:not([data-theme="dark"]) body .page-frame .renew-widget {
  background: radial-gradient(ellipse at 100% 0%, rgba(167,140,247,.12), transparent 55%), #fff; box-shadow: inset 0 0 0 1px var(--line);
}

/* MARK: Admin */
:root:not([data-theme="dark"]) body .page-frame .admin-bar h1 { color: var(--ink); font-weight: 720; letter-spacing: -.04em; }
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a:hover { background: #f3f3f5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .admin-tabs a[aria-current=page] { background: var(--ink); color: #fff; box-shadow: none; }
:root:not([data-theme="dark"]) body .page-frame .stat,
:root:not([data-theme="dark"]) body .page-frame .admin-card { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .stat span,
:root:not([data-theme="dark"]) body .page-frame .stat small { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .stat strong,
:root:not([data-theme="dark"]) body .page-frame .admin-card h2 { color: var(--ink); font-family: var(--sans); letter-spacing: -.02em; }
:root:not([data-theme="dark"]) body .page-frame .admin-form label,
:root:not([data-theme="dark"]) body .page-frame .checks { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .table-wrap { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .admin-table th { background: #fafafb; color: var(--muted); border-bottom-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .admin-table td { color: var(--ink); border-bottom-color: #f1f1f4; }
:root:not([data-theme="dark"]) body .page-frame .admin-table tr:hover td { background: #fcfcfd; }

/* MARK: Plan cards (add-device page) */
.pricing-page .price-card { border-radius: 20px !important; background: #fff !important; box-shadow: var(--card-shadow) !important; }
.pricing-page .price-card.is-popular, .pricing-page .plan-card.is-popular { box-shadow: inset 0 0 0 1.5px var(--violet), 0 18px 40px rgba(167,140,247,.18) !important; }
.pricing-page .price-card h3, .pricing-page .price strong { color: var(--ink) !important; font-family: var(--sans) !important; }
.pricing-page .popular-badge { background: #f3f0ff !important; color: #5b45b8 !important; box-shadow: none !important; }
.pricing-page .plan-overline { color: var(--muted) !important; }
.pricing-page .price-card .button-outline { background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.pricing-page .price-card .price-cta, .pricing-page .plan-card.is-popular > .button { background: var(--ink) !important; color: #fff !important; }
.pricing-page .billing-control { background: #fff !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.pricing-page .billing-option.is-selected { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.pricing-page .plan-features li::before { color: #1f7a4c !important; }

/* Arabic keeps its own font */
[dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: 'IBM Plex Sans Arabic', var(--sans); }
[dir="rtl"] .brand-logo { font-family: 'Space Grotesk', Inter, sans-serif; }

/* MARK: Line page details */
:root:not([data-theme="dark"]) body .page-frame .add-device-card { border: 1.5px dashed #d7d7dd; background: radial-gradient(ellipse at 0% 50%, rgba(255,179,122,.12), transparent 60%), #fff; }
:root:not([data-theme="dark"]) body .page-frame .add-device-icon { background: #f3f3f5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pick-device b em { background: #f3f3f5; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .pick-all { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { background: #fff; }
:root:not([data-theme="dark"]) body .page-frame .support-facts div,
:root:not([data-theme="dark"]) body .page-frame .fmt-facts div { background: #fafafb; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .code-actions button.text-link { color: var(--ink); }

/* MARK: Remaining accents (neutral ink instead of Strong's purple) */
:root:not([data-theme="dark"]) body .page-frame .device-tab-add { border-color: #d7d7dd; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .device-tab-add > span[aria-hidden] { background: #f3f3f5; }
:root:not([data-theme="dark"]) body .page-frame .admin-form textarea { border-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .admin-add summary { background: #f3f3f5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .admin-add .admin-form,
:root:not([data-theme="dark"]) body .page-frame .account-form .mode-section,
:root:not([data-theme="dark"]) body .page-frame .unlimited-list li,
:root:not([data-theme="dark"]) body .page-frame .pay-detail div,
:root:not([data-theme="dark"]) body .page-frame .support-facts li { background: #fafafb; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .support-facts span { color: var(--muted); }
:root:not([data-theme="dark"]) body .page-frame .support-facts b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .mac-input > span,
:root:not([data-theme="dark"]) body .page-frame .manual-group legend { color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .mode-card { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .mode-auto { background: #f3f3f5; color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .manual-group { border-color: var(--line); }
:root:not([data-theme="dark"]) body .page-frame .lang-menu li a b { color: var(--ink); }
:root:not([data-theme="dark"]) body .page-frame .coin-pick select { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]) body .page-frame .pick-check { box-shadow: inset 0 0 0 1.5px #c9c9d0; }
:root:not([data-theme="dark"]) body .page-frame .pick-device input:checked + span { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .sub-devices a { background: #fafafb; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .sub-devices a:hover { background: #f3f3f5; }
:root:not([data-theme="dark"]) body .page-frame .pay-card { background: radial-gradient(ellipse at 100% 0%, rgba(167,140,247,.14), transparent 60%), #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-shadow); }
:root:not([data-theme="dark"]) body .page-frame .pay-card .pay-icon { background: var(--ink); color: #fff; }
:root:not([data-theme="dark"]) body .page-frame .pay-badge { background: #f3f3f5; color: var(--ink2); }
:root:not([data-theme="dark"]) body .page-frame .pay-anim-glow { background: radial-gradient(closest-side, rgba(255,138,107,.25), transparent); }
:root:not([data-theme="dark"]) body .page-frame .trial-cta,
:root:not([data-theme="dark"]) body .page-frame .upsell { border-color: #d7d7dd; }