/* Payment isolated from the old purple V2 theme; keep Stripe UI and API logic unchanged. */
body.cy-checkout {
  --bg: var(--cy-canvas);
  --bg-2: #111012;
  --panel: var(--cy-surface);
  --panel-2: rgba(27, 25, 22, .94);
  --line: rgba(212, 175, 55, .18);
  --line-strong: rgba(212, 175, 55, .42);
  --purple: var(--cy-gold);
  --purple-2: var(--cy-gold-bright);
  --pink: var(--cy-gold-bright);
  --text: var(--cy-text);
  --muted: #b7afa1;
  --radius: var(--cy-radius);
  --radius-sm: var(--cy-radius-sm);
  --sidebar: 226px;
  font-family: var(--cy-font-ui);
  background: radial-gradient(circle at 80% 0%, rgba(212,175,55,.07),transparent 36%),var(--cy-canvas);
  color: var(--cy-text);
}
body.cy-checkout .app-shell { max-width: 100%; grid-template-columns: var(--sidebar) minmax(0,1fr); }
body.cy-checkout .sidebar { width: var(--sidebar); background: rgba(12,11,11,.98); border-right: 1px solid var(--cy-line); }
body.cy-checkout .app-main { width: 100%; max-width: 1360px; min-width: 0; padding-inline: clamp(16px, 2.6vw, 32px); margin-inline: auto; }
body.cy-checkout .app-topbar { height: var(--cy-header-height); background: linear-gradient(180deg,rgba(7,7,8,.98),rgba(7,7,8,.86)); }
body.cy-checkout .card { background: rgba(18,17,18,.92); border-color: var(--line); border-radius: var(--cy-radius); }
body.cy-checkout .panel { padding: clamp(16px, 2.2vw, 24px); }
body.cy-checkout .btn { min-height: 44px; border-radius: var(--cy-radius-sm); }
body.cy-checkout .btn-primary,
body.cy-checkout .side-link.active { background: linear-gradient(120deg,#c39c32,#f2d26e) !important; color:#14110c !important; border-color: rgba(212,175,55,.36); }
body.cy-checkout .side-ico { color: var(--cy-gold); }
body.cy-checkout .side-link { color: #c2b9ac; }
body.cy-checkout .side-link:hover { color: #fff; background: rgba(212,175,55,.06); }
body.cy-checkout .profile-mini { background: rgba(212,175,55,.04); border-color: rgba(212,175,55,.14); }
body.cy-checkout .profile-mini span { color: var(--cy-gold); }
body.cy-checkout .pricing-head h1 { font-size: var(--cy-h2); }
body.cy-checkout .dashboard-grid { grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: clamp(12px, 2vw, 20px); }
body.cy-checkout .searchbox { background: rgba(20,19,18,.82); }
body.cy-checkout :is(a,button,input):focus-visible { outline: 2px solid var(--cy-gold-bright); outline-offset: 3px; }
body.cy-checkout :is(.card,.dashboard-grid,.app-main,.app-topbar) { min-width: 0; }
@media (max-width: 1024px) { body.cy-checkout .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  body.cy-checkout { --sidebar: 74px; }
  body.cy-checkout .sidebar { padding: 16px 8px; }
  body.cy-checkout .side-link { justify-content: center; padding-inline: 0; }
  body.cy-checkout .app-main { padding-inline: 16px; }
}
@media (max-width: 620px) {
  body.cy-checkout { --sidebar: 0px; }
  body.cy-checkout .app-shell { display: block; }
  body.cy-checkout .sidebar { display: none; }
  body.cy-checkout .app-main { padding-inline: 16px; }
  body.cy-checkout .app-topbar { height: 62px; }
  body.cy-checkout .pricing-head h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  body.cy-checkout .searchbox { width: min(100%, 400px); }
}

/* Normalize the checkout's older small-label scale to the public site. */
body.cy-checkout .panel-title { font-size: .98rem; line-height: 1.4; }
body.cy-checkout .pricing-head p { font-size: .9rem; line-height: 1.6; }
body.cy-checkout .activity-row strong { font-size: .84rem; }
body.cy-checkout .activity-row span { font-size: .76rem; line-height: 1.55; }
body.cy-checkout .activity-row time { font-size: .72rem; }
body.cy-checkout .price { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
body.cy-checkout .side-link { min-height: 44px; }
body.cy-checkout .panel :is(input, select, textarea) { min-width: 0; }
/* Legacy checkout markup still contains a purple inline card accent; isolate and recolor it here. */
body.cy-checkout #checkout-card [style*="rgba(139,92,246,.06)"] {
  background: rgba(212,175,55,.045) !important;
  border-color: rgba(212,175,55,.19) !important;
}
body.cy-checkout .activity-row .bubble { background: rgba(212,175,55,.11); color: var(--cy-gold); }
body.cy-checkout .activity-row { border-color: rgba(212,175,55,.10); }
body.cy-checkout .searchbox { border-color: rgba(212,175,55,.16); }