:root {
  --ink: #17162b;
  --muted: #6e6b82;
  --soft: #f5f4fb;
  --line: #e8e6f1;
  --card: rgba(255, 255, 255, 0.94);
  --primary: #5b4cf0;
  --primary-dark: #4435d5;
  --primary-soft: #eeebff;
  --mint: #10a37f;
  --mint-soft: #e6f8f2;
  --danger: #d94f66;
  --warning: #f29f3f;
  --shadow: 0 22px 65px rgba(43, 35, 91, 0.1);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { color-scheme: light; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #f7f7fb;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(10px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; top: 70px; right: -190px; background: rgba(102, 83, 242, .1); }
.ambient-two { width: 340px; height: 340px; bottom: -170px; left: 20%; background: rgba(16, 163, 127, .08); }

.topbar {
  height: 76px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(230, 227, 240, .9);
  background: rgba(250, 250, 253, .86);
  backdrop-filter: blur(18px);
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  color: white; font-weight: 900; font-size: 13px; letter-spacing: -.03em;
  background: linear-gradient(145deg, #7568ff, #4d3ddb); box-shadow: 0 10px 24px rgba(91, 76, 240, .25);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.02em; }
.brand-signature { margin-left: 4px; color: var(--primary); font-size: 11px; font-style: normal; font-weight: 800; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 1px; }
.top-actions { display: flex; gap: 9px; align-items: center; }
.privacy-pill { display: flex; align-items: center; gap: 7px; margin-right: 8px; color: #4b4960; font-size: 12px; }
.privacy-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(16,163,127,.1); }
.theme-toggle { min-height: 38px; padding: 4px 10px 4px 5px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ded9ec; border-radius: 12px; color: #4f4966; background: rgba(255,255,255,.86); font-size: 10px; font-weight: 800; transition: transform .16s, border-color .2s, color .2s, background .2s, box-shadow .2s; }
.theme-toggle:hover { transform: translateY(-1px); border-color: #b9b1eb; box-shadow: 0 8px 22px rgba(43,35,91,.1); }
.theme-toggle-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: linear-gradient(145deg, #7568ff, #4d3ddb); font-size: 15px; line-height: 1; }

.shell { width: min(1460px, 100%); margin: 0 auto; padding: 34px 30px 90px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 34px; }
.sidebar { position: sticky; top: 108px; height: max-content; }
.sidebar-intro { padding: 8px 10px 23px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.sidebar h1 { margin: 7px 0 8px; font-size: 28px; line-height: 1.06; letter-spacing: -.045em; }
.sidebar-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.step-nav { display: grid; gap: 8px; }
.step-nav a {
  display: grid; grid-template-columns: 34px 1fr 18px; gap: 11px; align-items: center;
  padding: 13px 12px; color: inherit; border: 1px solid transparent; border-radius: 15px; text-decoration: none; transition: .2s ease;
}
.step-nav a:hover, .step-nav a.active { background: white; border-color: var(--line); box-shadow: 0 10px 30px rgba(43,35,91,.06); }
.step-nav a > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #eceaf4; color: #7b778e; font-size: 12px; font-weight: 800; }
.step-nav a.active > span { color: white; background: var(--primary); }
.step-nav strong, .step-nav small { display: block; }
.step-nav strong { font-size: 13px; }
.step-nav small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.step-state { color: #aaa6b8; font-size: 12px; }
.step-nav a.complete .step-state { color: var(--mint); }
.sidebar-note { margin-top: 20px; padding: 15px; display: flex; gap: 10px; border-radius: 16px; background: var(--primary-soft); color: #55506c; }
.sidebar-note p { margin: 0; font-size: 11px; }
.note-icon { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--primary); font-size: 12px; font-weight: 900; }

.content { min-width: 0; }
.hero-panel {
  margin-bottom: 18px; padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  overflow: hidden; position: relative; border-radius: var(--radius); color: white;
  background: radial-gradient(circle at 75% 0%, rgba(255,255,255,.14), transparent 28%), linear-gradient(130deg, #272244, #4e40cf 72%, #6557ef);
  box-shadow: 0 24px 65px rgba(49,40,129,.2);
}
.hero-panel:after { content: ""; position: absolute; width: 190px; height: 190px; right: -75px; bottom: -110px; border: 32px solid rgba(255,255,255,.06); border-radius: 50%; }
.hero-panel .eyebrow { color: #bdb6ff; }
.hero-panel h2 { margin: 6px 0 7px; font-size: 25px; letter-spacing: -.035em; }
.hero-panel p { max-width: 700px; margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.hero-panel p strong { color: white; }
.hero-status { min-width: 190px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.hero-status > span, .hero-status small { display: block; color: rgba(255,255,255,.58); font-size: 10px; }
.hero-status strong { display: flex; align-items: center; gap: 8px; margin: 5px 0 4px; font-size: 14px; }
.hero-status strong i { width: 8px; height: 8px; border-radius: 50%; background: #4ee2b8; box-shadow: 0 0 0 5px rgba(78,226,184,.12); }

.form-card { margin-top: 18px; padding: 27px 30px 30px; scroll-margin-top: 96px; border: 1px solid rgba(231,228,240,.92); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; gap: 15px; padding-bottom: 23px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.card-header > div:nth-child(2) { flex: 1; }
.card-header h2 { margin: 3px 0 2px; font-size: 22px; letter-spacing: -.035em; }
.card-header p { margin: 0; color: var(--muted); font-size: 12px; }
.card-number { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 12px; font-weight: 900; }
.status-badge, .soft-tag { padding: 7px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-badge.enabled { color: #08775e; background: var(--mint-soft); }
.status-badge.required { color: #9a6320; background: #fff4df; }
.soft-tag { color: #6f6986; background: var(--soft); }

.form-grid { display: grid; gap: 18px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-two { grid-column: span 2; }
.field { display: block; min-width: 0; }
[hidden] { display: none !important; }
.field > span, .mmp-picker legend { display: block; margin-bottom: 7px; color: #363348; font-size: 12px; font-weight: 750; }
.field b, .mmp-picker b { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 45px; padding: 10px 12px; outline: none; color: var(--ink);
  border: 1px solid #ddd9e9; border-radius: 12px; background: #fcfcfe; transition: border-color .18s, box-shadow .18s, background .18s;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #8a7ff6; background: white; box-shadow: 0 0 0 4px rgba(91,76,240,.09); }
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217,79,102,.08); }
.field small { display: block; margin-top: 6px; color: #89869a; font-size: 10px; }
.input-affix { position: relative; }
.input-affix input { padding-right: 112px; }
.input-affix em { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #9a96a9; font-size: 9px; font-style: normal; }
.app-field input { min-height: 51px; font-size: 14px; }
.app-detection { margin-top: 9px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px dashed #d8d4e8; border-radius: 13px; background: #faf9fd; }
.app-detection.detected { border-style: solid; border-color: #bfe8dc; background: #f3fcf9; }
.store-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #eceaf4; color: #817d91; font-weight: 900; }
.detected .store-icon { color: white; background: var(--mint); }
.app-detection strong, .app-detection small { display: block; }
.app-detection strong { font-size: 11px; }
.app-detection small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.subsection { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.subsection-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.subsection-title h3 { margin: 0; font-size: 14px; }
.subsection-title p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.audience-tag { color: #0f746e; background: #e7f8f6; }
.audience-callout { margin-bottom: 17px; padding: 13px; display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; border: 1px solid #dcece9; border-radius: 14px; background: linear-gradient(135deg, #f3fbfa, #f7f6ff); }
.audience-callout > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, #13b8ae, #5b4cf0); font-size: 11px; font-weight: 900; }
.audience-callout strong, .audience-callout small { display: block; }
.audience-callout strong { color: #37334a; font-size: 11px; }
.audience-callout small { margin-top: 3px; color: #777187; font-size: 9px; line-height: 1.45; }
.demographic-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .5fr); gap: 14px; }
.demographic-picker { min-width: 0; margin: 0; padding: 14px; border: 1px solid #e2dfeb; border-radius: 15px; background: #fcfcfe; }
.demographic-picker legend { width: 100%; padding: 0 2px 8px; display: flex; align-items: center; justify-content: space-between; color: #393548; font-size: 11px; font-weight: 800; }
.demographic-picker legend button { padding: 3px 7px; border: 0; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-weight: 750; cursor: pointer; }
.demographic-options { display: grid; gap: 7px; }
.age-bound-row + .age-bound-row { margin-top: 13px; }
.age-bound-row > strong { display: block; margin-bottom: 6px; color: #6b657b; font-size: 9px; }
.age-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gender-options { grid-template-columns: 1fr; }
.demographic-options label { min-width: 0; cursor: pointer; }
.demographic-options input { position: absolute; opacity: 0; pointer-events: none; }
.demographic-options label span { min-height: 34px; padding: 8px 7px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e0ddea; border-radius: 10px; color: #6d687b; background: white; font-size: 9px; font-weight: 750; text-align: center; transition: .16s; }
.demographic-options label span:before { content: "✓"; width: 15px; height: 15px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d9d5e5; border-radius: 5px; color: transparent; background: #faf9fd; font-size: 8px; transition: .16s; }
.demographic-options label:hover span { border-color: #b7b0ec; }
.demographic-options label:has(input:checked) span { color: #5144dd; border-color: #9187f5; background: #f3f1ff; box-shadow: inset 0 0 0 1px rgba(91,76,240,.08); }
.demographic-options label:has(input:checked) span:before { color: white; border-color: var(--primary); background: var(--primary); }
.demographic-picker.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217,79,102,.08); }
.audience-status { margin-top: 12px; padding: 9px 11px; border-radius: 10px; color: #676176; background: #f4f3f8; font-size: 9px; }
.audience-status.active { color: #12665f; background: #eaf8f6; }
.targeting-field { position: relative; }
.smart-select { position: relative; }
.smart-select.open { z-index: 25; }
.smart-select-trigger {
  width: 100%; min-height: 49px; padding: 9px 12px 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--ink); border: 1px solid #ddd9e9; border-radius: 13px; background: #fcfcfe; text-align: left;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.smart-select-trigger:hover { border-color: #beb8d4; background: white; }
.smart-select-trigger:focus-visible, .smart-select.open .smart-select-trigger { outline: none; border-color: #8a7ff6; background: white; box-shadow: 0 0 0 4px rgba(91,76,240,.09); }
.targeting-field.invalid .smart-select-trigger { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217,79,102,.08); }
.smart-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 720; white-space: nowrap; }
.smart-select-trigger i { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 25px; border-radius: 8px; color: #716b89; background: #f0eef7; font-size: 17px; font-style: normal; transition: transform .2s; }
.smart-select.open .smart-select-trigger i { transform: rotate(180deg); }
.smart-select-menu {
  width: 100%; min-width: 285px; padding: 10px; display: none; position: absolute; top: calc(100% + 8px); left: 0;
  border: 1px solid #ded9ed; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 20px 55px rgba(36,29,81,.18); backdrop-filter: blur(14px);
}
.smart-select.open .smart-select-menu { display: block; animation: select-in .16s ease-out; }
@keyframes select-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.smart-select-search { position: relative; }
.field .smart-select-search input { min-height: 41px; padding: 8px 11px 8px 35px; border-radius: 11px; background: #f7f6fa; font-size: 11px; }
.smart-select-search > span { position: absolute; top: 50%; left: 12px; z-index: 1; transform: translateY(-50%); color: #888398; font-size: 18px; pointer-events: none; }
.smart-select-meta { min-height: 30px; padding: 7px 3px 5px; display: flex; align-items: center; justify-content: space-between; color: #9691a4; font-size: 8px; }
.smart-select-meta button { padding: 2px 4px; border: 0; color: var(--primary); background: transparent; font-size: 8px; font-weight: 800; }
.smart-select-options { max-height: 260px; display: grid; gap: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d4cfeb transparent; }
.smart-select-option { width: 100%; min-height: 45px; padding: 7px 8px; display: grid; grid-template-columns: 31px 1fr 22px; gap: 9px; align-items: center; border: 0; border-radius: 10px; color: var(--ink); background: transparent; text-align: left; }
.smart-select-option:hover { background: #f5f3ff; }
.smart-select-option.selected { background: var(--primary-soft); }
.target-option-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #ebe8f2; border-radius: 9px; background: white; font-size: 16px; font-weight: 850; }
.target-option-copy { min-width: 0; }
.target-option-copy strong, .field .target-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-option-copy strong { font-size: 10px; }
.field .target-option-copy small { margin: 1px 0 0; color: #9893a7; font-size: 8px; }
.target-option-check { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #d8d3e6; border-radius: 6px; color: transparent; background: white; font-size: 10px; font-weight: 900; }
.smart-select-option.selected .target-option-check { color: white; border-color: var(--primary); background: var(--primary); }
.smart-select-empty { padding: 24px 10px; display: grid; justify-items: center; color: #9a95a8; text-align: center; }
.smart-select-empty > span { font-size: 25px; }
.smart-select-empty strong { margin-top: 4px; color: #666175; font-size: 10px; }
.field .smart-select-empty small { margin-top: 2px; font-size: 8px; }
.selected-targets { min-height: 27px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.selected-target { max-width: 100%; padding: 4px 5px 4px 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #ded9f6; border-radius: 9px; color: #4d476a; background: #f6f4ff; font-size: 9px; font-weight: 700; }
.selected-target > i { font-size: 11px; font-style: normal; }
.selected-target button { width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; color: #8c86a2; background: rgba(91,76,240,.08); line-height: 1; }
.selected-target button:hover { color: white; background: var(--danger); }
.selected-targets-empty { color: #aaa5b3; font-size: 9px; }

.mmp-picker { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mmp-picker legend { grid-column: 1 / -1; }
.mmp-picker label { padding: 15px 12px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; position: relative; border: 1px solid #e0ddea; border-radius: 15px; background: #fcfcfe; cursor: pointer; transition: .18s; }
.mmp-picker label:has(input:checked) { border-color: #8175f6; background: #f6f4ff; box-shadow: 0 0 0 3px rgba(91,76,240,.08); }
.mmp-picker input { position: absolute; opacity: 0; }
.mmp-logo { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: white; font-size: 11px; font-weight: 900; }
.mmp-logo.appsflyer { background: linear-gradient(145deg, #70c745, #35a756); }
.mmp-logo.adjust { background: linear-gradient(145deg, #ff7d62, #d84a5a); }
.mmp-logo.tenjin { background: linear-gradient(145deg, #3385ff, #4c55d8); }
.mmp-logo.trident { background: linear-gradient(145deg, #12b8b0, #1674c8); }
.mmp-logo.custom { background: linear-gradient(145deg, #807a92, #504b64); }
.mmp-picker strong { align-self: end; font-size: 11px; }
.mmp-picker small { color: var(--muted); font-size: 8px; }
.custom-mmp-field { margin-top: 16px; }
.conversion-flow { margin-top: 22px; padding: 15px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; border-radius: 18px; background: #f8f8fc; }
.conversion-flow article { min-height: 72px; padding: 11px; display: grid; grid-template-columns: 28px 1fr 18px; gap: 8px; align-items: center; border: 1px solid #e5e2ee; border-radius: 13px; background: white; }
.conversion-flow article.ignored { opacity: .68; }
.flow-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 900; }
.conversion-flow strong, .conversion-flow small { display: block; }
.conversion-flow strong { font-size: 10px; }
.conversion-flow small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.flow-check { color: var(--mint); font-weight: 900; }
.flow-arrow { color: #aaa6b8; }
.advanced { margin-top: 20px; border: 1px solid #e1deeb; border-radius: 17px; overflow: hidden; }
.advanced summary { padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; background: #fcfcfe; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary strong, .advanced summary small { display: block; }
.advanced summary strong { font-size: 12px; }
.advanced summary small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.advanced summary i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-style: normal; font-weight: 800; transition: transform .2s; }
.advanced[open] summary i { transform: rotate(45deg); }
.advanced-body { padding: 19px 17px; border-top: 1px solid var(--line); }
.advanced-callout { margin-bottom: 17px; padding: 11px 13px; border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; color: #625e76; background: var(--primary-soft); font-size: 10px; }
.toggle-row { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.switch-field { padding: 12px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; border: 1px solid #e4e1ec; border-radius: 13px; cursor: pointer; }
.switch-field input { display: none; }
.switch { width: 34px; height: 20px; position: relative; border-radius: 99px; background: #d8d5e1; transition: .2s; }
.switch:after { content: ""; width: 14px; height: 14px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: .2s; }
.switch-field input:checked + .switch { background: var(--primary); }
.switch-field input:checked + .switch:after { transform: translateX(14px); }
.switch-field strong, .switch-field small { display: block; }
.switch-field strong { font-size: 10px; }
.switch-field small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.safety-strip { margin-top: 14px; padding: 10px 12px; border-radius: 11px; color: #696478; background: #f5f4f8; font-size: 9px; }
.safety-strip span { margin-right: 7px; color: var(--mint); font-weight: 900; text-transform: uppercase; }

.button { min-height: 38px; padding: 8px 13px; border: 0; border-radius: 11px; font-size: 11px; font-weight: 750; transition: transform .16s, box-shadow .16s, background .16s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--primary); box-shadow: 0 10px 25px rgba(91,76,240,.22); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: var(--primary); background: var(--primary-soft); }
.button-quiet { color: #625e73; border: 1px solid #e2dfeb; background: white; }
.button-danger { color: #bd4055; background: #fff0f2; }
.icon-button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; color: #777287; background: #f1eff6; font-size: 21px; }

.groups-root { display: grid; gap: 18px; }
.group-block { border: 1px solid #dedbe9; border-radius: 19px; overflow: hidden; background: #fbfbfd; }
.group-head { padding: 14px 15px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #e6e3ed; background: white; }
.group-index { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: white; background: #2d2946; font-size: 11px; font-weight: 900; }
.group-name-input { width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; outline: none; background: transparent; font-weight: 800; }
.group-name-input:focus { border-color: #c7c1fa; background: #f8f7ff; }
.group-actions { display: flex; gap: 6px; }
.ads-list { padding: 14px; display: grid; gap: 13px; }
.ad-block { border: 1px solid #e3e0ec; border-radius: 16px; background: white; overflow: hidden; }
.ad-head { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eeecf3; }
.ad-title { display: flex; align-items: center; gap: 9px; }
.ad-title > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 900; }
.ad-title input { width: min(360px, 48vw); padding: 6px 7px; border: 1px solid transparent; border-radius: 7px; outline: none; font-size: 11px; font-weight: 750; }
.ad-title input:focus { border-color: #c7c1fa; background: #f8f7ff; }
.ad-body { padding: 14px; }
.asset-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.asset-section { min-width: 0; }
.asset-section h4 { margin: 0 0 3px; font-size: 11px; }
.asset-section > p { margin: 0 0 9px; color: var(--muted); font-size: 9px; }
.text-assets { display: grid; gap: 7px; }
.text-asset { position: relative; }
.text-asset input { width: 100%; height: 39px; padding: 8px 62px 8px 10px; border: 1px solid #dedbe8; border-radius: 10px; outline: none; font-size: 11px; }
.text-asset input:focus { border-color: #8b80f6; box-shadow: 0 0 0 3px rgba(91,76,240,.08); }
.text-asset input.invalid { border-color: var(--danger); }
.text-asset .counter { position: absolute; top: 50%; right: 34px; transform: translateY(-50%); color: #aaa6b6; font-size: 8px; }
.text-asset .remove-inline { position: absolute; top: 50%; right: 7px; width: 22px; height: 22px; transform: translateY(-50%); border: 0; border-radius: 7px; color: #aaa6b6; background: transparent; }
.add-inline { margin-top: 7px; padding: 5px 8px; border: 1px dashed #cbc6df; border-radius: 8px; color: var(--primary); background: white; font-size: 9px; }
.creative-section { margin-top: 16px; padding-top: 15px; border-top: 1px solid #efedf4; }
.creative-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 15px; }
.youtube-input { width: 100%; min-height: 82px; padding: 9px 10px; border: 1px solid #dedbe8; border-radius: 11px; outline: none; resize: vertical; font-size: 10px; }
.youtube-input:focus { border-color: #8b80f6; box-shadow: 0 0 0 3px rgba(91,76,240,.08); }
.upload-zone { min-height: 82px; padding: 11px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed #cfc9e3; border-radius: 11px; color: #716c82; background: #faf9fd; cursor: pointer; font-size: 9px; }
.upload-zone:hover { color: var(--primary); border-color: #958af4; background: #f6f4ff; }
.upload-zone input { display: none; }
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.file-chip { max-width: 220px; padding: 5px 7px; display: flex; align-items: center; gap: 5px; border-radius: 8px; color: #5f5a70; background: #f0eef6; font-size: 8px; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { padding: 0; border: 0; color: #a54a5d; background: transparent; }
.ad-advanced { margin-top: 13px; }
.ad-advanced summary { color: var(--primary); font-size: 9px; cursor: pointer; }
.ad-advanced .form-grid { margin-top: 10px; }
.uac-limit-note { margin-top: 17px; padding: 13px 15px; border-radius: 13px; color: #6e697e; background: #f4f3f8; font-size: 9px; }
.uac-limit-note strong { display: block; margin-bottom: 3px; color: #4b475c; font-size: 10px; }
.uac-limit-note code { color: var(--primary); }

.generate-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(210px, .7fr); gap: 24px; align-items: center; color: white; background: linear-gradient(140deg, #222039, #302a56); border: 0; }
.generate-copy h2 { margin: 5px 0 7px; font-size: 23px; letter-spacing: -.035em; }
.generate-copy p { max-width: 650px; margin: 0; color: rgba(255,255,255,.62); font-size: 11px; }
.generate-copy .eyebrow { color: #a99fff; }
.generate-points { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; }
.generate-points span { padding: 5px 8px; border-radius: 8px; color: #cbc7da; background: rgba(255,255,255,.07); font-size: 8px; }
.generate-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.summary-item { padding: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.055); }
.summary-item span, .summary-item strong { display: block; }
.summary-item span { color: rgba(255,255,255,.48); font-size: 8px; }
.summary-item strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: white; font-size: 10px; white-space: nowrap; }
.button-large { grid-column: 1 / -1; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; }
.button-large b { font-size: 18px; }
.validation-box { grid-column: 1 / -1; padding: 13px 15px; border: 1px solid rgba(255,111,133,.26); border-radius: 12px; color: #ffd7dd; background: rgba(217,79,102,.12); font-size: 10px; }
.validation-box strong { display: block; margin-bottom: 5px; }
.validation-box ul { margin: 0; padding-left: 17px; }
.footer { padding: 23px 5px 0; display: flex; justify-content: space-between; color: #9894a5; font-size: 9px; }

.modal { display: none; position: fixed; inset: 0; z-index: 100; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(18,16,35,.64); backdrop-filter: blur(7px); }
.modal-panel { width: min(1000px, calc(100% - 34px)); height: min(790px, calc(100vh - 34px)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-rows: auto auto 1fr auto; border-radius: 23px; overflow: hidden; background: white; box-shadow: 0 35px 100px rgba(0,0,0,.34); }
.modal-panel > header { padding: 19px 21px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal-panel h2 { margin: 3px 0 0; font-size: 19px; }
.script-meta { padding: 9px 20px; display: flex; gap: 9px; color: #777286; background: #f7f6fa; font-size: 9px; }
.script-meta span { padding: 4px 7px; border-radius: 7px; background: white; }
.modal-panel pre { margin: 0; padding: 18px 20px; overflow: auto; color: #dcd9e8; background: #171622; font: 11px/1.6 "SFMono-Regular", Consolas, monospace; tab-size: 2; }
.modal-panel > footer { padding: 13px 18px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); }
.copy-panel { width: min(480px, calc(100% - 30px)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 22px; overflow: hidden; background: white; box-shadow: 0 35px 100px rgba(0,0,0,.34); }
.copy-panel > header { padding: 20px; display: grid; grid-template-columns: 42px 1fr 36px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.copy-panel h2 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.03em; }
.copy-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, #7568ff, #4d3ddb); font-size: 20px; box-shadow: 0 9px 22px rgba(91,76,240,.2); }
.copy-body { padding: 20px; }
.copy-body > p { margin: 0 0 17px; color: var(--muted); font-size: 11px; }
.copy-count-control { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
.copy-count-control input { min-width: 0; padding-inline: 8px; text-align: center; font-size: 17px; font-weight: 850; }
.copy-count-control input::-webkit-inner-spin-button { appearance: none; }
.copy-count-control button { border: 1px solid #ddd9e9; border-radius: 12px; color: var(--primary); background: #f8f7ff; font-size: 20px; font-weight: 700; }
.copy-count-control button:hover { border-color: #aaa0f8; background: var(--primary-soft); }
.copy-preview { margin-top: 15px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 12px; color: #686376; background: #f5f4f9; font-size: 9px; }
.copy-preview strong { color: var(--ink); font-size: 10px; }
.copy-panel > footer { padding: 14px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: #fbfbfd; }
.toast { max-width: min(420px, calc(100% - 30px)); padding: 11px 14px; position: fixed; left: 50%; bottom: 24px; z-index: 150; transform: translate(-50%, 30px); border-radius: 12px; color: white; background: #25223c; box-shadow: 0 15px 35px rgba(0,0,0,.2); font-size: 10px; opacity: 0; pointer-events: none; transition: .23s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Dark theme: warm graphite surfaces with restrained gold accents. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3ead8;
  --muted: #aaa18e;
  --soft: #26231d;
  --line: #3c372d;
  --card: rgba(28, 27, 23, .96);
  --primary: #d8aa4d;
  --primary-dark: #bd8d32;
  --primary-soft: #342b1b;
  --mint: #67c7a7;
  --mint-soft: #19342c;
  --danger: #e4767e;
  --warning: #d9a441;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
}
html[data-theme="dark"] body { background: #11110f; }
html[data-theme="dark"] .ambient-one { background: rgba(218,169,74,.09); }
html[data-theme="dark"] .ambient-two { background: rgba(113,78,24,.08); }
html[data-theme="dark"] .topbar { border-bottom-color: rgba(70,63,49,.8); background: rgba(17,17,15,.88); }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .copy-icon { color: #20190d; background: linear-gradient(145deg, #f0ce79, #b87e22); box-shadow: 0 10px 25px rgba(202,148,47,.2); }
html[data-theme="dark"] .privacy-pill { color: #b5ac99; }
html[data-theme="dark"] .theme-toggle { color: #f1d48c; border-color: #66542e; background: #211e17; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
html[data-theme="dark"] .theme-toggle:hover { border-color: #b58a38; background: #292317; }
html[data-theme="dark"] .theme-toggle-icon { color: #21190b; background: linear-gradient(145deg, #f4d681, #bc842b); }
html[data-theme="dark"] .step-nav a:hover,
html[data-theme="dark"] .step-nav a.active { background: #201f1b; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
html[data-theme="dark"] .step-nav a > span { color: #aca28e; background: #292720; }
html[data-theme="dark"] .step-nav a.active > span { color: #231a0a; background: var(--primary); }
html[data-theme="dark"] .step-state,
html[data-theme="dark"] .flow-arrow { color: #6f695c; }
html[data-theme="dark"] .sidebar-note { color: #c1b59c; }
html[data-theme="dark"] .note-icon { color: #231a0a; background: var(--primary); }
html[data-theme="dark"] .hero-panel { color: #f6eddb; background: radial-gradient(circle at 75% 0%, rgba(247,207,119,.14), transparent 29%), linear-gradient(130deg, #211e18, #3a2d18 72%, #684a1d); box-shadow: 0 24px 65px rgba(0,0,0,.35); }
html[data-theme="dark"] .hero-panel .eyebrow,
html[data-theme="dark"] .generate-copy .eyebrow { color: #e5bc61; }
html[data-theme="dark"] .hero-panel p { color: rgba(246,237,219,.7); }
html[data-theme="dark"] .hero-panel p strong { color: #fff4db; }
html[data-theme="dark"] .hero-status { border-color: rgba(239,202,117,.2); background: rgba(0,0,0,.15); }
html[data-theme="dark"] .form-card { border-color: #373229; }
html[data-theme="dark"] .status-badge.enabled { color: #8fdcc1; }
html[data-theme="dark"] .status-badge.required { color: #e3bd67; background: #382c17; }
html[data-theme="dark"] .soft-tag { color: #bbb09b; }
html[data-theme="dark"] .field > span,
html[data-theme="dark"] .mmp-picker legend { color: #ded4c1; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .smart-select-trigger,
html[data-theme="dark"] .text-asset input,
html[data-theme="dark"] .youtube-input,
html[data-theme="dark"] .ad-title input { color: var(--ink); border-color: #494237; background: #1b1a17; }
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder,
html[data-theme="dark"] .text-asset input::placeholder,
html[data-theme="dark"] .youtube-input::placeholder { color: #756e60; }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .smart-select-trigger:hover,
html[data-theme="dark"] .smart-select-trigger:focus-visible,
html[data-theme="dark"] .smart-select.open .smart-select-trigger,
html[data-theme="dark"] .group-name-input:focus,
html[data-theme="dark"] .ad-title input:focus { color: var(--ink); border-color: #b78b3b; background: #211f1a; box-shadow: 0 0 0 4px rgba(216,170,77,.1); }
html[data-theme="dark"] .field small,
html[data-theme="dark"] .input-affix em { color: #918977; }
html[data-theme="dark"] .app-detection { border-color: #4a4438; background: #1b1a17; }
html[data-theme="dark"] .app-detection.detected { border-color: #315e51; background: #17251f; }
html[data-theme="dark"] .store-icon { color: #b2a894; background: #2a2721; }
html[data-theme="dark"] .audience-tag { color: #85d2c8; background: #19332f; }
html[data-theme="dark"] .audience-callout { border-color: #3e4e44; background: linear-gradient(135deg, #19241f, #272218); }
html[data-theme="dark"] .audience-callout > span { color: #241b0d; background: linear-gradient(145deg, #76d0b4, #d2a24a); }
html[data-theme="dark"] .audience-callout strong { color: #e9dfcb; }
html[data-theme="dark"] .audience-callout small { color: #9e9583; }
html[data-theme="dark"] .demographic-picker { border-color: #444036; background: #1b1a17; }
html[data-theme="dark"] .demographic-picker legend { color: #ded4c1; }
html[data-theme="dark"] .age-bound-row > strong { color: #a79d89; }
html[data-theme="dark"] .demographic-options label span { color: #aaa08c; border-color: #454036; background: #211f1b; }
html[data-theme="dark"] .demographic-options label span:before { border-color: #554e40; background: #181714; }
html[data-theme="dark"] .demographic-options label:hover span { border-color: #8d7139; }
html[data-theme="dark"] .demographic-options label:has(input:checked) span { color: #f0d28e; border-color: #b78935; background: #332918; box-shadow: inset 0 0 0 1px rgba(216,170,77,.08); }
html[data-theme="dark"] .demographic-options label:has(input:checked) span:before {
  color: #251b0a;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(216,170,77,.12);
}
html[data-theme="dark"] .audience-status { color: #a69d8a; background: #24221d; }
html[data-theme="dark"] .audience-status.active { color: #8ad1b9; background: #18312a; }
html[data-theme="dark"] .smart-select-trigger i { color: #c8ac6f; background: #312a1c; }
html[data-theme="dark"] .smart-select-menu { border-color: #494135; background: rgba(27,26,23,.99); box-shadow: 0 20px 55px rgba(0,0,0,.45); }
html[data-theme="dark"] .field .smart-select-search input { background: #151512; }
html[data-theme="dark"] .smart-select-meta { color: #8d8575; }
html[data-theme="dark"] .smart-select-options { scrollbar-color: #6f5a31 transparent; }
html[data-theme="dark"] .smart-select-option:hover { background: #292318; }
html[data-theme="dark"] .target-option-icon,
html[data-theme="dark"] .target-option-check { border-color: #494238; background: #211f1b; }
html[data-theme="dark"] .smart-select-empty { color: #8f8778; }
html[data-theme="dark"] .smart-select-empty strong { color: #c4baa7; }
html[data-theme="dark"] .selected-target { color: #dfc382; border-color: #66552f; background: #2b2518; }
html[data-theme="dark"] .selected-target button { color: #baaa89; background: rgba(216,170,77,.1); }
html[data-theme="dark"] .mmp-picker label { border-color: #454037; background: #1b1a17; }
html[data-theme="dark"] .mmp-picker label:has(input:checked) { border-color: #b68a37; background: #302719; box-shadow: 0 0 0 3px rgba(216,170,77,.08); }
html[data-theme="dark"] .conversion-flow,
html[data-theme="dark"] .safety-strip,
html[data-theme="dark"] .uac-limit-note { color: #aaa18e; background: #22211d; }
html[data-theme="dark"] .conversion-flow article { border-color: #464036; background: #1a1916; }
html[data-theme="dark"] .advanced { border-color: #454037; }
html[data-theme="dark"] .advanced summary { background: #1b1a17; }
html[data-theme="dark"] .advanced-callout { color: #bdb29d; }
html[data-theme="dark"] .switch-field { border-color: #454037; background: #1b1a17; }
html[data-theme="dark"] .switch { background: #4a463d; }
html[data-theme="dark"] .switch:after { background: #d7cebd; }
html[data-theme="dark"] .button-primary { color: #241a09; background: linear-gradient(145deg, #efd078, #bd862c); box-shadow: 0 10px 28px rgba(200,145,42,.22); }
html[data-theme="dark"] .button-primary:hover { background: linear-gradient(145deg, #f7dc8d, #c79235); }
html[data-theme="dark"] .button-secondary { color: #ebca7e; background: #342b1b; }
html[data-theme="dark"] .button-quiet { color: #c3b9a5; border-color: #494237; background: #1d1c18; }
html[data-theme="dark"] .button-danger { color: #ef9aa0; background: #3b2023; }
html[data-theme="dark"] .icon-button { color: #b7ad99; background: #292720; }
html[data-theme="dark"] .group-block { border-color: #444037; background: #171714; }
html[data-theme="dark"] .group-head,
html[data-theme="dark"] .ad-block { border-color: #403b32; background: #1d1c18; }
html[data-theme="dark"] .group-index { color: #20190c; background: linear-gradient(145deg, #e1bb61, #a97224); }
html[data-theme="dark"] .group-name-input { color: var(--ink); }
html[data-theme="dark"] .ad-head,
html[data-theme="dark"] .creative-section { border-color: #403b32; }
html[data-theme="dark"] .add-inline { border-color: #655630; color: #e0bd6c; background: #211e17; }
html[data-theme="dark"] .upload-zone { color: #aaa08e; border-color: #5a5141; background: #191916; }
html[data-theme="dark"] .upload-zone:hover { color: #e7c572; border-color: #b28739; background: #292318; }
html[data-theme="dark"] .file-chip { color: #c2b8a4; background: #292720; }
html[data-theme="dark"] .uac-limit-note strong { color: #d8ceba; }
html[data-theme="dark"] .generate-card { background: radial-gradient(circle at 85% 0%, rgba(225,180,80,.12), transparent 35%), linear-gradient(140deg, #181714, #292218); }
html[data-theme="dark"] .generate-points span { color: #d6cab3; border: 1px solid rgba(224,184,97,.1); background: rgba(224,184,97,.06); }
html[data-theme="dark"] .modal-panel,
html[data-theme="dark"] .copy-panel { background: #1b1a17; }
html[data-theme="dark"] .script-meta { color: #a99f8d; background: #23211c; }
html[data-theme="dark"] .script-meta span { background: #2d2921; }
html[data-theme="dark"] .modal-panel pre { color: #e2dacb; background: #10100e; }
html[data-theme="dark"] .copy-count-control button { color: #e2bd69; border-color: #4d4538; background: #242018; }
html[data-theme="dark"] .copy-count-control button:hover { border-color: #a77d33; background: #332a1a; }
html[data-theme="dark"] .copy-preview { color: #aaa18e; background: #24221d; }
html[data-theme="dark"] .copy-panel > footer { background: #181714; }
html[data-theme="dark"] .toast { color: #22190a; background: #e3bb61; box-shadow: 0 15px 35px rgba(0,0,0,.35); }

@media (max-width: 1080px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; padding-inline: 20px; }
  .mmp-picker { grid-template-columns: repeat(2, 1fr); }
  .conversion-flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); text-align: center; }
}
@media (max-width: 790px) {
  .topbar { height: 66px; padding: 0 15px; }
  .privacy-pill { display: none; }
  .shell { display: block; padding: 18px 13px 70px; }
  .sidebar { position: static; }
  .sidebar-intro, .sidebar-note { display: none; }
  .step-nav { margin-bottom: 15px; display: flex; overflow-x: auto; }
  .step-nav a { min-width: 150px; grid-template-columns: 30px 1fr; padding: 9px; background: white; border-color: var(--line); }
  html[data-theme="dark"] .step-nav a { background: #201f1b; }
  .step-nav a > span { width: 30px; height: 30px; }
  .step-nav small, .step-state { display: none; }
  .hero-panel { padding: 21px; }
  .hero-status { display: none; }
  .form-card { padding: 20px 16px; border-radius: 20px; }
  .card-header { align-items: flex-start; }
  .form-grid.two, .asset-columns, .creative-grid, .toggle-row, .generate-card, .demographic-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: span 1; }
  .mmp-picker { grid-template-columns: 1fr 1fr; }
  .generate-summary { grid-template-columns: repeat(2, 1fr); }
  .button-large { grid-column: 1; }
  .footer { gap: 10px; flex-direction: column; }
}
@media (max-width: 500px) {
  .age-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand small, .top-actions .button { display: none; }
  .theme-toggle { padding-right: 5px; }
  .theme-toggle-label { display: none; }
  .hero-panel h2 { font-size: 21px; }
  .card-number, .status-badge { display: none; }
  .mmp-picker { grid-template-columns: 1fr; }
  .group-head { grid-template-columns: 32px 1fr; }
  .group-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .ad-head { align-items: flex-start; }
  .ad-title input { width: 52vw; }
}