/* Signal UI — midnight blue, precise outlines and restrained spectral light. */
:root {
  color-scheme: dark;
  --green: #76beff;
  --green-dark: #529ef4;
  --mint: #152746;
  --ink: #e9effb;
  --text: #e9effb;
  --muted: #95a4bd;
  --line: #27334c;
  --bg: #090e1b;
  --panel: #111a2c;
  --panel-raised: #17233a;
  --blue: #80bbff;
  --orange: #eabd79;
  --red: #f197aa;
  --shadow: 0 12px 36px #0206122e;
  --ui-font: clamp(13px, calc(.15vw + 11px), 14px);
  --ui-small: clamp(11px, calc(.1vw + 9px), 12px);
  --ui-label: clamp(12px, calc(.1vw + 10px), 13px);
  --ui-title: clamp(26px, 1.6vw, 32px);
  --ui-number: clamp(32px, 2vw, 38px);
  --sidebar-width: clamp(208px, 11.5vw, 228px);
  --layout-gap: clamp(12px, .8vw, 16px);
  --content-pad: clamp(20px, 1.5vw, 32px);
  --block-pad: clamp(20px, 1.1vw, 24px);
  --shell-gutter: max(0px, calc((100vw - 2120px) / 2));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  background: radial-gradient(ellipse at 85% 0, #29326935, transparent 48%), #090e1b;
  font-size: var(--ui-font);
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#9cafff05 1px, transparent 1px), linear-gradient(90deg, #9cafff05 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent 65%);
  z-index: -1;
}
::selection { background: #76beff40; color: #fff; }
button, a, input, select, textarea { transition-duration: .18s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: #83bdff; }
h1, h2, h3 { color: var(--ink); }
small, .muted, .summary-line { color: var(--muted); }
.mono, .metric-number, .rate-value, .performance-counts strong, .report-metrics strong {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

body .side {
  left: calc(var(--shell-gutter) + var(--layout-gap));
  top: var(--layout-gap);
  bottom: var(--layout-gap);
  width: var(--sidebar-width);
  padding: 26px 14px 16px;
  border: 1px solid #7185ba24;
  border-radius: 16px;
  background: linear-gradient(180deg, #141f33, #0f1829 55%);
  box-shadow: 0 12px 36px #02061226, inset 0 1px #b9caff09;
}
.brand { margin: 0 8px 26px; padding: 0; gap: 13px; }
.side .brand { gap: 13px; margin: 0 8px 30px; }
.side .brandmark { width: 38px; height: 38px; border-radius: 11px; box-shadow: none; }
.side .brandmark svg { width: 24px; height: 24px; }
.side .brandname { font-size: 20px; letter-spacing: 2px; line-height: 1.3; }
.side .brand small { font-size: 10px; letter-spacing: 1.5px; margin-top: 4px; color: #8596b3; }
.brandmark {
  width: 45px;
  height: 45px;
  border-radius: 13px;
  background: linear-gradient(145deg, #203f68, #20264a);
  border: 1px solid #719bd04f;
  color: #a5d9ff;
  box-shadow: 0 5px 22px #428cff1c, inset 0 1px #d4ecff17;
}
.brandname { font-size: 22px; letter-spacing: 3px; color: #eef4ff; }
.brand small { margin-top: 5px; color: #8697b8; font-size: 10px; letter-spacing: 1.4px; }
.side .sidebar-create { min-height: 42px; margin-bottom: 28px; gap: 12px; justify-content: flex-start; padding: 10px 17px; border-radius: 10px; color: #f1f6ff; background: linear-gradient(115deg,#2d63a7,#465db2); border: 1px solid #83a9ee52; box-shadow: 0 5px 16px #173d6e32; }
.side .sidebar-create:hover { background: linear-gradient(115deg,#3472bb,#516bca); border-color: #a4c5ff87; }
.navlabel { margin: 22px 12px 12px; display: flex; justify-content: space-between; font-size: var(--ui-small); color: #9ba9c3; }
.navlabel>span { font: 8px/1.5 ui-monospace, monospace; letter-spacing: 1px; color: #61718f; }
.nav { gap: 10px; }
.nav a { position: relative; min-height: 48px; padding: 10px 12px; gap: 13px; border-radius: 9px; font-size: var(--ui-font); font-weight: 450; color: #98a9c2; }
.nav a:hover { background: #2739535e; border-color: transparent; color: #e3edff; }
.nav a.active { background: #243a58; border-color: #7eaaf12b; color: #e1efff; box-shadow: inset 0 1px #bed4ff08; }
.nav a.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 16px; border-radius: 3px; background: #86c2ff; box-shadow: none; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 0; color: #8c9db9; }
.nav a.active .nav-icon { background: none; border: 0; color: #a4cfff; }
.nav-text { flex: 1; }
.nav-indicator { display: flex; opacity: 0; color: #94c5ff; }
.nav a.active .nav-indicator { opacity: 1; }
.nav-index { color: #566987; font: 9px ui-monospace, monospace; }
.nav a.active .nav-index { color: #8db9ed; }
.side-bottom { padding-top: 20px; }
.nav-utility { border-top: 1px solid #7489af22; padding-top: 12px; }
.side .side-foot { padding: 14px 10px 0; border: 0; letter-spacing: 0; }
.sidebar-logout { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: transparent; color: #8698b5; font-size: 11px; cursor: pointer; }
.sidebar-logout:hover { color: #d7e8ff; }
.page-footer { justify-content: flex-end; }
.import-progress { padding: 15px 0 6px; }
.import-progress .import-loading { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: var(--ui-small); }
.import-progress-percent { margin-left: auto; color: #a7ceff; font-weight: 500; font-variant-numeric: tabular-nums; }
.import-progress .progress { height: 4px; }
.plan-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-mode-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 15px; border: 1px solid #718fbc33; border-radius: 9px; background: #0e192c; color: #97abc9; text-align: left; cursor: pointer; }
.plan-mode-option strong { font-size: var(--ui-font); font-weight: 550; }
.plan-mode-option:hover { background: #1b2c45; border-color: #8cb8f05c; }
.plan-mode-option.active { color: #d2e6ff; background: #243b5a; border-color: #7eaff68c; }
.plan-mode-check { margin-left: auto; display: flex; opacity: 0; color: #a8d0ff; }
.plan-mode-option.active .plan-mode-check { opacity: 1; }
.distribution-tabs { margin-top: 5px; }
.distribution-remainder { display: inline-block; margin-left: 8px; color: #e5c899; font-size: 10px; font-weight: 400; }
.node-mini { border-color: #6279ac26; border-radius: 11px; padding: 15px 12px; background: #0c1427b3; }
.workflow-caption { font-size: var(--ui-small); color: #8091af; }
.workflow-steps { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; color: #b7c7e0; font-size: var(--ui-small); }
.workflow-steps svg { color: #4e6992; }
.side-foot { color: #6e80a1; padding: 14px 9px 0; font: 10px ui-monospace, monospace; }
body .main { min-width: 0; margin-left: calc(var(--shell-gutter) + var(--sidebar-width) + 2 * var(--layout-gap)); margin-right: var(--shell-gutter); }
body .topbar { height: 68px; padding: 0 var(--content-pad); background: #090f1edb; border-color: #7896cd1c; backdrop-filter: blur(20px); }
.crumb { gap: 13px; color: #7385a3; font-size: var(--ui-label); }
.crumb strong { color: #c7d6ed; font-weight: 500; }
.top-right { gap: 18px; }
.topbar .btn.subtle { border: 1px solid #768fb326; color: #a7b5ce; padding: 7px 10px; background: #12203977; }
.topbar kbd { border-color: #6687b534; color: #7d93b7; }
.avatar { background: #243b66; border-color: #80aafa31; color: #c6e0ff; border-radius: 10px; width: 32px; height: 32px; }
.userbox { color: #b1c0d8; }
body .content { width: 100%; max-width: 1840px; margin: 0 auto; padding: var(--content-pad); }
.page-title { align-items: center; margin-bottom: 24px; }
.page-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #839cc4; font: 9px ui-monospace, monospace; letter-spacing: 2.1px; }
.page-eyebrow>span { width: 17px; height: 2px; background: linear-gradient(90deg,#7cc5ff,#8b85f5); }
.page-title h1 { font-size: var(--ui-title); letter-spacing: -.5px; font-weight: 650; }
.page-title p { color: #94a4be; font-size: var(--ui-font); margin-top: 6px; }
.page-title>.row { gap: 10px; }
.signal-hero { position: relative; overflow: hidden; padding: var(--block-pad); border: 1px solid #738ac234; border-radius: 16px; background: linear-gradient(108deg,#16213c,#121b30 68%,#202344); margin-bottom: 18px; box-shadow: inset 0 1px #d0dcff09; }
.signal-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 0, #7b80ed13, transparent 60%); pointer-events: none; }
.signal-hero .page-title { position: relative; z-index: 1; margin-bottom: 16px; }
.signal-hero .page-title h1 { font-size: var(--ui-title); color: #f0f4ff; }
.signal-hero .workspace-summary { position: relative; z-index: 1; margin: 0; gap: 12px; font-size: var(--ui-label); }
.signal-hero .workspace-summary>span { padding: 6px 10px; background: #08112355; border: 1px solid #98b3e516; border-radius: 8px; color: #97abc9; }
.signal-hero .workspace-summary>span:first-child { padding: 0; border: 0; background: transparent; }
.signal-hero .workspace-summary .updated-at { background: transparent; border: 0; color: #8a9dbd; font-size: var(--ui-small); }
.hero-orbit { position: absolute; width: 280px; height: 280px; right: 90px; bottom: -120px; border: 1px solid #83a9fa24; border-radius: 50%; transform: rotate(-28deg); pointer-events: none; }
.hero-orbit i { position: absolute; inset: 28px; border: 1px solid #839afa20; border-radius: 50%; }
.hero-orbit i:nth-child(2) { inset: 57px; border-style: dashed; }
.hero-orbit i:nth-child(3) { inset: 85px; border-color: #7daef33d; box-shadow: 0 0 30px #527bea13; }
.hero-orbit span { position: absolute; top: 18px; left: 55px; width: 7px; height: 7px; border-radius: 50%; background: #9ecfff; box-shadow: 0 0 20px #6aaeff90; }

.btn { color: #bdcce3; border-color: #7189b338; background: #1a263b; border-radius: 9px; font-size: var(--ui-font); padding: 10px 15px; box-shadow: inset 0 1px #d7e4ff06; }
.btn:hover { background: #243650; border-color: #88b6fa66; color: #e3efff; }
.btn.primary { color: #081c38; background: linear-gradient(110deg,#7cc8ff,#86a5ff); border-color: #b1dcff55; box-shadow: 0 5px 18px #4c8ff51a, inset 0 1px #ffffff30; font-weight: 650; }
.btn.primary:hover { background: linear-gradient(110deg,#a0d9ff,#a6bcff); border-color: #c6e6ff99; box-shadow: 0 7px 22px #5b97f52a; }
.btn.danger { color: #f7b4c3; background: #382334; border-color: #87526866; }
.btn.sm { border-radius: 7px; min-height: 36px; font-size: var(--ui-label); }
.link { color: #a7d0ff; }
.link:hover { color: #d4e8ff; }
.icon-btn { color: #96a9c7; }
.icon-btn:hover { background: #263857; color: #c3e0ff; }
.card { border-color: #7185b42b; background: linear-gradient(150deg,#141e32,#10192b); border-radius: 15px; box-shadow: var(--shadow), inset 0 1px #c7ddff05; }
.card-head { padding: 16px var(--block-pad); border-color: #6b80ac26; }
.card-head h2 { font-size: clamp(15px, .85vw, 17px); font-weight: 620; color: #dce8fa; }
.card-head small { color: #8b9dbb; font-size: var(--ui-small); }
.card-body { padding: var(--block-pad); }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.simple-metrics .metric, .metric { padding: var(--block-pad); background: linear-gradient(130deg,#17243c,#121b2f); border: 1px solid #7391c62d; border-radius: 14px; box-shadow: 0 8px 24px #01071525; }
.metric::after { top: 0; left: 23px; right: auto; width: 45px; height: 2px; background: linear-gradient(90deg,#72bfff,#9190fa); opacity: .8; }
.metric-top, .simple-metrics .metric-top { color: #a9b9d3; font-size: var(--ui-font); gap: 8px; }
.metric-icon { color: #90c7ff; background: #263f642f; border-color: #72a3e42d; border-radius: 9px; width: 32px; height: 32px; }
.metric-number, .simple-metrics .metric-number { color: #e7f0ff; font-size: var(--ui-number); line-height: 1.15; margin: 14px 0 8px; letter-spacing: -1.5px; overflow-wrap: anywhere; }
.metric-bottom, .simple-metrics .metric-bottom { color: #8599b9; font-size: var(--ui-small); }
.metric[data-tone="1"] .metric-number { color: #91dfd1; }
.metric[data-tone="1"] .metric-icon { color: #92e0cf; border-color: #7ccebd29; background: #356b6425; }
.metric[data-tone="2"] .metric-icon { color: #dcc096; border-color: #d7b47529; background: #796b3c25; }
.metric[data-tone="3"] .metric-icon { color: #cea5eb; border-color: #c48aef29; background: #74519625; }
.plain-note { margin-top: -3px; color: #8a9bb6; font-size: var(--ui-small); }
.workspace-summary { color: #9aaec9; }
.workspace-summary strong { color: #d8e8ff; }
.credential-summary { gap: 12px; }
.credential-summary>span { background: #132139; border: 1px solid #829dd324; border-radius: 9px; padding: 11px 15px; color: #91a6c7; }
.credential-summary strong { font-size: 16px; color: #c5e0ff; }
.toolbar, .pagination, .tabs { border-color: #677eaa29; }
.toolbar { padding: 16px var(--block-pad); gap: 12px; flex-wrap: wrap; }
.search { min-height: 40px; border-color: #8199c339; color: #8ca6ce; background: #0d182b; border-radius: 9px; }
.search input { color: #e0eaff; font-size: var(--ui-font); }
table { color: #c1cee4; }
th { background: #101a2c; color: #8ea5c8; border-color: #5b739d28; font-size: var(--ui-label); padding: 15px var(--block-pad); }
td { color: #bccde4; border-color: #7187af1d; font-size: var(--ui-font); padding: 16px var(--block-pad); }
tbody tr:nth-child(even) { background: #abc7ff02; }
tbody tr:hover { background: #72a5ef08; }
.table-main, td.mono { font-size: var(--ui-font); }
.table-main { color: #dce9ff; font-weight: 550; }
.table-sub { color: #8d9eb9; font-size: var(--ui-small); }
.task-title-link { color: #d9e8ff; }
.task-detail-link { padding: 9px 13px; font-size: var(--ui-label); }
.delivery-number { color: #8bd7c8; }
.pagination { color: #8498b8; }
.tab { color: #8e9fbd; font-size: var(--ui-label); }
.tab.active { color: #b6d7ff; border-color: #83b8ff; }
.task-status-filter .selected-filter, .btn.selected-filter { color: #bbd8ff; background: #233a5e; border-color: #6f9ad44f; }
.filter-menu summary { color: #93a9c8; }
.filter-popover { background: #16223a; border-color: #57739e55; box-shadow: 0 16px 40px #01051080; }
.pill { border-radius: 6px; font-size: var(--ui-small); }
.pill.green { color: #9ae2c7; background: #17382f; border-color: #386c5866; }
.pill.blue { color: #aecfff; background: #1b3155; border-color: #436d9f66; }
.pill.amber { color: #e8c592; background: #373023; border-color: #7f683e66; }
.pill.red { color: #f3afc0; background: #392637; border-color: #83506866; }
.pill.gray { color: #a6b8d3; background: #1e2a41; border-color: #60769b44; }
.empty { color: #8b9ebc; }
.empty .empty-icon, .item-icon { color: #a1c7ff; background: #1e3353; border-color: #637eae3d; border-radius: 11px; }
.empty h3, .item-card h3 { color: #d4e1f6; }
.empty p, .item-card p { color: #8f9fba; }
.item-card:hover { border-color: #80abe666; }
.item-card .large-number { color: #e2ecfc; }
.item-card .item-bottom, .kv { border-color: #7287b328; }
.kv { color: #90a4c4; }
.kv strong { color: #cedef4; }
.page-footer { color: #8399b7; font-size: var(--ui-small); border-color: #61779c23; margin-top: 24px; }

input, select, textarea { accent-color: #82baff; color: #deebff; }
body .field input, body .field select, body .field textarea, body #detail-group, body [data-owner-for], body #capacity-form input, body .inline-additions input,
body .test-send-form textarea, body .test-send-form select, body .plan-addition-panel input {
  background: #0c172a !important;
  border-color: #6a85b243 !important;
  color: #dce8fb;
  border-radius: 9px;
  font-size: var(--ui-font);
}
body .field input:focus, body .field select:focus, body .field textarea:focus, body .test-send-form textarea:focus, body .test-send-form select:focus {
  border-color: #81b4f3 !important;
  box-shadow: 0 0 0 3px #72b2ff13;
  outline: none;
}
.field label { color: #b6c8e3; font-size: var(--ui-font); }
.field small { color: #8d9fba; font-size: var(--ui-small); }
.field input::placeholder, .field textarea::placeholder, input::placeholder, textarea::placeholder { color: #6d809e; }
.dropzone { color: #8ebaf5; background: linear-gradient(120deg,#172b473d,#172442); border-color: #6f9ace69; border-radius: 12px; }
.dropzone strong { color: #c0ddff; font-size: var(--ui-font); }
.dropzone small { color: #8a9fbc; }
.dropzone:hover, .dropzone.drag { background: #213b60; border-color: #95c5ff; box-shadow: 0 0 0 3px #6ab5ff0c; }
.alert { color: #b6cce9; background: #1a2b44; border-color: #6f91c13b; border-radius: 9px; }
.alert.amber, .test-run-note { color: #ddc395; background: #302b23; border-color: #ae8a483b; }
.form-error.show { color: #f0b5c2; background: #392434; border-color: #995c714d; }
.section-label, .test-send-heading h2 { color: #d7e5f8; }
.section-label i, .step-number { color: #b6d9ff; background: #223858; border-color: #6898d14f; border-radius: 9px; }
.onboarding-card { background: #15213a; border-color: #7795bf33; border-radius: 14px; }
.onboarding-card h3 { color: #dce9fb; }
.onboarding-card p { color: #98aac7; }
.onboarding-card.done { border-color: #628fbe55; }
.onboarding-card.done .step-number { color: #ace0d1; background: #1c3c38; }
.ownership-person.selected { color: #c9e3ff; background: #233a59; border-color: #82ace54d; }
.ownership-person:hover { background: #20334e; }
.ownership-person-avatar, .ownership-empty-avatar { color: #b0d7ff; background: #263b5e; }
.ownership-count, .ownership-total { background: #1c2c47; }
.ownership-context, .plan-addition-panel { background: #182b47; border-color: #6688b54a; }
.ownership-filters, .ownership-forms form { background: #142139; border-color: #6688b53d; }
.ownership-subtitle { color: #94a5c2; }

.overlay { background: #020614ba; backdrop-filter: blur(12px); }
.modal { background: #111c31; border-color: #879dcc45; border-radius: 17px; box-shadow: 0 28px 100px #000617a6, inset 0 1px #dae4ff0a; }
.modal-head { background: #172139; border-color: #7387b12f; padding: 22px 26px; }
.modal-head h2 { color: #e0ebfe; font-size: clamp(17px, 1.1vw, 22px); font-weight: 620; }
.modal-foot { background: #111c30; border-color: #7489b52d; padding: 19px 26px; }
.wizard-nav { background: #0f192b; border-color: #7994bf27; padding: 18px 26px; }
.wizard-nav button { color: #8c9dbc; }
.wizard-nav button b { border-color: #5675a64d; color: #829bbf; border-radius: 7px; }
.wizard-nav button.active { color: #c8dfff; }
.wizard-nav button.active b { color: #c7e4ff; background: #284771; border-color: #7eaef06b; box-shadow: 0 0 16px #69a9ff13; }
.wizard-nav button.done { color: #91bdcb; }
.wizard-fields { padding: 26px 29px; }
.wizard-preview { background: linear-gradient(155deg,#152845,#141e34); border-color: #708eba35; }
.wizard-preview .eyebrow { color: #93b8e1; }
.wizard-meta { border-color: #7595c12b; color: #8da8cb; }
.wizard-review>div { border-color: #6f8cba36; background: #172842; border-radius: 10px; }
.wizard-review small { color: #94a9ca; }
.wizard-review strong { color: #d4e5ff; }
.wizard-foot-hint { color: #8c9ebb; }
.recipient-input-tabs { background: #111e34; border-color: #5779a644; }
.recipient-input-tabs button { color: #95aacc; }
.recipient-input-tabs button.active { background: #29466a; color: #c5e0ff; border-color: #7eabdf55; }
#recipient-paste-panel { background: #122139; border-color: #6687b646; }
.preview-empty, .preview-empty>svg { color: #98bfe9; }
.test-recipient input, .checkrow input { accent-color: #86bcff; }
.import-counts>div { background: #172b45; border-color: #6f94c53b; border-radius: 9px; }
.import-counts span { color: #8da9cc; }
.import-counts strong { color: #d0e7ff; }
.import-issues summary, .inline-additions summary { color: #b3d1f6; }
.template-text, .campaign-preview, .message-preview { color: #c4d7f1; background: #0d1a2f; border-color: #7190bc33; }
.bubble, .variant-preview>div, .wizard-preview .variant-preview>div { background: linear-gradient(130deg,#244c74,#293a65); color: #e1efff; box-shadow: none; }
.variant-preview { border-color: #6181af2b; }
.variant-preview summary { color: #aec6e7; }
.variant-preview summary b { color: #9ecaff; }
.bubble-foot { color: #8fa7c9; }
.test-option, .test-chips span { color: #a9c5e8; background: #1c3550; border-color: #7998be3b; }
.test-results, .test-stats { border-color: #6991b644; }
.test-stats { color: #92afce; }
.test-stats b { color: #c3e0f6; }
.test-send-section { padding: 26px; }
.test-send-heading>span { color: #9bc9ff; background: #233b5c; border-color: #86b2e542; border-radius: 9px; }
.test-send-heading p { color: #91a6c5; }
.test-recipient { background: #12213a; border-color: #56739d42; }
.test-recipient.selected { background: #1d3759; border-color: #83b5f477; }
.test-recipient strong { color: #c9e0fa; }
.test-recipient span span { color: #94afd2; }
.test-credential-search { color: #96b4dc; background: #0d192b; border-color: #6281ad42; border-radius: 9px; }
.test-credential-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.test-credential-mode { position: relative; display: flex; align-items: center; gap: 12px; padding: 17px 15px; border: 1px solid var(--line); border-radius: 12px; background: #101c30; cursor: pointer; }
.test-credential-mode.selected { border-color: #86b9f5; background: #1d3554; box-shadow: inset 0 0 0 1px #86b9f522; }
.test-credential-mode:focus-within { outline: 2px solid #86b9f5; outline-offset: 3px; }
.test-credential-mode input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.test-mode-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: #83b9ff12; color: #a6d3ff; }
.test-credential-mode strong { display: block; color: var(--text); font-size: var(--ui-font); }
.test-credential-mode small { display: block; margin-top: 5px; line-height: 1.5; color: var(--muted); font-size: var(--ui-small); }
.test-mode-check { margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border: 1px solid #627897; border-radius: 50%; color: transparent; }
.test-credential-mode.selected .test-mode-check { border-color: #97c8ff; background: #97c8ff; color: #15233a; }
.test-credential-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #0d1728; }
.test-online-pool { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aec8e8; }
.test-online-pool>span { display: flex; align-items: center; gap: 8px; }
.test-online-pool .dot { background: #8ed9ba; }
.test-online-pool strong { color: var(--text); font-size: 19px; font-variant-numeric: tabular-nums; }
.test-credential-panel .summary-line { margin-bottom: 0; line-height: 1.75; }
.test-body-footer { color: #8ea5c3; }
.test-send-footer { background: #172640; border-top: 1px solid #708fc326; }
.test-send-footer p { color: #a7bcdb; }
.test-send-preview { background: linear-gradient(160deg,#1b2c49,#121c31); border-color: #718ebc33; }
.test-preview-header, .test-preview-bottom { border-color: #7396cc2d; }
.test-preview-header>span:first-child { color: #c2d8f6; }
.test-preview-tag { color: #a3c5f0; border-color: #84a5d34d; }
.test-preview-sender>span, .test-preview-bottom { color: #95acce; }
.test-preview-sender>strong { color: #d2e4fe; }
.test-preview-bubble { background: linear-gradient(130deg,#275078,#2c3d6e); color: #e4f1ff; border-radius: 15px 15px 4px 15px; }
.test-preview-bubble.empty { color: #8fa8cd; background: #15253d; border-color: #698bb74d; }
.test-result-metrics { background: #17253a; }
.test-result-metrics>div { border-color: #6f8cbb2d; }
.test-result-metrics span { color: #8fa8c9; }
.test-result-metrics strong { color: #dce9ff; }
.test-sent-content summary { color: #abc6ec; }
.test-result-table .test-result-sender { color: #b7cae6; }
.test-history-row.active { background: #243a57; box-shadow: inset 3px 0 #7fb9ff; }
.test-history-item:hover { background: #20314c; }
.test-history-meta, .test-history-item>div:first-child>span { color: #93a7c6; }
.cluster-connection { background: #15243c; border-color: #6a8cba36; }
.cluster-connection.connected { background: #20385566; border-color: #74a1d94a; }
.cluster-connection.connected>div { color: #b9dbff; }
.gateway-run-label { color: #a6ccf5; border-color: #7ba9db3b; background: #213a552b; }
.gateway-node { color: #94bdea; }
.reading-status,
.message-status-table .reading-status,
.test-result-table .reading-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.reading-status-line { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 2px 7px; border: 1px solid #7784a529; border-radius: 5px; background: #7784a50a; }
.reading-status-mark { display: inline; width: auto; height: auto; border-radius: 0; color: #8291aa; background: none; font: 16px/1 system-ui,sans-serif; }
.reading-status strong { display: inline; color: #97a8c1; font-size: var(--ui-small); font-weight: 500; }
.reading-status.is-read { background: none; border: 0; }
.reading-status.is-read .reading-status-line { border-color: #a79bff38; background: #7762b514; }
.reading-status.is-read .reading-status-mark { color: #c1b4ff; background: none; }
.reading-status.is-read strong { color: #d0c7ff; }
.reading-status time { color: #8e9cb6; font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.receipt-timing { color: #a0b3d1; }
.receipt-elapsed, .receipt-elapsed strong { color: #98b2d1; }

.campaign-performance, .client-report { background: radial-gradient(ellipse at 100% 0,#393f7c30,transparent 58%),#142038; border-color: #7395c942; }
.performance-label, .report-brand { color: #a1bce0; }
.performance-heading h2, .report-header h2 { color: #edf4ff; }
.performance-heading p, .performance-stamp small, .performance-foot, .report-client, .report-meta, .report-footer { color: #95aac9; }
.performance-counts, .report-metrics { border-color: #7792bb36; }
.performance-counts>div, .report-metrics>div { border-color: #7792bb36; }
.performance-counts span, .report-metrics span { color: #9bb0cf; }
.performance-counts strong, .report-metrics strong { color: #e0ecff; }
.performance-rate, .report-results .performance-rate { --rate-accent: #9bcafb; background: #1b324940; border-color: #688eb84d; }
.performance-rate.reading, .report-results .performance-rate.reading { --rate-accent: #b6afff; background: #34345a55; border-color: #a59af34a; }
.performance-rate h3, .performance-rate.reading h3 { color: #cfddf3; }
.performance-rate p { color: #c6d5ed; }
.performance-rate p span, .performance-rate>small, .performance-rate.reading>small { color: #95abc9; }
.performance-rate>small, .performance-rate.reading>small { border-color: #839eca2d; }
.rate-ring::before, .performance-rate.reading .rate-ring::before { background: #16253b; }
.client-report-body { background: #111b30; }
.client-report { border-top-color: #8eaff6; }
.client-report-modal .modal-head { background: #132039; }
.report-message { background: linear-gradient(135deg,#1a3150,#202b4b); border-color: #7a9ac44a; }
.report-message-text { color: #dce9fb; }
.report-message>footer, .report-footer { border-color: #718ebb33; }
.report-section-title h3, .report-message h4 { color: #ccddf7; }
.report-version-number { border-color: #789bd54a; color: #b0cefa; }
.report-brand svg, .report-section-title h3 svg { color: #9cc7ff; }
.report-meta time, .report-footer strong { color: #c3d6f2; }
.toast { background: #1c344c; border-color: #75a8df59; color: #c7e4ff; border-radius: 10px; }
.toast.error { background: #402539; border-color: #c27a924d; color: #f3bfce; }
.command-links a { background: #172a45; border-color: #617ea63d; color: #bfd6f4; }
.command-links a:hover { background: #243e60; border-color: #8bb5ee61; }
.system-facts, .node-stats { background: #13223a; border-color: #6c8cbb33; }
.system-facts strong, .node-stats b { color: #cce3fd; }
.login-page, .login-form-area { background: #0c1426; }
.login-visual { background: radial-gradient(ellipse at 40% 55%,#3c5daa2b,transparent 60%),#101a30; border-color: #6a83b731; }
.login-copy h1 { color: #edf3ff; font-weight: 650; }
.login-copy p, .login-foot { color: #91a7cd; }
.login-visual .orb { border-color: #8fb6ff29; background: radial-gradient(circle at 35% 30%,#8aabff25,#5465bb08 65%,transparent); box-shadow: 0 0 90px #5871e81a; }
.orb::before, .orb::after { border-color: #869ff42b; }
.login-form h2 { color: #e1edff; }
.login-form>p, .login-form .footnote { color: #95a8c8; }
.eyebrow { color: #9fc3f7; }
.spinner { border-color: #3c5378; border-top-color: #8bc4ff; }

.page-title>div, .card-head>div, .grid2>*, .test-send-workspace>* { min-width: 0; }
.page-title>.row, .card-head, .modal-foot, .test-send-footer { flex-wrap: wrap; }
.summary-line, .kv, .pagination, .test-stats, .wizard-review small,
.wizard-meta, .wizard-foot-hint, .wizard-preview .summary-line,
.test-body-footer, .test-preview-bottom, .test-preview-sender>span,
.test-send-results .card-head p, .test-history-meta,
.performance-foot, .performance-stamp small, .report-footer,
.receiver-instructions, .receiver-scope, .monitor-help { font-size: var(--ui-small); }
.alert, .checkrow, .section-label, .test-sent-content,
.wizard-nav button, .wizard-review strong, .wizard-preview .variant-preview>div,
.test-send-heading p, .test-preview-bubble, .test-preview-sender>strong,
.test-credential-search input, .test-history-item strong,
.test-history-item>div:first-child>span, .reading-status strong,
.ownership-person-name, .ownership-context, .report-message-text { font-size: var(--ui-font); }
.reading-status small, .receipt-timing, .receipt-elapsed,
.test-recipient strong, .test-recipient .mono, .test-result-metrics span,
.performance-counts span, .performance-rate>small,
.report-metrics span, .performance-rate p { font-size: var(--ui-small); }
.test-result-table .table-main, .test-result-table .test-result-sender { font-size: var(--ui-font); }
.test-send-heading h2, .ownership-people .card-head h2 { font-size: clamp(15px, .85vw, 17px); }
.test-result-metrics strong { font-size: clamp(26px, 1.5vw, 32px); }
.test-send-section { padding: var(--block-pad); }
.test-send-footer { gap: 14px; }
.test-recipient-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.section-label { line-height: 1.5; }
.table-wrap { width: 100%; }
.search { width: clamp(240px, 24vw, 440px); max-width: 100%; }
.tabs { overflow-x: auto; }
.modal { max-height: calc(100dvh - 32px); }
.client-report-modal .modal-head h2 { font-size: clamp(17px, 1.1vw, 22px); }
.modal.campaign-wizard { width: min(1240px, calc(100vw - 40px)); max-width: 1240px; height: min(880px, calc(100dvh - 40px)); }
.wizard-shell.modal-body { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px); }
.wizard-fields, .wizard-preview { padding: var(--block-pad); }
.wizard-nav button { min-height: 36px; }
.wizard-nav button b { flex-shrink: 0; }
.login-visual { padding: clamp(28px, 4vw, 80px); }
.login-copy h1 { font-size: clamp(30px, 2.3vw, 44px); }
.login-copy p { max-width: 34em; font-size: var(--ui-font); }
.login-form { width: min(100%, clamp(340px, 25vw, 460px)); }
.login-form h2 { font-size: clamp(24px, 1.6vw, 34px); }
.login-form>p { font-size: var(--ui-font); }
.login-form .footnote, .login-foot { font-size: var(--ui-small); }

.credential-batch-panel { padding: 18px var(--block-pad); margin-bottom: 16px; }
.credential-batch-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.credential-batch-toolbar .field { flex: 1; min-width: 220px; margin-bottom: 0; }
.credential-batch-toolbar>.pill { align-self: center; }
.credential-batch-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 14px; color: var(--muted); font-size: var(--ui-small); }
.credential-login-progress { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.credential-login-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.credential-login-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: #1b2940; color: #8dabc9; }
.credential-login-heading strong { color: #b9cce3; font-size: var(--ui-font); font-weight: 550; }
.credential-login-heading p { margin: 5px 0 0; color: var(--muted); font-size: var(--ui-small); line-height: 1.5; }
.credential-login-count { padding: 2px 6px; border-radius: 5px; background: #ffffff0b; font: 12px/1.4 "SFMono-Regular",Consolas,monospace; }
.credential-login-progress.is-running .credential-login-icon { background: #203b5b; color: #8ec9ff; }
.credential-login-progress.is-running .credential-login-heading strong, .credential-login-progress.is-selected .credential-login-heading strong { color: #9dceff; }
.batch-warning { color: var(--orange); }
.credential-batch-progress { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; color: var(--muted); font-size: var(--ui-small); }
.credential-batch-progress>span { color: #8fb9e7; }
.import-batch-list { display: grid; gap: 16px; }
.import-batch-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #142039; min-width: 0; }
.import-batch-card>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.import-batch-card h3 { margin: 0; font-size: var(--ui-font); overflow-wrap: anywhere; }
.import-batch-card>header p { margin: 7px 0 0; color: var(--muted); font-size: var(--ui-small); }
.import-batch-card>header>.pill { flex-shrink: 0; }
.import-batch-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px 0; margin-top: 16px; border-top: 1px solid var(--line); }
.import-batch-counts>span { color: var(--muted); font-size: var(--ui-small); }
.import-batch-counts strong { display: block; margin-top: 7px; font: 24px/1.2 "SFMono-Regular",Consolas,monospace; color: var(--text); }
.import-batch-counts>span:nth-child(2) strong { color: #91dfd1; }
.import-batch-counts>span:nth-child(3) strong { color: #a6ccff; }
.import-batch-counts>span:nth-child(4) strong { color: var(--orange); }
.import-batch-card>.summary-line { margin: 0; }
.import-batch-card>footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.import-batch-card>footer>span { color: var(--muted); font-size: var(--ui-small); }
.import-batch-errors { margin-top: 14px; color: var(--orange); font-size: var(--ui-small); }
.import-batch-errors summary { cursor: pointer; }
.import-batch-errors[open] { max-height: 240px; overflow-y: auto; }
.import-batch-errors p { margin: 8px 0 0; overflow-wrap: anywhere; }

/* Login progress is separate; attention includes disabled credentials. */
.credential-states { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.credential-state-card { --state-color: #a5bfff; position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; min-width: 0; gap: 14px; padding: 22px 20px; border: 1px solid var(--line); border-radius: 12px; background: #101b2e; color: var(--muted); text-align: left; cursor: pointer; transition: border-color .15s,background .15s; }
.credential-state-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--state-color); background: #ffffff06; }
.credential-state-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.credential-state-card.is-ready { --state-color: #87ddc6; }
.credential-state-card.is-attention { --state-color: #e9bf79; }
.credential-state-card:hover { border-color: var(--state-color); background: #16233a; }
.credential-state-card.active { border-color: var(--state-color); background: linear-gradient(140deg,#1b2b43,#111d30); box-shadow: inset 0 3px var(--state-color); }
.credential-state-card:focus-visible,.credential-issue:focus-visible { outline: 2px solid #8abbff; outline-offset: 3px; }
.credential-state-title { display: flex; align-items: center; gap: 7px; font-size: var(--ui-font); color: #bbcee8; white-space: nowrap; }
.credential-state-card strong { font: 500 28px/1.1 "SFMono-Regular",Consolas,monospace; color: var(--state-color); }
.credential-state-card small { font-size: var(--ui-small); line-height: 1.4; }
.credential-list-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px var(--block-pad); border-bottom: 1px solid var(--line); }
.credential-list-head h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; font-size: 15px; }
.credential-list-head h2>span { padding: 3px 7px; border-radius: 5px; color: #a7c7f2; background: #23324a; font: 11px/1.1 "SFMono-Regular",Consolas,monospace; }
.credential-list-head small { color: var(--muted); font-size: var(--ui-small); }
.credential-list-head .search { width: min(350px,100%); }
.credential-issues { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px var(--block-pad); border-bottom: 1px solid var(--line); background: #0d1728; }
.credential-issue { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #28364a; border-radius: 7px; background: transparent; color: #99adc7; font: inherit; font-size: var(--ui-small); cursor: pointer; }
.credential-issue span { color: #c5d5e9; font: 11px "SFMono-Regular",Consolas,monospace; }
.credential-issue:hover,.credential-issue.active { color: #f1d095; border-color: #8b7250; background: #352e23; }
.credential-issue.active span { color: #f1d095; }
.credential-status-table { min-width: 930px; }
.credential-status-table td:first-child { min-width: 240px; }
.credential-status-table td:nth-child(2) { min-width: 205px; }
.credential-status-description { max-width: 280px; line-height: 1.5; }
.credential-connection { display: inline-flex; align-items: center; gap: 6px; color: #9aaac0; white-space: nowrap; }
.credential-connection i { width: 6px; height: 6px; background: #687990; border-radius: 50%; }
.credential-connection.online { color: #8bdbc5; }
.credential-connection.online i { background: #8bdbc5; box-shadow: 0 0 7px #8bdbc533; }
@media(max-width:1100px) {
  .credential-states { gap: 9px; }
  .credential-state-card { padding: 18px 14px; gap: 10px; }
  .credential-state-icon { width: 32px; height: 32px; }
  .credential-state-title { font-size: 11px; }
  .credential-state-card small { font-size: 10px; }
}
@media(max-width:700px) {
  .credential-states { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .credential-state-card { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .credential-state-card.is-all { grid-column: 1 / -1; }
  .credential-state-icon { display: none; }
  .credential-login-progress { align-items: flex-start; }
  .credential-login-heading { align-items: flex-start; flex: 1 1 100%; }
  .credential-login-progress>.btn { margin-left: 45px; }
  .credential-state-card strong { font-size: 25px; }
  .credential-state-title { font-size: 12px; white-space: normal; }
  .credential-list-head { align-items: stretch; }
  .credential-list-head .search { width: 100%; }
}
.batch-page-label { margin-right: auto; align-self: center; color: var(--muted); font-size: var(--ui-small); }

@media (max-width: 1280px) {
  .nav-index { display: none; }
  .signal-hero .workspace-summary { gap: 8px; }
  .hero-orbit { right: 10px; opacity: .55; }
  .test-send-workspace { grid-template-columns: minmax(0, 1fr); }
  .test-send-preview { position: static; }
}
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-title { align-items: flex-start; }
  .page-title>.row { flex-wrap: wrap; }
  .ownership-workspace { grid-template-columns: minmax(0, 1fr); }
  .receiver-sample-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .page-title { flex-direction: column; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .wizard-shell.modal-body { display: block; overflow-y: auto; }
  .wizard-fields, .wizard-preview { overflow: visible; }
  .wizard-preview { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  :root { --content-pad: 18px; --block-pad: 18px; --ui-number: 32px; }
  body .side { top: 0; left: 0; bottom: 0; width: 238px; border-radius: 0 18px 18px 0; background: linear-gradient(165deg,#172039,#0e1629 65%); transform: translateX(-105%); z-index: 70; }
  body.menu-open .side { transform: translateX(0); }
  body .main { margin-left: 0; }
  body .topbar { height: 65px; padding: 0 18px; }
  .mobile-toggle { display: flex; }
  .top-right { gap: 9px; }
  .topbar .btn.subtle { border: 0; background: transparent; font-size: 0; padding: 8px; }
  .topbar .btn.subtle kbd { display: none; }
  .userbox>span { display: none; }
  .crumb { font-size: 12px; gap: 8px; }
  body .content { padding: 24px 17px; }
  .page-title { align-items: flex-start; gap: 18px; }
  .page-title h1, .signal-hero .page-title h1 { font-size: 26px; }
  .page-title .btn { font-size: var(--ui-font); }
  .page-eyebrow { font-size: 9px; }
  .signal-hero { padding: 22px 18px; border-radius: 15px; }
  .signal-hero .page-title { flex-direction: column; gap: 22px; margin-bottom: 23px; }
  .signal-hero .page-title>.row { width: 100%; }
  .signal-hero .page-title>.row .btn { width: 100%; }
  .hero-orbit { width: 230px; height: 230px; bottom: -120px; right: -70px; }
  .metric-top, .simple-metrics .metric-top { font-size: 12px; }
  .metric-icon { width: 27px; height: 27px; }
  .metrics { gap: 11px; }
  .card-head { padding: 18px; gap: 12px; }
  .card-head h2 { font-size: 15px; }
  .test-send-section { padding: 18px; }
  .test-credential-modes { grid-template-columns: minmax(0, 1fr); }
  .test-send-footer { padding: 18px; }
  .modal.campaign-wizard { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .wizard-nav { padding: 12px 18px; }
  .wizard-nav button, .wizard-nav button span { font-size: 11px; }
  .modal-head, .modal-foot { padding: 18px 20px; }
  .toolbar { padding: 17px; }
  .credential-summary>span { padding: 8px 11px; font-size: 11px; }
  .credential-summary strong { font-size: 15px; }
  .login-visual { min-height: auto; padding: 28px; }
  .login-form-area { padding: 32px 24px; }
  .login-copy { margin: 28px 0 0; }
  .login-copy h1 { font-size: 28px; }
  .login-form { max-width: 460px; }
}
@media (max-width: 480px) {
  .credential-batch-toolbar .field { flex-basis: 100%; min-width: 0; }
  .import-batch-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .import-batch-card>footer { flex-wrap: wrap; }
  .import-batch-card>footer>.btn { width: 100%; }
  .metric-icon { display: none; }
  .metric-number, .simple-metrics .metric-number { font-size: 26px; letter-spacing: -1.5px; }
  .simple-metrics .metric, .metric { padding: 16px 12px; }
  .metric-bottom, .simple-metrics .metric-bottom { font-size: 11px; }
  .toolbar { align-items: stretch; }
  .search { width: 100%; }
  .toolbar>.row { flex-wrap: wrap; }
  .grid2 { gap: 18px; }
  .login-page { grid-template-columns: minmax(0, 1fr); }
}
.campaign-draft-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.campaign-draft-toolbar .btn { flex-shrink: 0; }
.dashboard-date-filter { padding: 16px var(--block-pad); margin-bottom: 16px; }
.dashboard-date-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dashboard-date-presets { display: flex; gap: 5px; flex-wrap: wrap; }
.dashboard-date-presets .btn { background: transparent; border-color: transparent; }
.dashboard-date-presets .selected-filter { background: #254264; border-color: #77b8f566; color: #d9edff; }
.dashboard-date-label { display: flex; align-items: center; gap: 12px; }
.dashboard-date-label strong { font-size: var(--ui-font); font-variant-numeric: tabular-nums; }
.dashboard-date-label span { font-size: var(--ui-small); color: var(--muted); }
.dashboard-custom-dates { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 18px; margin-top: 16px; border-top: 1px solid var(--line); }
.dashboard-custom-dates[hidden] { display: none; }
.dashboard-custom-dates label { display: grid; gap: 8px; color: var(--muted); font-size: var(--ui-label); }
.dashboard-custom-dates input { min-height: 40px; width: 172px; }
.dashboard-custom-dates .form-error.show { flex-basis: 100%; margin: 0; }
.dashboard-date-separator { padding-bottom: 12px; color: var(--muted); }
.dashboard-metrics { margin-bottom: 18px; }
.dashboard-metrics .metric[data-tone="2"] .metric-number { color: #b7c5ff; }
.dashboard-trend { margin-bottom: 18px; overflow: hidden; }
.dashboard-trend .card-head>div:first-child { display: grid; gap: 6px; }
.dashboard-legend { display: flex; gap: 20px; color: var(--muted); font-size: var(--ui-label); }
.dashboard-legend span { display: flex; align-items: center; gap: 7px; }
.dashboard-legend i { width: 8px; height: 8px; border-radius: 3px; }
.dashboard-legend .sent { background: #77b9ff; }
.dashboard-legend .delivered { background: #72d5bc; }
.dashboard-chart-scroll { padding: 22px var(--block-pad) 18px; overflow-x: auto; }
.dashboard-trend-plot { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 12px; min-width: 600px; }
.dashboard-chart-axis { height: 220px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dashboard-chart-canvas { position: relative; }
.dashboard-chart-lines { position: absolute; inset: 0 0 28px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.dashboard-chart-lines span { border-top: 1px solid #768fb51c; }
.dashboard-chart-columns { position: relative; display: grid; gap: 6px; }
.dashboard-chart-column { min-width: 0; text-align: center; }
.dashboard-chart-bars { height: 220px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.dashboard-chart-bars i { display: block; width: 32%; max-width: 24px; border-radius: 4px 4px 0 0; }
.dashboard-chart-bars .sent { background: linear-gradient(0deg,#477ecc,#8ccaff); }
.dashboard-chart-bars .delivered { background: linear-gradient(0deg,#3a9c8d,#90e8cd); }
.dashboard-chart-column:hover .dashboard-chart-bars i { filter: brightness(1.2); }
.dashboard-chart-label { display: block; height: 28px; padding-top: 10px; color: var(--muted); white-space: nowrap; font-size: 11px; }
.dashboard-chart-empty { position: absolute; inset: 0 0 28px; display: grid; place-items: center; color: var(--muted); }
.dashboard-method { border-top: 1px solid var(--line); color: var(--muted); padding: 14px var(--block-pad); font-size: var(--ui-small); line-height: 1.7; }
.task-action-group { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.dashboard-plans .card-head>div { display: grid; gap: 6px; }
.performance-foot { justify-content: flex-end; }
@media (max-width: 760px) {
  .dashboard-date-label { width: 100%; }
  .dashboard-custom-dates label { flex: 1; }
  .dashboard-custom-dates input { min-width: 0; width: 100%; }
  .dashboard-custom-dates .btn { width: 100%; }
}
.test-number-entry { padding: var(--block-pad); border-bottom: 1px solid var(--line); }
.test-number-entry h2 { margin: 0 0 20px; font-size: 16px; }
.test-number-add {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr) auto;
  gap: 18px;
  align-items: start;
}
.test-number-add .form-error { grid-column: 1 / -1; margin: 0; }
.test-number-add .field { margin: 0; }
.test-number-add > .btn { margin-top: calc(var(--ui-font) * 1.6 + 17px); }
.test-number-workspace th.test-number-action,
.test-number-workspace td.test-number-action { width: 100px; text-align: right; }
@media (max-width: 760px) {
  .test-number-add { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .test-number-add > .btn { margin-top: 0; width: 100%; }
}
.monitor-simple-form { padding: var(--block-pad); }
.monitor-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; }
.monitor-toggle strong { display: block; color: var(--text); font-size: var(--ui-font); }
.monitor-toggle small { display: block; margin-top: 6px; color: var(--muted); font-size: var(--ui-small); }
.monitor-toggle input { appearance: none; width: 40px; height: 23px; flex-shrink: 0; border: 1px solid #5c718e; border-radius: 20px; background: #26354b; cursor: pointer; padding: 0; }
.monitor-toggle input::before { content: ''; display: block; width: 15px; height: 15px; margin: 3px; border-radius: 50%; background: #b1bed0; transition: transform .15s; }
.monitor-toggle input:checked { background: #5aa5ed; border-color: #88c9ff; }
.monitor-toggle input:checked::before { transform: translateX(17px); background: #f0f8ff; }
.monitor-toggle input:focus-visible { outline: 2px solid #9bcfff; outline-offset: 3px; }
.monitor-config { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.monitor-config[hidden] { display: none; }
.monitor-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: var(--ui-font); }
.monitor-section-title .link { display: flex; align-items: center; gap: 5px; font-size: var(--ui-small); }
.monitor-source-list { max-height: 220px; margin-bottom: 18px; }
.monitor-source .monitor-source-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-frequency, .monitor-instructions { padding: 15px 0; border-top: 1px solid var(--line); font-size: var(--ui-label); }
.monitor-frequency summary, .monitor-instructions summary { cursor: pointer; color: #c5d9f1; }
.monitor-frequency-value { margin-left: 15px; color: var(--muted); font-size: var(--ui-small); }
.monitor-frequency .grid2 { margin-top: 18px; }
.monitor-instructions p { color: var(--muted); font-size: var(--ui-small); line-height: 1.8; margin: 12px 0 0; }
.monitor-simple-actions { display: flex; gap: 10px; margin-top: 20px; }
.monitor-status-note { display: flex; align-items: flex-start; gap: 10px; padding: 16px var(--block-pad); background: #6c4a1726; color: #ebca94; font-size: var(--ui-label); line-height: 1.8; }
.monitor-status-times { display: flex; flex-wrap: wrap; gap: 14px 30px; padding: 16px var(--block-pad) 0; color: var(--muted); font-size: var(--ui-small); }
.monitor-status-times strong { color: var(--text); font-weight: 500; margin-left: 8px; }
@media (max-width: 760px) {
  .monitor-frequency-value { display: block; margin: 7px 0 0 15px; }
}
.message-state-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 2px 7px; border: 1px solid #7b8ba62e; border-radius: 5px; background: #7786a20a; color: #a1afc3; font-size: var(--ui-small); white-space: nowrap; }
.message-state-badge.is-sent, .message-state-badge.is-sending { color: #a0c7ff; background: #679ee512; border-color: #679ee536; }
.message-state-badge.is-delivered { color: #9dcfdf; background: #64adca0d; border-color: #6db1cb32; }
.message-state-badge.is-failed { color: #f1acb7; background: #d3789010; border-color: #d3789033; }
.message-state-badge.is-uncertain { color: #d9c19a; background: #c8a76b0d; border-color: #c8a76b30; }
.message-status-table, .test-result-table { min-width: 780px; }
.receipt-table { table-layout: fixed; }
.receipt-table th:nth-child(1) { width: 19%; }
.receipt-table th:nth-child(2) { width: 24%; }
.receipt-table th:nth-child(3) { width: 20%; }
.receipt-table th:nth-child(4) { width: 14%; }
.receipt-table th:nth-child(5) { width: 23%; }
.receipt-table td { overflow-wrap: anywhere; }
.receipt-table .send-status-reason { max-width: 230px; line-height: 1.6; }
.message-status-table.has-extra-columns { min-width: 980px; }
.message-status-table td, .test-result-table td { padding: 10px 18px; vertical-align: middle; border-color: #6f84a819; }
.message-status-table th, .test-result-table th { padding: 12px 18px; color: #97a9c5; }
.message-status-table .reading-cell { min-width: 130px; }
.message-status-table .mono { color: #c1cde0; font-weight: 500; }
.message-status-table .receipt-timing, .test-result-table .receipt-timing { gap: 5px; font-size: 11px; line-height: 1.5; }
.send-status-filters { padding: 12px 18px; gap: 6px; }
.send-status-filter, .reading-filter { min-height: 31px; padding: 6px 10px; font-size: var(--ui-small); color: #9dadc6; }
.send-status-filter { background: transparent; border-color: #65789433; }
.send-status-filter.active { background: #223854; border-color: #6b94c44d; color: #c4dcff; }
.reading-filter-bar { padding: 10px 18px; background: #101a2b; }
.reading-filter.active { background: #23324b; border-color: #6788b13d; color: #c9daef; }
.reading-filter.confirmed.active { background: #332b4f; border-color: #9b87cb4d; color: #d0c3f4; }
.reading-filter:focus-visible { outline-color: #a9b6f7; }
.credential-scope { background: #15253d; border-color: #6a86af32; }
.credential-scope strong, .credential-scope span, .credential-sender-link { color: #b4c8e6; }
.progress-card .progress i { background: linear-gradient(90deg,#739ee0,#a5b7fc); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}