:root {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f6f9fd;
  --color-border: #e2eaf4;
  --color-border-strong: #cbd8e8;
  --color-text: #0b1533;
  --color-text-secondary: #667394;
  --color-primary: #0b6ffb;
  --color-primary-hover: #075fd8;
  --color-primary-soft: #eaf3ff;
  --color-success: #079455;
  --color-success-soft: #e8f8ef;
  --color-warning: #b76e00;
  --color-warning-soft: #fff6df;
  --color-danger: #d92d20;
  --color-danger-soft: #fff0ee;
  --color-accent-green: #12b76a;
  --color-accent-purple: #7a5af8;
  --color-accent-pink: #ee4678;
  --color-accent-yellow: #f5a300;
  --color-accent-cyan: #06aed4;
  --color-sidebar: #ffffff;
  --color-sidebar-deep: #f8fbff;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 33, 69, .025), 0 8px 24px rgba(31, 68, 126, .035);
  --shadow-md: 0 20px 60px rgba(31, 68, 126, .12);
  --font-size-page-title: clamp(32px, 3.8vw, 46px);
  --font-size-section-title: clamp(22px, 2.4vw, 28px);
  --font-size-card-title: 18px;
  --font-size-body: 16px;
  --font-size-secondary: 14px;
  --font-size-caption: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --ink: var(--color-text);
  --muted: var(--color-text-secondary);
  --green: var(--color-primary);
  --green2: var(--color-primary-soft);
  --cream: var(--color-bg);
  --line: var(--color-border);
  --white: var(--color-surface);
  --danger: var(--color-danger);
  --shadow: var(--shadow-sm);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--color-bg); }
body { margin: 0; min-height: 100vh; background: var(--color-bg); }
body.nav-open { overflow: hidden; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.muted, .lead { color: var(--color-text-secondary); line-height: 1.65; }
.lead { max-width: 720px; margin-top: 0; font-size: 18px; }
.optional { color: var(--color-text-secondary); font-weight: 500; }

h1, h2, h3 { color: var(--color-text); text-wrap: balance; }
h1 { margin: var(--space-2) 0 var(--space-4); font-size: var(--font-size-page-title); line-height: 1.08; letter-spacing: -.04em; }
h2 { font-size: var(--font-size-section-title); letter-spacing: -.025em; line-height: 1.18; }
h3 { font-size: var(--font-size-card-title); line-height: 1.3; }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-primary); font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }

a { color: var(--color-primary); font-weight: 750; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: 3px solid #82b9ff; outline-offset: 3px; }

.brand { min-height: 38px; display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); font-size: 21px; font-weight: 850; letter-spacing: -.035em; }
.brand.light { color: #0d326f; }
.brand-home { text-decoration: none; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #1681ff, #075fd8); color: #fff; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(11,111,251,.18); }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-8); background: radial-gradient(circle at 12% 8%, #d5eee1 0, transparent 34%), radial-gradient(circle at 90% 90%, #efe9d7 0, transparent 32%), var(--color-bg); }
.auth-card { width: min(448px, 100%); padding: var(--space-10); border: 1px solid rgba(199, 212, 204, .8); border-radius: var(--radius-xl); background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); }
.auth-card .brand { margin-bottom: var(--space-8); }
.auth-card form, .wizard-card { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.switch { margin: var(--space-6) 0 0; color: var(--color-text-secondary); text-align: center; }

label { display: grid; gap: var(--space-2); color: var(--color-text); font-size: 14px; font-weight: 750; }
input, textarea, select { width: 100%; min-height: 48px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 12px 14px; outline: none; background: var(--color-surface); color: var(--color-text); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #88958e; opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: #9fb1a6; }
input:focus, textarea:focus, select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(11,111,251,.11); }
input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; background: #eef1ef; color: #758078; }
.form-error { min-height: 20px; margin: 0; color: var(--color-danger); font-size: 14px; font-weight: 650; }

button, .button-link { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 18px; font-weight: 800; line-height: 1.2; cursor: pointer; text-align: center; text-decoration: none; transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:hover:not(:disabled), .button-link:hover { transform: translateY(-1px); }
button:active:not(:disabled), .button-link:active { transform: translateY(0); }
button:disabled { cursor: not-allowed; opacity: .56; }
.primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 18px rgba(11,111,251,.16); }
.primary:hover { background: var(--color-primary-hover); color: #fff; }
.ghost, .secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); box-shadow: none; }
.ghost:hover, .secondary:hover { border-color: var(--color-border-strong); background: var(--color-surface-subtle); color: var(--color-text); }
.danger { border-color: #f0c4bf; background: var(--color-danger-soft); color: var(--color-danger); }
.compact { min-height: 40px; padding: 8px 14px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
#app-shell > aside { position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; padding: 28px 16px 20px; border-right: 1px solid var(--color-border); background: linear-gradient(180deg, var(--color-sidebar), var(--color-sidebar-deep)); color: var(--color-text); }
#app-shell > aside .brand-home { padding: 0 4px; }
#app-shell > aside nav { display: grid; gap: 6px; margin-top: 38px; }
#app-shell > aside nav a { min-height: 48px; display: flex; align-items: center; gap: 13px; border-radius: 11px; padding: 11px 13px; color: #52617f; font-size: 15px; font-weight: 650; text-decoration: none; transition: color .18s ease, background .18s ease, transform .18s ease; }
#app-shell > aside nav a > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#app-shell > aside nav a > span { min-width: 0; }
#app-shell > aside nav a:hover { transform: translateX(2px); background: #f2f7ff; color: var(--color-primary); }
#app-shell > aside nav a.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; }
.aside-note { margin-top: auto; padding: var(--space-4); border: 1px solid #d8e6f7; border-radius: var(--radius-md); background: #f2f7ff; color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; }
.aside-note strong { color: var(--color-text); }
.plan-card { display: flex; align-items: flex-start; gap: 10px; }
.plan-card small { display: block; margin-top: 3px; }
.plan-icon { color: var(--color-accent-yellow); font-size: 18px; line-height: 1; }
.nav-backdrop { display: none; }
.nav-backdrop:hover { transform: none !important; }
.workspace { min-width: 0; }
.workspace > main:focus { outline: none; }
.workspace > header { position: sticky; top: 0; z-index: 10; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 3vw, 48px); border-bottom: 1px solid rgba(226,234,244,.95); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.header-identity { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
#company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mobile-brand, .menu-toggle { display: none; }
.header-actions { height: 100%; display: flex; align-items: center; gap: 10px; }
.notification-button { width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: #5d6b88; }
.notification-button:hover { border-color: var(--color-border); background: var(--color-surface-subtle); color: var(--color-primary); }
.notification-button svg, .profile-chevron { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-menu { position: relative; height: 100%; border-left: 1px solid var(--color-border); }
.profile-menu summary { min-width: 220px; height: 100%; display: flex; align-items: center; gap: 11px; padding: 0 4px 0 20px; color: var(--color-text); cursor: pointer; list-style: none; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:hover { background: var(--color-surface-subtle); }
.company-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid #c8dcfa; border-radius: 50%; background: linear-gradient(145deg, #dcecff, #f1f7ff); color: var(--color-primary); font-size: 15px; font-weight: 850; }
.profile-copy { min-width: 0; display: grid; flex: 1; }
.profile-copy small { margin-top: 2px; color: var(--color-text-secondary); font-size: 12px; }
.profile-chevron { width: 18px; height: 18px; color: var(--color-text-secondary); transition: transform .18s ease; }
.profile-menu[open] .profile-chevron { transform: rotate(180deg); }
.profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 210px; display: grid; overflow: hidden; padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); }
.profile-dropdown a, .profile-dropdown button { min-height: 44px; justify-content: flex-start; border: 0; border-radius: 9px; padding: 10px 12px; background: transparent; color: var(--color-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.profile-dropdown a { display: flex; align-items: center; }
.profile-dropdown a:hover, .profile-dropdown button:hover { transform: none; background: var(--color-primary-soft); color: var(--color-primary); }

.page { width: min(100%, 1160px); margin: 0 auto; padding: clamp(38px, 4.5vw, 64px) clamp(24px, 4vw, 52px) 96px; }
.profile-page, .ai-page { max-width: 1020px; }
.wizard-page { max-width: 900px; }
.guided-page { max-width: 760px; }
.page-back { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: var(--space-5); text-decoration: none; }
.empty, .card, .wizard-card, .ai-result { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.empty, .card { padding: var(--space-6); color: var(--color-text-secondary); }
.card h2 { margin-top: 0; color: var(--color-text); }
.empty-state { display: grid; justify-items: start; padding: var(--space-8); }
.empty-state h3 { margin: 0; }
.empty-state p { margin: var(--space-2) 0 var(--space-5); }

.hero-card { position: relative; margin-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr); gap: var(--space-8); overflow: hidden; padding: clamp(28px, 4vw, 46px); border: 1px solid #d6e7fb; border-radius: var(--radius-xl); background: linear-gradient(135deg, #eef6ff 0%, #fbfdff 58%, #f1edff 100%); box-shadow: var(--shadow-sm); }
.hero-card h2 { margin: var(--space-4) 0 var(--space-2); font-size: clamp(28px, 3vw, 38px); }
.hero-card p { max-width: 640px; margin: 0 0 var(--space-6); color: #42564c; line-height: 1.65; }
.hero-actions, .creative-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.merchant-actions { grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(140px, 1fr)); }
.merchant-actions .primary { border-color: var(--color-primary); color: #fff; box-shadow: 0 10px 24px rgba(11,111,251,.18); }
.hero-art { min-height: 160px; display: flex; align-items: flex-end; justify-content: center; gap: 12px; opacity: .9; }
.hero-art i { width: 44px; height: 44%; display: block; border-radius: 18px 18px 6px 6px; background: var(--color-primary); box-shadow: 0 10px 24px rgba(11,111,251,.14); }
.hero-art i:nth-child(2) { height: 68%; background: var(--color-accent-cyan); }
.hero-art i:nth-child(3) { height: 92%; background: var(--color-accent-purple); }
.pill { width: fit-content; display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 10px; background: var(--color-surface); color: var(--color-primary); font-size: 12px; font-weight: 800; }
.section-head { margin: var(--space-12) 0 var(--space-4); display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.section-head h2 { margin: 4px 0 0; }

.settings-grid { margin-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
.card dl { margin: 0; }
.card dl div { display: flex; justify-content: space-between; gap: var(--space-5); padding: 15px 0; border-top: 1px solid var(--color-border); }
dt { color: var(--color-text-secondary); }
dd { margin: 0; color: var(--color-text); font-weight: 750; text-align: right; overflow-wrap: anywhere; }
.status-dot { width: 11px; height: 11px; display: block; border-radius: 50%; background: #d39a1e; box-shadow: 0 0 0 5px var(--color-warning-soft); }

.campaign-list { margin-top: var(--space-8); display: grid; gap: var(--space-4); }
.campaign-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.campaign-item h3 { margin: 0 0 var(--space-3); font-size: 18px; }
.campaign-item p { margin: 6px 0; color: var(--color-text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.campaign-statuses { align-self: center; padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
.health-explanation { font-size: 13px; }
.health-green { border-color: #b9dec9; background: var(--color-success-soft); color: var(--color-success); }
.health-yellow { border-color: #ead69c; background: var(--color-warning-soft); color: var(--color-warning); }
.health-red { border-color: #f1c4bf; background: var(--color-danger-soft); color: var(--color-danger); }
.health-learning { color: var(--color-text-secondary); }

.wizard-card { position: relative; padding: clamp(22px, 4vw, 36px); }
.wizard-card section { min-width: 0; display: grid; gap: var(--space-5); }
.guided-card { margin-top: var(--space-5); padding: clamp(24px, 5vw, 42px); }
.guided-card h1 { font-size: clamp(30px, 5vw, 44px); }
.guided-card form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.guided-progress { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: 13px; font-weight: 750; }
.guided-progress .progress { margin-top: var(--space-2); }
.journey-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.saved-reassurance { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
.color-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.color-fields input[type="color"] { height: 76px; padding: 7px; cursor: pointer; }
.merchant-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.merchant-goals label { position: relative; }
.merchant-goals input { position: absolute; opacity: 0; pointer-events: none; }
.merchant-goals span { min-height: 52px; display: flex; align-items: center; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.merchant-goals input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.merchant-goals input:focus-visible + span { outline: 3px solid #82b9ff; outline-offset: 3px; }
.inline-action { justify-self: start; }
.common-choice { border-color: #b9dec9; background: var(--color-success-soft); color: var(--color-success); }
.choice-list .common-option { border: 2px solid #8fc8aa; background: var(--color-primary-soft); }
.choice-list label span { display: grid; gap: 3px; }
.choice-list label small { color: var(--color-text-secondary); font-weight: 500; }
.wizard-card h2 { margin: 0; font-size: clamp(24px, 3vw, 30px); }
.step-label { margin: 0; color: var(--color-primary); font-size: 13px; font-weight: 850; }
.steps { margin: var(--space-8) 0; display: flex; align-items: center; }
.steps span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: #e7ece9; color: var(--color-text-secondary); font-size: 13px; font-weight: 850; }
.steps span.active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.steps i { height: 2px; flex: 1; background: var(--color-border); }
.ai { justify-self: start; background: #eff2f0; color: var(--color-text-secondary); }
.ai small { margin-left: var(--space-2); }
.money { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.money:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(11,111,251,.11); }
.money span { padding-left: 14px; font-weight: 750; }
.money input { border: 0; box-shadow: none; }
.limit { margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: var(--space-2); font-size: 14px; font-weight: 750; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.segmented label input, .asset-option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 44px; display: grid; place-items: center; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: center; }
.segmented input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.segmented input:focus-visible + span, .asset-option input:focus-visible + span { outline: 3px solid #82b9ff; outline-offset: 3px; }
.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.asset-card { min-width: 0; display: flex; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.asset-card h3, .asset-card p { margin: 2px 0; }
.asset-card span { margin-top: 10px; display: inline-block; color: var(--color-primary); font-size: 13px; font-weight: 800; }
.asset-preview { width: 70px; height: 70px; flex: none; border-radius: var(--radius-sm); background: linear-gradient(145deg, #b7dfc8, #33795a); }
.asset-preview.vertical { width: 42px; }
.asset-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--space-3); }
.asset-option { min-width: 0; }
.asset-option span { display: block; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-md); padding: var(--space-2); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.asset-option img { width: 100%; height: 138px; display: block; margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-subtle); object-fit: cover; }
.asset-option strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-option input:checked + span { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(11,111,251,.11); }
.review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.review > div { min-width: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.review span { display: block; margin-bottom: 5px; color: var(--color-text-secondary); font-size: 12px; }
.review strong { overflow-wrap: anywhere; }
.review .wide { grid-column: 1 / -1; }
.review small { display: block; margin-top: 6px; color: var(--color-text-secondary); }
.review-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.review-assets figure { min-width: 0; margin: 0; }
.review-assets img { width: 100%; max-height: 360px; display: block; border-radius: var(--radius-sm); background: var(--color-bg); object-fit: contain; }
.review-assets figcaption { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.wizard-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; gap: var(--space-3); margin: 0 -24px -24px; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.wizard-actions #next, .wizard-actions #create { margin-left: auto; }

.notice { margin: 0; padding: 13px 15px; border: 1px solid #ead69c; border-radius: var(--radius-sm); background: var(--color-warning-soft); color: #6f5400; line-height: 1.5; }
.ready-notice, .success-notice { border-color: #b9dec9; background: var(--color-success-soft); color: var(--color-success); }
.app-toast { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 40; max-width: min(360px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #245ca8; border-radius: var(--radius-sm); background: #0d326f; color: #fff; box-shadow: var(--shadow-md); font-size: 14px; font-weight: 700; }
.creative-actions { margin: var(--space-8) 0; }
.upload-panel { margin-bottom: var(--space-8); }
.format-status { margin: var(--space-6) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.format-status article { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.format-status article.done { border-color: #b9dec9; background: var(--color-success-soft); color: var(--color-success); }
.format-status article.pending { color: var(--color-text-secondary); }
.format-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.format-picker label { position: relative; }
.format-picker input { position: absolute; opacity: 0; pointer-events: none; }
.format-picker span { min-height: 76px; display: grid; align-content: center; gap: 4px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.format-picker input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: 0 0 0 3px rgba(11,111,251,.1); }
.format-picker input:focus-visible + span { outline: 3px solid #82b9ff; outline-offset: 3px; }
.format-picker small { color: var(--color-text-secondary); font-weight: 500; }
.library-section { margin-top: var(--space-8); }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); }
.creative-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.creative-card img { width: 100%; aspect-ratio: 4 / 5; display: block; background: var(--color-surface-subtle); object-fit: cover; }
.creative-card.vertical img { aspect-ratio: 9 / 16; object-fit: contain; }
.creative-meta { padding: var(--space-4); }
.creative-meta h3 { margin: 0 0 6px; overflow-wrap: anywhere; font-size: 15px; }
.creative-meta p { margin: 3px 0; color: var(--color-text-secondary); font-size: 13px; }

/* Phase 2 — Home */
.home-page { max-width: 1320px; }
.home-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); }
.home-heading h1 { margin-bottom: 4px; }
.home-heading .lead { margin: 0; }
.tip-card { max-width: 330px; display: flex; align-items: center; gap: var(--space-3); padding: 16px 20px; border: 1px solid #d6e7fb; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); }
.tip-card > span { font-size: 28px; }
.tip-card p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; }
.home-first-ad .hero-card { margin-top: 0; }
.home-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #dff7e9; font-size: 25px; }
.home-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.metric-card { min-width: 0; min-height: 205px; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.metric-card .metric-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: var(--space-4); border-radius: 50%; background: var(--color-primary-soft); font-size: 21px; }
.metric-card .metric-icon.online { background: var(--color-success-soft); }
.metric-card .metric-icon.paused { background: var(--color-warning-soft); }
.metric-card > strong { color: var(--color-text); font-size: clamp(24px, 2.5vw, 31px); letter-spacing: -.04em; overflow-wrap: anywhere; }
.metric-card > strong.status-title, .metric-card > strong.metric-empty { font-size: 18px; letter-spacing: -.02em; }
.metric-card p { margin: 5px 0 0; color: var(--color-text-secondary); line-height: 1.45; }
.metric-card small { margin-top: auto; padding-top: var(--space-3); color: var(--color-text-secondary); line-height: 1.4; }
.metric-trend.positive { color: var(--color-success); }
.metric-trend.negative { color: var(--color-danger); }
.status-badge { margin-top: auto; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; }
.status-badge.online { background: var(--color-success-soft); color: var(--color-success); }
.status-badge.paused { background: var(--color-warning-soft); color: var(--color-warning); }
.metric-progress { width: 100%; height: 8px; margin-top: auto; overflow: hidden; border-radius: 999px; background: #e9eef5; }
.metric-progress span { height: 100%; display: block; border-radius: inherit; background: var(--color-primary); }
.home-feature-grid { margin-top: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: var(--space-4); }
.home-chart-card { min-width: 0; color: var(--color-text); }
.section-head.compact { margin: 0 0 var(--space-4); align-items: flex-start; }
.section-head.compact h2 { margin: 0; font-size: var(--font-size-card-title); }
.section-head.compact p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 13px; }
.home-chart { min-height: 220px; display: grid; align-items: end; }
.home-chart svg { width: 100%; height: 180px; overflow: visible; }
.home-chart .chart-area { fill: url(#home-chart-fill); stroke: none; }
.home-chart .chart-line { fill: none; stroke: var(--color-primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-labels { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-text-secondary); font-size: 12px; }
.chart-labels strong { color: var(--color-text); }
.home-chart-empty { min-height: 185px; display: grid; align-content: center; justify-items: center; gap: 5px; box-shadow: none; text-align: center; }
.home-chart-empty span { font-size: 13px; }
.home-cta-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: var(--space-4); overflow: hidden; padding: var(--space-6); border: 1px solid #d6e7fb; border-radius: var(--radius-lg); background: linear-gradient(140deg,#fff 0%,#eef6ff 100%); }
.home-cta-card h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.home-cta-card p { margin: var(--space-3) 0 var(--space-5); color: var(--color-text-secondary); line-height: 1.5; }
.hero-art.small { min-height: 130px; }
.home-recommendations { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid #d6e7fb; border-radius: var(--radius-lg); background: linear-gradient(135deg,#f7fbff,#eef6ff); }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.recommendation-card { min-width: 0; display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.recommendation-card > span { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); font-size: 20px; }
.recommendation-card h3 { margin: 1px 0 5px; font-size: 15px; }
.recommendation-card p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: 13px; line-height: 1.45; }
.recommendation-card a { font-size: 13px; font-weight: 800; }

/* Phase 2 — guided campaign creation */
.campaign-wizard { max-width: 1220px; }
.wizard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.wizard-heading .page-back { margin-bottom: var(--space-3); }
.wizard-heading h1 { margin-bottom: 4px; }
.wizard-heading .lead { margin: 0; }
.wizard-heading .tip-card { align-self: flex-start; }
.wizard-progress { margin: var(--space-6) 0 var(--space-4); display: grid; grid-template-columns: auto minmax(240px, 1fr); align-items: center; gap: var(--space-5); }
.wizard-progress > strong { white-space: nowrap; }
.wizard-progress .steps { margin: 0; }
.wizard-progress .steps span { width: 12px; height: 12px; overflow: hidden; border: 0; background: #dfe9f5; color: transparent; }
.wizard-progress .steps span.active { background: var(--color-primary); }
.wizard-progress .steps i { height: 5px; margin-inline: 5px; border-radius: 999px; background: #e4ebf4; }
.step-intro { display: flex; align-items: center; gap: var(--space-4); }
.step-intro h2 { margin: 0 0 4px; }
.step-intro p { margin: 0; }
.step-icon { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); font-size: 25px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.option-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.option-card-grid label { position: relative; min-width: 0; }
.option-card-grid input { position: absolute; opacity: 0; pointer-events: none; }
.option-card-grid label > span { min-height: 120px; display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.option-card-grid label > span:hover { border-color: #9bc5fa; }
.option-card-grid b { width: 54px; height: 54px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); font-size: 24px; }
.option-card-grid strong { align-self: end; font-size: 17px; }
.option-card-grid small { margin-top: 5px; color: var(--color-text-secondary); line-height: 1.35; }
.option-card-grid input:checked + span { border: 2px solid var(--color-primary); background: #f7fbff; box-shadow: 0 0 0 3px rgba(11,111,251,.08); }
.option-card-grid input:focus-visible + span { outline: 3px solid #82b9ff; outline-offset: 3px; }
.content-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-options label > span { min-height: 104px; grid-template-columns: 42px minmax(0, 1fr); padding: var(--space-4); }
.content-options b { width: 42px; height: 42px; font-size: 19px; }
.content-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: var(--space-4); }
.content-form-grid > div { display: grid; gap: var(--space-4); }
.upload-callout { min-height: 100%; display: grid; place-items: center; align-content: center; gap: var(--space-3); padding: var(--space-6); border: 1px dashed #9bc5fa; border-radius: var(--radius-md); background: #fbfdff; text-align: center; }
.upload-callout > span:first-child { font-size: 34px; }
.upload-callout h3, .upload-callout p { margin: 0; }
.upload-callout p { color: var(--color-text-secondary); font-size: 13px; }
.upload-callout .or { color: var(--color-text-secondary); font-size: 12px; }
.info-card { margin: 0; padding: 15px 17px; border: 1px solid #d6e7fb; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: #155ab4; line-height: 1.5; }
.destination-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.destination-options label > span { min-height: 160px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; gap: var(--space-2); padding: var(--space-4); text-align: center; }
.destination-options b { grid-row: auto; }
.destination-options em { padding: 4px 9px; border-radius: 999px; background: #edf1f6; color: var(--color-text-secondary); font-size: 11px; font-style: normal; font-weight: 800; }
.destination-options .coming-soon > span { cursor: not-allowed; opacity: .7; }
.location-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.map-support { min-height: 210px; display: grid; place-items: center; align-content: center; gap: var(--space-2); border-radius: var(--radius-md); background: radial-gradient(circle at 50% 46%,rgba(11,111,251,.15) 0 20%,transparent 21%),linear-gradient(135deg,#e9f4ff,#f7fbff); text-align: center; }
.map-support > span { font-size: 40px; }
.map-support small { color: var(--color-text-secondary); }
.budget-section { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.budget-section h2, .budget-section p { margin: 0; }
.budget-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.budget-options label { position: relative; }
.budget-options input { position: absolute; opacity: 0; pointer-events: none; }
.budget-options span { min-height: 76px; display: grid; place-items: center; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: 18px; font-weight: 850; text-align: center; cursor: pointer; }
.budget-options input:checked + span { border: 2px solid var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.budget-options input:focus-visible + span { outline: 3px solid #82b9ff; outline-offset: 3px; }
.budget-options label.unavailable span { cursor: not-allowed; opacity: .55; }
.budget-options small { display: block; color: var(--color-danger); font-size: 10px; font-weight: 650; }
#custom-budget { max-width: 320px; }
.safe-details { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.safe-details summary { min-height: 44px; display: flex; align-items: center; color: var(--color-primary); font-weight: 800; cursor: pointer; }
.safe-details[open] summary { margin-bottom: var(--space-5); }
.creative-builder { display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); gap: var(--space-4); }
.creative-fields, .social-preview-panel { min-width: 0; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.social-preview-panel { background: linear-gradient(140deg,#fff,#f3f8ff); }
.social-preview-panel h3, .social-preview-panel p { margin: 0; }
.social-preview-panel p { margin-top: 3px; color: var(--color-text-secondary); font-size: 13px; }
.preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: var(--space-3); }
.preview-grid > article { min-width: 0; display: grid; align-content: start; gap: var(--space-2); }
.ad-preview { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ad-preview > img { width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; background: var(--color-surface-subtle); }
.ad-preview.story > img { aspect-ratio: 9 / 16; }
.preview-account { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 12px; }
.preview-account span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 850; }
.preview-copy { display: grid; gap: 5px; padding: 11px; }
.preview-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--color-text-secondary); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.preview-copy span { margin-top: 3px; padding: 8px; border-radius: 8px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 11px; font-weight: 800; text-align: center; }
.preview-empty { min-height: 230px; display: grid; place-items: center; padding: var(--space-4); border: 0; border-radius: 0; box-shadow: none; text-align: center; }
.campaign-review .review-preview { background: var(--color-surface); }
.campaign-review .preview-grid { margin-top: var(--space-3); }
.campaign-success-page { max-width: 1000px; }
.success-heading { margin-bottom: var(--space-6); text-align: center; }
.success-heading > span { font-size: 42px; }
.success-heading h1 { margin: var(--space-2) 0; }
.success-heading p { margin: 0; color: var(--color-text-secondary); }
.status-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: center; }
.status-timeline h2 { grid-column: 1 / -1; }
.status-timeline > div { display: grid; justify-items: center; gap: 5px; text-align: center; }
.status-timeline > div > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #edf1f6; font-weight: 850; }
.status-timeline > div > span.done { background: var(--color-success-soft); color: var(--color-success); }
.status-timeline small { color: var(--color-text-secondary); }
.success-summary, .success-next, .success-actions { margin-top: var(--space-4); }
.success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width:1024px) {
  .shell { display: block; }
  #app-shell > aside { position: fixed; left: 0; width: min(310px, calc(100vw - 52px)); transform: translateX(-105%); box-shadow: var(--shadow-md); transition: transform .22s ease; }
  #app-shell > aside.mobile-open { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 15; width: 100%; height: 100%; min-height: 0; display: block; border: 0; border-radius: 0; padding: 0; background: rgba(11,21,51,.42); cursor: default; backdrop-filter: blur(2px); }
  .workspace > header { height: 68px; padding: 0 clamp(18px, 4vw, 34px); }
  .mobile-brand { display: inline; color: var(--color-primary); font-size: 18px; font-weight: 850; letter-spacing: -.03em; }
  .menu-toggle { width: 44px; height: 44px; min-height: 44px; display: grid; place-content: center; gap: 4px; border: 1px solid var(--color-border); padding: 0; background: var(--color-surface); }
  .menu-toggle span { width: 18px; height: 2px; display: block; border-radius: 2px; background: var(--color-text); }
  #company-name { padding-left: var(--space-3); border-left: 1px solid var(--color-border); }
  .page { padding-bottom: 80px; }
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recommendation-grid { grid-template-columns: 1fr; }
  .destination-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creative-builder { grid-template-columns: 1fr; }
}

@media (max-width:760px) {
  .auth-wrap { padding: var(--space-4); }
  .auth-card { padding: 28px 22px; border-radius: var(--radius-lg); }
  .auth-card .brand { margin-bottom: var(--space-6); }
  .workspace > header { padding: 0 16px; }
  .profile-menu summary { min-width: 52px; padding: 0 2px; }
  .profile-copy, .profile-chevron { display: none; }
  .header-actions { gap: 4px; }
  .notification-button { width: 44px; }
  .page { padding: 32px 18px 72px; }
  .page h1 { font-size: clamp(31px, 9vw, 40px); }
  .lead { font-size: 16px; }
  .hero-card { grid-template-columns: 1fr; gap: var(--space-5); padding: 26px 22px; }
  .hero-art { min-height: 106px; }
  .hero-actions, .creative-actions { display: grid; }
  .hero-actions > *, .creative-actions > * { width: 100%; }
  .section-head { align-items: center; }
  .settings-grid, .asset-grid, .field-row, .campaign-item, .merchant-actions, .merchant-goals, .color-fields, .format-status, .format-picker { grid-template-columns: 1fr; }
  .campaign-statuses { padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); border-left: 0; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creative-meta { padding: var(--space-3); }
  .wizard-card { padding: 24px 18px; }
  .steps { margin: var(--space-6) 0; }
  .steps span { width: 30px; height: 30px; }
  .segmented, .review, .review-assets { grid-template-columns: 1fr; }
  .review .wide { grid-column: auto; }
  .wizard-actions { margin: 0 -18px -24px; padding: var(--space-3) 18px; }
  .wizard-actions button { flex: 1; }
  .journey-actions { display: grid; grid-template-columns: 1fr; }
  .journey-actions > * { width: 100%; }
  .home-heading { display: grid; }
  .tip-card { max-width: none; }
  .home-metrics, .home-feature-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 178px; }
  .home-cta-card { grid-template-columns: 1fr; }
  .home-cta-card .hero-art { display: none; }
  .wizard-heading { display: grid; }
  .wizard-heading .tip-card { max-width: none; }
  .wizard-progress { grid-template-columns: 1fr; gap: var(--space-3); }
  .wizard-progress .steps span { width: 10px; height: 10px; }
  .option-card-grid, .content-options, .destination-options, .content-form-grid, .location-card, .budget-options { grid-template-columns: 1fr; }
  .option-card-grid label > span { min-height: 96px; }
  .destination-options label > span { min-height: 92px; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: 1fr; justify-items: start; text-align: left; }
  .destination-options b { width: 46px; height: 46px; }
  .destination-options strong { align-self: center; }
  .destination-options em { align-self: center; }
  .map-support { min-height: 150px; }
  .creative-fields, .social-preview-panel { padding: var(--space-4); }
  .preview-grid { grid-template-columns: 1fr; }
  .ad-preview { max-width: 390px; margin-inline: auto; }
  .status-timeline { grid-template-columns: 1fr; }
  .status-timeline h2 { grid-column: auto; }
  .success-actions { display: grid; }
  .success-actions > * { width: 100%; }
}

@media (max-width:430px) {
  .mobile-brand { font-size: 17px; }
  .workspace > header { height: 64px; }
  .company-avatar { width: 40px; height: 40px; }
  .profile-dropdown { position: fixed; top: 68px; right: 12px; }
  .library-grid, .asset-options { grid-template-columns: 1fr; }
  .creative-card img { max-height: 72vh; object-fit: contain; }
  .section-head { align-items: start; }
  .section-head a { white-space: nowrap; }
  .wizard-actions { gap: var(--space-2); }
  .wizard-actions button { padding-inline: 12px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}