:root {
  --violet: #9d2235;
  --violet-soft: #fae9ec;
  --ink: #31242a;
  --muted: #7d6870;
}

/* Keep the shared page header anchored to the same top edge on every view.
   The base shell centers `main` vertically when a view is short (for example,
   Projects), which made the header jump between tabs. */
main { margin: 0 auto; }

.brand-mark { background: linear-gradient(135deg, #c8102e, #8f1d30); }
.workspace { background: #392b30; }
.nav-item b { background: #71313d; }
.nav-item:hover, .nav-item.active { background: #582832; }
.nav-item.active { box-shadow: inset 3px 0 #d85267; }
.primary, .tab.active, .thread-body p.mine { background: #9d2235; }
.primary { box-shadow: 0 4px 12px #9d223543; }
.mock-notice { background: #fceedf; border-color: #edc8cf; color: #703440; }
.mock-notice span { color: #9d2235; }
.tag, .platform-pills span, .platform-chip { background: #fae9ec; color: #9d2235; }
.post-thumb { background: linear-gradient(135deg, #9d2235, #ce5065); }
.bars i.current, .stage-row i, .task-progress i { background: #9d2235; }
.conversation:hover, .conversation.selected { background: #fae9ec; }
.integration-logo.meta { background: linear-gradient(135deg, #9d2235, #d85267); }
.integration-logo.google { background: linear-gradient(135deg, #4285f4 0 48%, #ea4335 48% 64%, #fbbc05 64% 79%, #34a853 79%); }
.integration-logo.honeybook { background: #262c3a; letter-spacing: -.08em; text-transform: lowercase; }
.integration-logo.jotform { background: #ff5d4d; }
.integration-logo.business { background: #3675e8; }
.integration-logo.canva { background: linear-gradient(135deg, #00c4cc, #7d2ae8); }
.integration-logo.scheduling { background: #23714e; }
.integration-logo.slack { background: #4a154b; }
.integration-logo.quickbooks { background: #2ca01c; font-size: 13px; text-transform: lowercase; }
.integration-logo.ads { background: linear-gradient(135deg, #4285f4, #34a853); }
.integration-logo.tiktok { background: #1c1b24; }
.integration-section { display: grid; gap: 14px; margin-top: 24px; }
.integration-section + .integration-section { margin-top: 30px; }
.integration-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.integration-section-heading > div { display: grid; gap: 4px; }
.integration-section-heading p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.integration-section-heading h2 { margin: 0; color: #382a30; font-size: 18px; letter-spacing: -.02em; }
.integration-section-heading span { color: #83757b; font-size: 12px; }
.integration-section-heading > b { flex: none; border: 1px solid #ecdde0; border-radius: 999px; padding: 6px 9px; color: #765d66; background: #fff; font-size: 10px; }
.integration-card.priority { border-color: #e8d4d8; }
.messaging-workspace { display: grid; gap: 12px; }
.message-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 4px; border: 1px solid #eee4e6; border-radius: 10px; background: #faf7f8; }
.message-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 0; border-radius: 7px; padding: 0 12px; color: #786a70; background: transparent; font: inherit; font-size: 11px; font-weight: 850; white-space: nowrap; }
.message-tab:hover { color: #842237; background: #fff; }
.message-tab.active { color: #8e2034; background: #fff; box-shadow: 0 1px 5px #48202917; }
.message-tab b { display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 999px; padding: 0 4px; color: #836b73; background: #efe8ea; font-size: 9px; }
.message-tab.active b { color: #fff; background: #9d2235; }
.message-scope { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 2px; color: #83757b; font-size: 11px; }
.message-scope b { color: #5a424b; }
.message-scope small { color: #9a8c91; font-size: 10px; font-weight: 800; }
.message-scope-controls { display: inline-flex; align-items: center; gap: 10px; }
.message-unread-filter { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; border: 1px solid #eadde0; border-radius: 999px; padding: 0 8px; color: #786a70; background: #fff; font: inherit; font-size: 10px; font-weight: 850; }
.message-unread-filter:hover { border-color: #d69da8; color: #8e2034; background: #fff8f9; }
.message-unread-filter.active { border-color: #9d2235; color: #fff; background: #9d2235; }
.message-unread-filter b { display: grid; min-width: 14px; height: 14px; place-items: center; border-radius: 999px; color: #7d5862; background: #f5ebed; font-size: 8px; }
.message-unread-filter.active b { color: #8e2034; background: #fff; }

/* Messaging is a fixed workspace: keep the local composer in view while
   each record-heavy column scrolls independently. */
@media (min-width: 761px) {
  body.messaging-open { overflow: hidden; }
  body.messaging-open main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding-bottom: 24px; }
  body.messaging-open #app-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  body.messaging-open .messaging-workspace { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  body.messaging-open .message-layout { flex: 1; min-height: 0; }
  body.messaging-open .conversation-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.messaging-open .thread { min-height: 0; }
  body.messaging-open .thread-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.messaging-open .reply-box { flex: none; }
}
.conversation small em { color: #9d2235; font-size: 10px; font-style: normal; font-weight: 850; }
.conversation { grid-template-columns: 33px minmax(0, 1fr) auto 8px; }
.conversation.unread strong { color: #37242b; font-weight: 850; }
.conversation-unread { align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #9d2235; box-shadow: 0 0 0 3px #f7e5e8; }
.message-empty { display: grid; gap: 5px; padding: 18px 12px; color: #82747a; font-size: 11px; }
.message-empty b { color: #4b3940; font-size: 13px; }
.record-card-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.record-menu { flex: none; width: 27px; height: 27px; border: 1px solid #ebe3e5; border-radius: 7px; padding: 0; color: #755f67; background: #fff; font-size: 13px; font-weight: 900; line-height: 1; }
.record-menu:hover { border-color: #d8a7b1; color: #9d2235; background: #fff8f9; }
.schedule-item .record-menu { align-self: center; }
.thread-head .record-menu { width: 30px; height: 30px; }
.context-menu { position: fixed; z-index: 20; display: grid; min-width: 196px; overflow: hidden; border: 1px solid #e4d9dc; border-radius: 10px; padding: 5px; background: #fff; box-shadow: 0 14px 34px #35151d24; }
.context-menu[hidden] { display: none; }
.context-menu button { min-height: 32px; border: 0; border-radius: 6px; padding: 0 10px; color: #493840; background: transparent; font: inherit; font-size: 11px; font-weight: 750; text-align: left; }
.context-menu button:hover { color: #8d2034; background: #fff3f5; }
.context-menu button.danger { margin-top: 4px; border-top: 1px solid #f0e4e6; border-radius: 0 0 6px 6px; padding-top: 4px; color: #a24052; }
.pipeline-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pipeline-switcher { border: 1px solid #e5c4cb; background: #fff; color: #7b263c; border-radius: 7px; padding: 6px 28px 6px 9px; font-size: 12px; font-weight: 700; }
.page-menu { font-size: 14px; letter-spacing: 1px; font-weight: 800; }
.pipeline-builder { background: #1d2132; color: #f5f3fa; }
.pipeline-builder .eyebrow { color: #c7a9ff; }
.pipeline-builder h2 { color: #fff; }
.pipeline-builder-copy { color: #b8bbca; font-size: 14px; line-height: 1.45; margin: -4px 0 4px; }
.pipeline-builder label { color: #c4c7d5; }
.pipeline-builder input, .pipeline-builder textarea { background: #1a1e2d; border-color: #353b52; color: #fff; }
.pipeline-builder textarea { min-height: 74px; }
.stage-builder { display: grid; gap: 10px; }
.stage-editor-row { display: grid; grid-template-columns: 26px 1fr 34px; gap: 10px; align-items: center; padding: 10px; background: #222638; border: 1px solid #333950; border-radius: 10px; cursor: grab; }
.stage-editor-row.dragging { opacity: .45; }
.stage-editor-row input { height: 40px; padding: 8px 10px; }
.stage-drag { color: #9ba2bb; text-align: center; letter-spacing: 1px; cursor: grab; }
.stage-delete { width: 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; color: #c7cad7; font-size: 17px; }
.stage-delete:hover { background: #4b2934; color: #ff8b9b; }
.add-stage { border: 1px dashed #626984; background: transparent; color: #e7e5f1; border-radius: 8px; padding: 10px 12px; text-align: left; font-weight: 700; }
.add-stage:hover { border-color: #cf536a; color: #fff; }
.pipeline-builder .quiet { background: #2a2f43; border-color: #3a4057; color: #e7e5f1; }

.project-workspace { display: grid; gap: 20px; }
.project-grid .project-card { aspect-ratio: 4 / 3; display: grid; grid-template-rows: 55% 1fr; }
.project-grid .project-cover { height: auto; }
.project-grid .project-card > div:last-child { display: flex; flex-direction: column; }
.project-grid .project-card footer { margin-top: 12px; }
.back-link { width: max-content; border: 0; padding: 0; color: #7b263c; background: transparent; font: inherit; font-weight: 800; }
.project-hero { min-height: 270px; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 32px; border-radius: 14px; color: #fff; background: linear-gradient(90deg, #21171bdc, #21171b80), radial-gradient(circle at 82% 26%, #c48473, transparent 25%), linear-gradient(130deg, #6d5c5b, #272126 72%); box-shadow: 0 10px 24px #4a1b2730; }
.project-hero > div { position: relative; z-index: 1; }
.project-hero span { display: inline-flex; margin-bottom: 10px; padding: 5px 9px; border-radius: 999px; color: #ffe7eb; background: #9d2235cc; font-size: 12px; font-weight: 800; }
.project-hero h2 { margin: 0; color: #fff; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.04em; }
.project-hero p { margin: 8px 0 0; color: #f8e9eb; font-size: 16px; }
.hero-edit { border: 1px solid #ffffff80; border-radius: 8px; padding: 10px 13px; color: #fff; background: #ffffff1e; font: inherit; font-weight: 800; }
.project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 54px; }
.project-actions .avatar { margin-right: -3px; }
.project-actions > div { display: grid; margin-right: auto; }
.project-actions small, .project-record-list small { color: var(--muted); }
.project-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid #ecdde0; }
.project-tabs button { white-space: nowrap; border: 0; border-bottom: 3px solid transparent; padding: 12px 15px; color: #715f65; background: transparent; font: inherit; font-weight: 800; }
.project-tabs button.active { color: #9d2235; border-color: #c8102e; }
.project-panel { min-height: 240px; padding: 23px; border: 1px solid #ecdde0; border-radius: 12px; background: #fff; }
.project-feed, .project-record-list, .project-tasks { display: grid; gap: 11px; }
.project-feed article, .project-record-list article { display: grid; gap: 5px; padding: 15px; border-left: 3px solid #c8102e; border-radius: 0 8px 8px 0; background: #fff7f8; }
.project-feed span { color: var(--muted); }
.project-empty { display: grid; gap: 7px; justify-items: start; max-width: 450px; padding: 12px 0; }
.project-empty b { font-size: 20px; }
.project-empty p { margin: 0; color: var(--muted); line-height: 1.5; }
.project-tasks label { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #ecdde0; border-radius: 8px; font-weight: 700; }
.project-tasks input { accent-color: #9d2235; width: 16px; height: 16px; }
.project-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.project-stats article { display: grid; gap: 8px; padding: 17px; border-radius: 10px; background: #fff7f8; }
.project-stats small { color: var(--muted); }
.project-stats b { color: #672031; font-size: 18px; }
.finance-workspace, .finance-overview { display: grid; gap: 16px; }
.finance-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.finance-header > div { display: grid; gap: 5px; }
.finance-header p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.finance-header h2 { margin: 0; color: #30242a; font-size: 29px; letter-spacing: -.035em; }
.finance-header span { color: #82767c; font-size: 13px; }
.finance-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px; border: 1px solid #eee4e6; border-radius: 10px; background: #faf7f8; }
.finance-tabs button { min-height: 34px; border: 0; border-radius: 7px; padding: 0 14px; color: #796a70; background: transparent; font: inherit; font-size: 11px; font-weight: 900; }
.finance-tabs button:hover { color: #842237; background: #fff; }
.finance-tabs button.active { color: #8e2034; background: #fff; box-shadow: 0 1px 5px #48202917; }
.finance-insights { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr); gap: 16px; }
.finance-trend-card, .finance-receivables-card { min-height: 365px; padding: 20px; border: 1px solid #ece5e7; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.finance-receivables-card { display: flex; flex-direction: column; }
.finance-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.finance-card-heading h3 { margin: 0; color: #3a2b30; font-size: 14px; letter-spacing: -.01em; }
.finance-card-heading p { margin: 0 0 5px; color: #8b7f84; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.finance-period { border: 1px solid #e6d9dc; border-radius: 8px; padding: 8px 10px; color: #7d6e74; font-size: 10px; font-weight: 800; }
.finance-trend-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.finance-trend-summary strong { color: #2e2428; font-size: 29px; letter-spacing: -.04em; }
.finance-trend-summary span { color: #16845b; font-size: 11px; font-weight: 900; }
.finance-trend-summary small { color: #6f6268; font-size: 11px; }
.finance-chart { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.finance-chart-labels { display: flex; flex-direction: column; justify-content: space-between; height: 190px; padding: 3px 0 7px; color: #9a8c91; font-size: 10px; text-align: right; }
.finance-chart svg { width: 100%; height: 190px; overflow: visible; }
.finance-chart svg line { stroke: #f0e5e7; stroke-dasharray: 3 4; }
.finance-chart svg polyline { fill: none; stroke: #9d2235; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.finance-chart svg circle { fill: #fff; stroke: #9d2235; stroke-width: 3; }
.chart-scrubber, .chart[data-chart-scrub] { position: relative; touch-action: none; cursor: crosshair; }
.chart-scrub-guide { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--chart-scrub-x, 0px); width: 1px; border-left: 1px dashed #a23b4d; pointer-events: none; opacity: 0; }
.chart-scrub-point { position: absolute; z-index: 3; left: var(--chart-scrub-x, 0px); top: var(--chart-scrub-y, 0px); width: 10px; height: 10px; border: 3px solid #9d2235; border-radius: 50%; background: #fff; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.chart-scrub-tooltip { position: absolute; z-index: 4; left: var(--chart-scrub-x, 0px); top: var(--chart-scrub-y, 0px); min-width: max-content; border: 1px solid #742237; border-radius: 7px; padding: 6px 8px; color: #fff; background: #742237; box-shadow: 0 5px 16px #4a1d282b; font-size: 10px; font-weight: 850; line-height: 1; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .12s ease; }
.chart-scrubber.is-scrubbing .chart-scrub-guide, .chart-scrubber.is-scrubbing .chart-scrub-point, .chart-scrubber.is-scrubbing .chart-scrub-tooltip, .chart[data-chart-scrub].is-scrubbing .chart-scrub-guide, .chart[data-chart-scrub].is-scrubbing .chart-scrub-point, .chart[data-chart-scrub].is-scrubbing .chart-scrub-tooltip { opacity: 1; }
.finance-chart-dates { display: flex; justify-content: space-between; margin-top: -1px; color: #9a8c91; font-size: 10px; }
.finance-receivable-list { display: grid; flex: 1; gap: 0; margin-top: 17px; }
.finance-receivable-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 0; border-bottom: 1px solid #f0edef; }
.finance-receivable-row:last-child { border-bottom: 0; }
.finance-receivable-row > div { display: grid; min-width: 0; gap: 4px; }
.finance-receivable-row b { overflow: hidden; color: #413137; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.finance-receivable-row small { color: #94868c; font-size: 10px; }
.finance-receivable-row > strong { color: #3f3035; font-size: 14px; }
.finance-state { display: inline-flex; align-items: center; gap: 5px; color: #8c7e84; font-size: 10px; font-weight: 900; white-space: nowrap; }
.finance-state::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.finance-state.overdue { color: #b96122; }
.finance-state.paid { color: #23714e; }
.finance-kpi-layout { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 16px; }
.finance-kpi-group { display: grid; gap: 12px; }
.finance-kpi-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-kpi-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finance-kpi { min-height: 115px; padding: 17px; border: 1px solid #ece5e7; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.finance-kpi p { margin: 0; color: #86787e; font-size: 10px; font-weight: 800; }
.finance-kpi strong { display: block; margin-top: 13px; color: #36282d; font-size: 21px; letter-spacing: -.035em; }
.finance-kpi small { display: block; margin-top: 7px; color: #23805a; font-size: 10px; font-weight: 900; }
.finance-kpi span { display: block; margin-top: 4px; color: #918389; font-size: 10px; line-height: 1.35; }
.finance-table-panel { overflow: auto; border: 1px solid #ece5e7; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.finance-table-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px; }
.finance-table-heading > div { display: grid; gap: 4px; }
.finance-table-heading p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.finance-table-heading h3 { margin: 0; color: #3a2b30; font-size: 17px; }
.finance-table-heading small { color: #85767c; font-size: 11px; }
.finance-filter { white-space: nowrap; font-size: 11px; }
.finance-table-panel table { min-width: 760px; }
.finance-table-panel th { color: #776b70; background: #fffafa; }
.finance-empty { padding: 20px; color: #85767c; font-size: 12px; }
.project-record-list article { grid-template-columns: 1fr auto; align-items: center; }
.project-record-list article > div { display: grid; gap: 4px; }
.project-record-list article > div b { display: block; }
.project-record-list > .quiet { justify-self: start; }
.automation-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: stretch; }

/* The library view is a bounded workspace, matching the behavior of the
   message inbox: the workflow stays in view while a long folder list scrolls. */
@media (min-width: 781px) {
  body.automations-open { overflow: hidden; }
  body.automations-open main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding-bottom: 24px; }
  body.automations-open #app-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  body.automations-open .automation-layout { flex: 1; min-height: 0; }
  body.automations-open .automation-library { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  body.automations-open .automation-builder, body.automations-open .automation-canvas, body.automations-open .automation-preview { min-height: 0; }
  body.automations-open .automation-preview { height: 100%; }
}
.automation-view-tabs { display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 4px; border: 1px solid #ecdde0; border-radius: 10px; background: #fff; }
.automation-view-tabs button { border: 0; border-radius: 7px; padding: 7px 11px; color: #75555e; background: transparent; font: inherit; font-size: 11px; font-weight: 800; }
.automation-view-tabs button:hover { background: #fff3f5; }
.automation-view-tabs button.active { color: #fff; background: #9d2235; box-shadow: 0 2px 5px #7d1c2b2b; }
.automation-folder-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.automation-folder-card { display: grid; gap: 14px; padding: 18px; border: 1px solid #ecdde0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #4a1b2708; }
.automation-folder-card header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.automation-folder-card header p { margin: 0 0 4px; color: #9d2235; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.automation-folder-card header h3 { margin: 0; color: #38242a; font-size: 17px; }
.automation-folder-card header > span { color: #8b6972; font-size: 10px; font-weight: 800; white-space: nowrap; }
.automation-folder-workflows { display: grid; gap: 6px; }
.automation-subfolder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; }
.automation-subfolder-grid section { display: grid; gap: 6px; min-height: 78px; padding: 10px; border: 1px solid #f0dfe2; border-radius: 9px; background: #fffafa; }
.automation-subfolder-grid small { color: #8b6972; font-size: 10px; font-weight: 800; }
.automation-subfolder-grid em { color: #a7878e; font-size: 10px; font-style: normal; }
.automation-list-view { overflow: hidden; border: 1px solid #ecdde0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #4a1b2708; }
.automation-list-head, .automation-list-row { display: grid; grid-template-columns: minmax(190px, 1.5fr) minmax(170px, 1.2fr) 70px 82px 48px; align-items: center; gap: 12px; }
.automation-list-head { padding: 12px 16px; border-bottom: 1px solid #f0dfe2; color: #8b6972; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.automation-list-row { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid #f5e8ea; color: #604149; background: #fff; text-align: left; font: inherit; font-size: 11px; }
.automation-list-row:last-child { border-bottom: 0; }
.automation-list-row:hover, .automation-list-row.active { background: #fff7f8; }
.automation-list-row strong { color: #38242a; font-size: 12px; }
.automation-list-row > span { overflow: hidden; color: #795f67; text-overflow: ellipsis; white-space: nowrap; }
.automation-list-folder + .automation-list-folder { border-top: 1px solid #f0dfe2; }
.automation-list-folder-row, .automation-list-subfolder-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; width: 100%; border: 0; color: #49343a; background: #fff; text-align: left; font: inherit; }
.automation-list-folder-row { padding: 16px; }
.automation-list-folder-row:hover { background: #fff7f8; }
.automation-list-folder-row > span, .automation-list-subfolder-row > span { color: #9d2235; font-size: 17px; line-height: 1; }
.automation-list-folder-row strong { font-size: 13px; }
.automation-list-folder-row small, .automation-list-subfolder-row small { color: #927780; font-size: 10px; font-weight: 800; }
.automation-list-children { display: grid; gap: 8px; padding: 0 16px 16px 44px; background: #fffafa; }
.automation-direct-group { display: grid; gap: 5px; }
.automation-direct-group > small { color: #927780; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.automation-list-subfolder { overflow: hidden; border: 1px solid #f0dfe2; border-radius: 8px; background: #fff; }
.automation-list-subfolder-row { padding: 10px 12px; }
.automation-list-subfolder-row:hover { background: #fff8f9; }
.automation-list-workflows { display: grid; border-top: 1px solid #f4e7e9; }
.automation-list-workflows em { padding: 12px; color: #a7878e; font-size: 10px; font-style: normal; }
.automation-list-workflows .automation-list-row { grid-template-columns: minmax(170px, 1.5fr) minmax(130px, 1.2fr) 60px 75px 40px; padding-left: 14px; font-size: 10px; }
.automation-library, .automation-builder, .automation-inspector { min-width: 0; border: 1px solid #ecdde0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #4a1b2708; }
.automation-library { display: grid; align-content: start; gap: 14px; padding: 14px; }
.automation-side-heading, .automation-builder-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.automation-side-heading > div, .automation-builder-head > div:first-child { display: grid; gap: 3px; }
.automation-side-heading b, .automation-builder h3, .automation-inspector h3 { color: #38242a; }
.automation-side-heading small, .automation-builder-head small, .automation-library small, .automation-inspector small { color: var(--muted); font-size: 11px; }
.automation-side-heading .quiet { width: 31px; padding: 0; font-size: 18px; }
.automation-list { display: grid; gap: 7px; }
.automation-list-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 8px; color: #5c444b; background: transparent; text-align: left; }
.automation-list-item:hover { border-color: #ead0d5; background: #fff7f8; }
.automation-list-item.active { border-color: #d7a4ae; background: #fceedf; color: #731d2e; }
.automation-list-item > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.automation-list-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.automation-list-item .status { font-size: 9px; }
.automation-list-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #9d2235; font-size: 12px; }
.trigger-reference { display: grid; gap: 8px; padding: 13px 0 0; border-top: 1px solid #f0dfe2; }
.trigger-reference b { color: #6c414b; font-size: 12px; }
.trigger-reference span { color: #705b61; font-size: 11px; }
.trigger-reference small { line-height: 1.45; }
.automation-builder { overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.automation-builder-head { align-items: start; padding: 18px; border-bottom: 1px solid #f0dfe2; }
.automation-builder-head h3 { margin: 0; font-size: 18px; }
.automation-builder-head > div:last-child { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; align-items: center; }
.automation-builder-head .quiet { height: 32px; padding: 0 10px; font-size: 11px; }
.automation-canvas { min-height: 490px; padding: 0; background-color: #fffafa; background-image: radial-gradient(#e7cbd1 1px, transparent 1px); background-size: 18px 18px; }
.automation-preview { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 490px; }
.automation-preview-stage { position: relative; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; }
.automation-preview-stage:active { cursor: grabbing; }
.automation-preview-stage > .automation-flow { position: absolute; top: 0; left: 0; min-height: 0; width: 340px; margin: 0; transform-origin: top left; transition: transform 80ms ease-out; }
.automation-preview-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #f0dfe2; background: #fffdfd; }
.automation-preview-controls span { color: #8b6972; font-size: 10px; font-weight: 700; }
.automation-preview-controls .quiet { height: 28px; padding: 0 9px; font-size: 10px; }
.automation-flow { display: grid; justify-items: center; gap: 0; min-height: 100%; }
.automation-node { position: relative; z-index: 1; display: grid; grid-template-columns: 33px minmax(0, 1fr); gap: 10px; width: min(100%, 340px); padding: 13px; border: 1px solid #e5c4cb; border-radius: 10px; background: #fff; box-shadow: 0 8px 17px #69233212; text-align: left; }
.automation-node.trigger { border-color: #c97484; background: #fff7f8; }
.automation-node.tags { border-color: #d9a76f; background: #fffaf1; }
.automation-node.action { min-height: 115px; width: min(100%, 190px); border-color: #b7cfbd; background: #f7fcf7; }
.automation-node-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #9d2235; font-size: 14px; font-weight: 800; }
.automation-node.tags .automation-node-icon { background: #bf7c2e; }
.automation-node.action .automation-node-icon { background: #398465; }
.automation-node div { min-width: 0; display: grid; align-content: start; gap: 3px; }
.automation-node small { color: #8c747a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.automation-node b { color: #432d33; font-size: 12px; line-height: 1.25; }
.automation-node p { margin: 0; color: #7c656c; font-size: 10px; line-height: 1.38; }
.automation-node-edit, .automation-node-remove { position: absolute; top: 7px; right: 7px; min-width: 22px; height: 22px; border: 0; border-radius: 5px; padding: 0 5px; color: #8c5a65; background: #f8e5e8; font-size: 10px; font-weight: 800; }
.automation-node-remove { color: #9d2235; font-size: 16px; line-height: 1; }
.automation-node-edit:hover, .automation-node-remove:hover { color: #fff; background: #9d2235; }
.automation-condition-stack { display: grid; justify-items: center; gap: 8px; width: min(100%, 420px); }
.automation-condition-stack .automation-node { width: 100%; }
.automation-add-condition, .automation-add-node { min-height: 46px; border: 1px dashed #cda1aa; border-radius: 9px; color: #8e3344; background: #fffafb; font: inherit; font-size: 11px; font-weight: 800; }
.automation-add-condition { padding: 0 13px; }
.automation-add-node { width: min(100%, 190px); justify-self: center; }
.automation-connector { display: block; width: 2px; height: 33px; background: #c77c8a; position: relative; }
.automation-connector::after { content: ""; position: absolute; left: -3px; bottom: -1px; border: 4px solid transparent; border-top-color: #c77c8a; border-bottom: 0; }
.automation-action-tree { position: relative; display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); align-items: start; gap: 13px; width: min(100%, 640px); padding-top: 18px; }
.automation-action-tree::before { content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 18px; border-top: 2px solid #97b8a1; border-left: 2px solid #97b8a1; border-right: 2px solid #97b8a1; }
.automation-action-tree .automation-node { justify-self: center; }
.automation-action-tree .automation-node::before { content: ""; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; background: #97b8a1; }
.automation-test-strip { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 13px 18px; border-top: 1px solid #f0dfe2; color: #755f66; background: #fff; font-size: 11px; line-height: 1.4; }
.automation-test-strip b { color: #9d2235; }
.automation-test-strip .primary { height: 33px; flex: none; font-size: 11px; }
.automation-build-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.automation-build-controls .quiet { height: 33px; padding: 0 10px; font-size: 11px; }
.automation-inspector { display: grid; align-content: start; gap: 18px; padding: 18px; }
.automation-inspector > div { display: grid; gap: 4px; }
.automation-inspector section { display: grid; gap: 9px; }
.automation-inspector section > small { color: #785560; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.automation-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.automation-tags span { border-radius: 999px; padding: 5px 8px; color: #8a2438; background: #f9e4e8; font-size: 10px; font-weight: 800; }
.automation-inspector ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.automation-inspector li { display: grid; gap: 2px; padding-left: 11px; border-left: 2px solid #d6808e; }
.automation-inspector li b { color: #4c333a; font-size: 11px; }
.automation-inspector li span, .automation-runs p { color: #7d6870; font-size: 11px; line-height: 1.4; }
.automation-runs { padding-top: 3px; border-top: 1px solid #f0dfe2; }
.automation-runs article { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 9px 0; border-bottom: 1px solid #f5e8ea; }
.automation-runs article b { color: #573840; font-size: 11px; }
.automation-runs article span { color: #9a858b; font-size: 10px; }
.automation-runs article p { grid-column: 1 / -1; margin: 0; }
.automation-runs > p { margin: 0; color: #7d6870; font-size: 11px; line-height: 1.45; }
.automation-form-section { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid #ead3d8; border-radius: 8px; }
.automation-form-section legend { padding: 0 4px; color: #72434e; font-size: 12px; font-weight: 800; }
.automation-check-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.automation-check { display: flex !important; align-items: center; gap: 6px; color: #694d55 !important; font-size: 11px !important; font-weight: 700; }
.automation-check input { width: auto !important; accent-color: #9d2235; }
.automation-check-grid .automation-check { padding: 6px 8px; border: 1px solid #ead3d8; border-radius: 999px; background: #fff7f8; }
.automation-custom-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.automation-custom-tag { border-radius: 999px; padding: 5px 8px; color: #26624d; background: #e4f5eb; font-size: 10px; font-weight: 800; }
.automation-action-checks { display: grid; gap: 7px; }
.automation-action-check { align-items: start; padding: 8px; border: 1px solid #efdde1; border-radius: 7px; background: #fffafb; }
.automation-action-check span { display: grid; gap: 2px; }
.automation-action-check small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.35; }
.automation-folder-tree { display: grid; gap: 8px; }
.automation-folder { border: 1px solid #f0dfe2; border-radius: 8px; overflow: hidden; }
.automation-folder-toggle { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 5px; width: 100%; border: 0; padding: 9px; color: #65424b; background: #fffafb; text-align: left; font-size: 11px; }
.automation-folder-toggle:hover { background: #fceedf; }
.automation-folder-toggle > span { font-size: 15px; line-height: 1; }
.automation-folder-toggle small { color: #a7878e; font-size: 10px; }
.automation-folder-content { display: grid; gap: 9px; padding: 8px; }
.automation-folder.collapsed .automation-folder-content { display: none; }
.automation-subfolder { display: grid; gap: 5px; padding: 0 0 0 8px; border-left: 2px solid #edd6db; }
.automation-subfolder > small { color: #8b6972; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.automation-subfolder em { padding: 6px; color: #a7878e; font-size: 10px; font-style: normal; }
.automation-new-folder { border: 1px dashed #cfa3ac; border-radius: 8px; padding: 9px; color: #8e3344; background: #fffafb; font: inherit; font-size: 11px; font-weight: 800; text-align: left; }
.automation-new-folder:hover { border-color: #9d2235; background: #fceedf; }
.automation-end { min-width: 145px; padding: 12px; border: 1px dashed #c5a7ad; border-radius: 8px; color: #896b73; background: #fffafb; font-size: 11px; font-weight: 800; text-align: center; }
.automation-action-tree.empty-tree { display: grid; grid-template-columns: 1fr; justify-items: center; }

body.automation-editor-open .app-shell { display: block; min-height: 100vh; }
body.automation-editor-open .sidebar, body.automation-editor-open main > header, body.automation-editor-open .mock-notice { display: none; }
body.automation-editor-open main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.automation-editor-shell { min-height: 100vh; color: #31242a; background: #f8f9fb; }
.workflow-editor-topbar { position: sticky; z-index: 7; top: 0; display: flex; justify-content: space-between; align-items: center; min-height: 72px; margin: 0; padding: 12px 24px; border-bottom: 1px solid #e5e4e9; background: #fff; box-shadow: 0 1px 5px #24141a0a; }
.workflow-editor-topbar > div { display: flex; align-items: center; gap: 12px; }
.editor-back { width: 34px; height: 34px; border: 0; border-radius: 7px; color: #443138; background: transparent; font-size: 25px; line-height: 1; }
.editor-back:hover { background: #fceedf; }
.editor-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.editor-status .status { vertical-align: middle; }
.editor-top-actions { flex-wrap: wrap; }
.editor-top-actions .quiet, .editor-top-actions .primary { height: 36px; }
.workflow-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - 72px); min-height: 0; overflow: hidden; }
.workflow-editor-canvas { position: relative; grid-column: auto; display: grid; align-content: start; width: auto; max-width: none; margin: 0; overflow: auto; overscroll-behavior: contain; min-height: 0; height: 100%; padding: 72px 0 84px; background-color: #fbfcfd; background-image: radial-gradient(#d8dbe1 1px, transparent 1px); background-size: 28px 28px; cursor: grab; touch-action: none; }
.workflow-editor-sidebar { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.workflow-editor-canvas.is-panning { cursor: grabbing; user-select: none; }
.workflow-editor-canvas .automation-flow { min-width: 560px; min-height: 0; margin: 22px auto 0; transform-origin: top left; transition: transform 40ms linear; }
.workflow-editor-canvas .automation-graph { position: relative; display: block; justify-self: start; width: 1080px; min-width: 1080px; height: auto; min-height: 900px; margin: 22px 0 0; }
.workflow-editor-canvas .editor-canvas-end { display: none; }
.automation-graph-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.automation-graph-lines path { fill: none; stroke: #97b8a1; stroke-width: 2.25; stroke-linecap: round; }
.workflow-editor-canvas .automation-graph .automation-node,
.workflow-editor-canvas .automation-graph .automation-end { position: absolute; z-index: 1; box-sizing: border-box; margin: 0; }
.workflow-editor-canvas .automation-graph .automation-node { max-width: none; min-width: 0; }
.workflow-editor-canvas .automation-graph .automation-node.action { max-width: none; }
.workflow-editor-canvas .automation-graph .automation-node::before { display: none; }
.workflow-editor-canvas .automation-graph .automation-end { display: grid; place-items: center; min-width: 0; padding: 0; }
.workflow-editor-canvas .automation-graph .automation-node.dragging,
.workflow-editor-canvas .automation-graph .automation-end.dragging { z-index: 3; box-shadow: 0 14px 34px #44212d2b; opacity: .92; cursor: grabbing; }
.automation-graph-add { position: absolute; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #d9a1ac; border-radius: 50%; color: #8c273a; background: #fff; font-size: 0; line-height: 1; }
.automation-graph-add::before, .automation-graph-add::after { content: ""; position: absolute; width: 10px; height: 2px; border-radius: 2px; background: currentColor; }
.automation-graph-add::after { transform: rotate(90deg); }
.automation-graph-add:hover { border-color: #9d2235; color: #fff; background: #9d2235; }
.workflow-editor-canvas .automation-node { width: min(100%, 390px); padding: 16px; }
.workflow-editor-canvas .automation-node.action { width: min(100%, 215px); }
.workflow-editor-canvas .automation-node[data-action="select-automation-node"] { cursor: pointer; }
.workflow-editor-canvas .automation-node.selected { outline: 3px solid #c95165; outline-offset: 3px; }
.workflow-editor-canvas .automation-node[draggable="true"] { cursor: grab; }
.workflow-editor-canvas .automation-node.dragging { opacity: .45; }
.automation-insert-slot { position: relative; display: grid; justify-items: center; width: 100%; height: 42px; }
.automation-insert-slot .automation-connector { position: absolute; top: 0; height: 42px; }
.automation-plus { position: absolute; z-index: 2; top: 10px; width: 24px; height: 24px; padding: 0; border: 1px solid #d9a1ac; border-radius: 50%; color: #8c273a; background: #fff; font-size: 0; line-height: 1; display: grid; place-items: center; }
.automation-plus::before, .automation-plus::after { content: ""; position: absolute; width: 10px; height: 2px; border-radius: 2px; background: currentColor; }
.automation-plus::after { transform: rotate(90deg); }
.automation-plus:hover { border-color: #9d2235; color: #fff; background: #9d2235; }
.automation-action-branches { position: relative; display: grid; width: min(100%, 720px); }
.automation-action-branches.single { width: min(100%, 240px); }
.automation-action-branches.branched { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: start; gap: 18px; padding-top: 25px; }
.automation-action-branches.branched::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 25px; border-top: 2px solid #97b8a1; border-left: 2px solid #97b8a1; border-right: 2px solid #97b8a1; }
.automation-action-branch { position: relative; display: grid; justify-items: center; min-width: 0; }
.automation-action-branches.branched .automation-action-branch::before { content: ""; position: absolute; top: -25px; left: 50%; width: 2px; height: 25px; background: #97b8a1; }
.automation-branch-label { min-height: 19px; margin: -1px 0 7px; color: #6536c5; font-size: 10px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.automation-node.branch { border-color: #b8a0f5; background: #fcfaff; }
.automation-node.branch .automation-node-icon { color: #6230d8; background: #f2edff; }
.automation-node-drag { position: absolute; z-index: 4; top: -13px; left: 50%; display: grid; place-items: center; width: 34px; height: 21px; border: 1px solid #d8dce6; border-radius: 999px; color: #718095; background: #fff; box-shadow: 0 2px 6px #30263b16; font-size: 14px; font-weight: 900; letter-spacing: 1px; line-height: 1; transform: translateX(-50%); cursor: grab; user-select: none; touch-action: none; }
.automation-node-drag:active { cursor: grabbing; }
.automation-node-drag:hover { border-color: #c95165; color: #9d2235; }
.workflow-editor-canvas.dragging-actions .automation-insert-slot { height: 62px; }
.workflow-editor-canvas.dragging-actions .automation-insert-slot::after { content: "Drop here"; position: absolute; z-index: 3; top: 37px; padding: 3px 7px; border: 1px dashed #7ea4ff; border-radius: 5px; color: #3e68c5; background: #f8fbff; font-size: 9px; font-weight: 800; white-space: nowrap; }
.workflow-editor-canvas.dragging-actions .automation-insert-slot .automation-connector { height: 62px; }
.automation-insert-slot.drag-over .automation-plus { transform: scale(1.18); border-color: #2967f0; color: #fff; background: #2967f0; box-shadow: 0 0 0 4px #2967f022; }
.automation-node-caption { margin: 5px 0 -1px; color: #8b7279; font-size: 10px; font-weight: 700; }
.automation-node-caption.selected { color: #9d2235; }
.workflow-editor-canvas .automation-action-tree { width: min(100%, 720px); }
.workflow-editor-canvas .automation-action-tree.empty-tree { width: min(100%, 250px); }
.editor-canvas-label { position: absolute; top: 20px; left: 24px; border: 1px solid #e3e4e9; border-radius: 99px; padding: 7px 10px; color: #7d7479; background: #fff; font-size: 11px; font-weight: 700; }
.editor-canvas-zoom { position: absolute; z-index: 5; right: 20px; bottom: 20px; display: grid; grid-template-columns: 30px 48px 30px; align-items: center; min-height: 34px; border: 1px solid #e1e2e7; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 3px 12px #2d26300f; }
.editor-canvas-zoom button { height: 34px; border: 0; color: #64545b; background: transparent; font-size: 19px; line-height: 1; }
.editor-canvas-zoom button:hover { color: #8e2235; background: #fff4f5; }
.editor-canvas-zoom output { border-right: 1px solid #ececf0; border-left: 1px solid #ececf0; color: #675a60; font-size: 10px; font-weight: 900; line-height: 34px; text-align: center; }
.editor-canvas-zoom .canvas-fit { width: 48px; border-right: 1px solid #ececf0; border-left: 1px solid #ececf0; font-size: 10px; font-weight: 900; }
.editor-canvas-zoom .canvas-fit output { border: 0; color: inherit; font: inherit; line-height: 1; }
.editor-canvas-end { justify-self: center; margin-top: 12px; color: #82767c; font-size: 12px; font-weight: 800; }
.workflow-editor-sidebar { display: grid; align-content: start; gap: 0; border-left: 1px solid #e4e3e8; background: #fff; overflow-y: auto; }
.workflow-editor-sidebar section { display: grid; gap: 11px; padding: 18px; border-bottom: 1px solid #ecebef; }
.editor-panel-heading { display: grid; gap: 3px; }
.editor-panel-heading b { color: #3b2b30; font-size: 14px; }
.editor-panel-heading small { color: #82767c; font-size: 11px; line-height: 1.4; }
.editor-select-label { display: grid; gap: 6px; color: #6f5960; font-size: 11px; font-weight: 800; }
.editor-select-label select { width: 100%; border: 1px solid #dedde4; border-radius: 7px; padding: 9px; color: #4b383e; background: #fff; }
.editor-option-list { display: grid; gap: 7px; }
.editor-option { display: grid; gap: 2px; width: 100%; border: 1px solid #e4e2e8; border-radius: 8px; padding: 9px 10px; color: #49383e; background: #fff; text-align: left; font: inherit; }
.editor-option:hover { border-color: #c46a7a; background: #fff8f9; }
.editor-option b { font-size: 11px; }
.editor-option small { color: #887a80; font-size: 10px; line-height: 1.3; }
.editor-option.added { display: block; border-color: #a7cdb8; color: #276447; background: #f2faf5; font-size: 11px; font-weight: 800; }
.editor-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 9px; background: #f4f2f5; }
.editor-segmented button, .editor-branch-tabs button { border: 0; border-radius: 6px; padding: 8px; color: #6f6268; background: transparent; font: inherit; font-size: 10px; font-weight: 800; }
.editor-segmented button.selected, .editor-branch-tabs button.selected { color: #8e2235; background: #fff; box-shadow: 0 1px 4px #2e1c2216; }
.branch-controls { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 1px; color: #6e6066; font-size: 11px; font-weight: 800; }
.branch-controls > div { display: flex; align-items: center; gap: 7px; }
.branch-controls button { width: 25px; height: 25px; border: 1px solid #dfdbe1; border-radius: 6px; color: #663d48; background: #fff; font-size: 16px; line-height: 1; }
.branch-controls button:disabled { opacity: .42; cursor: not-allowed; }
.editor-branch-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.editor-branch-tabs button { border: 1px solid #e2dce6; padding: 6px 8px; }
.editor-tag-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.editor-tag { border: 1px solid #ead7db; border-radius: 99px; padding: 6px 8px; color: #785862; background: #fffafb; font: inherit; font-size: 10px; font-weight: 800; }
.editor-tag:hover, .editor-tag.selected { border-color: #c76476; color: #8f2134; background: #fceedf; }
.editor-inline-form { display: grid; grid-template-columns: 1fr; gap: 6px; padding-top: 3px; }
.editor-inline-form.compact { grid-template-columns: 1fr auto; }
.editor-inline-form input { width: 100%; border: 1px solid #dfdde4; border-radius: 7px; padding: 8px; color: #4a383e; font: inherit; font-size: 11px; }
.editor-inline-form .quiet { justify-self: start; height: 30px; padding: 0 9px; font-size: 10px; }
.editor-inline-form.compact .quiet { justify-self: stretch; }
.editor-run-history p { display: grid; gap: 2px; margin: 0; color: #796a70; font-size: 10px; line-height: 1.4; }
.editor-run-history p b { color: #573a43; font-size: 10px; }
.calendar-controls { justify-content: flex-start; margin: 0 0 18px; }
.contacts-panel { overflow: auto; border: 1px solid #ebe8ee; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #301b2108; }
.contacts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #eeebef; }
.contacts-toolbar input { width: min(280px, 100%); border: 1px solid #e2dfe5; border-radius: 7px; padding: 9px 11px; outline-color: #9d2235; }
.contacts-toolbar > div { display: flex; align-items: center; gap: 8px; }
.contacts-table { min-width: 850px; }
.contacts-table th { height: 50px; padding: 0 17px; color: #6f6a75; background: #fafafa; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.contacts-table td { height: 76px; padding: 13px 17px; color: #2f2a30; border-color: #f0edf1; font-size: 13px; }
.contacts-table td strong { font-size: 14px; font-weight: 700; }
.contacts-table td small { margin-top: 4px; color: #8d858a; }
.contacts-table .contact-select { width: 48px; padding-right: 0; text-align: center; }
.contacts-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: #9d2235; }
.contact-sort { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; }
.contact-sort span { color: #815b64; font-size: 16px; line-height: .7; }
.contact-config { width: 86px; text-align: right; }
.contact-config button, .contact-actions button { width: 31px; height: 31px; border: 0; border-radius: 7px; color: #493b41; background: transparent; font-size: 18px; line-height: 1; }
.contact-config button { border: 1px solid #ece9ee; background: #fff; }
.contact-row { transition: background 140ms ease; }
.contact-row:hover, .contact-row:focus-within { background: #fbfafb; }
.contact-actions { width: 86px; padding-left: 0 !important; }
.contact-actions > div { display: flex; justify-content: flex-end; gap: 4px; opacity: 0; transform: translateX(4px); transition: opacity 140ms ease, transform 140ms ease; }
.contact-row:hover .contact-actions > div, .contact-row:focus-within .contact-actions > div { opacity: 1; transform: translateX(0); }
.contact-actions button:hover { color: #fff; background: #9d2235; }
.app-shell { transition: grid-template-columns 220ms ease; }
.sidebar { transition: transform 220ms ease; }
.sidebar-toggle { position: absolute; z-index: 4; top: 27px; right: -15px; width: 30px; height: 30px; padding: 0; border: 1px solid #e9d3d8; border-radius: 50%; color: #7e2336; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px #31161f1c; transition: transform 220ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease; }
.sidebar-toggle:hover { border-color: #b94b60; color: #9d2235; background: #fff6f7; }
.sidebar-chevron { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; transition: transform 220ms ease; }
.sidebar-toggle.is-collapsed .sidebar-chevron { transform: rotate(180deg); }
body.sidebar-collapsed .app-shell { grid-template-columns: 0 minmax(0, 1fr); }
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .sidebar-toggle { transform: translateX(15px); }
.post-media-field { display: grid; gap: 9px; }
.media-dropzone { display: grid !important; min-height: 120px; place-items: center; padding: 17px; border: 1px dashed #c57a88; border-radius: 9px; color: #6f3742 !important; background: #fff7f8; text-align: center; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.media-dropzone:hover, .media-dropzone.is-dragging { border-color: #9d2235; background: #fdeff1; }
.media-dropzone input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.media-dropzone b, .media-dropzone small { display: block; }
.media-dropzone small { max-width: 330px; margin-top: 5px; color: var(--muted); font-weight: 400; line-height: 1.45; }
.media-file-list { display: grid; gap: 6px; }
.media-file { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #efd7dc; border-radius: 7px; background: #fff; }
.media-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.media-file small, .media-error { font-size: 11px; color: var(--muted); }

/* Content planner — calendar behavior mirrors the local parts of Meta Planner. */
.content-planner { display: grid; gap: 14px; }
.content-planner-toolbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; }
.content-calendar-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid #eadfe2; border-radius: 9px; background: #faf7f8; }
.content-calendar-switch button { min-height: 31px; border: 0; border-radius: 6px; padding: 0 12px; color: #75666c; background: transparent; font: inherit; font-size: 11px; font-weight: 800; }
.content-calendar-switch button.active { color: #fff; background: #9d2235; }
.content-calendar-nav { display: flex; align-items: center; gap: 5px; }
.content-calendar-nav .quiet { height: 34px; min-width: 34px; padding: 0 9px; }
.content-calendar-filters { display: flex; justify-content: end; gap: 8px; }
.content-calendar-filters label { display: flex; align-items: center; gap: 6px; color: #84757b; font-size: 10px; font-weight: 800; white-space: nowrap; }
.content-calendar-filters select { height: 34px; border: 1px solid #eadfe2; border-radius: 7px; padding: 0 25px 0 9px; color: #5a444c; background: #fff; font: inherit; font-size: 11px; font-weight: 700; }
.content-calendar-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.content-calendar-title > div { display: grid; gap: 3px; }
.content-calendar-title p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.content-calendar-title h3 { color: #382a30; font-size: 23px; letter-spacing: -.035em; }
.content-calendar { overflow: hidden; border: 1px solid #ebe1e4; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.content-calendar-head, .content-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(116px, 1fr)); }
.content-calendar-head { border-bottom: 1px solid #efe7e9; background: #fcfafb; }
.content-calendar-head b { padding: 10px 8px; color: #86777d; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.content-calendar-grid { min-width: 812px; }
.content-day { position: relative; min-height: 154px; padding: 8px; border-right: 1px solid #f0e8ea; border-bottom: 1px solid #f0e8ea; background: #fff; }
.content-day:nth-child(7n) { border-right: 0; }
.content-calendar-month .content-day:nth-last-child(-n + 7) { border-bottom: 0; }
.content-day.muted { background: #fcfbfc; }
.content-day > header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 7px; }
.content-day > header > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #6f6066; font-size: 11px; font-weight: 800; }
.content-day.current-day > header > span { color: #fff; background: #9d2235; }
.content-day > header > button { width: 23px; height: 23px; border: 0; border-radius: 6px; color: #8c3143; background: transparent; font-size: 17px; line-height: 1; opacity: 0; }
.content-day:hover > header > button, .content-day:focus-within > header > button { opacity: 1; background: #fbecee; }
.content-day-posts { display: grid; gap: 5px; }
.content-calendar-post { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; width: 100%; border: 1px solid #eed8dd; border-radius: 6px; padding: 5px 6px; color: #6b2635; background: #fff7f8; text-align: left; }
.content-calendar-post:hover { border-color: #ca7a89; background: #fff0f2; }
.content-calendar-post span { color: #9d2235; font-size: 10px; font-weight: 900; }
.content-calendar-post b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.content-calendar-post small { grid-column: 2; color: #95757e; font-size: 9px; }
.content-calendar-post.draft { color: #6b6875; background: #f6f4f6; }
.content-calendar-post.published { color: #28654e; background: #eef8f2; border-color: #d5eddf; }

/* Content management list. */
.content-library { display: grid; gap: 13px; }
.content-library-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; border-bottom: 1px solid #eadfe2; }
.content-library-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; border: 0; border-bottom: 3px solid transparent; padding: 0 12px; color: #796970; background: transparent; font: inherit; font-size: 11px; font-weight: 850; white-space: nowrap; }
.content-library-tabs button:hover { color: #8d2337; }
.content-library-tabs button.active { border-color: #9d2235; color: #8d2337; }
.content-library-tabs b { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 99px; color: #8a7780; background: #f2e9eb; font-size: 9px; }
.content-library-tabs button.active b { color: #fff; background: #9d2235; }
.content-library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.content-library-filters, .content-library-actions { display: flex; align-items: center; gap: 8px; }
.content-library-filters label { display: flex; align-items: center; gap: 6px; color: #7c6d73; font-size: 10px; font-weight: 850; white-space: nowrap; }
.content-library-filters select, .content-search { height: 36px; border: 1px solid #e6dadd; border-radius: 8px; padding: 0 9px; color: #514047; background: #fff; font: inherit; font-size: 11px; }
.content-search { display: flex !important; align-items: center; gap: 6px !important; min-width: 255px; color: #9b8c91 !important; }
.content-search input { width: 100%; border: 0; outline: 0; color: #4c3c42; background: transparent; font: inherit; font-size: 11px; }
.content-library-actions > span { color: #8b606a; font-size: 10px; font-weight: 850; }
.content-library-actions .quiet, .content-library-actions .primary { height: 36px; }
.content-table-wrap { overflow: auto; border: 1px solid #ebe2e4; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.content-table { min-width: 1570px; }
.content-table th { height: 45px; padding: 0 12px; color: #887981; background: #fcfafb; font-size: 9px; text-transform: none; white-space: nowrap; }
.content-table .content-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-weight: 850; text-align: left; white-space: nowrap; }
.content-table .content-sort:hover { color: #8d2337; }
.content-table .content-sort span { color: #9d2235; font-size: 11px; }
.content-table td { padding: 12px; color: #4e3d44; font-size: 11px; white-space: nowrap; }
.content-table td small { color: #8b7b81; font-size: 9px; }
.content-table .content-select { width: 38px; padding: 0 10px; text-align: center; }
.content-table .content-select input { width: 14px; height: 14px; accent-color: #9d2235; }
.content-list-row.selected { background: #fff8f9; }
.content-list-title { min-width: 300px; white-space: normal !important; }
.content-list-title > button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; width: 100%; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; }
.content-list-title > button:hover b { color: #9d2235; }
.content-list-thumb { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; color: #9d2235; background: #fae9ec; font-size: 12px; font-weight: 900; }
.content-list-title span:last-child { display: grid; min-width: 0; gap: 2px; }
.content-list-title b { overflow: hidden; color: #47353c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.content-list-title small { overflow: hidden; max-width: 310px; text-overflow: ellipsis; white-space: nowrap; }
.content-list-title em { color: #a1838c; font-size: 9px; font-style: normal; font-weight: 700; }
.content-list-empty { display: grid; gap: 4px; padding: 38px; color: #8c7e83; text-align: center; }
.content-list-empty b { color: #553f47; }
.content-column-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.content-column-picker label { display: flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid #eee2e5; border-radius: 7px; padding: 0 9px; color: #59474e; font-size: 11px; font-weight: 700; }
.content-column-picker input { width: 14px; height: 14px; accent-color: #9d2235; }
.dialog-secondary-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Local Meta post composer. */
dialog:has(.post-composer) { max-height: calc(100vh - 30px); overflow: auto; }
.post-composer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 16px; align-items: start; }
.post-composer-main, .post-composer-sidebar { display: grid; gap: 13px; }
.post-composer-section { display: grid; gap: 10px; min-width: 0; margin: 0; border: 1px solid #eadde0; border-radius: 10px; padding: 14px; background: #fff; }
.post-composer-section legend { padding: 0 5px; color: #5a3a43; font-size: 12px; font-weight: 900; }
.post-composer-section:has(select[name="callToAction"]) { display: none; }
.post-composer-section label { display: grid; gap: 6px; color: #59474e; font-size: 11px; font-weight: 800; }
.post-composer-section input, .post-composer-section select, .post-composer-section textarea { border: 1px solid #e4d8db; border-radius: 7px; padding: 9px 10px; color: #392c31; background: #fff; font: inherit; font-size: 12px; outline-color: #9d2235; }
.post-composer-section textarea { min-height: 82px; resize: vertical; }
.section-copy { margin: -2px 0 0; color: #87777d; font-size: 10px; font-weight: 500; line-height: 1.4; }
.post-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.post-destination { grid-template-columns: auto auto 1fr; align-items: center; gap: 7px !important; min-height: 43px; border: 1px solid #ead9dd; border-radius: 8px; padding: 0 10px; background: #fffafa; }
.post-destination input { width: 15px; height: 15px; padding: 0; accent-color: #9d2235; }
.post-destination span { color: #9d2235; font-size: 14px; }
.post-destination b { font-size: 11px; }
.post-switch { display: flex !important; align-items: center; justify-content: space-between; gap: 12px !important; border-top: 1px solid #f0e6e8; padding-top: 10px; }
.post-switch > span { display: grid; gap: 2px; }
.post-switch b { color: #4b383e; font-size: 11px; }
.post-switch small { color: #8c7e83; font-size: 10px; font-weight: 500; }
.post-switch input { width: 17px; height: 17px; padding: 0; accent-color: #9d2235; }
.post-custom-fields { display: grid; gap: 9px; padding: 10px; border-radius: 8px; background: #fff8f9; }
.post-custom-fields[hidden] { display: none; }
.post-channel-schedules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px; border-radius: 8px; background: #fff8f9; }
.post-channel-schedules[hidden] { display: none; }
.post-channel-schedules > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.post-channel-schedules > div > b { grid-column: 1 / -1; color: #6d404b; font-size: 10px; }
.post-inline-options { display: flex; flex-wrap: wrap; gap: 10px; }
.post-inline-options .check { display: inline-flex; align-items: center; gap: 5px; }
.post-inline-options input { width: 14px; height: 14px; padding: 0; accent-color: #9d2235; }
.post-connection-note { color: #7e676f; background: #fff8f9; }
.post-connection-note p { margin: 0; font-size: 10px; line-height: 1.5; }
.media-error { margin: 0; color: #a3233a; font-weight: 700; }

/* Local Meta campaign launch workflow. These are configuration drafts only. */
.dialog-form:has(.campaign-builder) { box-sizing: border-box; width: 100%; min-width: 0; max-width: none; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 28px 30px; }
dialog:has(.campaign-builder) { box-sizing: border-box; width: min(920px, calc(100vw - 40px)); max-width: none; height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
.campaign-builder { display: grid; gap: 19px; min-width: 0; padding-top: 2px; }
.campaign-builder-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; border: 1px solid #eee4e6; border-radius: 10px; background: #faf7f8; }
.campaign-builder-steps button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; border: 0; border-radius: 7px; padding: 0 8px; color: #7c6e73; background: transparent; font: inherit; font-size: 10px; font-weight: 850; white-space: nowrap; }
.campaign-builder-steps button:hover { color: #8e2135; background: #fff; }
.campaign-builder-steps button.active { color: #8d2034; background: #fff; box-shadow: 0 1px 5px #48202917; }
.campaign-builder-steps button.complete { color: #2d7651; }
.campaign-builder-steps i { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-style: normal; }
.campaign-builder-intro { display: grid; gap: 4px; }
.campaign-builder-intro p, .campaign-review p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.campaign-builder-intro h3 { margin: 0; color: #3b2b30; font-size: 19px; letter-spacing: -.025em; }
.campaign-builder-intro span { color: #817378; font-size: 12px; line-height: 1.45; }
.campaign-builder-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px 14px; }
.campaign-builder-grid label { display: grid; min-width: 0; gap: 6px; color: #66575d; font-size: 10px; font-weight: 850; }
.campaign-builder-grid input, .campaign-builder-grid select, .campaign-builder-grid textarea { min-width: 0; width: 100%; border: 1px solid #e2d9dc; border-radius: 8px; padding: 10px 11px; color: #44353a; background: #fff; font: inherit; font-size: 12px; outline-color: #9d2235; box-shadow: 0 1px 0 #fff inset; }
.campaign-builder-grid label:focus-within { color: #8e2035; }
.campaign-builder-grid label:focus-within input, .campaign-builder-grid label:focus-within select, .campaign-builder-grid label:focus-within textarea { border-color: #bd6879; box-shadow: 0 0 0 3px #f8e5e8; }
.campaign-builder-grid textarea { min-height: 95px; resize: vertical; line-height: 1.4; }
.campaign-builder-grid .campaign-full { grid-column: 1 / -1; }
.campaign-location-picker { display: grid; gap: 10px; padding: 13px; border: 1px solid #ead8dc; border-radius: 10px; background: #fffafb; }
.campaign-location-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campaign-location-head > div { display: grid; gap: 3px; }
.campaign-location-head b { color: #4b383e; font-size: 12px; }
.campaign-location-head small, .campaign-location-note, .campaign-location-empty { color: #897a80; font-size: 10px; line-height: 1.4; }
.campaign-location-head .quiet, .campaign-location-controls .quiet { min-height: 30px; padding: 0 9px; font-size: 10px; }
.campaign-location-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.campaign-location-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 8px; border: 1px solid #e6cbd1; border-radius: 999px; color: #7f2033; background: #fff; font-size: 10px; font-weight: 800; }
.campaign-location-chip.selected { border-color: #a92b43; background: #fff3f5; box-shadow: 0 0 0 2px #f8e3e7; }
.campaign-location-select { min-width: 0; max-width: 100%; overflow: hidden; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-weight: inherit; line-height: 1.2; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.campaign-location-select:hover { color: #a01f37; text-decoration: underline; }
.campaign-location-chip > button:last-child { width: 16px; height: 16px; flex: 0 0 auto; border: 0; border-radius: 50%; color: #7f2033; background: #f8e6e9; font: inherit; line-height: 1; cursor: pointer; }
.campaign-selected-location { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid #e7d1d6; border-radius: 9px; background: #fff; }
.campaign-selected-location > div, .campaign-selected-location label { display: grid; min-width: 0; gap: 3px; }
.campaign-selected-location b, .campaign-selected-location label { color: #6c3944; font-size: 10px; font-weight: 850; }
.campaign-selected-location small { overflow: hidden; color: #7f2033; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.campaign-selected-location select { min-width: 105px; border: 1px solid #dfd5d8; border-radius: 8px; padding: 8px 9px; color: #44353a; background: #fff; font: inherit; font-size: 12px; outline-color: #9d2235; }
.campaign-location-controls { display: grid; grid-template-columns: 100px 105px minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.campaign-location-controls label { display: grid; min-width: 0; gap: 5px; color: #66575d; font-size: 10px; font-weight: 850; }
.campaign-location-controls input, .campaign-location-controls select { width: 100%; min-width: 0; border: 1px solid #dfd5d8; border-radius: 8px; padding: 9px 10px; color: #44353a; background: #fff; font: inherit; font-size: 12px; outline-color: #9d2235; }
.campaign-location-suggestions { display: grid; overflow: hidden; max-height: 185px; border: 1px solid #e6dde0; border-radius: 8px; background: #fff; overflow-y: auto; }
.campaign-location-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid #f0e8ea; padding: 9px 11px; color: #43343a; background: #fff; text-align: left; font: inherit; font-size: 11px; cursor: pointer; }
.campaign-location-suggestion:last-child { border-bottom: 0; }
.campaign-location-suggestion:hover { color: #fff; background: #8f2035; }
.campaign-location-suggestion small { color: #9a8990; font-size: 10px; font-weight: 800; }
.campaign-location-suggestion:hover small { color: #ffe7ec; }
.campaign-location-empty { margin: 0; padding: 10px 11px; }
.campaign-map { width: min(100%, 480px); aspect-ratio: 1; min-height: 320px; justify-self: center; overflow: hidden; border: 1px solid #d7e0df; border-radius: 10px; background: #dfe9ed; cursor: crosshair; }
.campaign-map.is-placing-pin { outline: 3px solid #f1c8d0; outline-offset: 2px; cursor: crosshair; }
.campaign-map.is-placing-pin .leaflet-container, .campaign-map.is-placing-pin .leaflet-grab { cursor: crosshair; }
.campaign-map .leaflet-control-zoom a { color: #6e2333; font-weight: 850; }
.campaign-map .leaflet-control-attribution { max-width: 185px; color: #6c6c72; font-size: 8px; }
.campaign-map-unavailable { margin: 0; padding: 20px; color: #7b6870; font-size: 11px; }
.campaign-drop-pin { justify-self: center; min-height: 34px; border: 1px solid #d5dadd; border-radius: 7px; padding: 0 12px; color: #3d474b; background: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: 0 1px 4px #3d4d5430; }
.campaign-drop-pin:focus-visible { outline: 3px solid #f1c8d0; outline-offset: 2px; }
.campaign-location-note { margin: 0; }
.campaign-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.campaign-toggle { display: flex; align-items: start; gap: 9px; padding: 11px; border: 1px solid #ebdfe2; border-radius: 9px; background: #fffafa; cursor: pointer; }
.campaign-toggle input[type="checkbox"] { box-sizing: border-box; display: block; flex: 0 0 16px; width: 16px; min-width: 16px; max-width: 16px; height: 16px; min-height: 16px; max-height: 16px; margin: 1px 0 0; padding: 0; border: 1px solid #9d8d93; border-radius: 3px; appearance: auto; -webkit-appearance: checkbox; accent-color: #9d2235; background: #fff; box-shadow: none; }
.campaign-toggle input[type="checkbox"]:focus-visible { outline: 3px solid #f1c8d0; outline-offset: 2px; }
.campaign-toggle span { display: grid; gap: 3px; }
.campaign-toggle b { color: #4b383e; font-size: 11px; }
.campaign-toggle small { color: #8b7d83; font-size: 10px; line-height: 1.35; }
.campaign-advanced { overflow: hidden; border: 1px solid #eadde0; border-radius: 10px; background: #fff; }
.campaign-advanced + .campaign-advanced { margin-top: 10px; }
.campaign-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; color: #49373d; cursor: pointer; list-style: none; }
.campaign-advanced summary::-webkit-details-marker { display: none; }
.campaign-advanced summary span { display: grid; gap: 3px; }
.campaign-advanced summary b { font-size: 12px; }
.campaign-advanced summary small { color: #88797f; font-size: 10px; line-height: 1.35; }
.campaign-advanced summary i { color: #8e2035; font-style: normal; font-weight: 900; transition: transform .16s ease; }
.campaign-advanced[open] summary { border-bottom: 1px solid #eee3e5; background: #fffafb; }
.campaign-advanced[open] summary i { transform: rotate(180deg); }
.campaign-advanced-body { display: grid; gap: 12px; padding: 13px; }
.campaign-review { display: grid; gap: 10px; }
.campaign-review article { display: grid; gap: 5px; padding: 13px; border: 1px solid #ede2e4; border-radius: 9px; background: #fff; }
.campaign-review b { color: #403037; font-size: 13px; }
.campaign-review span { color: #84757b; font-size: 11px; line-height: 1.4; }
.campaign-review .campaign-api-readiness { border-color: #e7c8ce; background: #fff8f9; }
.campaign-api-readiness p { color: #8e2035; }
@media (max-width: 650px) { dialog:has(.campaign-builder) { width: calc(100vw - 22px); height: calc(100dvh - 22px); max-height: calc(100dvh - 22px); } .dialog-form:has(.campaign-builder) { padding: 23px 20px; } .campaign-builder-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campaign-builder-grid, .campaign-toggle-grid, .campaign-location-controls { grid-template-columns: 1fr; } .campaign-builder-grid .campaign-full { grid-column: auto; } .campaign-location-head, .campaign-selected-location { align-items: start; flex-direction: column; } }

/* Advertising overview — source-inspired layout in the Razorback-red system. */
.ad-workspace { display: grid; gap: 20px; padding-bottom: 8px; }
.ad-workspace > * { min-width: 0; }
.ad-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.ad-overline { margin: 0 0 7px; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.ad-header h2 { margin: 0; color: #30242a; font-size: 29px; letter-spacing: -.035em; }
.ad-header-copy { margin: 7px 0 0; color: #82767c; font-size: 13px; }
.ad-controls { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.ad-control { display: inline-flex; align-items: center; min-height: 35px; border: 1px solid #e6d9dc; border-radius: 8px; padding: 0 11px; color: #5d474e; background: #fff; font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ad-control.live { border-color: #e8c3ca; color: #8c2033; background: #fff7f8; }
.ad-control b { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #9d2235; box-shadow: 0 0 0 3px #f8e4e7; }
.ad-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px; border: 1px solid #eee4e6; border-radius: 10px; background: #faf7f8; }
.ad-tabs button { min-height: 34px; border: 0; border-radius: 7px; padding: 0 14px; color: #796a70; background: transparent; font: inherit; font-size: 11px; font-weight: 900; }
.ad-tabs button:hover { color: #842237; background: #fff; }
.ad-tabs button.active { color: #8e2034; background: #fff; box-shadow: 0 1px 5px #48202917; }
.ad-campaign-link { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 0; padding: 0; color: #752238; background: transparent; font: inherit; font-size: inherit; font-weight: 850; line-height: 1.25; text-align: left; }
.ad-campaign-link:hover { color: #a52842; text-decoration: underline; text-underline-offset: 3px; }
.ad-campaign-link span { flex: 0 0 auto; font-size: 12px; }
.ad-overview-panel { display: grid; gap: 16px; }
.ad-insights { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr); gap: 16px; }
.ad-trend-card, .ad-ranking-card { min-height: 365px; padding: 20px; border: 1px solid #ece5e7; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.ad-card-heading h3 { margin: 0; color: #3a2b30; font-size: 14px; letter-spacing: -.01em; }
.ad-card-heading p { margin: 5px 0 0; color: #8b7f84; font-size: 11px; }
.ad-period { margin: 0; color: #7d6e74; font-size: 10px; font-weight: 800; white-space: nowrap; }
.ad-trend-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.ad-trend-summary strong { color: #2e2428; font-size: 29px; letter-spacing: -.04em; }
.ad-trend-summary span { color: #16845b; font-size: 11px; font-weight: 900; }
.ad-chart { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.ad-chart-labels { display: flex; flex-direction: column; justify-content: space-between; height: 190px; padding: 3px 0 7px; color: #9a8c91; font-size: 10px; text-align: right; }
.ad-chart svg { width: 100%; height: 190px; overflow: visible; }
.ad-chart svg line { stroke: #f0e5e7; stroke-dasharray: 3 4; }
.ad-chart svg polyline { fill: none; stroke: #9d2235; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.ad-chart svg circle { fill: #fff; stroke: #9d2235; stroke-width: 3; }
.ad-chart-dates { grid-column: 2; display: flex; justify-content: space-between; margin-top: -1px; color: #9a8c91; font-size: 10px; }
.ad-ranking-list { display: grid; gap: 0; margin-top: 14px; }
.ad-ranking-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; min-height: 67px; border-bottom: 1px solid #f0edef; }
.ad-ranking-row:last-child { border-bottom: 0; }
.ad-rank { color: #a4999e; font-size: 11px; font-weight: 900; }
.ad-ranking-copy { display: grid; gap: 4px; min-width: 0; }
.ad-ranking-copy b, .ad-ranking-copy strong { overflow: hidden; color: #413137; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ad-ranking-copy small { color: #94868c; font-size: 10px; }
.ad-ranking-result { display: grid; justify-items: end; gap: 4px; }
.ad-ranking-result strong { color: #3f3035; font-size: 14px; }
.ad-ranking-result small { color: #94868c; font-size: 10px; }
.ad-status { display: inline-flex; align-items: center; gap: 5px; color: #23714e; font-size: 10px; font-weight: 900; }
.ad-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.ad-status.learning { color: #a76b15; }
.ad-status.paused { color: #8e8589; }
.ad-kpi-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 16px; }
.ad-kpi-group { display: grid; gap: 12px; }
.ad-kpi-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ad-kpi-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ad-kpi { min-height: 115px; padding: 17px; border: 1px solid #ece5e7; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-kpi-label { margin: 0; color: #86787e; font-size: 10px; font-weight: 800; }
.ad-kpi strong { display: block; margin-top: 13px; color: #36282d; font-size: 22px; letter-spacing: -.035em; }
.ad-kpi small { display: block; margin-top: 7px; color: #23805a; font-size: 10px; font-weight: 900; }
.ad-kpi small.down { color: #23805a; }
.ad-kpi small.neutral { color: #8b7d83; }
.ad-kpi-note { margin: 4px 0 0; color: #918389; font-size: 10px; line-height: 1.35; }
.ad-campaign-section { min-width: 0; padding: 20px; border: 1px solid #ece5e7; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-campaigns-panel, .ad-reporting-panel { display: grid; gap: 16px; }
.ad-campaigns-panel > .ad-section-heading, .ad-reporting-panel > .ad-section-heading { margin-bottom: 0; }
.ad-section-heading > div:last-child { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.ad-detail-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px 18px; padding: 20px; border: 1px solid #e6cdd2; border-radius: 13px; background: linear-gradient(120deg, #fff8f9, #fff); box-shadow: 0 1px 2px #35151d08; }
.ad-detail-panel > div:first-child { display: grid; gap: 5px; }
.ad-detail-panel p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.ad-detail-panel h3 { margin: 0; color: #36272d; font-size: 20px; letter-spacing: -.03em; }
.ad-detail-stats { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ad-detail-stats span { display: grid; gap: 5px; min-width: 0; padding: 10px; border: 1px solid #f0e0e3; border-radius: 8px; background: #fff; }
.ad-detail-stats small { color: #918388; font-size: 9px; font-weight: 800; }
.ad-detail-stats b { overflow: hidden; color: #46353b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ad-detail-panel .text-button { justify-self: start; }
.ad-campaign-analytics { display: grid; gap: 16px; }
.ad-campaign-analytics-heading > div:last-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
.ad-campaign-analytics-heading .primary { min-height: 34px; }
.ad-campaign-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ad-campaign-metric { display: grid; gap: 5px; min-width: 0; padding: 15px; border: 1px solid #ece5e7; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-campaign-metric p { margin: 0; color: #8a7d82; font-size: 10px; font-weight: 850; }
.ad-campaign-metric strong { overflow: hidden; color: #3d2c33; font-size: 20px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.ad-campaign-metric small { overflow: hidden; color: #97898e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ad-campaign-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr); gap: 16px; }
.ad-campaign-trend-card, .ad-campaign-delivery-card { display: grid; gap: 10px; padding: 20px; border: 1px solid #ece5e7; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-campaign-trend-card > div:first-child, .ad-campaign-delivery-card { align-content: start; }
.ad-campaign-trend-card p, .ad-campaign-delivery-card > p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.ad-campaign-trend-card h3, .ad-campaign-delivery-card h3 { margin: 0; color: #3d2d33; font-size: 15px; }
.ad-campaign-trend-card span { color: #8a7b81; font-size: 11px; }
.ad-campaign-trend-card svg { width: 100%; height: 190px; margin-top: 3px; overflow: visible; }
.ad-campaign-trend-card svg line { stroke: #f0e5e7; stroke-dasharray: 3 4; }
.ad-campaign-trend-card svg polyline { fill: none; stroke: #9d2235; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.ad-campaign-trend-card svg circle { fill: #fff; stroke: #9d2235; stroke-width: 3; }
.ad-campaign-trend-dates { display: flex; justify-content: space-between; color: #9a8c91; font-size: 10px; }
.ad-campaign-delivery-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 7px 0 0; }
.ad-campaign-delivery-card dl div, .ad-campaign-setup-grid > div { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid #f0e2e5; border-radius: 8px; background: #fffafb; }
.ad-campaign-delivery-card dt, .ad-campaign-setup-grid small { color: #928388; font-size: 9px; font-weight: 850; }
.ad-campaign-delivery-card dd, .ad-campaign-setup-grid b { overflow: hidden; margin: 0; color: #49383e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ad-campaign-setup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1120px) { .ad-campaign-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ad-campaign-analytics-grid { grid-template-columns: 1fr; } .ad-campaign-setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ad-campaign-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-campaign-analytics-heading > div:last-child { justify-content: start; } }
.ad-campaign-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ad-campaign-card { display: grid; align-content: start; gap: 12px; min-height: 205px; padding: 18px; border: 1px solid #ece5e7; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-campaign-card.selected { border-color: #bf6b7b; box-shadow: 0 0 0 3px #f9e8eb; }
.ad-campaign-card-top { display: flex; align-items: center; justify-content: space-between; }
.ad-card-menu { width: 28px; height: 28px; border: 1px solid #ebe3e5; border-radius: 7px; padding: 0; color: #705d64; background: #fff; font-weight: 900; line-height: 1; }
.ad-card-menu:hover { color: #9d2235; border-color: #dcaab4; background: #fff8f9; }
.ad-campaign-card > .ad-campaign-link { color: #3d2d33; font-size: 15px; letter-spacing: -.015em; }
.ad-campaign-card > p { margin: -5px 0 0; color: #8a7b81; font-size: 11px; }
.ad-mini-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 2px; }
.ad-mini-metrics span { display: grid; gap: 4px; min-width: 0; }
.ad-mini-metrics small { color: #97898e; font-size: 9px; font-weight: 800; }
.ad-mini-metrics b { overflow: hidden; color: #49383e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ad-view-campaign { justify-self: start; min-height: 30px; padding: 0; color: #8d2034; background: transparent; font-size: 10px; }
.ad-view-campaign:hover { color: #9d2235; text-decoration: underline; text-underline-offset: 3px; }
.ad-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.ad-section-heading h3 { margin: 0; color: #3a2b30; font-size: 15px; letter-spacing: -.015em; }
.ad-section-heading p { margin: 5px 0 0; color: #918389; font-size: 11px; }
.ad-section-heading .quiet { min-height: 31px; padding: 0 10px; font-size: 10px; white-space: nowrap; }
.ad-table-wrap { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border: 1px solid #eee9eb; border-radius: 9px; }
.ad-table { width: 100%; min-width: 1030px; border-collapse: collapse; }
.ad-table th { height: 42px; padding: 0 13px; color: #82757a; border-bottom: 1px solid #eee9eb; background: #fcfbfb; font-size: 10px; font-weight: 900; letter-spacing: .015em; text-align: left; white-space: nowrap; }
.ad-table td { height: 66px; padding: 11px 13px; color: #4b3c42; border-bottom: 1px solid #f0edef; font-size: 11px; }
.ad-table tbody tr:last-child td { border-bottom: 0; }
.ad-table th:nth-child(n+3), .ad-table td:nth-child(n+3) { text-align: right; }
.ad-entity { display: grid; gap: 4px; min-width: 145px; }
.ad-entity b, .ad-entity strong { color: #3d2d33; font-size: 11px; }
.ad-entity small { color: #998c91; font-size: 10px; }
.ad-entity.ad-set { border-left: 2px solid #eed5d9; padding-left: 10px; }
.ad-table td > strong { color: #49383e; font-size: 11px; }
.ad-table td > small { color: #8c7e84; font-size: 10px; }
.ad-table .ad-status { justify-content: end; }
.ad-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: #95878c; font-size: 10px; }
.ad-table-footer span { color: #7d6f74; font-weight: 800; }
.ad-report-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 14px; }
.ad-report-card { display: grid; gap: 12px; min-height: 225px; padding: 19px; border: 1px solid #ece5e7; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #35151d08; }
.ad-report-card > p { margin: 0; color: #9d2235; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.ad-report-card h3 { margin: -7px 0 0; color: #3c2d33; font-size: 14px; }
.ad-bar-list { display: grid; gap: 10px; }
.ad-bar-list > div { display: grid; grid-template-columns: minmax(115px, .75fr) minmax(100px, 1fr) 24px; align-items: center; gap: 9px; }
.ad-bar-list i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #f1e4e6; }
.ad-bar-list i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9d2235, #c75f73); }
.ad-bar-list strong { color: #543e46; font-size: 11px; text-align: right; }
.ad-report-list { display: grid; gap: 0; }
.ad-report-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; border-bottom: 1px solid #f1edef; }
.ad-report-list > div:last-child { border-bottom: 0; }
.ad-report-list span { color: #513e45; font-size: 12px; font-weight: 900; }
.ad-report-grid .ad-bar-list > div { grid-template-columns: minmax(96px, .7fr) minmax(56px, 1fr) 22px; gap: 7px; }
.ad-report-grid .ad-report-list > div { gap: 7px; }
.ad-report-grid .ad-campaign-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-report-table { min-width: 1750px; table-layout: auto; }
.ad-report-table.is-compact { min-width: 0; table-layout: fixed; }
.ad-report-table.is-compact th, .ad-report-table.is-compact td { height: 48px; overflow: hidden; padding: 8px 7px; text-overflow: ellipsis; white-space: nowrap; }
.ad-report-table.is-compact th:first-child, .ad-report-table.is-compact td:first-child { width: 24%; text-align: left; }
.ad-report-table.is-compact th:nth-child(2), .ad-report-table.is-compact td:nth-child(2) { width: 11%; text-align: left; }
.ad-report-table.is-compact .ad-campaign-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-column-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.report-column-picker label { display: flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid #eee2e5; border-radius: 7px; padding: 0 9px; color: #59474e; font-size: 11px; font-weight: 700; }
.report-column-picker input { width: 14px; height: 14px; accent-color: #9d2235; }
.ad-attribution-card { grid-column: 1 / -1; min-height: 0; grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr) auto; align-items: center; }
.ad-attribution-card > p, .ad-attribution-card h3 { grid-column: 1; }
.ad-attribution-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ad-attribution-card dl > div { display: grid; gap: 5px; padding-left: 11px; border-left: 2px solid #eed5d9; }
.ad-attribution-card dt { color: #95868c; font-size: 9px; font-weight: 800; }
.ad-attribution-card dd { margin: 0; color: #513e45; font-size: 11px; font-weight: 800; }
.ad-attribution-card .quiet { min-height: 31px; font-size: 10px; white-space: nowrap; }
.ad-footer { margin: 0; color: #9a8c91; font-size: 10px; text-align: center; }
@media (max-width: 1120px) { .ad-insights, .finance-insights, .finance-kpi-layout, .ad-kpi-grid { grid-template-columns: 1fr; } .ad-trend-card, .ad-ranking-card, .finance-trend-card, .finance-receivables-card { min-height: 0; } .ad-detail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ad-attribution-card { grid-template-columns: 1fr; } .ad-attribution-card > p, .ad-attribution-card h3, .ad-attribution-card dl, .ad-attribution-card .quiet { grid-column: auto; } }
@media (max-width: 700px) { .ad-header, .finance-header, .integration-section-heading { align-items: start; flex-direction: column; } .ad-controls { justify-content: start; } .ad-tabs, .finance-tabs { width: 100%; } .ad-tabs button, .finance-tabs button { flex: 1; padding: 0 8px; } .ad-campaign-card-grid, .ad-kpi-three, .ad-kpi-two, .finance-kpi-three, .finance-kpi-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-trend-card, .ad-ranking-card, .ad-campaign-section, .finance-trend-card, .finance-receivables-card { padding: 15px; } .ad-section-heading { align-items: start; flex-direction: column; } .ad-section-heading > div:last-child { justify-content: start; } .ad-chart, .finance-chart { grid-template-columns: 26px minmax(0, 1fr); } .ad-detail-panel { grid-template-columns: 1fr; } .ad-detail-stats, .ad-attribution-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-detail-panel .quiet { justify-self: start; } .ad-report-grid { grid-template-columns: 1fr; } .ad-attribution-card { grid-column: auto; } .finance-table-heading { align-items: start; flex-direction: column; } }
@media (max-width: 1180px) { .automation-layout { grid-template-columns: 230px minmax(380px, 1fr); } .automation-inspector { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; } .automation-inspector > div { grid-column: 1 / -1; } }
@media (max-width: 780px) { .automation-layout { grid-template-columns: 1fr; } .automation-inspector { grid-column: auto; grid-template-columns: 1fr; } .automation-action-tree { grid-template-columns: 1fr; width: min(100%, 280px); } .automation-action-tree::before, .automation-action-tree .automation-node::before { display: none; } .automation-test-strip, .automation-builder-head { align-items: start; flex-direction: column; } .automation-build-controls { justify-content: start; } }
@media (max-width: 700px) { .project-hero { align-items: start; flex-direction: column; min-height: 235px; } .project-actions > div { margin-right: 0; } .project-stats { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sidebar-toggle { display: none !important; } }