/* ════════════════════════════════════════════════════════════════════
ROAS AUDIT — CSS extracted from RoasAuditApp.jsx (Phase 1.Q)
────────────────────────────────────────────────────────────────────
This was the body of inside the React component —
a 762-line template literal that React injected into the DOM on
every mount. Now lives as a static stylesheet linked from ,
so the styles are available before React even hydrates, the CSS is
cacheable separately, and the React bundle drops by ~30 KB.
Every selector is scoped under .roas-app, the root class applied by
the React component on its top-level . Nothing leaks out to
Webflow's DOM or to other tools.
Pair files :
- src/RoasAuditApp.jsx (the React component)
- public/styles/tokens.css (Stack design tokens this builds on)
The GlobalStyles function in RoasAuditApp.jsx is now a no-op stub
returning null — JSX references like keep working
without modification.
════════════════════════════════════════════════════════════════════ */
/* ============================================================
AUDIT ROAS — Design system (Nerdstack-faithful)
All scoped to .roas-app, never bleeds into Webflow's DOM.
============================================================ */
.roas-app {
/* === Nerdstack design tokens (mirrored from acb-1.webflow.css) === */
--ns-bg: #f7f6f5; /* base--light-100 */
--ns-lift: #ffffff; /* lift--light, surface for cards */
--ns-depth: #ececec; /* depth--light, recessed bg */
--ns-text: #231f23; /* dark-100, strong */
--ns-text-medium: rgba(35,31,35,0.64);
--ns-text-subtle: rgba(35,31,35,0.48);
--ns-text-faint: rgba(35,31,35,0.08);
--ns-border-soft: rgba(35,31,35,0.12); /* between faint and 16% */
--ns-border-mid: rgba(35,31,35,0.20);
--ns-border-strong:rgba(35,31,35,0.40);
/* Pastel accents — used SPARINGLY, mostly for status badges */
--ns-coral: #ed7472;
--ns-mint: #ccfdcf;
--ns-sand: #f4e7c7;
--ns-sky: #d7e9ff;
--ns-orchid: #cebffa;
--ns-peach: #ffe1d6;
--ns-success: #2d7a3d;
--ns-warning: #8a5e1a;
/* Radii (Nerdstack uses rounded corners pretty much everywhere) */
--ns-radius-sm: .25rem; /* 4px — chips */
--ns-radius-md: .5rem; /* 8px — buttons, inputs */
--ns-radius-lg: .75rem; /* 12px — cards default */
--ns-radius-xl: 1rem; /* 16px — large surfaces */
--ns-radius-2xl: 1.25rem; /* 20px — hero panels */
/* Spacing scale — matches Nerdstack's --spacing--N */
--ns-space-1: .25rem;
--ns-space-2: .5rem;
--ns-space-3: .75rem;
--ns-space-4: 1rem;
--ns-space-5: 1.25rem;
--ns-space-6: 1.5rem;
--ns-space-8: 2rem;
--ns-space-10: 2.5rem;
--ns-space-12: 3rem;
--ns-space-16: 4rem;
--ns-space-20: 5rem;
/* Typography */
--ns-font-body: 'StackSans text Variable', system-ui, -apple-system, sans-serif;
--ns-font-heading: 'StackSans headline Variable', system-ui, -apple-system, sans-serif;
--ns-font-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', monospace;
/* Container settings */
background: var(--ns-bg);
color: var(--ns-text);
font-family: var(--ns-font-body);
font-weight: 300;
line-height: 1.5;
padding-top: var(--ns-space-16);
padding-bottom: var(--ns-space-16);
}
/* === DARK MODE (v1 progressif) ============================
The audit flow uses its own Nerdstack token mirror (--ns-*),
all hardcoded light. Without this override the React screens
inside .roas-app use GLOBAL flipping tokens (--fg, --surface)
that turn light in dark mode → light text on a pinned-light
page = illegible. We flip the --ns-* neutrals + ink ladder to
mirror tokens.css dark, keep pastel accents, and brighten the
success/warning text colours so they stay legible on dark. */
:root[data-theme="dark"] .roas-app {
--ns-bg: #1A171C;
--ns-lift: #241F27;
--ns-depth: #2E2932;
--ns-text: #F3F0F5;
--ns-text-medium: rgba(243,240,245,0.70);
--ns-text-subtle: rgba(243,240,245,0.48);
--ns-text-faint: rgba(243,240,245,0.10);
--ns-border-soft: rgba(243,240,245,0.14);
--ns-border-mid: rgba(243,240,245,0.24);
--ns-border-strong:rgba(243,240,245,0.42);
--ns-success: #6FD17F;
--ns-warning: #E0C66F;
}
/* === Resets & inheritance defuse =========================
Webflow injects hero/heading styles on bare h1/h2/etc., and
sets global form styles. We need to neutralize all of that
once for inside-app elements. */
.roas-app, .roas-app *, .roas-app *::before, .roas-app *::after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.roas-app *, .roas-app input, .roas-app textarea,
.roas-app select, .roas-app button {
font-family: var(--ns-font-body);
color: var(--ns-text);
}
/* Callouts à fond pastel CLAIR (banners vert/sable/pêche : ces fonds ne
s'inversent PAS en thème sombre). Leur texte doit donc rester FONCÉ
dans les deux thèmes. Spécificité (0,2,0) > le reset `.roas-app *`
(0,1,0), donc ça rétablit un texte foncé par défaut ; les couleurs
d'accent posées en INLINE (vert/rouge des valeurs) restent prioritaires
(1,0,0,0). Corrige le « blanc sur jaune » en dark. */
.roas-app .aa-pastel, .roas-app .aa-pastel * {
color: #231f23;
}
.roas-app h1, .roas-app h2, .roas-app h3,
.roas-app h4, .roas-app h5, .roas-app h6 {
margin: 0;
font-family: var(--ns-font-heading);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ns-text);
}
.roas-app p { margin: 0; }
.roas-app button {
font-family: var(--ns-font-body);
background: transparent;
border: none;
cursor: pointer;
padding: 0;
color: inherit;
}
.roas-app a { color: inherit; text-decoration: none; }
/* === Mono / labels ====================================== */
.roas-app .mono { font-family: var(--ns-font-mono); }
.roas-app .label {
font-family: var(--ns-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ns-text);
font-weight: 400;
line-height: 1.4;
}
.roas-app .label-muted {
font-family: var(--ns-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ns-text-subtle);
font-weight: 400;
line-height: 1.4;
}
/* === Headings ============================================
Nerdstack scale (desktop): h1 4rem, h2 3rem, h3 2.5rem,
h4 2rem, h5 1.5rem, h6 1.25rem. Weight 400 (NOT bold). */
.roas-app .hero-title {
font-family: var(--ns-font-heading);
font-weight: 400;
font-size: 4rem;
line-height: 4.25rem;
letter-spacing: -0.025em;
}
/* === Inputs (Nerdstack exact: bg = depth #ECECEC, no border by default) ====
The real Nerdstack input pattern uses background contrast with the page
(depth = #ECECEC vs base = #F7F6F5) instead of borders. Border appears
only on hover/focus. */
.roas-app input,
.roas-app textarea,
.roas-app select {
background: var(--ns-depth) !important;
border: 1px solid transparent !important;
border-radius: var(--ns-radius-md) !important;
padding: .75rem .875rem !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
font-size: 15px !important;
line-height: 1.4 !important;
font-weight: 400 !important;
font-family: var(--ns-font-body) !important;
color: var(--ns-text) !important;
outline: none;
box-shadow: none !important;
appearance: none;
-webkit-appearance: none;
transition: border-color .15s, background .15s;
}
.roas-app input:hover,
.roas-app textarea:hover,
.roas-app select:hover {
border-color: rgba(35,31,35,0.16) !important;
}
.roas-app input[type="number"] {
font-family: var(--ns-font-mono) !important;
font-size: 16px !important;
}
.roas-app input:focus,
.roas-app textarea:focus,
.roas-app select:focus {
border-color: rgba(35,31,35,0.32) !important;
background: var(--ns-lift) !important;
}
.roas-app textarea {
resize: vertical;
min-height: 80px !important;
}
.roas-app input::placeholder,
.roas-app textarea::placeholder {
color: var(--ns-text-subtle);
opacity: 1;
}
/* === Buttons (Nerdstack .cta_primary exact match) ========
radius .5rem, font-size 1rem (16px), line-height 1.25rem,
weight 400, letter-spacing 0, font 'StackSans text Variable'. */
.roas-app .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
background: var(--ns-text);
color: var(--ns-bg) !important;
padding: .875rem 1.5rem;
font-size: 1rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
border: 1px solid transparent;
border-radius: var(--ns-radius-md);
cursor: pointer;
transition: opacity .2s, transform .1s;
font-family: var(--ns-font-body);
}
.roas-app .btn-primary:hover:not(:disabled) {
opacity: 0.88;
}
.roas-app .btn-primary:active:not(:disabled) {
transform: translateY(1px);
}
.roas-app .btn-primary:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.roas-app .btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
background: rgba(35,31,35,0.08);
color: var(--ns-text);
padding: .875rem 1.5rem;
font-size: 1rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
border: 1px solid transparent;
border-radius: var(--ns-radius-md);
cursor: pointer;
transition: background .2s, color .2s;
font-family: var(--ns-font-body);
}
.roas-app .btn-ghost:hover {
background: var(--ns-text);
color: var(--ns-bg);
}
/* === Animations ========================================= */
.roas-app .fade-in { animation: ns-fadeIn .5s ease both; }
@keyframes ns-fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.roas-app .stagger > * { opacity: 0; animation: ns-fadeIn .5s ease forwards; }
.roas-app .stagger > *:nth-child(1) { animation-delay: .05s; }
.roas-app .stagger > *:nth-child(2) { animation-delay: .10s; }
.roas-app .stagger > *:nth-child(3) { animation-delay: .15s; }
.roas-app .stagger > *:nth-child(4) { animation-delay: .20s; }
.roas-app .stagger > *:nth-child(5) { animation-delay: .25s; }
.roas-app .stagger > *:nth-child(6) { animation-delay: .30s; }
.roas-app .stagger > *:nth-child(7) { animation-delay: .35s; }
.roas-app .stagger > *:nth-child(8) { animation-delay: .40s; }
/* === Cards ==============================================
Nerdstack cards: lift bg + soft radius + soft border. */
.roas-app .card {
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-lg);
padding: var(--ns-space-6);
background: var(--ns-lift);
}
.roas-app .card-choice {
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-lg);
padding: var(--ns-space-8);
background: var(--ns-lift);
cursor: pointer;
transition: all .2s;
text-align: left;
width: 100%;
}
.roas-app .card-choice:hover {
border-color: var(--ns-text);
box-shadow: 0 4px 12px rgba(35,31,35,0.05);
transform: translateY(-1px);
}
/* === Connector chips ==================================== */
.roas-app .connector-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem .875rem;
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-md);
background: var(--ns-lift);
cursor: pointer;
font-family: var(--ns-font-body);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
transition: all .15s;
}
.roas-app .connector-chip:hover {
border-color: var(--ns-text);
}
.roas-app .connector-chip.connected {
background: var(--ns-text);
color: var(--ns-bg) !important;
border-color: var(--ns-text);
}
.roas-app .connector-icon {
width: 22px;
height: 22px;
border-radius: var(--ns-radius-sm);
background: var(--ns-text-faint);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 11px;
}
/* === Radio pills ======================================== */
.roas-app .radio-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.roas-app .radio-option {
padding: .5rem 1rem;
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-md);
font-family: var(--ns-font-body);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
background: var(--ns-lift);
transition: all .15s;
}
.roas-app .radio-option:hover {
border-color: var(--ns-text);
}
.roas-app .radio-option.selected {
background: var(--ns-text);
color: var(--ns-bg) !important;
border-color: var(--ns-text);
}
/* === Upload zone ======================================== */
.roas-app .upload-zone {
border: 1.5px dashed var(--ns-border-mid);
border-radius: var(--ns-radius-lg);
padding: var(--ns-space-10) var(--ns-space-6);
text-align: center;
cursor: pointer;
transition: all .15s;
background: var(--ns-lift);
}
.roas-app .upload-zone:hover {
border-color: var(--ns-text);
background: var(--ns-depth);
}
/* === Details / accordion ================================ */
.roas-app details > summary { list-style: none; cursor: pointer; }
.roas-app details > summary::-webkit-details-marker { display: none; }
.roas-app details[open] > summary .details-marker { transform: rotate(90deg); }
.roas-app details .details-marker {
display: inline-block;
transition: transform 0.15s ease;
}
/* === Calc box — distinct surface, no harsh borders ===== */
.roas-app .calc-box {
background: var(--ns-lift);
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-lg);
padding: var(--ns-space-5) var(--ns-space-6);
margin-top: var(--ns-space-4);
position: relative;
}
.roas-app .calc-box::before {
content: "";
position: absolute;
left: 0;
top: var(--ns-space-5);
bottom: var(--ns-space-5);
width: 3px;
background: var(--ns-coral);
border-radius: 0 var(--ns-radius-sm) var(--ns-radius-sm) 0;
}
.roas-app .calc-result {
font-family: var(--ns-font-mono);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
}
/* === Section numbers — sober, not coral ================ */
.roas-app .section-number {
font-family: var(--ns-font-mono);
font-size: 36px;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--ns-text);
line-height: 1;
}
/* === Results banner ===================================== */
.roas-app .results-banner {
background: var(--ns-lift);
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-lg);
padding: var(--ns-space-3) var(--ns-space-5);
margin-bottom: var(--ns-space-8);
position: relative;
}
.roas-app .results-banner::before {
content: "";
position: absolute;
left: 0;
top: var(--ns-space-3);
bottom: var(--ns-space-3);
width: 3px;
background: var(--ns-coral);
border-radius: 0 var(--ns-radius-sm) var(--ns-radius-sm) 0;
}
.roas-app .results-banner-item {
display: inline-flex;
gap: .65rem;
align-items: baseline;
}
.roas-app .results-banner-key {
font-family: var(--ns-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ns-text-subtle);
}
/* Montants — agrandis significativement pour servir de KPI
strip "héro" en haut du dashboard. Les chiffres sont la
première chose que le user (et le client) doit voir.
13px → 22px + weight 600. Tabular-nums pour alignement
des centaines/milliers/etc dans la grille horizontale. */
.roas-app .results-banner-val {
font-family: var(--ns-font-mono);
font-size: 22px;
font-weight: 600;
color: var(--ns-text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* === Data table ========================================= */
.roas-app .data-table {
width: 100%;
border-collapse: collapse;
font-family: var(--ns-font-mono);
font-size: 12px;
border-radius: var(--ns-radius-lg);
overflow: hidden;
}
.roas-app .data-table th {
background: var(--ns-depth);
text-align: left;
padding: .625rem .75rem;
border: 1px solid var(--ns-border-soft);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 10px;
}
.roas-app .data-table td {
padding: .625rem .75rem;
border: 1px solid var(--ns-border-soft);
background: var(--ns-lift);
}
.roas-app .data-table td input {
border: none !important;
background: transparent !important;
padding: 0 !important;
font-size: 12px !important;
text-align: right;
width: 100%;
}
.roas-app .scroll-x-wrap {
overflow-x: auto;
border: 1px solid var(--ns-border-soft);
border-radius: var(--ns-radius-lg);
}
/* ============================================================
TAILWIND-LIKE UTILITIES (scoped to .roas-app only)
The original code uses ~50 Tailwind classes for layout. Rather
than ship Tailwind, we inline equivalent utilities here so the
bundle stays self-contained.
============================================================ */
/* Display & flex */
.roas-app .flex { display: flex; }
.roas-app .grid { display: grid; }
.roas-app .block { display: block; }
.roas-app .inline-block { display: inline-block; }
.roas-app .inline-flex { display: inline-flex; }
.roas-app .hidden { display: none; }
.roas-app .relative { position: relative; }
.roas-app .absolute { position: absolute; }
.roas-app .sticky { position: sticky; }
/* Items/justify */
.roas-app .items-center { align-items: center; }
.roas-app .items-start { align-items: flex-start; }
.roas-app .items-end { align-items: flex-end; }
.roas-app .items-baseline { align-items: baseline; }
.roas-app .items-stretch { align-items: stretch; }
.roas-app .justify-center { justify-content: center; }
.roas-app .justify-between { justify-content: space-between; }
.roas-app .justify-end { justify-content: flex-end; }
.roas-app .justify-start { justify-content: flex-start; }
.roas-app .flex-col { flex-direction: column; }
.roas-app .flex-row { flex-direction: row; }
.roas-app .flex-wrap { flex-wrap: wrap; }
.roas-app .flex-1 { flex: 1 1 0%; }
.roas-app .flex-shrink-0 { flex-shrink: 0; }
/* Grid columns */
.roas-app .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.roas-app .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roas-app .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roas-app .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roas-app .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.roas-app .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.roas-app .col-span-1 { grid-column: span 1 / span 1; }
.roas-app .col-span-2 { grid-column: span 2 / span 2; }
.roas-app .col-span-3 { grid-column: span 3 / span 3; }
.roas-app .col-span-4 { grid-column: span 4 / span 4; }
.roas-app .col-span-5 { grid-column: span 5 / span 5; }
.roas-app .col-span-6 { grid-column: span 6 / span 6; }
.roas-app .col-span-7 { grid-column: span 7 / span 7; }
.roas-app .col-span-8 { grid-column: span 8 / span 8; }
.roas-app .col-span-9 { grid-column: span 9 / span 9; }
.roas-app .col-span-10 { grid-column: span 10 / span 10; }
.roas-app .col-span-11 { grid-column: span 11 / span 11; }
.roas-app .col-span-12 { grid-column: span 12 / span 12; }
/* Responsive (≥768px) */
@media (min-width: 768px) {
.roas-app .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.roas-app .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roas-app .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roas-app .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roas-app .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.roas-app .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.roas-app .md\:col-span-1 { grid-column: span 1 / span 1; }
.roas-app .md\:col-span-2 { grid-column: span 2 / span 2; }
.roas-app .md\:col-span-3 { grid-column: span 3 / span 3; }
.roas-app .md\:col-span-4 { grid-column: span 4 / span 4; }
.roas-app .md\:col-span-5 { grid-column: span 5 / span 5; }
.roas-app .md\:col-span-6 { grid-column: span 6 / span 6; }
.roas-app .md\:col-span-7 { grid-column: span 7 / span 7; }
.roas-app .md\:col-span-8 { grid-column: span 8 / span 8; }
.roas-app .md\:col-span-9 { grid-column: span 9 / span 9; }
.roas-app .md\:col-span-10 { grid-column: span 10 / span 10; }
.roas-app .md\:col-span-11 { grid-column: span 11 / span 11; }
.roas-app .md\:col-span-12 { grid-column: span 12 / span 12; }
.roas-app .md\:text-5xl { font-size: 48px; line-height: 1.05; }
.roas-app .md\:text-6xl { font-size: 60px; line-height: 1; }
.roas-app .md\:text-7xl { font-size: 64px; line-height: 1.05; }
.roas-app .md\:text-8xl { font-size: 72px; line-height: 1.05; }
}
/* Gap (uniform & directional) */
.roas-app .gap-1 { gap: 4px; }
.roas-app .gap-2 { gap: 8px; }
.roas-app .gap-3 { gap: 12px; }
.roas-app .gap-4 { gap: 16px; }
.roas-app .gap-5 { gap: 20px; }
.roas-app .gap-6 { gap: 24px; }
.roas-app .gap-8 { gap: 32px; }
.roas-app .gap-10 { gap: 40px; }
.roas-app .gap-12 { gap: 48px; }
.roas-app .gap-x-2 { column-gap: 8px; }
.roas-app .gap-x-3 { column-gap: 12px; }
.roas-app .gap-x-4 { column-gap: 16px; }
.roas-app .gap-x-6 { column-gap: 24px; }
.roas-app .gap-x-8 { column-gap: 32px; }
.roas-app .gap-x-10 { column-gap: 40px; }
.roas-app .gap-x-12 { column-gap: 48px; }
.roas-app .gap-y-2 { row-gap: 8px; }
.roas-app .gap-y-3 { row-gap: 12px; }
.roas-app .gap-y-4 { row-gap: 16px; }
.roas-app .gap-y-6 { row-gap: 24px; }
.roas-app .gap-y-8 { row-gap: 32px; }
.roas-app .gap-y-10 { row-gap: 40px; }
.roas-app .gap-y-12 { row-gap: 48px; }
/* Width / height */
.roas-app .w-full { width: 100%; }
.roas-app .w-auto { width: auto; }
.roas-app .w-1\/2 { width: 50%; }
.roas-app .w-1\/3 { width: 33.333333%; }
.roas-app .w-2\/3 { width: 66.666667%; }
.roas-app .w-1\/4 { width: 25%; }
.roas-app .w-3\/4 { width: 75%; }
.roas-app .h-full { height: 100%; }
/* Max-width — content columns */
.roas-app .max-w-2xl { max-width: 42rem; }
.roas-app .max-w-3xl { max-width: 48rem; }
.roas-app .max-w-4xl { max-width: 56rem; }
.roas-app .max-w-5xl { max-width: 64rem; }
.roas-app .max-w-6xl { max-width: 72rem; }
.roas-app .max-w-7xl { max-width: 80rem; }
.roas-app .max-w-full { max-width: 100%; }
/* Margin auto */
.roas-app .mx-auto { margin-left: auto; margin-right: auto; }
.roas-app .my-auto { margin-top: auto; margin-bottom: auto; }
/* Padding */
.roas-app .p-2 { padding: 8px; }
.roas-app .p-3 { padding: 12px; }
.roas-app .p-4 { padding: 16px; }
.roas-app .p-6 { padding: 24px; }
.roas-app .p-8 { padding: 32px; }
.roas-app .px-2 { padding-left: 8px; padding-right: 8px; }
.roas-app .px-3 { padding-left: 12px; padding-right: 12px; }
.roas-app .px-4 { padding-left: 16px; padding-right: 16px; }
.roas-app .px-6 { padding-left: 24px; padding-right: 24px; }
.roas-app .px-8 { padding-left: 32px; padding-right: 32px; }
.roas-app .py-2 { padding-top: 8px; padding-bottom: 8px; }
.roas-app .py-3 { padding-top: 12px; padding-bottom: 12px; }
.roas-app .py-4 { padding-top: 16px; padding-bottom: 16px; }
.roas-app .py-6 { padding-top: 24px; padding-bottom: 24px; }
.roas-app .py-8 { padding-top: 32px; padding-bottom: 32px; }
.roas-app .py-12 { padding-top: 48px; padding-bottom: 48px; }
.roas-app .py-16 { padding-top: 64px; padding-bottom: 64px; }
.roas-app .py-20 { padding-top: 80px; padding-bottom: 80px; }
.roas-app .py-24 { padding-top: 96px; padding-bottom: 96px; }
/* Margin */
.roas-app .m-0 { margin: 0; }
.roas-app .mt-1 { margin-top: 4px; }
.roas-app .mt-2 { margin-top: 8px; }
.roas-app .mt-3 { margin-top: 12px; }
.roas-app .mt-4 { margin-top: 16px; }
.roas-app .mt-6 { margin-top: 24px; }
.roas-app .mt-8 { margin-top: 32px; }
.roas-app .mt-12 { margin-top: 48px; }
.roas-app .mt-16 { margin-top: 64px; }
.roas-app .mb-1 { margin-bottom: 4px; }
.roas-app .mb-2 { margin-bottom: 8px; }
.roas-app .mb-3 { margin-bottom: 12px; }
.roas-app .mb-4 { margin-bottom: 16px; }
.roas-app .mb-5 { margin-bottom: 20px; }
.roas-app .mb-6 { margin-bottom: 24px; }
.roas-app .mb-8 { margin-bottom: 32px; }
.roas-app .mb-10 { margin-bottom: 40px; }
.roas-app .mb-12 { margin-bottom: 48px; }
.roas-app .mb-14 { margin-bottom: 56px; }
.roas-app .mb-16 { margin-bottom: 64px; }
.roas-app .mb-20 { margin-bottom: 80px; }
.roas-app .ml-2 { margin-left: 8px; }
.roas-app .ml-3 { margin-left: 12px; }
.roas-app .ml-4 { margin-left: 16px; }
.roas-app .mr-2 { margin-right: 8px; }
.roas-app .mr-3 { margin-right: 12px; }
.roas-app .mr-4 { margin-right: 16px; }
/* Space-x / space-y */
.roas-app .space-x-2 > * + * { margin-left: 8px; }
.roas-app .space-x-3 > * + * { margin-left: 12px; }
.roas-app .space-x-4 > * + * { margin-left: 16px; }
.roas-app .space-y-2 > * + * { margin-top: 8px; }
.roas-app .space-y-3 > * + * { margin-top: 12px; }
.roas-app .space-y-4 > * + * { margin-top: 16px; }
.roas-app .space-y-6 > * + * { margin-top: 24px; }
.roas-app .space-y-8 > * + * { margin-top: 32px; }
/* Text */
.roas-app .text-center { text-align: center; }
.roas-app .text-left { text-align: left; }
.roas-app .text-right { text-align: right; }
.roas-app .text-xs { font-size: 11px; line-height: 1.4; }
.roas-app .text-sm { font-size: 13px; line-height: 1.5; }
.roas-app .text-base { font-size: 15px; line-height: 1.5; }
.roas-app .text-lg { font-size: 17px; line-height: 1.5; }
.roas-app .text-xl { font-size: 20px; line-height: 1.4; }
.roas-app .text-2xl { font-size: 24px; line-height: 1.3; }
.roas-app .text-3xl { font-size: 30px; line-height: 1.2; }
.roas-app .text-4xl { font-size: 36px; line-height: 1.1; }
.roas-app .text-5xl { font-size: 48px; line-height: 1.05; }
.roas-app .text-6xl { font-size: 60px; line-height: 1; }
.roas-app .text-7xl { font-size: 64px; line-height: 1; }
.roas-app .text-8xl { font-size: 72px; line-height: 1; }
.roas-app .font-light { font-weight: 300; }
.roas-app .font-normal { font-weight: 400; }
.roas-app .font-medium { font-weight: 500; }
.roas-app .font-semibold { font-weight: 600; }
.roas-app .font-bold { font-weight: 700; }
.roas-app .uppercase { text-transform: uppercase; }
.roas-app .lowercase { text-transform: lowercase; }
.roas-app .italic { font-style: italic; }
.roas-app .underline { text-decoration: underline; }
.roas-app .no-underline { text-decoration: none; }
.roas-app .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roas-app .whitespace-nowrap { white-space: nowrap; }
.roas-app .leading-snug { line-height: 1.375; }
.roas-app .leading-relaxed { line-height: 1.625; }
.roas-app .leading-tight { line-height: 1.25; }
/* Border */
.roas-app .border { border: 1px solid var(--ns-border-soft); }
.roas-app .border-0 { border: 0; }
.roas-app .border-t { border-top: 1px solid var(--ns-border-soft); }
.roas-app .border-b { border-bottom: 1px solid var(--ns-border-soft); }
.roas-app .border-l { border-left: 1px solid var(--ns-border-soft); }
.roas-app .border-r { border-right: 1px solid var(--ns-border-soft); }
.roas-app .border-2 { border: 2px solid var(--ns-border-soft); }
.roas-app .rounded-none { border-radius: 0; }
.roas-app .rounded { border-radius: var(--ns-radius-md); }
.roas-app .rounded-md { border-radius: var(--ns-radius-md); }
.roas-app .rounded-lg { border-radius: var(--ns-radius-lg); }
.roas-app .rounded-xl { border-radius: var(--ns-radius-xl); }
.roas-app .rounded-full { border-radius: 9999px; }
/* Cursor */
.roas-app .cursor-pointer { cursor: pointer; }
.roas-app .cursor-not-allowed { cursor: not-allowed; }
.roas-app .cursor-default { cursor: default; }
/* Z-index */
.roas-app .z-0 { z-index: 0; }
.roas-app .z-10 { z-index: 10; }
.roas-app .z-20 { z-index: 20; }
.roas-app .z-30 { z-index: 30; }
.roas-app .z-40 { z-index: 40; }
.roas-app .z-50 { z-index: 50; }
/* Top/Right/Bottom/Left for absolute/sticky positioning.
top-0 is overridden for .sticky elements specifically: we
offset them so they don't collide with Webflow's fixed navbar
at the top of the viewport (~80px tall, plus a small gap). */
.roas-app .top-0 { top: 0; }
.roas-app .sticky.top-0 { top: 88px; }
.roas-app .left-0 { left: 0; }
.roas-app .right-0 { right: 0; }
.roas-app .bottom-0 { bottom: 0; }
/* Backgrounds (utility names matching Tailwind defaults) */
.roas-app .bg-white {
background: var(--ns-lift) !important;
}
/* Sticky bars get a subtle bottom shadow so they detach visually
from the page content when scrolling. */
.roas-app .sticky.bg-white {
background: var(--ns-bg) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--ns-border-soft) !important;
}
/* The original code applies inline border-bottom: 1px solid #231f23
on the recap bar — too harsh. Override it. */
.roas-app .sticky[style*="border"] {
border-bottom: 1px solid var(--ns-border-soft) !important;
}
/* The Modifier button on the recap bar uses inline styles with a hard
black border. Soften it to match the rest of the design system. */
.roas-app .sticky button[style*="Fragment Mono"] {
border-color: var(--ns-border-mid) !important;
border-radius: var(--ns-radius-sm) !important;
}
/* Overflow */
.roas-app .overflow-hidden { overflow: hidden; }
.roas-app .overflow-auto { overflow: auto; }
.roas-app .overflow-x-auto { overflow-x: auto; }
.roas-app .overflow-y-auto { overflow-y: auto; }
/* Opacity */
.roas-app .opacity-50 { opacity: 0.5; }
.roas-app .opacity-75 { opacity: 0.75; }
.roas-app .opacity-100 { opacity: 1; }