/* Shared workspace layout. Component editor canvases keep their own sizing/styles. */
:root {
  --workspace-gap: 16px;
  --workspace-radius: 14px;
  --workspace-surface: #15181e;
  --workspace-border: #ffffff12;
}

body { font-family: 'Segoe UI', Arial, sans-serif; background: #0c0f14; }
.shell { grid-template-columns: 244px minmax(0, 1fr); }
.shell > main { padding: 22px 28px 32px; min-width: 0; width: 100%; max-width: none; }
.shell > aside.sidebar { padding: 12px 10px; background: #101319; gap: 6px; scrollbar-width: thin; scrollbar-color: #343a47 transparent; }
.sidebar-head { min-height: 74px; margin-bottom: 12px; padding: 12px 10px; border-radius: 14px; background: #191d26; }
.sidebar-head .brand-title { font-size: 16px; }
.sidebar-head .brand-sub { font-size: 10px; color: #a5afbf; }
.sidebar-head .brand-mark { width: 38px; min-width: 38px; height: 38px; border-radius: 11px; box-shadow: none; }
nav.side-nav { gap: 3px; }
nav .side-link { min-height: 45px; border: 1px solid transparent; border-radius: 9px; padding: 7px 9px; background: transparent; gap: 9px; }
nav .side-link:hover { background: #ffffff05; box-shadow: none; }
body nav .side-link.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent), transparent 65%); }
nav .side-copy strong { font-size: 12px; font-weight: 600; }
nav .side-copy small { font-size: 10px; line-height: 1.3; }
nav .side-icon { width: 27px; height: 27px; flex-basis: 27px; border: 0; border-radius: 7px; background: #ffffff04; }
nav .side-icon svg { width: 16px; height: 16px; }
.sidebar-foot { border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; background: none; padding: 12px 7px 2px; margin-top: auto; }
#workspace > .shell-topbar {
  min-height: 72px; padding: 0 0 18px; margin-bottom: 20px; align-items: center;
  border: 0; border-bottom: 1px solid var(--workspace-border); border-radius: 0;
  background: none; box-shadow: none; animation: none; transform: none;
}
.shell-topbar h2 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin: 0; }
.shell-topbar .page-lead { font-size: 12px; margin-top: 5px; color: #9da7b8; }
.shell-topbar-right { align-items: center; }
.shell-topbar .top-pill { min-height: 29px; background: #171b23; border-radius: 7px; font-weight: 500; }
#content { min-width: 0; }
#content > .panel, #content > .table-wrap, #content > .workspace-disclosure { width: 100%; max-width: none; }
#content .panel { background: var(--workspace-surface); border-color: var(--workspace-border); border-radius: var(--workspace-radius); box-shadow: none; }
#content .panel h3 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }
#content .panel p { font-size: 12px; line-height: 1.6; }
#content .panel > :last-child { margin-bottom: 0; }
#content .panel form { width: 100%; max-width: none; }
#content :where(input, select) { font-size: 13px; }
#content :where(label) { font-size: 12px; color: #c3cbd8; }
#content :where(button) { border-radius: 8px; }
#content :where(button.secondary) { background: #222731; border-color: #ffffff12; }
#content :where(button.secondary:hover:not(:disabled)) { background: #2b3240; border-color: #ffffff26; }
#content :where(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#content :where(button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#content :where(button:disabled) { cursor: not-allowed; opacity: .45; }
.operations-page { gap: var(--workspace-gap); }
.operations-page > .panel, .operations-page > .operations-records { width: 100%; max-width: none; }
.operations-page .operations-intro {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px !important;
  background: #12161d !important; border-radius: 12px;
}
.operations-intro > div { min-width: 0; }
.operations-intro h3 { margin: 0 0 5px !important; }
.operations-intro p { max-width: 110ch !important; margin: 4px 0 !important; line-height: 1.55 !important; }
.operations-intro > button { margin-left: auto; }
.operations-stats { gap: 12px; }
.operations-stats > .panel { padding: 13px 16px !important; min-height: 82px; gap: 4px; border-radius: 12px !important; }
.operations-stats strong { font-size: 26px; line-height: 1.25; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.operations-stats span { font-size: 11px; color: #a7b2c3; }
.operations-stats > .panel:nth-child(2) strong { color: #48d2a6; }
.operations-stats > .panel:nth-child(3) strong { color: #67c6ef; }
.operations-stats > .panel:nth-child(4) strong { color: #f1ab77; }
.operations-records { border-radius: var(--workspace-radius); }
.operations-records .operations-filters { width: 100%; max-width: none; padding: 14px 16px; gap: 10px; background: #191e27; }
.operations-filters label:first-child { flex: 1 1 280px; }
.operations-filters label { flex: 0 1 210px; }
.operations-filters input, .operations-filters select { min-height: 38px !important; padding: 8px 11px; }
.operations-filters button { min-height: 38px; }
.operations-empty { min-height: 210px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 28px 20px; }
.operations-empty h3 { margin: 0 !important; font-size: 14px !important; }
.operations-empty p { margin: 0; max-width: 66ch; color: #9ca8bb; }
.workspace-empty-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff12; border-radius: 12px; color: #8999b4; background: #1b212c; margin-bottom: 3px; }
.workspace-empty-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.operations-pagination { padding: 11px 16px; min-height: 58px; }
.operations-pagination > span { font-size: 11px; }
.operations-pagination button { min-height: 32px; padding: 6px 11px; font-size: 11px; }
.table-wrap { scrollbar-width: thin; scrollbar-color: #394254 #141820; }
#content .table-wrap { border-color: var(--workspace-border); border-radius: 12px; }
#content table { background: var(--workspace-surface); }
#content th { padding: 11px 14px; font-size: 10px; color: #9aa8bd; background: #1a1f29; letter-spacing: .5px; }
#content td { padding: 12px 14px; font-size: 12px; border-color: #ffffff09; }
#content tbody tr:hover { background: #ffffff03; }
.record-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 8px; border-radius: 6px; font-size: 11px; background: #7085b518; color: #b6c9ed; }
.record-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.record-status[data-state=simulated] { background: #22bd8a16; color: #67dbb5; }
.record-status[data-state=failed], .record-status[data-state=skipped_suppressed] { background: #e9766616; color: #efac9c; }
.record-status[data-state=cancelled] { background: #ffffff08; color: #a3adbe; }
#workspace[data-workspace-page=recipients] .operations-records table { min-width: 880px; }
#workspace[data-workspace-page=recipients] .operations-records td:nth-child(1) { max-width: 270px; white-space: normal; overflow-wrap: anywhere; }
#workspace[data-workspace-page=recipients] .operations-records td:nth-child(2) { max-width: 390px; white-space: normal; overflow-wrap: anywhere; }
#content .operations-records .table-wrap, #content .zb-campaign-list .table-wrap { border-radius: 0; margin: 0; }
.cards { gap: 12px; margin-bottom: 16px; }
.metric { min-height: 105px; padding: 15px 17px; border-radius: 12px; background: var(--workspace-surface); }
.metric strong { font-size: 27px; margin-top: 5px; }
.metric small { font-size: 11px; }
.zb-stats { gap: 12px; margin-bottom: 16px; }
.zb-stat { min-height: 106px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--tone), #15181e 94%), #15181e); }
.zb-stat::after { display: none; }
.zb-stat-top { align-items: center; }
.zb-stat-top > strong { font-size: 26px; }
.zb-stat-icon { width: 28px; height: 28px; border-radius: 8px; }
.zb-stat-icon svg { width: 15px; height: 15px; }
.zb-stat-label { border: 0; background: none; padding: 4px 0 0; border-radius: 0; font-size: 10px; letter-spacing: .45px; }
.zb-stat p { margin-top: 7px; font-size: 11px; color: #99a6ba; }
.zb-campaign-list { border-radius: var(--workspace-radius); background: var(--workspace-surface); }
.zb-list-toolbar { padding: 11px 14px; }
.zb-search { padding: 11px 14px; background: #171c25; }
.zb-search input { max-width: 540px; }
.zb-campaign-name { color: #d6deee; font-weight: 650; }
.zb-pagination { padding: 11px 14px; }
details.workspace-disclosure { width: 100%; max-width: none; margin-bottom: 16px; }
.workspace-disclosure > summary { min-height: 50px; padding: 13px 16px; }
.workspace-disclosure > summary strong { font-size: 13px; }
.workspace-disclosure > summary > span { font-size: 11px; }
.disclosure-body { padding: 18px; }
.workspace-disclosure form { max-width: none; }
.zb-record-toolbar { width: 100%; padding: 12px 16px; background: #191e27; border-radius: 12px 12px 0 0; }
.zb-record-toolbar label:first-child { flex: 1; min-width: 0; }
.zb-record-toolbar input { width: 100%; min-width: 0; }
#content .zb-record-toolbar + .table-wrap { border-radius: 0 0 12px 12px; }
.zb-template-grid { padding: 16px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
.zb-template-card { border-radius: 12px; background: #1a202a; }
.zb-library-heading { padding: 13px 16px; background: #191e27; }
/* Keep aligned editor/preview cards full width; do not touch HTML document rendering. */
.template-layout.template-studio { gap: 16px; }
.template-layout.template-studio > .panel { border-radius: 14px; }
.campaign-workspace .panel { border-radius: 14px; }
.operations-page > .grid > .panel { padding: 18px; }
.operations-page > .grid > .panel > p { margin: 6px 0 16px; }
@media (min-width: 1101px) {
  #workspace[data-workspace-page=account] #content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #workspace[data-workspace-page=account] #content > .panel { margin: 0; }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: 218px minmax(0, 1fr); }
  .shell > main { padding: 20px; }
  .operations-intro { flex-wrap: wrap; }
  .operations-intro > button { margin-left: 0; }
  .zb-stats { gap: 10px; }
  .zb-stat { padding: 12px; }
}
@media (max-width: 800px) {
  .operations-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-filters label:first-child { flex-basis: 100%; }
  .operations-filters label { flex-grow: 1; }
}
@media (max-width: 700px) {
  .shell { display: block; }
  .shell > main { padding: 16px 12px 24px; }
  .shell > aside.sidebar { padding: 10px 12px; }
  .sidebar-head { min-height: 44px; padding: 0; margin: 0; border: 0; background: none; }
  .sidebar-foot { margin-top: 10px; }
  #workspace > .shell-topbar { min-height: 65px; padding: 0 0 14px; margin-bottom: 16px; align-items: center; }
  .shell-topbar h2 { font-size: 21px; }
  .shell-topbar .page-lead { font-size: 11px; }
  #content .panel { padding: 16px; }
  .operations-page { gap: 12px; }
  .operations-page .operations-intro { padding: 14px !important; align-items: flex-start; }
  .operations-intro > button { min-height: 40px; }
  .operations-records { padding: 0 !important; }
  .operations-records .operations-filters { padding: 12px; }
  .operations-empty { min-height: 180px; padding: 24px 16px; }
  .operations-pagination { gap: 7px; flex-wrap: wrap; padding: 12px; }
  .operations-pagination > span { flex-basis: 100%; }
  .operations-pagination button { min-height: 38px; }
  .operations-stats { gap: 9px; }
  .operations-stats > .panel { padding: 12px 14px !important; }
  .metric { min-height: 96px; padding: 13px; }
  .zb-stat { min-height: 106px; border-radius: 12px; }
  .zb-stat p { font-size: 10px; }
  .zb-template-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .workspace-disclosure > summary > span { margin-left: 22px; }
  .zb-record-toolbar label:first-child { flex-basis: 100%; }
}

/* Light presentation theme. Existing DOM, visibility and interactions are unchanged.
   These rules style application chrome only; email iframe documents are isolated. */
:root {
  color-scheme: light;
  --bg: #f6f8fc;
  --bg-elevated: #fff;
  --panel: #fff;
  --panel-2: #f6f8fc;
  --panel-3: #edf3fc;
  --text: #17283f;
  --muted: #4d5f76;
  --soft: #384e70;
  --border: #cbd5e1;
  --border-strong: #a6b6ca;
  --line: #cbd5e1;
  --workspace-surface: #fff;
  --workspace-border: #cbd5e1;
  --workspace-radius: 10px;
  --ui-blue: #0963ef;
  --ui-blue-soft: #edf4ff;
  --green: #15805e;
  --green-soft: #e9f8f1;
  --yellow: #996415;
  --yellow-soft: #fff5df;
  --red: #bd3948;
  --red-soft: #fff0f2;
  --shadow: 0 4px 18px #193b6410;
}
body { background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.55; }
.environment { background: #eef3fc; color: #405777; border-bottom-color: #dce5f2; letter-spacing: .1px; }
.shell > main { background: #fbfcff; min-height: calc(100vh - var(--stage-bar)); }
.shell > aside.sidebar { background: linear-gradient(160deg, #14283f, #0e2036 75%); border-color: #20354f; color: #edf4ff; scrollbar-color: #455a74 #102238; }
.sidebar-head { background: transparent; border-color: #ffffff12; border-radius: 8px; }
.sidebar-head .brand-title { color: #f5f8ff; }
.sidebar-head .brand-sub, nav .side-copy small, nav .side-link.active .side-copy small { color: #a9bad0; }
.sidebar-head .brand-mark { background: linear-gradient(145deg, #3793ff, #0763ee); color: #fff; border-color: #ffffff20; }
body nav .side-link:not(.selected) { color: #dce7f6; }
body nav .side-link.selected { color: #fff; background: #1967d7; border-color: #428bfa; }
body nav .side-link.selected small { color: #e0edff; }
nav .side-link:hover { background: #ffffff0c; }
nav .side-icon { color: #d9e8ff; background: transparent; }
.sidebar-foot { border-color: #ffffff17; color: #b5c4d9; }
.sidebar button.secondary { color: #e5edfa; border-color: #ffffff23; background: #ffffff09; }
.sidebar button.secondary:hover { background: #ffffff15; }
#workspace > .shell-topbar { border-color: var(--line); }
.shell-topbar h2 { color: #10213d; font-weight: 750; letter-spacing: -.6px; }
.shell-topbar .page-lead { color: #60718c; }
.shell-topbar .top-pill { background: #fff6df; border-color: #f2dfb3; color: #785312; box-shadow: none; }
.top-pill-dot { background: #d39a23; box-shadow: 0 0 0 3px #d39a2317; }
.panel, dialog, .studio-dialog { background: #fff; color: var(--text); border-color: var(--line); box-shadow: 0 2px 8px #17345f04; }
dialog::backdrop, .studio-dialog::backdrop { background: #13284075; }
#content h3, #content h4 { color: #14233f; }
.muted, .eyebrow, .inline-help, .empty, .operations-empty { color: var(--muted); }
a { color: #155bc5; }
code { color: #415d85; }
label, #content label { color: #3d5273; font-weight: 500; }
input, select, textarea, #content input, #content select, #content textarea, .studio-dialog input, .studio-dialog select {
  color: #172b4b; background: #fff; border-color: #cfdbeb; border-radius: 7px; box-shadow: 0 1px 2px #193b6403;
}
input::placeholder, textarea::placeholder { color: #7989a1; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: #f0f3f8; color: #6b7990; }
input[type=checkbox] { accent-color: var(--ui-blue); }
progress { accent-color: var(--ui-blue); }
input::file-selector-button { background: #eef4ff; color: #22549d; border-color: #cfddf2; }
body main button:not(.secondary), .studio-dialog button:not(.secondary) { background: var(--ui-blue); color: #fff; border-color: #0963ef; box-shadow: 0 2px 5px #0963ef14; }
body main button:not(.secondary):hover:not(:disabled), .studio-dialog button:not(.secondary):hover:not(:disabled) { background: #0855ce; }
body main button.secondary, #content button.secondary, .studio-dialog button.secondary { color: #33527e; background: #fff; border: 1px solid #ccdaee; box-shadow: none; }
body main button.secondary:hover:not(:disabled), #content button.secondary:hover:not(:disabled) { background: #edf4ff; border-color: #93b7ef; }
body main button:focus-visible, #content :where(input,select,textarea,button):focus-visible, summary:focus-visible { outline-color: #0963ef; }
#notice { background: #ecf9f2; color: #1c6c4d; border-color: #bee7d2; }
#notice.error, #support-open-error, .studio-dialog [role=alert] { color: #a42c40; }
#notice.error { background: #fff0f2; border-color: #f0c6ce; }
.operations-page .operations-intro { background: #f8faff !important; border-color: #e1e9f6; }
.operations-stats > .panel, .metric { border: 1px solid var(--line); background: linear-gradient(135deg, #fff, #f9fbff); border-radius: 9px; }
.operations-stats strong, .metric strong { color: #16355c; }
.operations-stats > .panel:nth-child(2) strong { color: #128160; }
.operations-stats > .panel:nth-child(3) strong { color: #0963ef; }
.operations-stats > .panel:nth-child(4) strong { color: #b74150; }
.operations-stats span, .metric small, .metric p { color: #62738e; }
.operations-records .operations-filters, .zb-record-toolbar, .zb-library-heading, .zb-search { background: #f8faff; border-color: var(--line); }
.operations-pagination { border-color: var(--line); background: #fff; color: #60728f; }
.operations-pagination > span { color: #60728f; }
.operations-blocked { color: #a93647; }
.operations-empty h3 { color: #172b4b; }
.operations-empty p { color: #637694; }
.workspace-empty-icon { background: #edf4ff; border-color: #dde9fc; color: #1765e5; }
.table-wrap { background: #fff; scrollbar-color: #c2cee0 #f3f6fb; }
#content th { background: #f4f7fc; color: #486080; border-color: #e1e8f2; font-size: 11px; font-weight: 650; letter-spacing: .15px; }
#content td { color: #233b5c; border-color: #e9eef6; font-size: 12px; }
#content tbody tr:hover { background: #f2f7ff; }
.badge, .record-status { background: #eaf8f1; color: #18744f; border-color: #cbe9db; }
.badge.pending { background: #fff5df; color: #88590d; border-color: #f1dfb5; }
.badge.off { background: #ffeff2; color: #ad3649; border-color: #efcbd2; }
.record-status { background: #eef4ff; color: #315eaa; }
.record-status[data-state=simulated] { background: #eaf8f1; color: #18744f; }
.record-status[data-state=failed], .record-status[data-state=skipped_suppressed] { background: #fff0f2; color: #ad3649; }
.record-status[data-state=cancelled] { background: #f0f3f8; color: #66758d; }
.zb-stat { --tone: #245cce; background: #fff; border-color: var(--line); }
.zb-stat.tone-green { --tone: #16815f; }.zb-stat.tone-cyan { --tone: #1377b7; }.zb-stat.tone-red { --tone: #c04454; }.zb-stat.tone-gold { --tone: #956518; }
.zb-stat-icon { background: #eef4ff; border-color: #e2ebfb; color: var(--tone); }
.zb-stat-label { color: #486080; font-weight: 650; }.zb-stat p { color: #62738e; }
.zb-campaign-list, .zb-template-card { background: #fff; border-color: var(--line); }
.zb-template-card { border-radius: 9px; box-shadow: 0 2px 8px #17345f04; }
.zb-template-card:hover { border-color: #8fb5f5; }
.zb-template-subject, .zb-campaign-name { color: #29456f; }
.zb-filter span, .composer-tabs span { background: #e9effa; color: #405b83; }
#content .zb-filter.active, #content .template-modebar button[aria-pressed=true], #content .composer-tabs button[aria-selected=true] { background: #edf4ff; color: #085bde; border-color: #86aff0; }
.campaign-title-link { color: #155bc5 !important; }
.zb-row-actions .campaign-action { background: #f1f6ff !important; border-color: #d4e2f6 !important; color: #245a9b !important; }
.zb-row-actions .action-edit, .zb-row-actions .action-start, .zb-row-actions .action-resume { color: #145ee0 !important; }
.zb-row-actions .action-download, .zb-row-actions .action-pause { background: #fff7e8 !important; border-color: #eedcb5 !important; color: #926313 !important; }
.zb-row-actions .action-cancel, .zb-row-actions .action-delete { background: #fff2f4 !important; border-color: #efcdd4 !important; color: #b5364a !important; }
.campaign-action:hover { filter: brightness(.96); }
.template-design, .composer-rich-editor { background: #f6f8fc; border-color: #d5deec; border-radius: 10px; }
.studio-menubar, .studio-controls, .composer-menu, .composer-toolbar { background: #f4f7fc; border-color: #dfe7f2; }
.studio-menubar { border-radius: 10px 10px 0 0; }
.studio-menu summary, .studio-editor-label, .studio-color, .studio-controls .studio-color, .studio-blocks span, .studio-status, .composer-menu > span { color: #526987; }
.studio-menu summary:hover, .studio-menu[open] > summary { background: #e4edfb; color: #164ea8; }
.studio-menu > div { background: #fff; border-color: #d5e0ef; box-shadow: 0 12px 30px #193b6426; }
#content .template-design button { background: #fff; border: 1px solid #d3dfef; color: #35547c; box-shadow: none; }
#content .template-design button:hover:not(:disabled) { background: #eaf2ff; border-color: #92b4eb; color: #164ea8; }
#content .studio-menu > div button { border-color: transparent; }
.studio-status { background: #f7f9fc; border-top: 1px solid #e1e8f2; border-radius: 0 0 10px 10px; }
#content .template-layout #template-html-source, .composer-source-dialog textarea { background: #f5f8fd; color: #254773; border-color: #cbd9ee; font: 13px/1.7 Consolas, monospace; }
.template-layout #template-source-field small { color: #637694; }
.composer-metrics section, #composer-checks li, .composer-file, .composer-scan-numbers > div, .composer-template-settings, .composer-domains > div { background: #f8faff; border-color: var(--line); }
.composer-warning { background: #fff7e7; color: #815414; border-color: #eddbb7; }
.composer-dropzone { background: #f2f7ff; border-color: #8bb5f4; }
.composer-dropzone:hover, .composer-dropzone.dragging { background: #e7f1ff; border-color: #1765e5; }
.upload-symbol { background: #e3eeff; color: #0963ef; }
.composer-dropzone small, .composer-empty, .composer-scan-numbers small, .composer-statusbar, .composer-metrics small, .composer-footer > span, .composer-template-settings > summary span, .composer-records > summary span, .composer-compact .composer-heading #draft-recipient-count, .composer-compact .composer-scan-idle { color: #63738d; }
.composer-help p { background: #fff; color: #4b6080; border-color: #d7e2f2; box-shadow: 0 8px 24px #193b6422; }
.composer-tabs { border-color: var(--line); }
body main .composer-tabs button { background: transparent; color: #4a6285; box-shadow: none; }
.composer-compact .composer-heading, .composer-footer { box-shadow: 0 3px 14px #17345f0c; }
.composer-import-button { background: #0963ef !important; color: #fff !important; }
.composer-scan-numbers strong { color: #137752; }
.composer-scan-numbers .scan-metric-0 strong { color: #1b3458; }.composer-scan-numbers .scan-metric-2 strong { color: #93600d; }.composer-scan-numbers .scan-metric-3 strong { color: #b5374c; }.composer-scan-numbers .scan-metric-4 strong { color: #175fcf; }
#composer-checks .ready span { color: #187b59; }#composer-checks .waiting span { color: #996619; }
.mail-provider, .mail-provider.has-recipients { background: #f9fbff; border-color: #dbe5f3; box-shadow: none; }
.mail-provider.has-recipients { border-color: color-mix(in srgb, var(--provider-color), #b9c9df 40%); }
.mail-provider > span:last-child { color: #526887; }.mail-provider strong { color: #29476b; }
.provider-icloud { --provider-color: #638ab7; }.provider-yandex { --provider-color: #ac791b; }.provider-other { --provider-color: #667d9d; }

/* Reference layout: real controls retain their node identity and form ownership. */
.shell { grid-template-columns: 208px minmax(0,1fr); }
.shell > main { padding: 0 26px 28px; background: #f1f4f8; }
.shell > aside.sidebar { padding: 16px 10px 12px; }
.sidebar-head { min-height: 54px; padding: 0 8px 12px; margin-bottom: 10px; border: 0; }
.sidebar-head .brand-title { font-size: 15px; }.sidebar-head .brand-sub { font-size: 10px; }
.sidebar-head .brand-mark { width: 32px; height: 32px; min-width: 32px; border-radius: 7px; font-size: 17px; }
.nav-group { display: grid; gap: 2px; margin: 0 0 12px; }
.nav-group-title { padding: 10px 12px 7px; color: #a3b5cd; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; }
nav.side-nav { gap: 0; }
nav .side-link { min-height: 33px; padding: 6px 10px; border-radius: 5px; gap: 9px; }
nav .side-copy strong { font-size: 11px; line-height: 1.4; font-weight: 500; }
nav .side-icon { width: 18px; height: 18px; flex-basis: 18px; }
nav .side-icon svg { width: 16px; height: 16px; }
nav .nav-help { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sidebar-foot { padding: 12px 8px 0; gap: 8px; font-size: 10px; }
.sidebar-foot #logout { min-height: 30px; padding: 5px 9px; font-size: 10px; }
.workspace-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; margin: 0 -26px 20px; padding: 8px 26px; border-bottom: 1px solid #e4ebf5; background: linear-gradient(90deg,#fff,#f9fbff); }
.workspace-crumb { color: #556d91; font-size: 11px; }
.workspace-context-actions { display: flex; gap: 10px; align-items: center; }
.workspace-context .top-pill { min-height: 27px; border-radius: 5px; background: #fff6df; color: #785312; border-color: #f2dfb3; }
.workspace-context #refresh { font-size: 10px; min-height: 27px; padding: 4px 10px; }
#workspace > .shell-topbar { min-height: 62px; padding: 0; margin: 0 0 20px; border: 0; align-items: flex-start; gap: 24px; }
.shell-topbar > :first-child { min-width: 0; flex: 1; }
.shell-topbar h2 { font-size: 24px; letter-spacing: -.6px; margin: 0; }
.shell-topbar .page-lead { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.shell-topbar-right { padding-top: 3px; flex-wrap: wrap; justify-content: flex-end; }
.layout-page-note { margin-top: 7px; max-width: 100ch; color: #4e6384; font-size: 11px; line-height: 1.6; }
.layout-page-note h3 { display: inline; font-size: 11px; font-weight: 600; margin: 0 5px 0 0; }
.layout-page-note p { display: inline; font-size: 11px; margin: 0; }
.layout-page-note p.muted { display: block; font-size: 10px; margin: 3px 0 0; color: #65758e; }
.layout-page-action { white-space: nowrap; min-height: 36px; padding: 8px 15px; font-size: 11px; border-radius: 5px; }
#content .panel { border-radius: 7px; box-shadow: none; }
.operations-page { gap: 18px; }
.operations-stats { gap: 12px; }
.operations-stats > .panel { display: flex; flex-direction: row; align-items: center; padding: 14px !important; min-height: 78px; gap: 12px; border-radius: 7px !important; }
.stat-symbol { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: #edf4ff; color: #1266ed; }
.stat-symbol svg, .security-symbol svg, .template-paper-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stat-symbol-1 { color: #168261; background: #eaf8f2; }.stat-symbol-3 { color: #cc4857; background: #fff0f2; }
.operations-stats .stat-symbol { color: #1266ed; }
.operations-stats .stat-symbol-1 { color: #168261; }
.operations-stats .stat-symbol-3 { color: #cc4857; }
.stat-copy { min-width: 0; }.operations-stats .stat-copy strong { display: block; font-size: 21px; color: #142b4c; line-height: 1.2; }
.operations-stats .stat-copy > span { display: block; font-size: 10px; margin-top: 6px; line-height: 1.4; }
.operations-page > .operations-filters { background: none; border: 0; padding: 0; gap: 12px; margin: 2px 0 -6px; }
.operations-page > .operations-filters label:first-child { flex: 1 1 300px; }
.operations-page > .operations-filters label { flex: 0 1 230px; font-size: 10px; gap: 5px; }
.operations-page > .operations-filters button { min-width: 74px; font-size: 11px; }
.operations-page > .operations-filters input { background: #f9fbff; }
#content .operations-records { border-radius: 7px; }
.operations-empty { min-height: 290px; padding: 22px; gap: 8px; background: #fff; }
.operations-empty h3 { font-size: 15px !important; }.operations-empty p { font-size: 12px; max-width: 65ch; }
.workspace-illustration { width: 104px; height: 104px; flex-shrink: 0; }
.operations-pagination { min-height: 46px; padding: 9px 14px; border-top: 1px solid #e4ebf5; }
.operations-pagination > span { font-size: 10px; }
#content th { font-size: 10px; padding: 11px 13px; font-weight: 600; letter-spacing: .1px; }
#content td { padding: 13px; font-size: 12px; }
#content .table-wrap { border-radius: 7px; margin-bottom: 16px; }
.zb-stats { gap: 12px; margin-bottom: 18px; }
.zb-stat { display: grid; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto auto; gap: 3px 12px; align-content: center; padding: 14px; min-height: 88px; border-radius: 7px; }
.zb-stat-top { display: contents; }.zb-stat-top > strong { grid-column: 2; grid-row: 1; font-size: 22px; }
.zb-stat-icon { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 11px; align-self: center; }
.zb-stat-icon svg { width: 21px; height: 21px; }
.zb-stat-label { grid-column: 2; grid-row: 2; padding: 0; font-size: 10px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.zb-stat p { grid-column: 2; grid-row: 3; margin: 0; font-size: 10px; line-height: 1.4; }
.zb-record-toolbar { background: #f9fbfe; border-radius: 7px 7px 0 0; padding: 12px 14px; }
.zb-record-toolbar + .table-wrap { margin-top: 0; }
.person-avatar { display: inline-grid; place-items: center; width: 29px; height: 29px; margin-right: 10px; background: #e9f2ff; color: #2767c7; border-radius: 50%; vertical-align: middle; font-size: 12px; font-weight: 650; }
.person-avatar::before { content: attr(data-initial); }
#content.layout-with-form { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px 22px; align-items: start; }
.layout-with-form > .zb-stats { grid-column: 1; margin-bottom: 0; }
.layout-with-form > .zb-record-toolbar, .layout-with-form > .table-wrap, .layout-with-form > .empty { grid-column: 1; margin: 0 !important; }
.layout-with-form > .layout-side-form { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 20px; border-left: 1px solid #e3eaf5; }
.layout-side-form form.grid, #employee-editor form.grid { grid-template-columns: minmax(0,1fr); gap: 15px; }
.layout-side-form form > .wide > button { width: 100%; }
.layout-with-form > .empty { min-height: 290px; border: 1px solid #e2e9f3; border-radius: 7px; align-content: center; gap: 12px; }
.layout-with-form .zb-stats { grid-auto-flow: row; grid-template-columns: repeat(3,minmax(0,1fr)); }
.layout-with-form .zb-stat { grid-template-columns: minmax(0,1fr); gap: 4px; padding: 12px; }
.layout-with-form .zb-stat-icon { width: 28px; height: 28px; grid-column: 1; grid-row: 1; }.layout-with-form .zb-stat-top > strong { grid-column: 1; grid-row: 2; }.layout-with-form .zb-stat-label { grid-column: 1; grid-row: 3; }.layout-with-form .zb-stat p { grid-column: 1; grid-row: 4; }
#content.layout-employees:has(#employee-editor:not(:empty)) { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 16px; align-items: start; }
.layout-employees:has(#employee-editor:not(:empty)) > :not(#employee-editor) { grid-column: 1; margin-bottom: 0; }
.layout-employees #employee-editor:not(:empty) { grid-column: 2; grid-row: 1 / span 5; }
#employee-editor > .panel { padding: 18px; margin: 0; }
#employee-editor h3 { overflow-wrap: anywhere; line-height: 1.5; }
.layout-employees:has(#employee-editor:not(:empty)) .table-wrap table { min-width: 700px; }
.template-list-toolbar { padding: 14px 18px !important; border: 1px solid var(--border) !important; border-radius: 12px !important; background: #fff !important; }
.template-list-toolbar label { display: flex; gap: 10px; align-items: center; }.template-list-toolbar select { min-width: 130px; }
.template-list-toolbar .template-owner-filter select { min-width: 220px; max-width: 320px; }
#content .zb-template-library { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
#content .zb-template-grid { grid-template-columns: repeat(auto-fill,minmax(280px,340px)); justify-content: start; gap: 24px; padding: 0; }
#content .zb-template-card { padding: 0; gap: 0; min-height: 410px; border: 1px solid #dce5f2; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px #14263f08; overflow: hidden; }
#content .zb-template-card:hover, #content .zb-template-card:focus-within { border-color: #93b4ed; }
.template-card-cover { position: relative; height: 185px; flex-shrink: 0; overflow: hidden; background: #edf4ff; display: flex; justify-content: center; align-items: end; padding-bottom: 12px; }
.template-card-cover::before, .template-card-cover::after { content: ''; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: #dfebfd; bottom: -86px; left: -86px; }
.template-card-cover::after { width: 230px; height: 230px; left: auto; right: -142px; bottom: -96px; }
.template-cover-art { width: 200px; height: 140px; position: relative; z-index: 1; }
.template-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #edf4ff; z-index: 1; }
.template-card-info > .template-cover-label { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .35px; color: var(--muted); }
.template-card-info { padding: 20px; display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
#content .template-card-info h3 { margin: 0; font-size: 20px !important; font-weight: 600; line-height: 1.3; color: var(--heading); }
.template-card-summary { min-width: 0; }
.template-summary-label { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: .35px; color: var(--muted); }
#content .template-card-summary .zb-template-subject { font-size: 14px !important; line-height: 1.6; color: var(--text); font-weight: 400; overflow: visible; overflow-wrap: anywhere; display: block; }
#content .template-card-info > small { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--muted); }
#content .zb-template-card .actions { margin: 0; }
#content .zb-template-card .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 16px; background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 2px 5px #2563eb15; }
#content .zb-template-card .actions button.secondary:is(:hover,:focus-visible,:active):not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
#content .zb-template-card .actions svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#content .template-create-card { min-height: 410px; padding: 28px 20px; border: 2px dashed #cedcf0; border-radius: 14px; background: #f6f9fe; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; min-width: 0; }
.template-create-symbol { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; background: #e7f0ff; color: #2563eb; font-size: 44px; font-weight: 400; line-height: 1; }
#content .template-create-card h3 { margin: 0; color: var(--heading); font-size: 20px; font-weight: 600; line-height: 1.4; }
#content .template-create-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
#content .template-create-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; background: transparent; color: #2563eb; border-color: transparent; box-shadow: none; }
#content .template-create-action:hover { background: #eaf2ff; color: #1d4ed8; }
#content .template-create-card:focus-within { border-color: #93b4ed; }
#content .template-list-toolbar { gap: 12px 22px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; box-shadow: 0 2px 8px #14263f04; }
#content .template-list-toolbar > .muted { flex: 1 1 260px; font-size: 12px; text-align: right; }
#content .template-list-toolbar .zb-library-heading { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0 0 0 22px; border: 0; border-left: 1px solid var(--border); background: none; font-size: 12px; }
#content .template-list-toolbar .zb-library-heading strong { font-weight: 500; color: var(--text); }
#content .template-list-toolbar .zb-library-heading > span { font-size: 11px; }
#content .template-list-pagination { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 20px; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); gap: 18px; }
.contact-layout > .contact-rule-card { grid-column: 1; }.contact-layout > .contact-rule-summary { grid-column: 2; }.contact-layout > :last-child { grid-column: 1 / -1; }
.contact-rule-summary { display: flex; align-items: center; gap: 20px; padding: 22px !important; height: 100%; background: #f9fbff !important; }
.contact-rule-summary .workspace-illustration { width: 76px; height: 76px; }.contact-rule-summary p.muted { margin: 0 !important; font-size: 12px; }
.contact-rule-card #member-contact-rule .grid { gap: 16px; }.contact-rule-card .check-label { line-height: 1.6; }
.contact-readiness>div{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.contact-ready{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid #dbe5f2;border-radius:999px;font-size:12px;font-weight:700}.contact-ready.ok{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.contact-ready.missing{color:#b45309;background:#fffbeb;border-color:#fde68a}
.contact-telegram .operations-intro{align-items:flex-start}.contact-telegram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.contact-telegram-card{min-width:0;padding:18px;border:1px solid #dbe5f2;border-radius:14px;background:#fbfdff}.contact-telegram-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.contact-telegram-card-head h4{margin:0 0 6px;color:#14263f;font-size:15px}.contact-telegram-card-head p{margin:0}.contact-telegram-form{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}.contact-telegram-form>.actions,.contact-telegram-form>p{margin:0}.contact-telegram-form input{min-height:44px}.contact-telegram-form label>small{display:block;margin-top:6px;font-weight:400;line-height:1.45}.contact-claims td .badge+.badge{margin-left:5px}
#member-contact-rule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#member-contact-rule>button{grid-column:1/-1;justify-self:start}.contact-segment{min-width:0;margin:0;padding:20px;border:1px solid #dbe5f2;border-radius:14px;background:#fbfdff}.contact-segment legend{padding:0 8px;color:#14263f;font-size:17px;font-weight:750}.contact-segment>p{margin:0 0 16px}.contact-segment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.contact-segment-grid label{min-width:0}.contact-message{grid-column:1/-1}.contact-message textarea{min-height:180px;resize:vertical;font-family:inherit;line-height:1.5}.contact-message small{display:block;margin-top:6px}.contact-segment-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}.contact-segment-actions .check-label{margin:0}.member-scan-result{grid-column:1/-1!important}.contact-auto-state{display:block;margin:5px 0 0 26px;color:#64748b;font-size:11px}.contact-claims{grid-column:1/-1!important}.contact-claims td small{display:block;margin-top:4px;color:#64748b;font-size:11px}.contact-claims .table-wrap{margin:14px 0 0}.contact-claims .empty{min-height:110px;display:grid;place-items:center}
#content .security-card { padding: 22px; margin: 0; }
.security-symbol { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; color: #0963ef; background: #eef5ff; border-radius: 9px; vertical-align: middle; }
.security-card form.grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
.security-card > .muted { margin: 12px 0 24px !important; }
.queue-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); gap: 18px; }
.queue-layout #queue-health, .queue-layout #rate-summary { margin: 0 0 18px; padding: 18px; min-width: 0; }
.queue-status-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.queue-status-item { display: grid; grid-template-columns: 36px 1fr; gap: 4px 10px; align-items: center; }
.queue-status-item .stat-symbol { grid-row: 1 / span 2; width: 36px; height: 36px; }.queue-status-label { font-size: 11px; color: #526b8e; }.queue-status-item > span:last-child { grid-column: 2; font-size: 21px; color: #145de0; font-weight: 700; }
#rate-summary [data-rate-available] { font-size: 24px; font-weight: 750; color: #142d51; }
#content[data-layout=campaign-tools] > .panel.actions { padding: 0 0 14px; border: 0; background: none; }
#content[data-layout=campaign-tools] > details { width: calc(50% - 9px); display: inline-block; vertical-align: top; }
#content[data-layout=campaign-tools] > details + details { margin-left: 14px; }
#content[data-layout=audit] .zb-record-toolbar { background: none; border: 0; padding: 0 0 14px; }
#content[data-layout=account] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
@media(max-width:1150px){
  .shell { grid-template-columns: 190px minmax(0,1fr); }.shell > main { padding: 0 20px 24px; }.workspace-context { margin: 0 -20px 18px; padding: 8px 20px; }
  #content.layout-with-form { grid-template-columns: minmax(0,1fr) 300px; gap: 14px; }
  .layout-with-form > .zb-stats { grid-column: 1 / -1; }.layout-with-form > .layout-side-form { grid-row: 2 / span 3; }
  .contact-layout { grid-template-columns: 1fr; }.contact-layout > .contact-rule-summary { grid-column: 1; }
}
@media(max-width:900px){
  #content.layout-with-form, #content.layout-employees:has(#employee-editor:not(:empty)), #content[data-layout=account], .queue-layout { grid-template-columns: minmax(0,1fr); }
  #member-contact-rule, .contact-segment-grid, .contact-telegram-grid { grid-template-columns: minmax(0,1fr); }.contact-segment, .contact-telegram-card { padding: 16px; }.contact-segment-actions { align-items: flex-start; flex-direction: column; }
  .layout-with-form > .layout-side-form, .layout-employees #employee-editor:not(:empty) { grid-column: 1; grid-row: auto; }
  .layout-employees #employee-editor:not(:empty) { grid-row: 4; }
  #content[data-layout=campaign-tools] > details { display: block; width: 100%; margin-left: 0; }
  .operations-stats { grid-auto-flow: row; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px){
  .shell { display: block; }.shell > main { padding: 0 14px 24px; }.shell > aside.sidebar { padding: 10px 14px; }.sidebar-head { padding: 0; margin: 0; min-height: 36px; }
  .shell > aside.sidebar.mobile-open #nav:not([hidden]) { display: block; }.nav-group { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 8px; }.nav-group-title { grid-column: 1 / -1; }
  .workspace-context { margin: 0 -14px 16px; padding: 8px 14px; min-height: 40px; }.workspace-crumb { font-size: 10px; }.workspace-context .top-pill { font-size: 9px; }
  #workspace > .shell-topbar { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }.shell-topbar > :first-child { flex-basis: 100%; }.shell-topbar h2 { font-size: 23px; }.shell-topbar-right { padding: 0; }
  .operations-stats > .panel { padding: 12px !important; gap: 9px; min-height: 78px; }.stat-symbol { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }.stat-symbol svg { width: 19px; height: 19px; }
  .operations-stats .stat-copy strong { font-size: 20px; }.operations-stats .stat-copy > span { font-size: 9px; }
  .operations-page > .operations-filters label:first-child { flex-basis: 100%; }.operations-page > .operations-filters label { flex-grow: 1; }.operations-empty { min-height: 265px; }
  .zb-stat { grid-template-columns: 32px minmax(0,1fr); gap: 3px 9px; padding: 12px; }.zb-stat-icon { width: 32px; height: 32px; }.zb-stat-top > strong { font-size: 22px; }
  .layout-with-form .zb-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }.layout-with-form .zb-stat:last-child:nth-child(odd) { grid-column: auto; }
  #content .zb-template-grid { grid-template-columns: minmax(0,1fr); }
  #content .template-list-toolbar .zb-library-heading { padding-left: 0; border-left: 0; align-items: start; }
  #content .template-list-toolbar > .muted { text-align: left; }
  #content .template-list-toolbar .template-owner-filter { width: 100%; align-items: stretch; flex-direction: column; }
  #content .template-list-toolbar .template-owner-filter select { width: 100%; max-width: none; }
  #member-contact-rule,.contact-rule-card #member-contact-rule .grid,.contact-segment-grid,.contact-telegram-form { grid-template-columns: minmax(0,1fr); }.contact-rule-summary { padding: 16px !important; gap: 12px; }.contact-segment{padding:16px}.contact-segment-actions{align-items:flex-start;flex-direction:column}
  #content .security-card { padding: 18px; }.queue-status-metrics { gap: 8px; }.queue-status-item { grid-template-columns: 1fr; }.queue-status-item .stat-symbol { grid-row: 1; }.queue-status-item > span:last-child { grid-column: 1; }
}

/* Shared visual tokens and component polish; mail document styles stay isolated. */
:root {
  --bg: #f4f7fb;
  --bg-elevated: #fff;
  --panel: #fff;
  --panel-2: #f8fafc;
  --panel-3: #eff6ff;
  --text: #334155;
  --heading: #14263f;
  --muted: #64748b;
  --soft: #334155;
  --border: #e2e8f0;
  --border-strong: #b8c6d8;
  --line: #e2e8f0;
  --workspace-border: #e2e8f0;
  --workspace-surface: #fff;
  --ui-blue: #2563eb;
  --ui-blue-soft: #eff6ff;
  --green: #15803d;
  --red: #be123c;
}
body { color: var(--text); font-size: 14px; }
.shell > main { background: var(--bg); }
.workspace-context { background: #fff; border-bottom-color: var(--border); }
.workspace-crumb, .shell-topbar .page-lead, .layout-page-note, .layout-page-note p.muted { color: var(--muted); font-size: 13px; }
.workspace-context #refresh { font-size: 12px; }
.environment { color: var(--muted); border-bottom-color: var(--border); }
.shell-topbar h2, #content h2 { color: var(--heading); font-size: 28px; line-height: 1.25; font-weight: 700; }
#content h3, #content h4 { color: var(--heading); }
#content .panel p { font-size: 14px; }
#content label { color: var(--text); font-size: 13px; font-weight: 500; }
#content input, #content select, #content textarea { border-color: var(--border-strong); color: var(--text); font-size: 14px; }
#content input::placeholder, #content textarea::placeholder { color: var(--muted); }
#content :is(.muted, .inline-help, .zb-row-meta), .layout-page-note h3, .layout-page-note p { color: var(--muted); font-size: 12px; }
#content .panel p.muted { font-size: 13px; }
body main button, #content button, .studio-dialog button { font-size: 14px; font-weight: 600; border-radius: 9px; min-height: 40px; padding: 8px 16px; line-height: 1.4; }
.shell-topbar-right .layout-page-action { font-size: 14px; font-weight: 600; min-height: 40px; padding: 8px 16px; border-radius: 9px; }
body main button:not(.secondary), .studio-dialog button:not(.secondary) { background: var(--ui-blue); color: #fff; border-color: var(--ui-blue); box-shadow: 0 2px 5px #2563eb18; }
body main button:not(.secondary):hover:not(:disabled), .studio-dialog button:not(.secondary):hover:not(:disabled) { background: #1d4ed8; }
body main button.secondary, #content button.secondary, .studio-dialog button.secondary { color: var(--text); background: #fff; border-color: var(--border); box-shadow: none; }
body main button.secondary:hover:not(:disabled), #content button.secondary:hover:not(:disabled), .studio-dialog button.secondary:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
#content button:disabled, body main button:disabled { background: #f1f5f9; color: #94a3b8; border-color: var(--border); box-shadow: none; opacity: 1; cursor: not-allowed; }
body main button:focus-visible, #content :is(input,select,textarea,button):focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
#content .panel, .zb-campaign-list, #content .table-wrap { border-color: var(--border); }
#content table, #content .table-wrap, .zb-campaign-list { background: #fff; }
#content th { background: #f1f5f9; color: #475569; border-color: var(--border); font-size: 12px; font-weight: 600; padding: 11px 14px; }
#content td { color: var(--text); border-color: var(--border); font-size: 14px; padding: 13px 14px; }
#content tbody tr:hover { background: #f8faff; }
.zb-search, .zb-record-toolbar, .operations-records .operations-filters { background: #f8fafc; border-color: var(--border); }
.zb-list-toolbar, .zb-pagination, .operations-pagination { border-color: var(--border); }
.zb-search > span, .zb-pagination, .operations-pagination > span, .zb-record-count { color: var(--muted); font-size: 12px; }
#content .campaign-title-link, #content .zb-campaign-name { color: var(--heading) !important; font-size: 14px; font-weight: 600; }
#content .campaign-title-link { min-height: 0; border-radius: 3px; }
#content .campaign-title-link:hover:not(:disabled), #content .campaign-title-link:focus-visible { color: var(--ui-blue) !important; text-decoration: underline; text-underline-offset: 3px; }
#content button.zb-filter { min-height: 36px !important; padding: 7px 12px !important; font-size: 13px !important; color: var(--text); border-color: var(--border); font-weight: 500; }
#content button.zb-filter.active, #content .template-modebar button[aria-pressed=true] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; font-weight: 600; }
.zb-filter span, .composer-tabs span { background: #edf2f7; color: #475569; font-size: 12px; border-radius: 5px; padding: 2px 5px; }
.zb-filter.active span { background: #dbeafe; color: #1d4ed8; }

#content .zb-row-actions .campaign-action { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 8px; border-radius: 8px; background: #f8fafc !important; border-color: var(--border) !important; color: #475569 !important; box-shadow: none; }
#content .zb-row-actions .campaign-action svg { width: 18px; height: 18px; }
#content .zb-row-actions { flex-wrap: nowrap; min-width: max-content; }
#content .zb-row-actions :is(.action-start,.action-resume) { color: var(--ui-blue) !important; background: #eff6ff !important; border-color: #dbeafe !important; }
#content .zb-row-actions :is(.action-delete,.action-cancel) { color: #be123c !important; background: #fff1f2 !important; border-color: #ffe4e6 !important; }
#content .zb-row-actions .campaign-action:hover:not(:disabled) { filter: brightness(.97); }
#content .zb-row-actions .campaign-action:disabled { color: #94a3b8 !important; background: #f1f5f9 !important; border-color: var(--border) !important; }

/* Existing semantic tones are shared across pages. Campaign gold is a rate, not success. */
.zb-stat, .operations-stats > .panel, .metric { --tone: #2563eb; --stat-bg: #eff6ff; }
.zb-stat.tone-green { --tone: #15803d; --stat-bg: #f0fdf4; }
.zb-stat.tone-cyan { --tone: #0369a1; --stat-bg: #f0f9ff; }
.zb-stat.tone-red { --tone: #be123c; --stat-bg: #fff1f2; }
.zb-stat.tone-gold { --tone: #b45309; --stat-bg: #fffbeb; }
#workspace[data-workspace-page=campaigns] .zb-stat.tone-green { --tone: #2563eb; --stat-bg: #eff6ff; }
#workspace[data-workspace-page=campaigns] .zb-stat.tone-blue { --tone: #b45309; --stat-bg: #fffbeb; }
#workspace[data-workspace-page=campaigns] .zb-stat.tone-gold { --tone: #475569; --stat-bg: #f8fafc; }
.operations-stats > .panel:nth-child(2) { --tone: #475569; --stat-bg: #f8fafc; }
.operations-stats > .panel:nth-child(3) { --tone: #0369a1; --stat-bg: #f0f9ff; }
.operations-stats > .panel:nth-child(4) { --tone: #be123c; --stat-bg: #fff1f2; }
#workspace[data-workspace-page=suppression] .operations-stats > .panel { --tone: #475569; --stat-bg: #f8fafc; }
#content .zb-stat, #content .operations-stats > .panel, #content .metric { background: var(--stat-bg); border: 1px solid var(--border); border-radius: 12px !important; box-shadow: 0 2px 6px #14263f05; }
#content .zb-stat-top > strong, #content .operations-stats strong, #content .metric strong { color: var(--tone); font-size: 29px; font-weight: 700; line-height: 1.2; }
#content .zb-stat-icon, #content .operations-stats .stat-symbol { color: var(--tone); background: color-mix(in srgb, var(--tone) 7%, var(--stat-bg)); border-color: color-mix(in srgb, var(--tone) 12%, var(--stat-bg)); }
.zb-stat-label, .operations-stats .stat-copy > span { color: var(--text); font-size: 13px; font-weight: 600; }
.zb-stat p, .metric small, .metric p { color: var(--muted); font-size: 12px; }
.operations-empty p { color: var(--muted); font-size: 13px; }
.operations-page > .operations-filters label { font-size: 13px; }
.composer-dropzone small, .composer-empty, .composer-scan-numbers small, .composer-statusbar, .composer-metrics small, .composer-footer > span, .composer-template-settings > summary span, .composer-records > summary span, .composer-compact .composer-heading #draft-recipient-count, .composer-compact .composer-scan-idle { color: var(--muted); font-size: 12px; }
#composer-checks li { background: #fff; border-color: var(--border); font-size: 12px; }
#composer-checks li.ready, #composer-checks li.waiting {
  padding: 7px 10px;
  gap: 7px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 9px;
}
#composer-checks li.ready { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
#composer-checks li.waiting { background: #fffbeb; border-color: #fde68a; color: #92400e; }
#composer-checks li > span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
#composer-checks li.ready > span { background: #d1fae5; color: #047857; }
#composer-checks li.waiting > span { background: #fef3c7; color: #92400e; }
/* Native progress value and accessible name remain unchanged; zero has no fill. */
#content .zb-campaign-list td progress {
  appearance: none;
  -webkit-appearance: none;
  width: 140px;
  max-width: 100%;
  height: 8px;
  margin-top: 9px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  color: var(--ui-blue);
  accent-color: var(--ui-blue);
}
#content .zb-campaign-list td progress::-webkit-progress-bar { background: #e2e8f0; border-radius: 999px; }
#content .zb-campaign-list td progress::-webkit-progress-value { background: var(--ui-blue); border-radius: 999px; }
#content .zb-campaign-list td progress::-moz-progress-bar { background: var(--ui-blue); border-radius: 999px; }
.campaign-timing { display: grid; gap: 3px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.campaign-timing > span { display: flex; justify-content: space-between; gap: 12px; }
.campaign-timing > span > span { color: var(--text); font-variant-numeric: tabular-nums; }
.composer-template-settings { background: #f8fafc; border-color: var(--border); }
.composer-dropzone { border-color: #93b4ec; }
.composer-tabs { border-color: var(--border); }
#content .composer-tabs button { background: #fff; color: var(--text); border-color: var(--border); box-shadow: none; }
#content .composer-tabs button:hover:not(:disabled) { background: #f1f5f9; color: var(--text); border-color: #cbd5e1; }
#content .composer-tabs button[aria-selected=true] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.studio-menubar, .studio-controls, .composer-menu, .composer-toolbar { background: #f1f5f9; border-color: var(--border); }
.studio-editor-label, .studio-color, .studio-controls .studio-color, .studio-blocks span, .studio-status, .composer-menu > span { color: var(--muted); }
#content .composer-toolbar button, #content .studio-controls button { min-height: 34px; padding: 6px 9px; font-size: 13px; }
#content .composer-import-button { background: var(--ui-blue) !important; }
#content .composer-import-button:hover:not(:disabled) { background: #1d4ed8 !important; }
#content .composer-import-button:disabled { background: #f1f5f9 !important; color: #94a3b8 !important; }
@media (max-width:700px) {
  .shell-topbar h2, #content h2 { font-size: 26px; }
}

/* Official product identity is fixed across every company workspace. */
.sidebar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  min-height: 42px;
}
.zb-product-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  height: 29px;
  white-space: nowrap;
  user-select: none;
}
.zb-product-symbol { display: block; width: 34px; height: 28px; flex: 0 0 34px; overflow: visible; }
.zb-product-name {
  display: block;
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.55px;
  color: #f8f9ff;
}
.tenant-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.sidebar-head > .tenant-brand { display: none !important; }
.tenant-brand .brand-mark,
.tenant-brand .brand-logo {
  width: 27px;
  height: 27px;
  min-width: 27px;
  margin: 0;
  border-radius: 7px;
  flex: 0 0 27px;
}
.tenant-brand .brand-mark { font-size: 14px; }
.tenant-brand .brand-copy { min-width: 0; }
.tenant-brand .brand-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tenant-brand .brand-sub {
  margin: 2px 0 0;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu-toggle { grid-column: 2; grid-row: 1; }
.account-summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.account-copy {
  display: grid;
  min-width: 0;
  text-align: right;
  line-height: 1.25;
}
.account-copy strong {
  max-width: 190px;
  overflow: hidden;
  color: var(--heading);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-copy > span {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-foot #identity:empty { display: none; }

/* Campaign presentation is identical for every authorized role. */
#workspace[data-workspace-page=campaigns] .zb-campaign-list table {
  min-width: 1080px;
  table-layout: fixed;
}
#workspace[data-workspace-page=campaigns] .zb-campaign-list th:nth-child(1) { width: 29%; }
#workspace[data-workspace-page=campaigns] .zb-campaign-list th:nth-child(2) { width: 9%; }
#workspace[data-workspace-page=campaigns] .zb-campaign-list th:nth-child(3) { width: 18%; }
#workspace[data-workspace-page=campaigns] .zb-campaign-list th:nth-child(4) { width: 19%; }
#workspace[data-workspace-page=campaigns] .zb-campaign-list th:nth-child(5) { width: 13%; }
#workspace[data-workspace-page=campaigns] .zb-campaign-list th:nth-child(6) { width: 12%; }
#workspace[data-workspace-page=campaigns] .campaign-laser { width: 100%; min-width: 145px; max-width: 210px; }
#workspace[data-workspace-page=campaigns] .campaign-laser-count { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#workspace[data-workspace-page=campaigns] .campaign-laser-track { display: block; width: 100%; }
#workspace[data-workspace-page=campaigns] .zb-row-actions { display: flex; align-items: center; gap: 5px; min-width: max-content; }
#workspace[data-workspace-page=campaigns] .zb-row-actions .campaign-action {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px !important;
  border-radius: 7px;
}
#workspace[data-workspace-page=campaigns] .zb-row-actions .campaign-action svg { width: 15px; height: 15px; }
#workspace[data-workspace-page=campaigns] .zb-row-actions .campaign-start-button {
  width: auto;
  min-width: 76px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  gap: 5px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}
body:has(#login:not([hidden])) .sidebar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
body:has(#login:not([hidden])) .zb-product-logo { height: 30px; }
body:has(#login:not([hidden])) .zb-product-symbol { width: 33px; height: 30px; flex-basis: 33px; }
body:has(#login:not([hidden])) .zb-product-name { font-size: 22px; }
body:has(#login:not([hidden])) .zb-product-name { color: #17233d; }
body:has(#login:not([hidden])) .tenant-brand { display: none; }
@media(max-width:700px) {
  .sidebar-head {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 36px;
    gap: 8px;
  }
  .zb-product-logo { height: 25px; }
  .zb-product-symbol { width: 30px; height: 25px; flex-basis: 30px; }
  .zb-product-name { font-size: 18px; }
  .tenant-brand { display: none !important; }
  body:has(#login:not([hidden])) .zb-product-logo { height: 27px; }
  .workspace-context-actions { gap: 7px; }
  .account-summary { padding-left: 7px; }
  .account-copy strong { max-width: 92px; }
  .account-copy > span { display: none; }
}