@import url('/styles.css');

/* CTRTool's Autoblogging.ai design family: shared palette, shell, density, and type. */
:root {
  --accent: #0f4deb;
  --accent-hover: #0d42ca;
  --accent-ink: #0a35a0;
  --accent-soft: #eaf0fe;
  --accent-line: #bed0fa;
  --paper: #f6f9fc;
  --white: #fff;
  --surface-2: #fbfcfe;
  --ink: #0a2540;
  --muted: #586372;
  --line: #e6ebf1;
  --green: var(--accent);
  --lime: var(--accent-soft);
  --nav: #0a2540;
  --nav-muted: #828d9e;
  --red: #df1b41;
  --amber: #bb5504;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --serif: var(--sans);
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --shadow-card: 0 0 0 1px #32325d05, 0 4px 18px #0f172a09;
  color: var(--ink);
  font-size: 16px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: auto;
}
body { background: var(--paper); color: var(--ink); }
h1,h2,h3 { font-family: var(--sans); font-weight: 700; color: var(--ink); }
h1 { font-size: 26px; letter-spacing: -.6px; line-height: 1.25; }
h2 { font-size: 17px; letter-spacing: -.3px; }
a { text-underline-offset: 3px; }
button,.button { border-radius: 8px; padding: 10px 15px; font-size: 14px; font-weight: 600; }
button:hover,.button:hover { background: #f1f5fb; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid #0f4deb50; outline-offset: 3px;
}
button.primary,.button.primary {
  background: linear-gradient(135deg,#2b66f1,var(--accent) 55%,#0b36a6);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px #0f4deb26;
}
button.primary:hover,.button.primary:hover { background: linear-gradient(135deg,#235be0,#0a3fce); box-shadow: 0 6px 16px #0f4deb35; }
.primary:disabled { box-shadow: none; }
.quiet { background: transparent; box-shadow: none; }
.small { padding: 6px 10px; font-size: 14px; }
.brand { font-size: 25px; font-weight: 800; letter-spacing: -.9px; gap: 10px; }
.brand .brand-wordmark { font-weight: 800; }
.brand-wordmark span { color: var(--accent); font-weight: 800; }
.brand img { width: 35px; height: 35px; }
.eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .7px; color: var(--muted); }
.mono { font-size: 14px; }
.stack { gap: 18px; }
.row { gap: 10px; }
.panel { border-radius: 14px; border-color: var(--line); box-shadow: var(--shadow-card); }
.panel-head { padding: 17px 20px; }
.panel-head h2 { font-size: 15px; }
.panel-pad { padding: 22px 24px; }
.panel-head .small-text { margin-top: 4px; }
.empty { padding: 31px 22px; }
.empty .empty-mark { border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 12px; }
.empty h3 { font-size: 15px; }
.empty p { font-size: 14px; line-height: 1.7; max-width: 390px; }
.notice { background: #edf3ff; border-color: #d7e4ff; border-radius: 10px; font-size: 14px; padding: 13px 16px; }
.notice p { color: #52657d; line-height: 1.6; }
.notice .icon { color: var(--accent); }
.notice.warn { background: #fff9ed; border-color: #f3e7ca; }
.notice.warn .icon { color: var(--amber); }
.notice.warn p { color: #85704e; }
.pill { font-size: 14px; background: #f6f8fb; color: #586372; border-color: var(--line); border-radius: 999px; padding: 4px 9px; }
.pill.active,.pill.completed { color: #1a8245; background: #e3f6ea; border-color: #d0ead9; }
.pill.failed,.pill.blocked { color: #c7193b; background: #fdecef; border-color: #f8d5dd; }
.pill.running,.pill.queued { color: #a94d04; background: #fcf3e6; border-color: #f3e3c9; }
.pill.paused,.pill.cancelled,.pill.not_found { color: #475569; }

/* White navigation rail and sticky dashboard header follow the reference shell. */
.shell { grid-template-columns: 248px minmax(0,1fr); }
.sidebar { background: #fff; color: var(--ink); padding: 22px 14px 16px; border-right: 1px solid var(--line); gap: 0; }
.sidebar .brand { padding: 5px 8px 27px; }
.workspace-label { padding: 15px 10px 18px; margin: 0 0 6px; border-color: var(--line); gap: 10px; }
.workspace-square { background: var(--accent-soft); color: var(--accent); border-color: #dce6fd; border-radius: 8px; font-weight: 600; }
.workspace-label strong { font-weight: 600; color: var(--ink); }
.workspace-label small { color: var(--muted); }
.nav-label { margin: 23px 11px 9px; font: 600 14px var(--sans); color: #475569; letter-spacing: .8px; }
.sidebar nav { gap: 4px; }
.sidebar nav a { color: #3b4a5c; font-size: 14px; font-weight: 600; gap: 11px; padding: 10px 11px; border: 1px solid transparent; border-radius: 8px; }
.sidebar nav a .icon { color: #475569; width: 18px; height: 18px; }
.sidebar nav a.active { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; padding: 10px 11px; }
.sidebar nav a.active .icon { color: var(--accent); }
.sidebar nav a:hover { background: #f6f8fb; }
.sidebar nav a.active:hover { background: #e5edfe; }
.nav-count { background: #eaf0f8; color: #475569; font: 600 14px var(--sans); border-radius: 5px; }
.active .nav-count { color: var(--accent); background: #dbe7ff; }
.sidebar-bottom { padding-top: 24px; }
.side-quota { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 14px; margin-bottom: 17px; }
.side-quota .between { color: var(--muted); font-size: 14px; }
.side-quota strong { color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 700; }
.side-quota a { color: var(--accent); font-weight: 600; font-size: 14px; }
.side-quota .mono { font: 14px var(--sans); }
.meter { height: 6px; border-radius: 999px; background: #eaf0f8; }
.meter::-webkit-progress-bar,.side-quota .meter::-webkit-progress-bar { background: #eaf0f8; border-radius: 999px; }
.meter::-webkit-progress-value,.side-quota .meter::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.meter::-moz-progress-bar,.side-quota .meter::-moz-progress-bar { background: var(--accent); }
.account-chip { border-color: var(--line); padding: 16px 8px 0; }
.avatar { background: #eaf0fe; color: var(--accent); width: 33px; height: 33px; }
.account-chip strong { color: var(--ink); font-weight: 600; }
.account-chip small { color: #475569; }
.content { display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; height: 87px; background: #ffffffed; backdrop-filter: blur(14px); padding: 13px 28px; gap: 18px; justify-content: flex-start; }
.menu-toggle { padding: 7px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #475569; }
.menu-toggle .icon { width: 16px; height: 16px; }
.menu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 21px; letter-spacing: -.5px; margin: 0; white-space: nowrap; }
.topbar-title p { color: var(--muted); font-size: 14px; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-credits { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #f6f8fb; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.topbar-credits b { color: var(--ink); font-weight: 700; }
.topbar-credits .dot { background: var(--accent); width: 8px; height: 8px; }
.topbar-actions .quiet { font-size: 14px; padding: 7px 10px; color: #536176; }
.delivery-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; text-decoration: none; color: #586372; padding: 7px 10px; border-radius: 999px; background: #fff9ed; border: 1px solid #f3e7ca; }
.delivery-chip.connected { color: #1a8245; background: #e3f6ea; border-color: #d0ead9; }
.delivery-chip .dot { width: 6px; height: 6px; color: #bb5504; }
.delivery-chip.connected .dot { color: #1a8245; }
main { width: 100%; max-width: 1640px; margin: 0 auto; padding: 24px 28px 45px; }
.page-heading { margin-bottom: 21px; align-items: center; }
.page-heading h2 { font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
.page-heading .sub { margin-top: 5px; font-size: 14px; }
.date-tag { font-size: 14px; border-color: var(--line); color: #475569; padding: 8px 10px; background: #fff; }
.date-tag .icon { width: 15px; height: 15px; }
.sidebar-scrim { display: none; }
.sidebar-collapsed { grid-template-columns: 76px minmax(0,1fr); }
.sidebar-collapsed .sidebar { padding-inline: 12px; }
.sidebar-collapsed .sidebar .brand { padding: 5px 7px 27px; }
.sidebar-collapsed .brand-wordmark,.sidebar-collapsed .workspace-label,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-text,.sidebar-collapsed .nav-count,.sidebar-collapsed .side-quota,.sidebar-collapsed .account-copy { display: none; }
.sidebar-collapsed .sidebar nav { margin-bottom: 20px; }
.sidebar-collapsed .sidebar nav a { justify-content: center; padding: 12px 0; }
.sidebar-collapsed .account-chip { justify-content: center; padding-inline: 0; }

/* Dashboard: workspace cards on the left, allowance and setup in a right-hand rail. */
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 286px; gap: 20px; align-items: start; }
.dashboard-main,.dashboard-rail { display: grid; gap: 18px; min-width: 0; }
.metrics { gap: 12px; }
.metric { background: #fff; border-radius: 11px; border-color: var(--line); padding: 17px 16px 15px; box-shadow: var(--shadow-card); }
.metric-label { font-size: 14px; color: #475569; font-weight: 600; gap: 5px; }
.metric .icon { width: 16px; height: 16px; color: var(--accent); }
.metric-value { font-family: var(--sans); font-size: 27px; font-weight: 700; letter-spacing: -.7px; color: var(--ink); margin: 10px 0 5px; }
.metric-foot { color: #475569; font-size: 14px; line-height: 1.5; }
.chart-wrap { padding: 20px; min-height: 235px; }
.chart-empty { min-height: 198px; background: repeating-linear-gradient(to bottom,transparent 0,transparent 47px,#edf1f7 48px,transparent 49px); }
.chart-empty h3 { font-size: 14px; color: #53657f; }
.chart-empty p { font-size: 14px; }
.chart-empty > .muted { color: #475569; }
.chart text { fill: #828d9e; }
.chart .axis { stroke: #edf1f7; }
.chart .plot { stroke: var(--accent); }
.chart .searches { stroke: #b8c9e7; }
.legend { font-size: 14px; color: #475569; }
.legend i { background: var(--accent); }
.legend .gray { background: #b8c9e7; }
.chart-footer { padding: 12px 20px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #475569; font-size: 14px; }
.rail-head { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); padding: 15px 18px; font-size: 14px; font-weight: 700; }
.rail-head .icon { color: var(--accent); width: 17px; height: 17px; }
.rail-body { padding: 18px; }
.rail-plan-name { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 17px; }
.rail-plan-name strong { font-size: 14px; }
.rail-plan-name .pill { padding: 3px 7px; font-size: 14px; }
.allowance-number { font-size: 29px; font-weight: 700; letter-spacing: -.8px; color: var(--accent); }
.allowance-number span { font-size: 14px; color: #475569; font-weight: 400; letter-spacing: 0; }
.rail-body .meter { margin: 13px 0 10px; }
.quota-breakdown { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #475569; }
.rail-body p { font-size: 14px; line-height: 1.65; color: var(--muted); margin-top: 14px; }
.rail-body .button,.rail-body > button { width: 100%; margin-top: 17px; font-size: 14px; }
.setup-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 19px; }
.setup-list li { display: flex; gap: 10px; align-items: flex-start; }
.setup-list .step-number { flex-shrink: 0; width: 24px; height: 24px; font: 600 14px var(--sans); }
.setup-list strong { display: block; font-size: 14px; font-weight: 600; }
.setup-list small { display: block; margin-top: 4px; color: #475569; font-size: 14px; line-height: 1.65; }
.rail-note { background: #eef4ff; border: 1px solid #dbe7fd; padding: 15px 17px; border-radius: 12px; }
.rail-note .row { color: var(--accent); font-size: 14px; font-weight: 600; }
.rail-note .icon { width: 16px; height: 16px; }
.rail-note p { margin-top: 9px; color: #475569; font-size: 14px; line-height: 1.7; }
.footnote { color: #475569; font-size: 14px; margin-top: 20px; }

/* Tables, filters, and campaign controls. */
th { background: #f8fafd; color: #475569; font-size: 14px; letter-spacing: .4px; padding: 13px 17px; }
td { padding: 17px; border-color: #eef2f7; }
tbody tr:hover { background: #fbfcfe; }
td strong { color: var(--ink); }
td small { color: #475569; }
.campaign-link { color: var(--ink); }
.campaign-link:hover { color: var(--accent); }
.keyword-count { background: #f0f4fb; color: #475569; }
.table-actions .small { padding: 6px; color: #475569; }
.segmented { background: #eef2f8; border-color: var(--line); border-radius: 8px; }
.segmented button { color: #475569; }
.segmented button.selected { color: var(--accent-ink); box-shadow: 0 1px 4px #0a254010; }
.filter-bar input { background: #fff; }
.field input,.field select,.field textarea,input.search { border-color: #d5dbe6; border-radius: 8px; color: var(--ink); padding: 10px 12px; font-size: 14px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--accent); }
.field small { color: #475569; }
.check-field input { accent-color: var(--accent); }
.definition label { color: #475569; font-family: var(--sans); }
.pages-list li { border-color: var(--line); }
.pages-list li a { color: var(--accent); }
.backdrop { background: #0a254075; }
.dialog { background: var(--paper); border: 1px solid #fff; border-radius: 16px; box-shadow: 0 20px 60px #0a254030; }
.dialog header { padding: 22px 25px; }
.dialog header h2 { font: 700 22px var(--sans); letter-spacing: -.5px; }
.dialog header p { font-size: 14px; }
.dialog-body { padding: 24px 25px; }
.dialog footer { padding: 16px 25px; }
.step-number { background: #edf3ff; color: var(--accent); border: 1px solid #d4e2ff; }
.form-section h3 { color: var(--ink); font-size: 14px; }
.session-summary { background: #edf3ff; border-color: #d8e5ff; border-radius: 12px; }
.session-summary h3 { font: 700 16px var(--sans); color: var(--ink); }
.journey li strong { color: #294768; }
.journey small { color: #475569; }
.journey li::before { background: var(--accent); border-color: #edf3ff; box-shadow: 0 0 0 1px #a7c1f7; }
.journey li+li::after { background: #bfd1f4; }
.session-summary .notice { color: #475569; border-color: #cfdef8; background: transparent; }
.billing-summary { background: #eef4ff; border-color: #dae6ff; }
.price-card { background: #fff; border-color: var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 25px 21px; }
.price-card.featured { background: #fff; border: 2px solid var(--accent); padding: 24px 20px; }
.recommended { background: var(--accent); font: 700 14px var(--sans); color: #fff; border-radius: 5px; top: -11px; letter-spacing: .4px; }
.price-name { color: var(--ink); font-size: 15px; font-weight: 700; }
.price-amount { color: var(--ink); font-weight: 700; font-size: 39px; }
.price-allowance { color: #3b4a5c; font-size: 14px; }
.price-cost { color: #475569; font-family: var(--sans); font-size: 14px; }
.plan-features { color: #475569; border-color: var(--line); font-size: 14px; }
.plan-features li::before { color: var(--accent); }
.plan-features li { line-height: 1.6; }
.price-card .button,.price-card button { border-color: var(--accent-line); color: var(--accent); }
.price-card .primary { color: #fff; }
.account-panel { max-width: 760px; }
#toast { background: #0a2540; border-color: #173b61; box-shadow: 0 8px 30px #0a254025; }

/* Authentication mirrors the reference's centered, light login card. */
.auth-layout { display: grid; grid-template-columns: 1fr; min-height: 100dvh; place-items: center; padding: 32px 20px; background: #f6f9fc; }
.auth-form-side { display: block; width: min(430px,100%); padding: 0; }
.auth-form { background: #fff; border: 1px solid #edf1f6; border-radius: 18px; max-width: none; padding: 30px 26px 26px; box-shadow: 0 4px 22px #0a254007; }
.auth-form > .brand { justify-content: center; margin: 0 0 24px; font-size: 27px; }
.auth-form h1 { font: 700 24px var(--sans); letter-spacing: -.5px; text-align: center; }
.auth-form > .muted { text-align: center; margin: 14px 0 29px; color: #6b7280; font-size: 14px; }
.auth-form form { gap: 20px; }
.auth-form .field { font-size: 14px; color: #3b4a5c; font-weight: 500; gap: 8px; }
.auth-form .field input { border-radius: 12px; box-shadow: 0 1px 2px #0a254006; }
.auth-form button.primary { border-radius: 12px; margin-top: 4px; }
.auth-form .small-text { font-size: 14px; line-height: 1.7; }
.auth-switch { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.auth-switch a,.auth-back { color: var(--accent); }
.auth-back { display: flex; justify-content: center; margin: 20px 0 0; font-size: 14px; }

/* Public pages stay in the same white, navy, and electric-blue family. */
.public-header { max-width: 1240px; padding: 21px 24px; background: #fff; }
.public-header nav { gap: 25px; font-size: 14px; font-weight: 500; }
.public-main { max-width: none; padding: 0; background: #fff; }
.intro { background: linear-gradient(125deg,#034aff,#123bb9 60%,#15256c); color: #fff; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); padding: 75px max(24px,calc((100vw - 1192px)/2)); gap: 65px; }
.intro .eyebrow { color: #475569; letter-spacing: 1.1px; margin-bottom: 21px; }
.intro h1 { color: #fff; font: 800 clamp(38px,4.3vw,60px)/1.08 var(--sans); letter-spacing: -1.8px; }
.intro h1 em { color: #fff; font-style: normal; font-weight: 800; text-decoration: underline; text-decoration-color: #75d8ff; text-underline-offset: 10px; text-decoration-thickness: 4px; }
.intro p { color: #475569; font-size: 15px; line-height: 1.8; margin: 24px 0; }
.intro .primary { background: #fff; color: #1041be; box-shadow: 0 6px 18px #06288c22; }
.intro .primary:hover { background: #f0f5ff; }
.intro .quiet { background: transparent; border-color: #ffffff50; color: #fff; }
.intro-note { color: #475569; }
.control-preview { background: #fff; color: var(--ink); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 15px 40px #00195030; padding: 27px; }
.control-preview .eyebrow { color: #475569; font-size: 14px; }
.control-preview > .between > .icon { color: var(--accent); }
.preview-route { background: #f8faff; border-color: #e4ebfa; border-radius: 12px; }
.preview-node strong { color: #28415e; font-weight: 600; }
.preview-node .number { background: #eaf1ff; border-color: #d5e3ff; color: var(--accent); }
.preview-line { background: #d5e3ff; }
.preview-node > .icon { color: var(--accent); }
.preview-config span { color: #475569; font-size: 14px; font-weight: 600; }
.preview-config strong { color: var(--ink); font-size: 14px; font-weight: 600; }
.preview-footer { color: #475569; border-color: var(--line); }
.preview-footer .icon { color: #1a8245; width: 16px; height: 16px; }
.public-main > #pricing { max-width: 1240px; padding: 65px 24px 25px; margin: auto; }
.pricing-top h2 { font: 700 34px var(--sans); letter-spacing: -.9px; margin-top: 9px; }
.public-footer { max-width: 1192px; padding: 30px 0; margin: 30px auto 0; color: #475569; }
.public-footer .brand { font-size: 22px; color: var(--ink); margin-bottom: 10px; }

@media(min-width:1600px) {
  main { padding-top: 28px; }
  .dashboard-grid { grid-template-columns: minmax(0,1fr) 315px; gap: 23px; }
  .metrics { gap: 15px; }
}
@media(max-width:1250px) {
  .dashboard-grid { grid-template-columns: minmax(0,1fr) 258px; gap: 16px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar-actions .quiet .help-label { display: none; }
  .topbar-actions .quiet { padding: 7px; }
  .topbar-title p { max-width: 350px; }
  .public-header { padding-inline: 28px; }
  .intro { padding: 60px 28px; gap: 40px; }
  .public-footer { margin-inline: 28px; }
}
@media(max-width:1000px) {
  .shell { grid-template-columns: 220px minmax(0,1fr); }
  .sidebar-collapsed { grid-template-columns: 76px minmax(0,1fr); }
  .topbar { padding-inline: 21px; gap: 12px; }
  main { padding-inline: 21px; }
  .dashboard-grid { grid-template-columns: minmax(0,1fr); }
  .dashboard-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rail-note { grid-column: 1/-1; }
  .delivery-chip { display: none; }
  .topbar-title p { max-width: 300px; }
  .intro { gap: 30px; padding-top: 50px; padding-bottom: 50px; }
  .intro h1 { font-size: 42px; }
  .intro p { font-size: 14px; }
}
@media(max-width:700px) {
  .shell,.sidebar-collapsed { display: block; }
  .sidebar,.sidebar-collapsed .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: 248px; height: 100dvh; padding: 22px 14px 16px; transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 30px #0a254010; }
  .mobile-nav-open .sidebar { transform: translateX(0); }
  .sidebar .brand,.sidebar-collapsed .sidebar .brand { padding: 5px 8px 27px; font-size: 25px; }
  .sidebar .brand img { width: 35px; height: 35px; }
  .sidebar .workspace-label { display: flex; }
  .sidebar .nav-label,.sidebar .nav-text,.sidebar .nav-count,.sidebar .side-quota,.sidebar .account-copy,.sidebar .brand-wordmark { display: initial; }
  .sidebar .workspace-label,.sidebar .sidebar-bottom,.sidebar .side-quota { display: block; }
  .sidebar .workspace-label { display: flex; }
  .sidebar .sidebar-bottom { margin-top: auto; }
  .sidebar nav { display: grid; overflow: visible; margin: 0; gap: 4px; }
  .sidebar nav a,.sidebar nav a.active,.sidebar-collapsed .sidebar nav a { padding: 10px 11px; justify-content: flex-start; gap: 11px; font-size: 14px; }
  .sidebar nav a .icon { width: 18px; height: 18px; }
  .sidebar-collapsed .sidebar nav { margin-bottom: 0; }
  .sidebar-collapsed .account-chip { justify-content: flex-start; padding-inline: 8px; }
  .sidebar-scrim { display: block; visibility: hidden; opacity: 0; border: 0; border-radius: 0; position: fixed; inset: 0; background: #0a25406b; z-index: 25; padding: 0; transition: opacity .2s; }
  .mobile-nav-open .sidebar-scrim { opacity: 1; visibility: visible; }
  .sidebar-scrim:hover { background: #0a25406b; }
  .topbar { height: 78px; gap: 11px; padding: 12px 17px; }
  .topbar-title h1 { font-size: 18px; letter-spacing: -.4px; }
  .topbar-title p { max-width: 170px; font-size: 14px; margin-top: 4px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .quiet { display: none; }
  .topbar-credits { padding: 6px 9px; gap: 5px; font-size: 14px; }
  .topbar-credits .credit-label { display: none; }
  .topbar-credits .dot { width: 6px; height: 6px; }
  .menu-toggle { padding: 6px; }
  main { padding: 21px 16px 30px; }
  .page-heading { gap: 12px; align-items: center; margin-bottom: 19px; }
  .page-heading h2 { font-size: 17px; }
  .page-heading .sub { font-size: 14px; line-height: 1.6; margin-top: 5px; }
  .page-heading .primary { padding: 9px 10px; font-size: 14px; gap: 6px; }
  .page-heading .primary .icon { width: 14px; height: 14px; }
  .dashboard-grid { gap: 17px; }
  .dashboard-main,.dashboard-rail { gap: 15px; }
  .dashboard-rail { grid-template-columns: 1fr; }
  .metrics { gap: 10px; }
  .metric { padding: 15px 13px; }
  .metric-label { font-size: 14px; }
  .metric-value { font-size: 26px; }
  .notice { padding: 12px; font-size: 14px; }
  .panel-head { padding: 16px; gap: 10px; }
  .panel-head h2 { font-size: 14px; }
  .legend { gap: 10px; font-size: 14px; }
  .chart-wrap { padding: 17px; min-height: 225px; }
  .chart-empty h3 { font-size: 14px; }
  .chart-empty p { font-size: 14px; max-width: 230px; }
  .chart-footer { padding: 11px 16px; font-size: 14px; }
  .rail-note { grid-column: auto; }
  .filter-bar { gap: 11px; }
  .segmented button { font-size: 14px; padding: 7px 9px; }
  .pricing-grid { gap: 18px 11px; }
  .price-card { padding: 22px 15px; }
  .price-card.featured { padding: 21px 14px; }
  .price-name { font-size: 14px; }
  .price-amount { font-size: 31px; }
  .price-allowance { font-size: 14px; }
  .plan-features { font-size: 14px; }
  .price-card button { font-size: 14px; padding: 9px 7px; gap: 5px; }
  .recommended { font-size: 14px; left: 11px; }
  .dialog header { padding: 18px; }
  .dialog header h2 { font-size: 19px; }
  .dialog header p { font-size: 14px; }
  .dialog-body { padding: 20px 18px; }
  .dialog footer { padding: 14px 18px; }
  .dialog .field { font-size: 14px; }
  .dialog .field input,.dialog .field select,.dialog .field textarea { padding: 10px; font-size: 14px; }
  .session-summary h3 { font-size: 16px; }
  .public-header { padding: 17px; }
  .public-header .brand { font-size: 22px; }
  .public-header .brand img { width: 31px; height: 31px; }
  .public-header nav { gap: 13px; font-size: 14px; }
  .public-header nav .button { font-size: 14px; padding: 8px 9px; }
  .public-header nav > a:first-child { display: none; }
  .public-main { padding: 0; }
  .intro { grid-template-columns: 1fr; padding: 43px 21px; gap: 35px; }
  .intro .eyebrow { font-size: 14px; margin-bottom: 18px; }
  .intro h1 { font-size: 41px; letter-spacing: -1.5px; line-height: 1.13; }
  .intro p { margin: 25px 0; font-size: 14px; }
  .intro .row { flex-wrap: wrap; }
  .intro .button { font-size: 14px; padding: 11px 13px; }
  .control-preview { padding: 23px; }
  .public-main > #pricing { padding: 40px 18px 20px; }
  .pricing-top h2 { font-size: 28px; }
  .public-footer { margin: 20px 21px 0; padding: 26px 0; gap: 15px; }
  .auth-layout { padding: 26px 17px; }
  .auth-form { padding: 28px 23px 24px; }
  .auth-form h1 { font-size: 23px; }
}
@media(prefers-reduced-motion:reduce) { .sidebar,.sidebar-scrim { transition: none; } }
/* Campaign source selection */
.campaign-type-fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}.campaign-type-fieldset legend{font-weight:700;font-size:14px;margin-bottom:18px;padding:0;display:flex;align-items:center;gap:9px}.campaign-type-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.campaign-type-option{position:relative;cursor:pointer;min-width:0}.campaign-type-option>input{position:absolute;opacity:0;width:1px;height:1px}.campaign-type-card{display:flex;flex-direction:column;height:100%;padding:18px;border:1px solid #dce4ef;border-radius:10px;background:#fff;transition:border-color .18s,box-shadow .18s,background .18s}.campaign-type-card strong{font-size:14px;color:#0a2540;margin:12px 0 7px}.campaign-type-card small{font-size:14px;line-height:1.7;color:#60738b;flex:1}.type-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:#0f4deb;background:#edf3ff}.type-icon .icon{width:18px;height:18px}.type-selected{display:flex;align-items:center;gap:5px;margin-top:14px;font-size:14px;color:#0f4deb;visibility:hidden}.type-selected .icon{width:12px;height:12px}.campaign-type-option>input:checked+.campaign-type-card{background:#f6f9ff;border-color:#0f4deb;box-shadow:0 0 0 1px #0f4deb}.campaign-type-option>input:checked+.campaign-type-card .type-selected{visibility:visible}.campaign-type-option>input:focus-visible+.campaign-type-card{outline:3px solid #a9c4ff;outline-offset:4px}.campaign-type-option:hover .campaign-type-card{border-color:#759ef6}.maps-campaign-fields{display:grid;gap:18px}.maps-campaign-fields[hidden],[data-search-depth][hidden]{display:none!important}.campaign-source-note{font-size:14px;line-height:1.7;margin-top:18px}.campaign-type-summary{font-size:14px;font-weight:700;color:#0f4deb;border-bottom:1px solid #dce6f4;padding:0 0 14px;margin-bottom:18px}.campaign-kind{color:#0f4deb!important;font-size:14px!important;margin-top:4px}.detail-card .definition>span{overflow-wrap:anywhere}
@media(max-width:680px){.campaign-type-options{grid-template-columns:minmax(0,1fr);gap:10px}.campaign-type-card{padding:14px 15px;display:grid;grid-template-columns:32px 1fr;gap:0 12px}.campaign-type-card .type-icon{grid-row:1/4}.campaign-type-card strong{margin:0 0 5px}.campaign-type-card small{font-size:14px;grid-column:2}.type-selected{grid-column:2;margin-top:7px}.campaign-type-fieldset{margin-bottom:24px}}
/* Editors stay above the mobile navigation drawer. */
.backdrop{z-index:100}