@layer legacy-demo {


:root {
  
  --stz-ink-950: #071521;
  --stz-navy-800: #0c3446;
  --stz-cyan-500: #00a7e1;
  --stz-cyan-700: #006d93;
  --stz-sky-300: #72dcff;
  --stz-lime-400: #b7f52b;
  --stz-foam-50: #f4f9f8;
  --stz-mist-100: #e8f2f3;
  --stz-paper: #ffffff;
  --stz-slate-600: #4b5d68;
  --stz-rule-300: #cedde2;
  
  --stz-coral-500: #ea5e3f;
  --stz-ink-900: #0a1e2e;
  --stz-slate-300: #9db0bc;

  
  --stz-text: var(--stz-ink-950);
  --stz-text-muted: var(--stz-slate-600);
  --stz-surface-canvas: var(--stz-foam-50);
  --stz-surface-panel: var(--stz-paper);
  --stz-surface-shell: var(--stz-ink-950);
  --stz-action-primary: var(--stz-lime-400);
  
  --stz-action-primary-border: #618906;
  --stz-action-secondary: var(--stz-cyan-700);
  --stz-focus: var(--stz-coral-500);
  --stz-status-success: #18794e;
  --stz-status-info: var(--stz-cyan-700);
  --stz-status-warning: #a15c00;
  --stz-status-danger: #c9382d;

  
  --stz-status-success-on-shell: #0eb86c;
  --stz-status-info-on-shell: var(--stz-cyan-500);
  --stz-status-warning-on-shell: #e68b0f;
  --stz-status-danger-on-shell: #fe776c;

  
  --stz-on-action-primary: var(--stz-ink-950);
  --stz-on-action-secondary: var(--stz-paper);
  --stz-on-surface-shell: var(--stz-foam-50);
  
  --stz-on-surface-shell-muted: var(--stz-slate-300);
  --stz-on-status-success: var(--stz-paper);
  --stz-on-status-info: var(--stz-paper);
  --stz-on-status-warning: var(--stz-paper);
  --stz-on-status-danger: var(--stz-paper);
  
  --stz-on-status-shell: var(--stz-ink-950);

  
  --stz-font-display: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --stz-font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --stz-font-utility: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --stz-leading-display: .92;
  --stz-leading-body: 1.55;

  
  --stz-radius-control: 10px;
  --stz-radius-card: 14px;
  --stz-radius-panel: 22px;
  --stz-radius-feature: 32px;
  --stz-shadow-card: 0 10px 30px rgba(7, 21, 33, .08);
  --stz-shadow-feature: 0 24px 80px rgba(7, 21, 33, .16);

  
  --stz-motion-fast: 120ms cubic-bezier(.2, .8, .2, 1);
  --stz-motion-standard: 180ms cubic-bezier(.2, .8, .2, 1);
  --stz-motion-route: 420ms cubic-bezier(.2, .8, .2, 1);

  
  --stz-space-1: 4px;
  --stz-space-2: 8px;
  --stz-space-3: 12px;
  --stz-space-4: 16px;
  --stz-space-5: 24px;
  --stz-space-6: 32px;
  --stz-space-7: 48px;
  --stz-space-8: 64px;
  --stz-content-wide: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --stz-motion-fast: 1ms linear;
    --stz-motion-standard: 1ms linear;
    --stz-motion-route: 1ms linear;
  }
}


:root[data-theme="dark"] {
  color-scheme: dark;
  --stz-text: var(--stz-foam-50);
  --stz-text-muted: var(--stz-slate-300);
  --stz-surface-canvas: var(--stz-ink-900);
  --stz-surface-panel: var(--stz-navy-800);
  --stz-surface-shell: var(--stz-ink-950);
  --stz-action-secondary: var(--stz-cyan-500);
  --stz-status-info: var(--stz-status-info-on-shell);
  
  --stz-status-success: var(--stz-status-success-on-shell);
  --stz-status-warning: var(--stz-status-warning-on-shell);
  --stz-status-danger: var(--stz-status-danger-on-shell);
  --stz-on-action-secondary: var(--stz-ink-950);
  --stz-on-status-success: var(--stz-ink-950);
  --stz-on-status-info: var(--stz-ink-950);
  --stz-on-status-warning: var(--stz-ink-950);
  --stz-on-status-danger: var(--stz-ink-950);
  --stz-rule-300: #22414f;
  --stz-shadow-card: 0 10px 30px rgba(2, 8, 14, .5);
  --stz-shadow-feature: 0 24px 80px rgba(2, 8, 14, .62);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --stz-text: var(--stz-foam-50);
    --stz-text-muted: var(--stz-slate-300);
    --stz-surface-canvas: var(--stz-ink-900);
    --stz-surface-panel: var(--stz-navy-800);
    --stz-surface-shell: var(--stz-ink-950);
    --stz-action-secondary: var(--stz-cyan-500);
    --stz-status-info: var(--stz-status-info-on-shell);
    --stz-status-success: var(--stz-status-success-on-shell);
    --stz-status-warning: var(--stz-status-warning-on-shell);
    --stz-status-danger: var(--stz-status-danger-on-shell);
    --stz-on-action-secondary: var(--stz-ink-950);
    --stz-on-status-success: var(--stz-ink-950);
    --stz-on-status-info: var(--stz-ink-950);
    --stz-on-status-warning: var(--stz-ink-950);
    --stz-on-status-danger: var(--stz-ink-950);
    --stz-rule-300: #22414f;
    --stz-shadow-card: 0 10px 30px rgba(2, 8, 14, .5);
    --stz-shadow-feature: 0 24px 80px rgba(2, 8, 14, .62);
  }
}





:root, :root[data-theme], [data-brand], :root [data-brand] {
  --font-sans: var(--stz-font-body);
  --font-display: var(--stz-font-display);
  --font-mono: var(--stz-font-utility);
  --sans: var(--stz-font-body);
  --disp: var(--stz-font-display);
  --mono: var(--stz-font-utility);
  --p-display: var(--stz-font-display);
  --brand: var(--stz-action-secondary);
  --brand-bright: var(--stz-action-secondary);
  --brand-deep: var(--stz-action-secondary);
  --brand-darker: var(--stz-action-secondary);
  --brand-grad-to: var(--stz-action-secondary);
  --brand-contrast: var(--stz-on-action-secondary);
  --text-on-brand: var(--stz-on-action-secondary);
  --brand-tint: color-mix(in srgb, var(--stz-action-secondary) 12%, transparent);
  --brand-tint-strong: color-mix(in srgb, var(--stz-action-secondary) 22%, transparent);
  --brand-glow: none;
  --accent: var(--stz-action-secondary);
  --accent-2: var(--stz-action-secondary);
  --em: var(--stz-action-secondary);
  --em2: var(--stz-action-secondary);
  --blue: var(--stz-status-info);
  --green: var(--stz-status-success);
  --red: var(--stz-status-danger);
  --amber: var(--stz-status-warning);
  --success: var(--stz-status-success);
  --warning: var(--stz-status-warning);
  --danger: var(--stz-status-danger);
  --error: var(--stz-status-danger);
  --info: var(--stz-status-info);
  --bg: var(--stz-surface-canvas);
  --bg2: var(--stz-surface-canvas);
  --bg-page: var(--stz-surface-canvas);
  --surface: var(--stz-surface-panel);
  --surface-2: var(--stz-surface-canvas);
  --surface-3: var(--stz-surface-panel);
  --surface-card: var(--stz-surface-panel);
  --surface-panel: var(--stz-surface-panel);
  --surface-raised: var(--stz-surface-panel);
  --surface-input: var(--stz-surface-canvas);
  --surface-hover: var(--stz-surface-canvas);
  --text: var(--stz-text);
  --text-2: var(--stz-text-muted);
  --text-strong: var(--stz-text);
  --text-body: var(--stz-text);
  --text-muted: var(--stz-text-muted);
  --text-faint: var(--stz-text-muted);
  --muted: var(--stz-text-muted);
  --dim: var(--stz-text-muted);
  --ink: var(--stz-on-action-secondary);
  --border: var(--stz-rule-300);
  --border-2: var(--stz-text-muted);
  --border-subtle: var(--stz-rule-300);
  --border-default: var(--stz-rule-300);
  --border-strong: var(--stz-text-muted);
  --hair: var(--stz-rule-300);
  --ring: var(--stz-focus);
  --radius-md: var(--stz-radius-control);
  --radius-lg: var(--stz-radius-card);
  --radius-xl: var(--stz-radius-panel);
  --radius-2xl: var(--stz-radius-feature);
  --r: var(--stz-radius-card);
  --r-sm: var(--stz-radius-control);
  --r-lg: var(--stz-radius-panel);
  --r-xl: var(--stz-radius-feature);
  --dur-base: 180ms;
  --glass: var(--stz-surface-panel);
  --glass-2: var(--stz-surface-panel);
  --glass-fill: var(--stz-surface-panel);
  --glass-surface: var(--stz-surface-panel);
  --glass-panel: var(--stz-surface-panel);
  --glass-panel-strong: var(--stz-surface-panel);
  --glass-border: var(--stz-rule-300);
  --glass-border-strong: var(--stz-text-muted);
  --glass-blur: 0px;
  --glass-shadow: var(--stz-shadow-card);
  --glass-hi: transparent;
  --glass-sheen: none;
  --shadow-sm: var(--stz-shadow-card);
  --shadow-md: var(--stz-shadow-card);
  --shadow-lg: var(--stz-shadow-feature);
  --shadow-xl: var(--stz-shadow-feature);
  --shadow-edge: 0 0 transparent;
  --glow-em: none;
  --glow: transparent;
  --ambient-glow: transparent;
  --ambient-glow-2: transparent;
  --grad-brand: linear-gradient(var(--stz-action-secondary),var(--stz-action-secondary));
  --grad-em: linear-gradient(var(--stz-action-secondary),var(--stz-action-secondary));
  --grad-word: linear-gradient(var(--stz-text),var(--stz-text));
  --grad-head: linear-gradient(var(--stz-surface-panel),var(--stz-surface-panel));
  --grad-edge: none;
  --grid-img: none;
  --grid-img-brand: none;
  --grid-img-dots: none;
}

html body { background: var(--stz-surface-canvas); color: var(--stz-text); font-family: var(--stz-font-body); }
body::before, body::after, .lds-ambient::before, .lds-ambient::after,
.ambient, .ambient-grid, .ambient-glow, .noise, .grain, .aurora { display: none !important; }
.lds-ambient { background: var(--stz-surface-canvas); }
.lds-glass, .ap-card, .tile, .card, .panel, .lg-card, .view-sign .sg-stat,
.view-sign .sg-tpl, .modal, .ap-modal { background: var(--stz-surface-panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
body *, body *::before, body *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lds-glass::after, .lds-glass--edge::before, .lg-card::before { display: none; }
.lds-globe { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; filter: none !important; animation: none !important; }
.lds-globe img { display: block; object-fit: contain; max-width: 100%; }
.stz-lockup { display: block; width: 176px; height: auto; max-width: 100%; }
.ap-brand__wm, .lg-lock__wm, .lg-brand__wm, .brand-word { font-family: var(--stz-font-display); font-weight: 800; }
h1, h2, .ap-h1, .ap-h2 { font-family: var(--stz-font-display); }


html body :is(.ap-btn--primary, .btn.primary, .btn-primary, .btn.pri, .btn--primary,
  .button-primary, .primary-btn, .lds-btn--primary, .pay-btn, #payBtn, #signBtn,
  .p-btn-primary, .sg-btn-primary, .cta-primary, .btn-pri, .paybtn) {
  background: var(--stz-action-primary);
  color: var(--stz-on-action-primary);
  border: 1px solid var(--stz-action-primary-border);
  border-radius: var(--stz-radius-control);
  box-shadow: none;
  text-shadow: none;
}
html body :is(.ap-btn--primary, .btn.primary, .btn-primary, .btn.pri, .btn--primary,
  .button-primary, .primary-btn, .lds-btn--primary, .pay-btn, #payBtn, #signBtn,
  .p-btn-primary, .sg-btn-primary, .cta-primary, .btn-pri, .paybtn):hover { filter: brightness(.96); }

html body #google-daily button.ap-btn:disabled {
  background: var(--stz-surface-canvas);
  color: var(--stz-text-muted);
  border-color: var(--stz-rule-300);
  box-shadow: none;
  filter: none;
  opacity: 1;
  cursor: not-allowed;
}
html body :focus-visible { outline: 3px solid var(--stz-focus) !important; outline-offset: 3px; }
html body :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]) {
  color: var(--stz-text); background-color: var(--stz-surface-panel); border-color: var(--stz-text-muted);
}
.ap-side, .ap-top, .ap-rail, .ap-sidebar, .sidebar, .ap-topbar {
  background: var(--stz-surface-shell); color: var(--stz-on-surface-shell);
  --text: var(--stz-on-surface-shell); --text-strong: var(--stz-on-surface-shell);
  --text-body: var(--stz-on-surface-shell); --text-2: var(--stz-on-surface-shell-muted);
  --muted: var(--stz-on-surface-shell-muted); --text-muted: var(--stz-on-surface-shell-muted);
  --text-faint: var(--stz-on-surface-shell-muted); --dim: var(--stz-on-surface-shell-muted);
  --brand: var(--stz-cyan-500); --brand-bright: var(--stz-cyan-500);
  --success: var(--stz-status-success-on-shell); --error: var(--stz-status-danger-on-shell);
  --warning: var(--stz-status-warning-on-shell); --info: var(--stz-status-info-on-shell);
}
.stz-deployment-note { font-size: 12px; line-height: 1.5; color: var(--stz-text-muted); padding: 10px 16px; border-bottom: 1px solid var(--stz-rule-300); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}


html body .ap-main { background: var(--stz-surface-canvas); }
.ap-main::before,.ap-main::after,.ap-side::before,.ap-side::after { display:none !important; }
.ap-side { --glass-fill:var(--stz-navy-800); --surface-hover:var(--stz-navy-800); --surface-raised:var(--stz-navy-800); }
.ap-brand { flex-wrap:wrap; }
.ap-brand .stz-lockup { width:188px; }
.ap-collapsed .stz-lockup { display:none; }
.ap-dot { animation:none; box-shadow:none; }
.lg-card,.ap-card,.card { border-radius:var(--stz-radius-card); }
html body .paybtn { background:var(--stz-action-primary);color:var(--stz-on-action-primary);border:1px solid var(--stz-action-primary-border); }


:root[data-stz-page="checkout"], :root[data-stz-page="og-sign"] { --ink:var(--stz-text); }


html body .ap-btn--ghost { background:var(--stz-surface-panel);color:var(--stz-text);border:1px solid var(--stz-text-muted); }
html body .ap-btn--ghost:hover { background:var(--stz-surface-canvas);color:var(--stz-text); }


:root[data-payment-surface="portal"][data-theme="light"] .sidebar {
  background: var(--stz-surface-panel);
  color: var(--stz-text);
  --text: var(--stz-text); --text-strong: var(--stz-text);
  --text-body: var(--stz-text); --text-2: var(--stz-text-muted);
  --muted: var(--stz-text-muted); --text-muted: var(--stz-text-muted);
  --text-faint: var(--stz-text-muted); --dim: var(--stz-text-muted);
  --brand: var(--stz-action-secondary); --brand-bright: var(--stz-action-secondary);
  --accent: var(--stz-action-secondary); --accent-2: var(--stz-action-secondary);
  --success: var(--stz-status-success); --error: var(--stz-status-danger);
  --warning: var(--stz-status-warning); --info: var(--stz-status-info);
}


:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console {
  background: var(--stz-surface-panel);
  color: var(--stz-text);
  border-color: var(--stz-rule-300);
  box-shadow: var(--stz-shadow-card);
  --text: var(--stz-text); --text-1: var(--stz-text); --text-strong: var(--stz-text);
  --text-2: var(--stz-text-muted); --muted: var(--stz-text-muted);
}
:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console::before {
  display: none;
}
:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console :is(.scarlett-main, .scarlett-flow, .scarlett-stats, .scarlett-log, .scarlett-call-row) {
  border-color: var(--stz-rule-300);
}
:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-console :is(.scarlett-step, .scarlett-stats > div, .scarlett-mode-pill) {
  background: var(--stz-surface-canvas);
  border-color: var(--stz-rule-300);
}
:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-controls .btn-ghost {
  background: var(--stz-surface-panel);
  color: var(--stz-text);
  border-color: var(--stz-text-muted);
}
:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-call-row {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
:root[data-payment-surface="portal"][data-theme="light"] #tab-invoices .scarlett-call-row em {
  white-space: normal;
}

}