/* Espelhamento Blip x Reda: shared visual language for the operational workspace. */
:root {
  --bg: #f3f7fc;
  --surface: #fff;
  --surface-soft: #f8fbff;
  --text: #07111f;
  --muted: #51627a;
  --line: #d8e3f1;
  --green: #061121;
  --green-light: #eef5ff;
  --brand-black: #061121;
  --brand-white: #fff;
  --primary: #0b5cff;
  --primary-soft: #eaf2ff;
  --cyan: #19a7b8;
  --success: #22a66a;
  --warning: #dc8a19;
  --danger: #d94a5d;
  --nav-bg: #050b18;
  --nav-hover: #101b2d;
  --radius: 16px;
}
body { font-family: "Aptos", "Inter", "Roboto", "Segoe UI", Arial, sans-serif; font-size: 15px; color: var(--text); background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 46%, #f6f9fd 100%); }
h1, h2, h3, .brand { font-family: "Aptos Display", "Aptos", "Inter", "Segoe UI", Arial, sans-serif; }
h1 { font-size: 34px; font-weight: 760; letter-spacing: 0; }
h2 { font-size: 19px; font-weight: 720; letter-spacing: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline-color: var(--primary); }
.sidebar { background: linear-gradient(180deg, #07111f 0%, #050b18 54%, #030712 100%); color: var(--brand-white); border: 0; width: 240px; padding: 22px 18px 28px; box-shadow: inset -1px 0 #ffffff08; transition: width .22s ease, padding .22s ease; }
.sidebar-head { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 18px; }
.brand { flex: 1; min-width: 0; font-size: 22px; gap: 8px; letter-spacing: 0; align-items: flex-start; flex-direction: column; padding: 4px 0 0 10px; }
.brand-logo { width: 124px; max-width: 100%; height: auto; display: block; border-radius: 8px; filter: drop-shadow(0 10px 18px #00000040); }
.brand-copy { display: grid; gap: 1px; line-height: 1.05; padding-left: 2px; }
.brand small { color: #b9c8dc; font-size: 10.5px; letter-spacing: 0; margin-top: 1px; }
.sidebar-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff1f; border-radius: 9px; color: #dce7f6; background: #ffffff0d; cursor: pointer; flex-shrink: 0; transition: background .18s ease, color .18s ease, transform .22s ease; }
.sidebar-toggle:hover { background: #ffffff18; color: #fff; }
.sidebar-toggle .icon { width: 18px; height: 18px; }
.brand-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #2c64e7; color: white; flex-shrink: 0; }
.brand-symbol .icon { width: 26px; height: 26px; }
.nav-caption { color: #9db0ca; font-size: 10.5px; }
.nav-link { color: #dce7f6; font-size: 14px; padding: 13px 12px; border-radius: 10px; }
.nav-link:hover { background: var(--nav-hover); color: #fff; }
.nav-link.active { background: #fff; color: #07111f; box-shadow: inset 4px 0 var(--primary), 0 12px 28px #00000026; }
.nav-link .icon { width: 19px; height: 19px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.readonly { color: #6ee7b7; font-size: 11.5px; }
.sidebar-bottom > small, .user-block small { color: #aebdd1; font-size: 10.5px; }
.user-block { border-color: #242a33; }
.user-block strong { font-size: 12.5px; }
.avatar { background: var(--primary); color: #fff; }
.logout { color: #d6dce5; font-size: 12.5px; }
.workspace { margin-left: 240px; transition: margin-left .22s ease; }
.sidebar-collapsed .sidebar { width: 78px; padding-inline: 12px; }
.sidebar-collapsed .workspace { margin-left: 78px; }
.sidebar-collapsed .sidebar-head { justify-content: center; }
.sidebar-collapsed .brand { display: none; }
.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }
.sidebar-collapsed .nav-caption, .sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-bottom small, .sidebar-collapsed .user-block div, .sidebar-collapsed .logout, .sidebar-collapsed .readonly { display: none; }
.sidebar-collapsed .nav-link { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .nav-link.active { box-shadow: inset 0 -4px var(--primary), 0 12px 28px #00000026; }
.sidebar-collapsed .sidebar-bottom { padding-inline: 0; }
.sidebar-collapsed .user-block { justify-content: center; border-top: 0; padding-top: 0; }
.topbar { font-size: 13px; color: var(--muted); height: 62px; background: #fbfdffcc; backdrop-filter: blur(10px); }
main#main-content { padding: 30px 32px 24px; max-width: 1760px; }
.page-heading { gap: 18px; margin-bottom: 24px; }
.page-heading .muted { font-size: 14px; color: #536780; }
.eyebrow { font-size: 11px; color: var(--primary); letter-spacing: 0; }
.tabs { gap: 28px; margin-bottom: 18px; }
.tab { font-size: 14px; color: #536780; }
.tab.selected { color: #07111f; border-color: #07111f; }
.filters { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; gap: 12px; box-shadow: 0 12px 32px #14376508; }
.filters label { font-size: 12px; font-weight: 700; color: #334761; }
.filters input, .filters select { font-size: 13px; min-height: 42px; border-color: #cfdcee; color: #07111f; background-color: #fbfdff; }
.filters input:focus, .filters select:focus { border-color: #9dbdf5; box-shadow: 0 0 0 3px #0b5cff14; outline: none; }
.button { font-size: 13px; border-radius: 8px; min-height: 42px; border-color: #ccd9eb; color: #07111f; }
.button:hover { background: var(--primary-soft); border-color: #9fb9ea; }
.button.primary { background: var(--brand-black); border-color: var(--brand-black); }
.button.primary:hover { background: #101b2d; }
.button.small { font-size: 12px; min-height: 36px; }
.button.tiny { font-size: 11px; min-height: 32px; }
.button:disabled { cursor: wait; opacity: .6; }
.refresh-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; max-width: 440px; }
.live-label { font-size: 12px; color: #08704c; background: #ecfbf5; border-color: #cceedd; white-space: nowrap; }
.refresh-error { font-size: 12px; color: #9b4e15; text-align: right; }
[hidden] { display: none !important; }
.collection-health { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 13px 16px; border: 1px solid #d9e5f3; border-radius: 10px; background: #fff; font-size: 12px; color: #5b6e87; margin-bottom: 24px; box-shadow: 0 10px 28px #14376508; }
.health-title { display: flex; align-items: center; gap: 8px; color: #08704c; }
.collection-health.attention { background: #fff9ed; border-color: #f2d49b; }
.collection-health.attention .health-title { color: #8a5a0c; }
.collection-health.attention .dot { background: #d28a13; }
.collection-health small { flex-basis: 100%; font-size: 12px; }
.collection-health .text-link { margin-left: auto; }
.journey-panel { padding: 18px; display: flex; flex-direction: column; margin-bottom: 22px; }
.journey-panel .section-label { margin-bottom: 14px; }
.journey-panel .footnote { margin: 14px 0 0; }
.section-label h2 { font-size: 17px; }
.section-label > span { font-size: 12px; }
.metrics-grid { gap: 14px; }
.journey-panel .metrics-grid { grid-template-columns: repeat(8, minmax(136px, 1fr)); gap: 10px; overflow-x: auto; padding-block: 2px 8px; }
.journey-panel .metric-card.featured { grid-column: auto; }
.metric-card { --metric-accent: #6298e9; position: relative; isolation: isolate; overflow: hidden; min-height: 150px; padding: 14px 12px 0; border: 1px solid color-mix(in srgb, var(--metric-accent) 34%, #dce6f3); border-top: 3px solid var(--metric-accent); background: #fff; box-shadow: 0 10px 24px #163b6610; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.metric-card:hover, .metric-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--metric-accent) 58%, #b7c8de); box-shadow: 0 16px 38px #163b6620; }
.metric-content { position: relative; z-index: 2; transition: opacity .2s ease, transform .24s ease; }
.metric-hover { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px; text-align: center; color: #07111f; background: linear-gradient(145deg, color-mix(in srgb, var(--metric-accent) 18%, white) 0%, #fff 45%, color-mix(in srgb, var(--metric-accent) 32%, white) 100%); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .2s ease, transform .24s ease; pointer-events: none; }
.metric-hover::before { content: ""; position: absolute; inset: 9px; border: 1px solid color-mix(in srgb, var(--metric-accent) 42%, transparent); border-radius: 10px; opacity: .75; }
.metric-hover-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--metric-accent); box-shadow: 0 12px 24px color-mix(in srgb, var(--metric-accent) 26%, transparent); }
.metric-hover-icon .icon { width: 20px; height: 20px; }
.metric-hover-number { position: relative; z-index: 1; font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-hover strong { position: relative; z-index: 1; font-size: 16px; line-height: 1.1; }
.metric-hover small { position: relative; z-index: 1; max-width: 112px; color: #536780; font-size: 11px; line-height: 1.25; }
.metric-card:hover .metric-content, .metric-card:focus-visible .metric-content { opacity: 0; transform: translateY(-8px) scale(.98); }
.metric-card:hover .metric-hover, .metric-card:focus-visible .metric-hover { opacity: 1; transform: translateY(0) scale(1); }
.metric-card.featured { --metric-accent: #78a7ff; background: linear-gradient(150deg, #07111f 0%, #101b2d 62%, #152844 100%); border-color: #07111f; color: #fff; }
.metric-card.featured .metric-hover { color: #fff; background: linear-gradient(145deg, #07111f 0%, #152844 55%, #1e4ea3 100%); }
.metric-card.featured .metric-hover::before { border-color: #ffffff30; }
.metric-card.featured .metric-hover small { color: #dce8ff; }
.metric-card.featured .metric-hover-icon { color: #07111f; background: #fff; }
#metric-interacting { --metric-accent: #22a66a; background: #e3f6eb; }
#metric-negative_response { --metric-accent: #d94a5d; background: #fde7ec; }
#metric-situation_pending { --metric-accent: #dc9c24; background: #fff1cd; }
#metric-ai { --metric-accent: #8b6df1; background: #eee7ff; }
#metric-waiting { --metric-accent: #f0a044; background: #fff1dc; }
#metric-open_now { --metric-accent: #3d7df0; background: #e5efff; }
#metric-closed { --metric-accent: #2b9aa3; background: #e1f3f4; }
.metric-top { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 12px; font-weight: 760; min-height: 36px; line-height: 1.25; }
.metric-top > span:not(.metric-icon) { min-width: 0; }
.metric-top > .icon { opacity: .75; width: 16px; height: 16px; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--metric-accent); background: color-mix(in srgb, var(--metric-accent) 12%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metric-accent) 34%, transparent); }
.metric-icon .icon { width: 16px; height: 16px; }
.featured .metric-icon { color: #fff; background: #ffffff1c; box-shadow: inset 0 0 0 1px #ffffff30; }
.metric-number { font-size: 36px; font-weight: 780; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 12px; color: #65768f; }
.featured .metric-unit, .featured .metric-bottom { color: #dce8ff; }
.metric-bottom { font-size: 10.5px; line-height: 16px; min-height: 74px; margin-top: 10px; padding: 12px 0; align-items: flex-start; border-top: 1px solid color-mix(in srgb, var(--metric-accent) 34%, #dce6f3); color: #536780; }
.metric-card:not(.featured) .metric-bottom { border-top-color: inherit; }
.featured .metric-bottom { border-top-color: #ffffff60; }
.step-index { flex-shrink: 0; font-size: 11px; line-height: inherit; font-weight: 750; }
.footnote { font-size: 12px; color: #5b6e87; margin-bottom: 26px; }
.panel { border-color: #d9e5f3; box-shadow: 0 14px 34px #1437650b; }
.panel-heading { padding: 22px 24px 18px; }
.panel-heading p { font-size: 13px; }
.panel-note { font-size: 12px; color: #65758d; background: #f8fbff; }
.queue-card { padding: 18px; }
.queue-card > span:not(.dot) { font-size: 13px; font-weight: 650; }
.queue-card strong { font-size: 36px; font-variant-numeric: tabular-nums; }
.queue-card small { font-size: 12px; }
.queue-card.open_now { background: #f0f6ff; border-color: #d8e6fb; }
.queue-card.open_now > span:not(.dot) { color: #365d99; }
.activation-row { font-size: 13px; padding-block: 13px; }
.activation-row strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.activation-row small { font-size: 12px; }
.text-link { font-size: 13px; }
.badge { padding: 4px 9px; font-size: 12px; font-weight: 700; border-radius: 6px; }
.badge.open, .badge.assigned { background: #eaf2ff; color: #225ba9; }
.badge.success { background: #e7f6ee; color: #236d4b; }
.badge.waiting, .badge.warning, .badge.partial { background: #fff2d4; color: #8b5908; }
.badge.failed, .badge.critical, .badge.loss { background: #ffe9ec; color: #ac3042; }
.badge.closed { background: #eaf0f7; color: #455c78; }
.alert-title strong { font-size: 14px; }
.alert-copy p { font-size: 13px; }
details { font-size: 13px; }
th { font-size: 11px; color: #60728d; background: #f7f9fc; font-weight: 700; }
td { font-size: 13px; color: #52647e; padding: 16px 20px; }
td small { font-size: 12px; color: #718097; }
tbody tr:hover { background: #f9fbff; }
.name-link { color: #203a60; }
.notice { font-size: 13px; }
.notice.notice { background: #edf4ff; color: #355786; border-color: #d2e1f5; }
.external-links { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.platform-link { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 5px 9px; border-radius: 6px; border: 1px solid #cfdff5; background: #f0f6ff; color: #245695; font-size: 12px; font-weight: 700; white-space: nowrap; }
.platform-link:hover { background: #e0edff; }
.platform-link .icon { width: 13px; height: 13px; }
.platform-link.blip { color: #176776; background: #ecf8fb; border-color: #cce7ee; }
.unavailable { color: #728095; background: #f5f7fa; border-color: #e4e9f0; cursor: default; font-size: 11px; }
.row-actions { align-items: flex-start; }
.lead-platform-actions { margin: -8px 0 24px; }
.lead-platform-actions .platform-link { padding: 8px 13px; font-size: 12px; }
.collection-actions { margin-bottom: 18px; }
.tag { font-size: 12px; }
.detail-grid { font-size: 14px; }
.login-shell { background: linear-gradient(135deg, #f8fafc, #eef3fb); }
.login-card { box-shadow: 0 24px 70px #1c3c7112; }
.login-card .brand { align-items: flex-start; padding: 0; }
.login-card .brand-logo { width: 150px; }
.login-card .brand small { color: #657994; }
footer { color: #65758b; font-size: 12px; }
@media (max-width: 1200px) {
  .sidebar { width: 208px; padding-inline: 12px; }
  .workspace { margin-left: 208px; }
  .nav-link { font-size: 12px; }
  main#main-content { padding: 26px 22px; }
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .funnel-age-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-columns { grid-template-columns: 1fr; }
}
@media (max-width: 950px) {
  .page-heading { align-items: flex-start; flex-wrap: wrap; }
  .refresh-controls { justify-content: flex-start; max-width: 100%; }
  .live-label { display: flex; }
  .filters > div { min-width: 130px; }
}
@media (max-width: 650px) {
  .sidebar { position: static; width: 100%; padding: 18px 16px 12px; }
  .sidebar-head { padding-bottom: 0; }
  .sidebar-toggle { display: none; }
  .sidebar-collapsed .sidebar { width: 100%; padding: 18px 16px 12px; }
  .sidebar-collapsed .workspace { margin-left: 0; }
  .sidebar-collapsed .brand { display: flex; }
  .sidebar-collapsed .nav-caption, .sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-bottom small, .sidebar-collapsed .user-block div, .sidebar-collapsed .logout, .sidebar-collapsed .readonly { display: revert; }
  .sidebar-collapsed .nav-link { justify-content: flex-start; padding: 10px; }
  .sidebar nav { gap: 6px; margin-top: 18px; }
  .nav-link { font-size: 12px; padding: 10px; }
  .workspace { margin-left: 0; }
  main#main-content { padding: 22px 16px; }
  h1 { font-size: 28px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-panel { padding: 16px; }
  .funnel-age-grid { grid-template-columns: 1fr; }
  .metric-card { padding: 16px 14px 0; min-height: 175px; }
  .metric-top { font-size: 12px; }
  .metric-bottom { font-size: 10px; }
  .metric-number { font-size: 36px; }
  .filters { padding: 12px; gap: 10px; }
  .filters > div { min-width: calc(50% - 10px); }
  .collection-health { gap: 7px 12px; }
  .collection-health .text-link { margin-left: 0; }
  .panel-heading { padding: 18px 16px; flex-wrap: wrap; }
  .panel-heading h2 { font-size: 16px; }
  .panel-heading p { font-size: 12px; }
  .queue-cards { gap: 10px; padding-inline: 14px; }
  .queue-card { padding: 12px; }
  .queue-card > span:not(.dot) { font-size: 11px; }
  .alert-title strong { font-size: 12px; }
  .refresh-error { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.operational-funnel { margin-bottom: 28px; }
.funnel-total { display: flex; align-items: baseline; gap: 8px; color: #63738a; font-size: 12px; }
.funnel-total strong { font-size: 30px; color: #17355c; font-variant-numeric: tabular-nums; }
.funnel-caution { margin: 0 24px 18px; padding: 12px 16px; border: 1px solid #f2dba8; border-radius: 9px; background: #fffbf2; color: #805a19; font-size: 12px; }
.funnel-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 20px; align-items: start; }
.funnel-insights { padding: 14px; background: #f6f9fe; border: 1px solid #e2eaf5; border-radius: 12px; align-self: start; }
.funnel-insights-panel { padding: 14px; background: #f6f9fe; border: 1px solid #e2eaf5; border-radius: 12px; align-self: start; }
.funnel-insight { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid #dce5f1; }
.funnel-insight .eyebrow { grid-column: 1 / -1; }
.funnel-insight > strong { display: block; font-size: 28px; margin: 2px 0; color: #214778; }
.funnel-insight p { color: #3b5275; font-size: 14px; text-align: right; }
.funnel-insight small { grid-column: 1 / -1; }
.funnel-insight small, .funnel-age small { color: #65758b; font-size: 12px; }
.funnel-age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; margin-top: 12px; }
.funnel-age { display: grid; gap: 4px; padding: 10px; margin: 0; border: 1px solid #dce5f1; border-radius: 8px; background: #fff; font-size: 12px; color: #53657e; }
.funnel-age > strong { color: #253e60; }
.funnel-overdue { color: #a13e20; font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 950px) {
  .funnel-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .funnel-layout { padding: 16px; gap: 16px; }
  .funnel-caution { margin-inline: 16px; }
}

.funnel-figure { margin: 0; min-width: 0; padding: 10px; border: 1px solid #e5eaf1; border-radius: 18px; background: linear-gradient(180deg, #f8fafc, #fff 75%); box-shadow: 0 8px 24px #263f6210; }
.funnel-drawing { container-type: inline-size; display: grid; gap: 3px; padding: 0; margin: 0; list-style: none; }
.funnel-drawing > li { --stage-inset: 0%; min-width: 0; margin-inline: var(--stage-inset); }
.funnel-drawing > li:nth-child(2) { --stage-inset: 2%; }
.funnel-drawing > li:nth-child(3) { --stage-inset: 4%; }
.funnel-drawing > li:nth-child(4) { --stage-inset: 6%; }
.funnel-drawing > li:nth-child(5) { --stage-inset: 8%; }
.funnel-drawing > li:nth-child(6) { --stage-inset: 10%; }
.funnel-drawing > li:nth-child(7) { --stage-inset: 12%; }
.funnel-drawing > li:nth-child(8) { --stage-inset: 14%; }
.funnel-drawing > li:nth-child(9) { --stage-inset: 16%; }
.funnel-drawing > li:nth-child(10) { --stage-inset: 18%; }
.funnel-band { --stage-color: #526174; position: relative; isolation: isolate; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 5px 18px; color: #fff; filter: drop-shadow(0 1px 1px #16294018); text-align: center; text-decoration: none; }
.funnel-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, #ffffff24, #00000012 52%, #ffffff0d), var(--stage-color); border-radius: 7px; box-shadow: inset 0 1px #ffffff45, inset 0 -1px #00000014; clip-path: polygon(0 0, 100% 0, calc(100% - 1.85cqi) 100%, 1.85cqi 100%); transition: filter .15s ease; }
.funnel-band-duplicated { --stage-color: #405b76; }
.funnel-band-negative_response { --stage-color: #785269; }
.response-evidence { max-width: 340px; margin-bottom: 8px; overflow-wrap: anywhere; }
.response-evidence summary { cursor: pointer; font-weight: 600; }
.funnel-drawing > li:nth-child(11) { --stage-inset: 20%; }
.funnel-band-invalid_phone { --stage-color: #bd4b16; }
.funnel-band-verification_pending { --stage-color: #9b710b; }
.funnel-band-unactivated { --stage-color: #60758b; }
.funnel-band-activation_failed { --stage-color: #bd303d; }
.funnel-band-unanswered { --stage-color: #1460c5; }
.funnel-band-bot { --stage-color: #087e88; }
.funnel-band-waiting { --stage-color: #aa650c; }
.funnel-band-human { --stage-color: #6540b6; }
.funnel-band-closed { --stage-color: #148044; }
.funnel-band-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffffff19; box-shadow: inset 0 1px 1px #ffffff24; }
.funnel-band-icon .icon { width: 17px; height: 17px; }
.funnel-band-content { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.funnel-band-label { width: 100%; font-size: 12px; font-weight: 600; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.funnel-band-metrics { display: flex; align-items: baseline; justify-content: center; gap: 6px; white-space: nowrap; line-height: 1.1; }
.funnel-band-count { font-size: 17px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.funnel-band-percent { padding: 0 0 0 8px; margin-left: 2px; border-left: 1px solid #ffffff70; color: #fff; font-size: 11px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.funnel-band:hover::before { filter: brightness(1.08); }
.funnel-band:focus-visible { outline: 2px solid var(--stage-color); outline-offset: 2px; }
.funnel-other { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 8px 0 0; border: 1px solid #e0e6ee; border-radius: 8px; background: #f8fafc; color: #294567; }
.funnel-other > span { flex: 1; min-width: 0; }
.funnel-other > .icon { width: 15px; height: 15px; color: #73849a; }
.funnel-other strong { font-size: 12px; }
.funnel-other small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #5a6c85; }
.funnel-other b { display: flex; align-items: baseline; gap: 6px; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-other:hover { background: #eaf0fa; }
.funnel-figure figcaption { text-align: center; color: #62738b; font-size: 11px; margin: 8px 0 0; }
@media (max-width: 650px) {
  .funnel-band { padding: 5px 12px; grid-template-columns: 24px minmax(0, 1fr); gap: 5px; }
  .funnel-band-icon { width: 24px; height: 24px; }
  .funnel-band-label { font-size: 12px; }
  .funnel-band-count { font-size: 17px; }
  .funnel-age-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .funnel-band::before { transition: none; } }