:root {
  --bg: #f4f7fb;
  --bg-deep: #e7eef9;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --border: rgba(12, 34, 75, 0.12);
  --border-strong: rgba(12, 34, 75, 0.2);
  --text: #0c224b;
  --text-soft: #50627f;
  --primary: #0f2b57;
  --primary-strong: #081a37;
  --accent: #2a5ea8;
  --shadow: 0 24px 60px rgba(8, 26, 55, 0.14);
  --radius-xl: 16px;
  --radius-lg: 14px;
  --radius-md: 12px;
}

html.low-resolution-no-motion,
html.low-resolution-no-motion *,
html.low-resolution-no-motion *::before,
html.low-resolution-no-motion *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

html.low-resolution-no-motion .agent-panel-emission-donut {
  opacity: 1;
}

html.low-resolution-no-motion .agent-panel-emission-donut::after {
  display: none;
}

@property --renewal-rate {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@media (prefers-reduced-motion: no-preference) {
  html.low-resolution-no-motion .analysis-loading-spinner {
    animation: analysis-loading-spin 0.9s linear infinite !important;
  }

  html.low-resolution-no-motion .agent-panel-initial-loading-spinner {
    animation: agent-panel-loading-spin 780ms linear infinite !important;
  }

  html.low-resolution-no-motion .agent-panel-branch-loading span {
    animation: agent-panel-branch-loading-spin 760ms linear infinite !important;
  }
}

/* Dashboard Gerencial - layout executivo inspirado na referencia fornecida */
body[data-page="dashboard"] {
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.08), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
  color: #0d2a58;
}

body[data-page="dashboard"] .app-shell {
  max-width: none;
  padding: 24px;
  gap: 24px;
}

body[data-page="dashboard"] .dashboard-top-menu {
  border-color: rgba(64, 97, 181, 0.28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 0%, rgba(88, 101, 255, 0.2), transparent 34%),
    linear-gradient(180deg, #061a56 0%, #06235e 44%, #031744 100%);
  box-shadow: 18px 0 42px rgba(2, 13, 40, 0.22);
}

body[data-page="dashboard"] .dashboard-top-menu .sidebar-bottom {
  display: none;
}

body[data-page="dashboard"] .dashboard-content {
  width: 100%;
  gap: 24px;
}

body[data-page="dashboard"] .dashboard-hero,
body[data-page="dashboard"] .dashboard-card {
  overflow: visible;
  border: 1px solid rgba(170, 188, 216, 0.58);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 43, 87, 0.06);
}

body[data-page="dashboard"] .dashboard-hero::before,
body[data-page="dashboard"] .dashboard-hero::after,
body[data-page="dashboard"] .dashboard-card::before,
body[data-page="dashboard"] .dashboard-card::after {
  content: none;
}

body[data-page="dashboard"] .dashboard-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(230px, 270px);
  align-items: center;
  gap: 18px;
  min-height: 116px;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="dashboard"] .dashboard-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background: #eef5ff;
  color: #2166d6;
}

body[data-page="dashboard"] .dashboard-hero-mark svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
}

body[data-page="dashboard"] .dashboard-hero-copy {
  min-width: 0;
}

body[data-page="dashboard"] .dashboard-hero .eyebrow,
body[data-page="dashboard"] .dashboard-card .eyebrow {
  margin: 0 0 6px;
  padding-left: 0;
  color: #2c6fe4;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body[data-page="dashboard"] .dashboard-hero .eyebrow::before,
body[data-page="dashboard"] .dashboard-card .eyebrow::before {
  content: none;
}

body[data-page="dashboard"] .dashboard-hero h2 {
  margin: 0;
  color: #102c5f;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-page="dashboard"] .dashboard-hero p {
  max-width: 860px;
  margin-top: 8px;
  color: #4d6280;
  font-size: 0.92rem;
  line-height: 1.45;
}

body[data-page="dashboard"] .dashboard-period-box {
  justify-self: end;
  width: min(100%, 270px);
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(170, 188, 216, 0.66);
  border-radius: 12px;
  background: #ffffff;
}

body[data-page="dashboard"] .dashboard-period-box label {
  color: #687b98;
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="dashboard"] .dashboard-period-box .period-trigger {
  min-height: 42px;
  border-radius: 10px;
  background: #f8fbff;
}

body[data-page="dashboard"] .dashboard-grid-custom {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 16px;
}

body[data-page="dashboard"] .dashboard-card {
  padding: 18px 22px;
}

body[data-page="dashboard"] .dashboard-card h3 {
  color: #102c5f;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0;
}

body[data-page="dashboard"] .dashboard-card-top {
  padding-bottom: 12px;
  border-bottom-color: rgba(170, 188, 216, 0.42);
}

body[data-page="dashboard"] .dashboard-badge,
body[data-page="dashboard"] .status-chip {
  min-height: 28px;
  padding: 6px 10px;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="dashboard"] .status-chip {
  border-radius: 0;
}

body[data-page="dashboard"] .dashboard-badge {
  border-radius: 0;
}

body[data-page="dashboard"] .dashboard-badge.positive,
body[data-page="dashboard"] .status-chip.positive {
  background: #e8f8ef;
  border-color: #c9efd8;
  color: #16824a;
}

body[data-page="dashboard"] .dashboard-badge.negative,
body[data-page="dashboard"] .status-chip.negative {
  background: #fff0f3;
  border-color: #ffd3dc;
  color: #bd2445;
}

body[data-page="dashboard"] .dashboard-badge.neutral,
body[data-page="dashboard"] .status-chip.neutral {
  background: #edf4ff;
  border-color: #d9e8ff;
  color: #1f5fc5;
}

body[data-page="dashboard"] .dashboard-projection-card {
  min-height: 242px;
}

body[data-page="dashboard"] .dashboard-day-summary-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #1f67d8;
  border-radius: 10px;
  background: linear-gradient(135deg, #1d66d8, #124aa4);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(18, 74, 164, 0.18);
  cursor: pointer;
  font: inherit;
}

body[data-page="dashboard"] .dashboard-day-summary-toggle span {
  color: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="dashboard"] .dashboard-day-summary-toggle i {
  width: 9px;
  height: 9px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms ease;
}

body[data-page="dashboard"] .dashboard-day-summary-toggle[aria-expanded="true"] i {
  transform: translateY(2px) rotate(225deg);
}

body[data-page="dashboard"] .dashboard-day-summary-toggle:hover,
body[data-page="dashboard"] .dashboard-day-summary-toggle:focus-visible {
  border-color: #2e7df4;
  background: linear-gradient(135deg, #2577ef, #1558bd);
  outline: none;
}

body[data-page="dashboard"] .dashboard-day-summary-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  margin-block: -16px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 260ms ease,
    margin 260ms ease,
    opacity 220ms ease,
    transform 260ms ease;
}

body[data-page="dashboard"] .dashboard-day-summary-panel.is-open {
  grid-template-rows: 1fr;
  margin-block: 0;
  opacity: 1;
  transform: translateY(0);
}

body[data-page="dashboard"] .dashboard-day-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

body[data-page="dashboard"] .dashboard-renewal-card {
  min-height: 280px;
}

body[data-page="dashboard"] .dashboard-renewal-card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

body[data-page="dashboard"] .dashboard-renewal-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 7px 12px;
  border: 1px solid rgba(45, 125, 240, 0.24);
  border-radius: 8px;
  background: #ffffff;
  color: #1f6ce0;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-page="dashboard"] .dashboard-renewal-shortcut svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="dashboard"] .dashboard-renewal-shortcut:hover,
body[data-page="dashboard"] .dashboard-renewal-shortcut:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(45, 125, 240, 0.42);
  background: #edf4ff;
  box-shadow: 0 10px 20px rgba(45, 125, 240, 0.12);
}

body[data-page="dashboard"] .dashboard-renewal-card-actions .dashboard-badge {
  border-radius: 8px;
}

body[data-page="dashboard"] .dashboard-renewal-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) minmax(360px, 1.55fr) minmax(250px, 1fr);
  gap: 24px;
  align-items: center;
}

body[data-page="dashboard"] .dashboard-renewal-rate,
body[data-page="dashboard"] .dashboard-renewal-main,
body[data-page="dashboard"] .dashboard-renewal-value {
  min-width: 0;
}

body[data-page="dashboard"] .dashboard-renewal-rate {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-right: 22px;
  border-right: 1px solid rgba(170, 188, 216, 0.48);
  text-align: center;
}

body[data-page="dashboard"] .dashboard-renewal-donut {
  --renewal-rate: 0%;
  --dashboard-renewal-target-rate: 0%;
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 50%, transparent 51%),
    conic-gradient(#2d7df0 0 var(--renewal-rate), #e6ebf3 var(--renewal-rate) 100%);
  box-shadow: 0 16px 28px rgba(15, 43, 87, 0.08);
}

body[data-page="dashboard"] .dashboard-renewal-donut strong {
  color: #071c3f;
  font-size: 1.9rem;
  line-height: 1;
}

body[data-page="dashboard"] .dashboard-renewal-rate > strong {
  color: #071c3f;
  font-size: 0.98rem;
}

body[data-page="dashboard"] .dashboard-renewal-rate p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #647795;
  font-size: 0.82rem;
}

body[data-page="dashboard"] .dashboard-renewal-delta {
  font-weight: 900;
}

body[data-page="dashboard"] .dashboard-renewal-delta.positive {
  color: #16824a;
}

body[data-page="dashboard"] .dashboard-renewal-delta.negative {
  color: #bd2445;
}

body[data-page="dashboard"] .dashboard-renewal-delta.neutral {
  color: #647795;
}

body[data-page="dashboard"] .dashboard-renewal-main {
  display: grid;
  gap: 28px;
  padding-right: 24px;
  border-right: 1px solid rgba(170, 188, 216, 0.48);
}

body[data-page="dashboard"] .dashboard-renewal-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-page="dashboard"] .dashboard-renewal-kpis div {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

body[data-page="dashboard"] .dashboard-renewal-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #2d7df0;
}

body[data-page="dashboard"] .dashboard-renewal-icon svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="dashboard"] .dashboard-renewal-kpis small,
body[data-page="dashboard"] .dashboard-renewal-value span,
body[data-page="dashboard"] .dashboard-renewal-value p,
body[data-page="dashboard"] .dashboard-renewal-progress-row span {
  color: #647795;
  font-size: 0.84rem;
}

body[data-page="dashboard"] .dashboard-renewal-kpis strong {
  color: #071c3f;
  font-size: 1.9rem;
  line-height: 1;
}

body[data-page="dashboard"] .dashboard-renewal-progress-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

body[data-page="dashboard"] .dashboard-renewal-progress,
body[data-page="dashboard"] .dashboard-renewal-value-progress {
  height: 10px;
  border-radius: 999px;
  background: #e6ebf3;
  overflow: hidden;
}

body[data-page="dashboard"] .dashboard-renewal-progress i,
body[data-page="dashboard"] .dashboard-renewal-value-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2d7df0, #1162d7);
}

body[data-page="dashboard"] .dashboard-renewal-value {
  display: grid;
  gap: 14px;
}

body[data-page="dashboard"] .dashboard-renewal-value > strong {
  color: #071c3f;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1;
}

body[data-page="dashboard"] .dashboard-renewal-value p {
  margin: 0;
}

body[data-page="dashboard"] .dashboard-renewal-value-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: auto;
  overflow: visible;
  background: transparent;
}

body[data-page="dashboard"] .dashboard-renewal-value-progress i {
  height: 10px;
  background: linear-gradient(90deg, #2d7df0, #1162d7);
}

body[data-page="dashboard"] .dashboard-renewal-value-progress strong {
  color: #071c3f;
  font-size: 0.9rem;
}

body[data-page="dashboard"].dashboard-renewal-progress-ready .dashboard-renewal-donut {
  animation: dashboard-renewal-donut-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-page="dashboard"].dashboard-renewal-progress-ready .dashboard-renewal-progress i,
body[data-page="dashboard"].dashboard-renewal-progress-ready .dashboard-renewal-value-progress i {
  transform-origin: left center;
  animation: dashboard-progress-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-page="dashboard"].dashboard-renewal-progress-ready #dashboardRenewalProgressFill {
  animation-delay: 90ms;
}

body[data-page="dashboard"].dashboard-renewal-progress-ready #dashboardRenewalValueProgressFill {
  animation-delay: 160ms;
}

body[data-page="dashboard"] .dashboard-renewal-alert {
  min-height: 42px;
  padding: 12px 14px;
  border: 1px solid #ffd3dc;
  border-radius: 8px;
  background: #fff0f3;
  color: #bd2445;
  font-size: 0.88rem;
  font-weight: 800;
}

body[data-page="dashboard"] .thermometer-card {
  gap: 16px;
  padding: 20px 22px;
  border-color: rgba(170, 188, 216, 0.58);
  background: rgba(255, 255, 255, 0.94);
}

body[data-page="dashboard"] .thermometer-layout {
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
  gap: 28px;
}

body[data-page="dashboard"] .thermometer-primary {
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(170, 188, 216, 0.5);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f9fbff);
}

body[data-page="dashboard"] .thermometer-primary span,
body[data-page="dashboard"] .thermometer-meta span,
body[data-page="dashboard"] .thermometer-legend span {
  color: #647795;
  font-size: 0.82rem;
}

body[data-page="dashboard"] .thermometer-primary strong {
  margin: 10px 0 8px;
  color: #102c5f;
  font-size: clamp(3.6rem, 6vw, 5.2rem);
  letter-spacing: 0;
}

body[data-page="dashboard"] .thermometer-primary p {
  max-width: 420px;
  color: #4d6280;
  font-size: 0.9rem;
  line-height: 1.45;
}

body[data-page="dashboard"] .thermometer-details {
  gap: 18px;
}

body[data-page="dashboard"] .thermometer-metric-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

body[data-page="dashboard"] .metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #edf4ff;
  color: #2166d6;
  font-weight: 900;
}

body[data-page="dashboard"] .metric-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body[data-page="dashboard"] .metric-progress {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-page="dashboard"] .thermometer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="dashboard"] .thermometer-meta strong {
  color: #102c5f;
  font-size: 0.94rem;
}

body[data-page="dashboard"] .thermometer-track {
  height: 8px;
  background: #e8edf5;
}

body[data-page="dashboard"] .thermometer-fill {
  background: linear-gradient(90deg, #2d7df0, #1162d7);
}

body[data-page="dashboard"] .day-result-card,
body[data-page="dashboard"] .closing-rhythm-card,
body[data-page="dashboard"] .trend-card {
  gap: 14px;
}

body[data-page="dashboard"] .day-result-card {
  grid-column: span 1;
}

body[data-page="dashboard"] .dashboard-lead {
  max-width: none;
  color: #4d6280;
  font-size: 0.9rem;
  line-height: 1.45;
}

body[data-page="dashboard"] .comparison-grid {
  gap: 14px;
}

body[data-page="dashboard"] .comparison-block {
  min-height: 138px;
  padding: 16px;
  border-color: rgba(170, 188, 216, 0.56);
  border-radius: 10px;
  background: #ffffff;
}

body[data-page="dashboard"] .comparison-top span,
body[data-page="dashboard"] .comparison-meta span,
body[data-page="dashboard"] .closing-item span,
body[data-page="dashboard"] .trend-meta span {
  color: #647795;
  font-size: 0.8rem;
}

body[data-page="dashboard"] .comparison-top strong {
  color: #102c5f;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  letter-spacing: 0;
}

body[data-page="dashboard"] .progress-track {
  height: 7px;
  background: #e8edf5;
}

body[data-page="dashboard"] .progress-fill.positive {
  background: #49bf7b;
}

body[data-page="dashboard"] .progress-fill.negative {
  background: #ff6f8a;
}

body[data-page="dashboard"] .progress-fill.neutral {
  background: #2d7df0;
}

body[data-page="dashboard"].dashboard-progress-ready .thermometer-fill,
body[data-page="dashboard"].dashboard-progress-ready .progress-fill {
  transform-origin: left center;
  animation: dashboard-progress-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-page="dashboard"].dashboard-progress-ready #dashboardElapsedFill {
  animation-delay: 60ms;
}

body[data-page="dashboard"].dashboard-progress-ready #dashboardProjectionTargetFill {
  animation-delay: 120ms;
}

body[data-page="dashboard"].dashboard-progress-ready #dashboardBarQuantidade {
  animation-delay: 180ms;
}

body[data-page="dashboard"].dashboard-progress-ready #dashboardBarFaturamento {
  animation-delay: 240ms;
}

@keyframes dashboard-progress-reveal {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes dashboard-renewal-donut-reveal {
  from {
    --renewal-rate: 0%;
  }

  to {
    --renewal-rate: var(--dashboard-renewal-target-rate);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="dashboard"].dashboard-progress-ready .thermometer-fill,
  body[data-page="dashboard"].dashboard-progress-ready .progress-fill,
  body[data-page="dashboard"].dashboard-renewal-progress-ready .dashboard-renewal-donut,
  body[data-page="dashboard"].dashboard-renewal-progress-ready .dashboard-renewal-progress i,
  body[data-page="dashboard"].dashboard-renewal-progress-ready .dashboard-renewal-value-progress i {
    animation: none;
  }
}

body[data-page="dashboard"] .closing-rhythm-card {
  min-height: 100%;
}

body[data-page="dashboard"] .closing-grid {
  gap: 8px;
}

body[data-page="dashboard"] .closing-item {
  min-height: 36px;
  padding: 9px 12px;
  border-color: rgba(170, 188, 216, 0.48);
  border-radius: 7px;
  background: linear-gradient(90deg, #f6f9fe, #ffffff);
}

body[data-page="dashboard"] .closing-item strong {
  color: #102c5f;
  font-size: 0.9rem;
}

body[data-page="dashboard"] .closing-item.emphasis {
  border-color: #cfe0fb;
  background: #edf4ff;
}

body[data-page="dashboard"] .trend-card {
  min-height: 390px;
}

body[data-page="dashboard"] .trend-legend {
  gap: 18px;
  color: #647795;
  font-size: 0.8rem;
}

body[data-page="dashboard"] .dashboard-branch-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 6px;
  padding: 8px 10px;
  border: 1px solid rgba(170, 188, 216, 0.52);
  border-radius: 8px;
  background: #f8fbff;
}

body[data-page="dashboard"] .dashboard-branch-filter label {
  color: #2d7df0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page="dashboard"] .dashboard-branch-search-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 280px) 36px auto;
  align-items: center;
  min-height: 32px;
  border: 1px solid #cfe0fb;
  border-radius: 0;
  background: #ffffff;
  color: #102c5f;
  overflow: visible;
}

body[data-page="dashboard"] .dashboard-branch-search-control:focus-within {
  border-color: rgba(45, 125, 240, 0.72);
  box-shadow: 0 0 0 3px rgba(45, 125, 240, 0.1);
}

body[data-page="dashboard"] .dashboard-branch-search-control svg {
  width: 16px;
  height: 16px;
}

body[data-page="dashboard"] .dashboard-branch-search-control input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  color: #102c5f;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

body[data-page="dashboard"] .dashboard-branch-search-control input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
  transform: none;
}

body[data-page="dashboard"] .dashboard-branch-search-control input::-webkit-search-cancel-button {
  display: none;
}

body[data-page="dashboard"] .dashboard-branch-search-control input::placeholder {
  color: #8aa0bd;
  font-weight: 700;
}

body[data-page="dashboard"] .dashboard-branch-search-control button {
  min-height: 26px;
  border: 0;
  color: #1f5fc5;
  font-size: 0.74rem;
  font-weight: 800;
}

body[data-page="dashboard"] .dashboard-branch-search-button {
  display: inline-grid;
  place-items: center;
  align-self: stretch;
  width: 36px;
  border-left: 1px solid #dbe7fa !important;
  background: #edf4ff;
  cursor: pointer;
}

body[data-page="dashboard"] .dashboard-branch-search-button:hover,
body[data-page="dashboard"] .dashboard-branch-search-button:focus-visible {
  background: #dceaff;
  outline: 0;
}

body[data-page="dashboard"] .dashboard-branch-clear-button {
  align-self: center;
  margin: 0 7px;
  padding: 0 10px;
  border-radius: 999px !important;
  background: #edf4ff;
  cursor: pointer;
}

body[data-page="dashboard"] .dashboard-branch-search-control button[hidden] {
  display: none;
}

body[data-page="dashboard"] .dashboard-branch-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 238px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #cfe0fb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(26, 62, 115, 0.16);
}

body[data-page="dashboard"] .dashboard-branch-suggestions.hidden {
  display: none;
}

body[data-page="dashboard"] .dashboard-branch-suggestion {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #102c5f;
  text-align: left;
  cursor: pointer;
}

body[data-page="dashboard"] .dashboard-branch-suggestion:hover,
body[data-page="dashboard"] .dashboard-branch-suggestion:focus-visible {
  background: #edf4ff;
  outline: 0;
}

body[data-page="dashboard"] .dashboard-branch-suggestion strong {
  color: #102c5f;
  font-size: 0.84rem;
}

body[data-page="dashboard"] .dashboard-branch-suggestion span {
  color: #647795;
  font-size: 0.72rem;
  font-weight: 700;
}

body[data-page="dashboard"] .dashboard-branch-suggestion-empty {
  padding: 10px 12px;
  color: #647795;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page="dashboard"] .legend-dot.actual {
  background: #2d7df0;
}

body[data-page="dashboard"] .legend-dot.target {
  background: #d84d5b;
}

body[data-page="dashboard"] .trend-chart-shell {
  padding: 4px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="dashboard"] .trend-chart {
  height: 292px;
  display: block;
  width: 100%;
  min-width: 760px;
}

body[data-page="dashboard"] .trend-visual-grid {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) repeat(2, minmax(220px, 260px));
  gap: 18px;
  align-items: stretch;
}

body[data-page="dashboard"] .trend-chart-area {
  min-width: 0;
}

body[data-page="dashboard"] .emission-mode-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  min-height: 292px;
  padding: 16px;
  border: 1px solid rgba(170, 188, 216, 0.56);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body[data-page="dashboard"] .emission-mode-card h4 {
  margin: 0;
  color: #102c5f;
  font-size: 1rem;
  line-height: 1.2;
}

body[data-page="dashboard"] .emission-donut-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

body[data-page="dashboard"] .emission-donut {
  --video-share: 0%;
  --donut-reveal: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(#12376e 0 var(--video-share), #49bf7b var(--video-share) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(170, 188, 216, 0.4),
    0 14px 26px rgba(15, 43, 87, 0.08);
  overflow: hidden;
  opacity: 0;
}

body[data-page="dashboard"] .emission-donut::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from -90deg, transparent 0 var(--donut-reveal), #ffffff var(--donut-reveal) 100%);
  -webkit-mask: radial-gradient(circle at center, transparent 0 48%, #000 49%);
  mask: radial-gradient(circle at center, transparent 0 48%, #000 49%);
  pointer-events: none;
}

body[data-page="dashboard"] .emission-donut.dashboard-donut-enter {
  opacity: 1;
  transition: opacity 120ms ease;
}

body[data-page="dashboard"] .emission-donut.dashboard-donut-enter::after {
  animation: agent-panel-donut-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body[data-page="dashboard"] .emission-donut.empty {
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(#dbe5f3 0 100%);
}

body[data-page="dashboard"] .emission-donut-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #ffffff;
  color: #102c5f;
  text-align: center;
}

body[data-page="dashboard"] .emission-donut-core strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}

body[data-page="dashboard"] .emission-donut-core span {
  display: block;
  color: #647795;
  font-size: 0.72rem;
  line-height: 1;
}

body[data-page="dashboard"] .emission-mode-list {
  display: grid;
  gap: 8px;
}

body[data-page="dashboard"] .emission-mode-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f9fe;
  color: #102c5f;
  font-size: 0.82rem;
}

body[data-page="dashboard"] .emission-mode-item span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #647795;
}

body[data-page="dashboard"] .emission-mode-values {
  display: grid;
  justify-items: end;
  gap: 3px;
}

body[data-page="dashboard"] .emission-mode-values small {
  color: #7b8dab;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

body[data-page="dashboard"] .emission-mode-values strong {
  color: #102c5f;
  font-size: 0.82rem;
  line-height: 1;
}

body[data-page="dashboard"] .emission-mode-item i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

body[data-page="dashboard"] .emission-mode-item.video i {
  background: #12376e;
}

body[data-page="dashboard"] .emission-mode-item.in-person i {
  background: #49bf7b;
}

body[data-page="dashboard"] .emission-summary-button {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
  border: 1px solid rgba(45, 125, 240, 0.24);
  border-radius: 8px;
  background: #eef5ff;
  color: #1f6ce0;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

body[data-page="dashboard"] .emission-summary-button:hover {
  border-color: rgba(45, 125, 240, 0.42);
  background: #e2efff;
  color: #12376e;
}

body[data-page="dashboard"] .dashboard-emission-summary-overlay {
  z-index: 135;
  background: rgba(8, 26, 55, 0.38);
  backdrop-filter: blur(16px);
}

body[data-page="dashboard"] .dashboard-emission-summary-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(170, 188, 216, 0.72);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(8, 26, 55, 0.28);
}

body[data-page="dashboard"] .dashboard-emission-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(170, 188, 216, 0.42);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

body[data-page="dashboard"] .dashboard-emission-summary-header h3 {
  margin: 4px 0 6px;
  color: #102c5f;
  font-size: 1.28rem;
}

body[data-page="dashboard"] .dashboard-emission-summary-header p {
  margin: 0;
  color: #647795;
  font-size: 0.86rem;
  line-height: 1.45;
}

body[data-page="dashboard"] .dashboard-emission-summary-range {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid rgba(170, 188, 216, 0.46);
  border-radius: 10px;
  background: #f3f8ff;
}

body[data-page="dashboard"] .dashboard-emission-summary-range button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #647795;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-page="dashboard"] .dashboard-emission-summary-range button.active {
  border-color: rgba(45, 125, 240, 0.28);
  background: #ffffff;
  color: #1f6ce0;
  box-shadow: 0 8px 18px rgba(24, 79, 158, 0.1);
}

body[data-page="dashboard"] .dashboard-emission-summary-range button:hover,
body[data-page="dashboard"] .dashboard-emission-summary-range button:focus-visible {
  outline: none;
  color: #12376e;
}

body[data-page="dashboard"] .dashboard-emission-summary-content {
  min-height: 180px;
  overflow: auto;
  padding: 18px 24px 24px;
}

body[data-page="dashboard"] .dashboard-emission-summary-table-wrap {
  overflow: auto;
  border: 1px solid rgba(170, 188, 216, 0.46);
  border-radius: 12px;
}

body[data-page="dashboard"] .dashboard-emission-summary-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: #102c5f;
}

body[data-page="dashboard"] .dashboard-emission-summary-table th,
body[data-page="dashboard"] .dashboard-emission-summary-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(170, 188, 216, 0.32);
  text-align: center;
  vertical-align: middle;
}

body[data-page="dashboard"] .dashboard-emission-summary-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f8ff;
  color: #647795;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

body[data-page="dashboard"] .dashboard-emission-summary-table td {
  font-size: 0.88rem;
  font-weight: 800;
}

body[data-page="dashboard"] .dashboard-emission-summary-table td span {
  display: block;
  margin-top: 4px;
  color: #7b8dab;
  font-size: 0.72rem;
  font-weight: 700;
}

body[data-page="dashboard"] .dashboard-emission-summary-table tr:last-child td {
  border-bottom: 0;
}

body[data-page="dashboard"] .dashboard-emission-summary-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed rgba(170, 188, 216, 0.72);
  border-radius: 12px;
  color: #647795;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

body[data-page="dashboard"] .certificate-model-donut {
  --cnpj-share: 0%;
  --cpf-share-end: 0%;
  --pj-share-end: 0%;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(
      #12376e 0 var(--cnpj-share),
      #2d7df0 var(--cnpj-share) var(--cpf-share-end),
      #49bf7b var(--cpf-share-end) var(--pj-share-end),
      #d84d5b var(--pj-share-end) 100%
    );
}

body[data-page="dashboard"] .certificate-model-donut.empty {
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(#dbe5f3 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="dashboard"] .emission-donut {
    opacity: 1;
  }

  body[data-page="dashboard"] .emission-donut::after {
    display: none;
  }

  body[data-page="dashboard"] .emission-donut.dashboard-donut-enter::after {
    animation: none;
  }
}

/* Análise de performance - card regional conforme referência */
body[data-page="analysis"] .analysis-region-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, 1.65fr) repeat(3, minmax(130px, 1fr)) minmax(170px, 1.12fr) minmax(210px, 1.28fr);
  align-items: stretch;
  gap: 0;
  width: auto;
  min-height: 158px;
  margin: 16px 22px 22px;
  padding: 38px 16px 16px 22px;
  overflow: hidden;
  border: 1px solid #c9ddf4;
  border-radius: 13px;
  background: linear-gradient(105deg, #ffffff 0%, #fbfdff 62%, #f4f9ff 100%);
  box-shadow: 0 10px 24px rgba(28, 83, 153, 0.08);
}

body[data-page="analysis"] .analysis-region-footer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: #0d6ef5;
}

body[data-page="analysis"] .analysis-region-ribbon {
  position: absolute;
  top: 0;
  left: 30px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 0 0 7px 7px;
  background: #0d6ef5;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(13, 110, 245, 0.18);
}

body[data-page="analysis"] .analysis-region-summary-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 12px 24px 8px 10px;
}

body[data-page="analysis"] .analysis-region-summary-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 50%;
  background: #e8f2ff;
  color: #0d6ef5;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

body[data-page="analysis"] .analysis-region-summary-identity > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body[data-page="analysis"] .analysis-region-summary-identity strong {
  color: #234f86;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-page="analysis"] .analysis-region-summary-identity > div > span {
  color: #526d91;
  font-size: 0.82rem;
  font-weight: 800;
}

body[data-page="analysis"] .analysis-region-summary-metric {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 16px;
  border-left: 1px solid #dce7f3;
  background: transparent;
  text-align: center;
}

body[data-page="analysis"] .analysis-region-summary-metric > span:first-child {
  color: #4f6a8f;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
}

body[data-page="analysis"] .analysis-region-summary-metric > strong {
  color: #071f4d;
  font-size: 1.38rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body[data-page="analysis"] .analysis-region-summary-metric.performance {
  gap: 10px;
}

body[data-page="analysis"] .analysis-region-summary-track {
  display: block;
  width: min(100%, 150px);
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8f4;
}

body[data-page="analysis"] .analysis-region-summary-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0d6ef5;
}

body[data-page="analysis"] .analysis-region-summary-metric.revenue {
  align-self: center;
  min-height: 104px;
  margin: 0 10px 0 16px;
  border-left: 0;
  border-radius: 8px;
  background: #e7f1ff;
}

body[data-page="analysis"] .analysis-region-summary-metric.revenue > span:first-child,
body[data-page="analysis"] .analysis-region-summary-metric.revenue > strong {
  color: #0d6ef5;
}

@media (max-width: 1240px) {
  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 44px;
  }

  body[data-page="analysis"] .analysis-region-summary-identity {
    grid-column: 1 / -1;
    justify-content: center;
    padding-bottom: 18px;
  }

  body[data-page="analysis"] .analysis-region-summary-metric {
    min-height: 92px;
    border-top: 1px solid #dce7f3;
  }

  body[data-page="analysis"] .analysis-region-summary-metric:nth-of-type(even) {
    border-left: 0;
  }

  body[data-page="analysis"] .analysis-region-summary-metric.revenue {
    grid-column: 1 / -1;
    margin: 12px;
  }
}

@media (max-width: 620px) {
  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: 1fr;
    margin: 12px 14px 14px;
    padding: 42px 12px 12px 18px;
  }

  body[data-page="analysis"] .analysis-region-summary-identity,
  body[data-page="analysis"] .analysis-region-summary-metric,
  body[data-page="analysis"] .analysis-region-summary-metric.revenue {
    grid-column: auto;
    width: auto;
    margin: 0;
    border-left: 0;
    border-bottom: 0;
  }

  body[data-page="analysis"] .analysis-region-summary-identity {
    justify-content: flex-start;
  }

  body[data-page="analysis"] .analysis-region-summary-metric {
    border-top: 1px solid #dce7f3;
  }

  body[data-page="analysis"] .analysis-region-summary-metric.revenue {
    margin-top: 10px;
  }
}

body[data-page="dashboard"] .emission-mode-item.certificate-cnpj i {
  background: #12376e;
}

body[data-page="dashboard"] .emission-mode-item.certificate-cpf i {
  background: #2d7df0;
}

body[data-page="dashboard"] .emission-mode-item.certificate-pj i {
  background: #49bf7b;
}

body[data-page="dashboard"] .emission-mode-item.certificate-safeid i {
  background: #d84d5b;
}

body[data-page="dashboard"] .emission-mode-note {
  margin: auto 0 0;
  color: #647795;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}

body[data-page="dashboard"] .trend-chart-tools {
  top: -2px;
  right: 0;
}

body[data-page="dashboard"] .trend-mode-toggle {
  min-height: 34px;
  border-color: #dbe7fa;
  background: #edf4ff;
  color: #1f5fc5;
  box-shadow: none;
  letter-spacing: 0;
}

body[data-page="dashboard"] .trend-range-toggle {
  width: 34px;
  height: 34px;
  border-color: #dbe7fa;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 43, 87, 0.1);
}

body[data-page="dashboard"] .trend-footer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="dashboard"] .trend-meta {
  padding: 10px 12px;
  border-color: rgba(170, 188, 216, 0.48);
  border-radius: 8px;
  background: #f8fbff;
}

body[data-page="dashboard"] .trend-meta span {
  margin-bottom: 4px;
}

body[data-page="dashboard"] .trend-meta strong {
  color: #102c5f;
  font-size: 0.96rem;
}

@media (max-width: 1180px) {
  body[data-page="dashboard"] .dashboard-hero {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  body[data-page="dashboard"] .dashboard-period-box {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  body[data-page="dashboard"] .dashboard-grid-custom {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .dashboard-day-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .dashboard-renewal-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .dashboard-renewal-rate,
  body[data-page="dashboard"] .dashboard-renewal-main {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(170, 188, 216, 0.48);
  }

  body[data-page="dashboard"] .thermometer-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .trend-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="dashboard"] .trend-chart-area {
    grid-column: 1 / -1;
  }

  body[data-page="dashboard"] .trend-chart-shell {
    overflow-x: auto;
  }

  body[data-page="dashboard"] .emission-mode-card {
    min-height: auto;
  }

  body[data-page="dashboard"] .dashboard-branch-filter {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="dashboard"] .dashboard-branch-search-control {
    grid-template-columns: minmax(0, 1fr) 42px auto;
  }
}

@media (max-width: 680px) {
  body[data-page="dashboard"] .trend-visual-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .trend-chart-area {
    grid-column: auto;
  }

  body[data-page="dashboard"] .trend-chart-shell {
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  body[data-page="dashboard"] .app-shell {
    padding: 10px;
  }

  body[data-page="dashboard"] .dashboard-top-menu {
    align-items: stretch;
  }

  body[data-page="dashboard"] .dashboard-top-menu .nav-links {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  body[data-page="dashboard"] .dashboard-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  body[data-page="dashboard"] .dashboard-day-summary-toggle {
    min-height: 44px;
    padding: 11px 14px;
  }

  body[data-page="dashboard"] .dashboard-hero-mark {
    width: 48px;
    height: 48px;
  }

  body[data-page="dashboard"] .comparison-grid,
  body[data-page="dashboard"] .trend-footer,
  body[data-page="dashboard"] .dashboard-renewal-kpis,
  body[data-page="dashboard"] .dashboard-renewal-progress-row {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .thermometer-metric-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="dashboard"] .trend-chart-tools {
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  body[data-page="dashboard"] .trend-chart {
    height: 250px;
  }

  body[data-page="dashboard"] .emission-donut {
    width: 132px;
  }
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

body.auth-shell-pending .nav-links,
body.auth-shell-pending .sidebar-logout-button,
body.auth-shell-pending [data-dev-only='true'],
body.auth-shell-pending [data-manager-only='true'],
body.auth-shell-pending [data-manager-hide='true'] {
  visibility: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  color: var(--text);
  background: #eef3f9;
}

body.modal-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 43, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 43, 87, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
  pointer-events: none;
}

.login-page {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px;
}

/*
 * Camadas decorativas de ondas em SVG.
 * Ficam atrás de todo o conteúdo da tela de login e usam mask para
 * preservar o centro limpo, mantendo o foco nos cards.
 */
.login-page::before,
.login-page::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 230px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120% auto;
}

.login-page::before {
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' fill='none'%3E%3Cpath d='M-40 82C52 42 146 42 238 82C330 122 424 122 516 82C608 42 702 42 794 82C886 122 980 122 1072 82C1164 42 1258 42 1350 82C1442 122 1536 122 1628 82' stroke='%232a5ea8' stroke-opacity='0.24' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M-40 114C52 74 146 74 238 114C330 154 424 154 516 114C608 74 702 74 794 114C886 154 980 154 1072 114C1164 74 1258 74 1350 114C1442 154 1536 154 1628 114' stroke='%232a5ea8' stroke-opacity='0.16' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M-40 146C52 106 146 106 238 146C330 186 424 186 516 146C608 106 702 106 794 146C886 186 980 186 1072 146C1164 106 1258 106 1350 146C1442 186 1536 186 1628 146' stroke='%232a5ea8' stroke-opacity='0.1' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  filter: blur(0.6px);
  animation:
    loginWaveFadeIn 2200ms ease-in-out forwards,
    loginWaveFloatA 18s ease-in-out 2600ms infinite alternate;
}

.login-page::after {
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' fill='none'%3E%3Cpath d='M-40 146C52 186 146 186 238 146C330 106 424 106 516 146C608 186 702 186 794 146C886 106 980 106 1072 146C1164 186 1258 186 1350 146C1442 106 1536 106 1628 146' stroke='%232a5ea8' stroke-opacity='0.22' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M-40 176C52 216 146 216 238 176C330 136 424 136 516 176C608 216 702 216 794 176C886 136 980 136 1072 176C1164 216 1258 216 1350 176C1442 136 1536 136 1628 176' stroke='%232a5ea8' stroke-opacity='0.14' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M-40 114C52 154 146 154 238 114C330 74 424 74 516 114C608 154 702 154 794 114C886 74 980 74 1072 114C1164 154 1258 154 1350 114C1442 74 1536 74 1628 114' stroke='%232a5ea8' stroke-opacity='0.1' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  filter: blur(0.9px);
  animation:
    loginWaveFadeIn 2800ms ease-in-out forwards,
    loginWaveFloatB 22s ease-in-out 3200ms infinite alternate;
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 440px);
  gap: 24px;
  align-items: stretch;
}

.login-brand,
.login-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.login-brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 580px;
  padding: 40px 38px 42px;
  background: #f7fafe;
}

.login-brand-hero {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 6px;
  align-content: start;
}

.login-brand-eyebrow {
  justify-self: start;
  margin-bottom: 0;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  opacity: 0;
  animation: loginFadeUp 700ms ease forwards;
}

.login-brand-logo {
  width: min(96px, 100%);
  max-width: 100%;
  height: auto;
  justify-self: start;
  margin-top: 0;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  filter: drop-shadow(0 14px 24px rgba(8, 26, 55, 0.08));
  animation: loginLogoReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

.login-brand-copy {
  display: grid;
  align-content: start;
  gap: 16px;
  width: 100%;
  max-width: 340px;
  margin-top: 34px;
}

.login-brand h1,
.login-card h2 {
  margin: 0;
  color: var(--primary);
}

.login-brand h1 {
  max-width: 9ch;
  font-size: clamp(2.55rem, 3vw, 3.2rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  white-space: normal;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(24px);
  animation: loginFadeUp 820ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}

.login-brand p,
.login-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
}

.login-brand-copy p {
  max-width: 32ch;
  font-size: 1rem;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(18px);
  animation: loginFadeUp 820ms cubic-bezier(0.22, 1, 0.36, 1) 340ms forwards;
}

.login-brand-footer {
  opacity: 0;
  transform: translateY(18px);
  animation: loginFadeUp 820ms cubic-bezier(0.22, 1, 0.36, 1) 460ms forwards;
}

.login-brand-footer {
  display: grid;
  gap: 10px;
  max-width: 34ch;
  font-size: 0.98rem;
  line-height: 1.8;
}

.login-card {
  position: relative;
  z-index: 1;
  padding: 32px 30px;
  opacity: 0;
  transform: translateX(-88px) scale(0.98);
  animation: loginCardSlideIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

.login-card-top {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-field input {
  min-height: 56px;
}

.login-submit,
.sidebar-auth-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #12376e, #2a5ea8);
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  box-shadow: 0 18px 26px rgba(18, 55, 110, 0.18);
}

.login-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.1) 60%, transparent 82%);
  transform: translateX(-130%) skewX(-18deg);
}

.login-submit:hover,
.sidebar-auth-button:hover {
  transform: translateY(-1px);
}

.login-submit:hover {
  box-shadow: 0 22px 32px rgba(18, 55, 110, 0.24);
}

.login-submit:hover::before {
  animation: loginButtonShine 900ms ease forwards;
}

.login-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.login-status {
  min-height: 24px;
  font-size: 0.86rem;
  line-height: 1.5;
}

.login-status.neutral {
  color: var(--text-soft);
}

.login-status.success {
  color: #0e6a40;
}

.login-status.error {
  color: #9b332c;
}

.login-password-modal-card {
  width: min(560px, 100%);
  animation: cadastroModalEnter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-password-change-form {
  display: grid;
  gap: 16px;
}

/* Login redesign based on the protected-access reference screen. */
.login-page {
  overflow-x: hidden;
  padding: 40px 24px 28px;
  background: #ffffff;
  --login-menu-blue: #12376e;
  --login-menu-blue-strong: #0f2b57;
  --login-menu-blue-deep: #081a37;
  --login-menu-blue-soft: #2a5ea8;
}

.login-page::before,
.login-page::after {
  content: "";
  position: fixed;
  inset: -8% -12%;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 130% 100%;
}

.login-page::before {
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg stroke='%2312376e' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M-90 190C130 80 295 72 492 166c197 94 327 117 503 49 176-68 239-205 360-275 121-70 239-73 340-52'/%3E%3Cpath d='M-98 218C125 105 304 102 501 191c197 89 337 111 511 37 174-74 224-197 348-268 124-71 244-74 349-50'/%3E%3Cpath d='M-96 246C126 133 313 130 510 216c197 86 348 105 519 25 171-80 210-189 336-260 126-71 249-75 358-48'/%3E%3Cpath d='M-96 274C127 162 322 158 519 241c197 83 358 98 527 13 169-85 195-180 324-252 129-72 255-76 368-46'/%3E%3Cpath d='M-93 302C130 190 330 186 528 266c198 80 369 92 535 1 166-91 180-172 312-244 132-72 260-77 377-43'/%3E%3C/g%3E%3Cg stroke='%2312376e' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-110 610C55 741 205 752 341 677c136-75 206-171 365-150 159 21 218 151 398 168 180 17 293-93 425-180 132-87 229-115 345-56'/%3E%3Cpath d='M-114 642C51 768 207 777 344 701c137-76 208-172 367-150 159 22 220 150 399 167 179 17 295-90 427-177 132-87 232-119 348-65'/%3E%3Cpath d='M-116 674C49 795 210 802 348 725c138-77 210-173 369-150 159 23 222 150 400 166 178 16 296-87 429-174 133-87 235-123 351-74'/%3E%3Cpath d='M-118 706C48 822 213 827 352 749c139-78 212-174 371-150 159 24 224 149 401 165 177 16 298-84 431-171 133-87 238-127 354-83'/%3E%3C/g%3E%3C/svg%3E");
  filter: blur(0.2px);
  animation:
    loginLinesReveal 1500ms cubic-bezier(0.22, 1, 0.36, 1) both,
    loginLinesDriftA 18s ease-in-out 1500ms infinite alternate;
}

.login-page::after {
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg stroke='%2312376e' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M-120 720C70 820 229 803 384 724c155-79 241-159 421-123 180 36 250 141 432 123 182-18 272-142 424-197 152-55 264-25 373 58'/%3E%3Cpath d='M-124 748C66 847 231 830 388 750c157-80 243-160 423-124 180 36 252 139 434 121 182-18 274-139 426-194 152-55 267-30 376 49'/%3E%3Cpath d='M-128 776C62 874 233 857 392 776c159-81 245-161 425-125 180 36 254 137 436 119 182-18 276-136 428-191 152-55 270-35 379 40'/%3E%3Cpath d='M-132 804C58 901 235 884 396 802c161-82 247-162 427-126 180 36 256 135 438 117 182-18 278-133 430-188 152-55 273-40 382 31'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 130% 100%;
  animation:
    loginLinesReveal 1900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both,
    loginLinesDriftB 22s ease-in-out 1900ms infinite alternate;
}

.login-shell {
  width: min(1040px, 100%);
}

.login-panel {
  grid-template-columns: minmax(380px, 520px) minmax(360px, 500px);
  gap: 20px;
}

.login-brand,
.login-card {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 28px 58px rgba(18, 55, 110, 0.2);
}

.login-brand {
  overflow: hidden;
  min-height: 655px;
  padding: 42px 36px 30px;
  color: #ffffff;
  background:
    radial-gradient(circle at 76% 68%, rgba(9, 73, 153, 0.34) 0 16%, transparent 17%),
    radial-gradient(circle at 78% 70%, transparent 0 25%, rgba(16, 88, 180, 0.22) 26% 31%, transparent 32%),
    linear-gradient(135deg, rgba(5, 26, 62, 0.98), rgba(0, 58, 128, 0.95)),
    linear-gradient(145deg, var(--login-menu-blue-deep), var(--login-menu-blue));
}

.login-brand::before,
.login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-brand::before {
  background:
    linear-gradient(90deg, rgba(1, 18, 52, 0.4), rgba(0, 65, 165, 0.14)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 9px);
}

.login-brand::after {
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg width='620' height='420' viewBox='0 0 620 420' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cg stroke='%239ECCFF' stroke-opacity='.55'%3E%3Cpath d='M-36 120C77 58 171 56 279 101c108 45 183 51 292-14 109-65 153-76 211-52'/%3E%3Cpath d='M-44 151C69 89 170 85 279 127c109 42 190 45 295-23 105-68 152-83 214-59'/%3E%3Cpath d='M-50 181C63 120 170 115 279 154c109 39 196 39 298-33 102-72 152-89 217-66'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right -84px top 76px;
  background-repeat: no-repeat;
  background-size: 470px auto;
}

.login-brand-hero {
  position: relative;
  z-index: 1;
  gap: 0;
}

.login-brand-secure,
.login-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.login-brand-secure {
  width: fit-content;
  min-height: 38px;
  padding: 4px 18px 4px 6px;
  border: 1px solid rgba(151, 196, 255, 0.13);
  border-radius: 14px;
  background: rgba(28, 87, 158, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.login-icon-badge,
.login-card-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.login-icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--login-menu-blue-soft), var(--login-menu-blue));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 20px rgba(0, 29, 93, 0.24);
  color: #ffffff;
}

.login-icon-badge svg,
.login-card-icon svg,
.login-input-icon,
.login-password-toggle svg,
.login-submit svg,
.login-status svg,
.login-page-footnote svg,
.login-shield-large svg {
  display: block;
}

.login-icon-badge svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-brand-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 1;
  animation: none;
}

.login-brand-logo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: min(128px, 35%);
  margin-top: 0;
  filter: brightness(0) invert(1) drop-shadow(0 12px 22px rgba(0, 15, 55, 0.16));
}

.login-brand-copy {
  gap: 26px;
  max-width: 410px;
  margin-top: 78px;
}

.login-brand h1 {
  max-width: 9ch;
  color: #ffffff;
  font-size: clamp(3.4rem, 4.45vw, 4.32rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: 0;
  text-shadow: 0 8px 22px rgba(0, 16, 48, 0.22);
}

.login-brand-copy p {
  max-width: 34ch;
  padding-left: 16px;
  border-left: 2px solid #1fa4ff;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.65;
}

.login-brand-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 20px;
  align-items: center;
  max-width: none;
  min-height: 102px;
  padding: 18px 20px;
  border: 1px solid rgba(151, 196, 255, 0.34);
  border-radius: 12px;
  background: rgba(9, 62, 126, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 18px 42px rgba(0, 18, 60, 0.14);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.55;
}

.login-brand-footer::after {
  content: "";
  position: absolute;
  left: 106px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: rgba(151, 196, 255, 0.28);
}

.login-shield-large {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: rgba(48, 126, 229, 0.36);
  color: #ffffff;
}

.login-shield-large svg {
  width: 48px;
  height: 48px;
  fill: rgba(42, 132, 255, 0.98);
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 20px rgba(0, 20, 70, 0.28));
}

.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 48px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transform: translateX(-42px) scale(0.985);
}

.login-card-top {
  gap: 14px;
  margin-bottom: 34px;
}

.login-card-eyebrow .eyebrow {
  color: var(--login-menu-blue);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.login-card-icon {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: rgba(42, 94, 168, 0.1);
  color: var(--login-menu-blue);
}

.login-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-card h2 {
  color: #082b67;
  font-size: clamp(1.9rem, 2.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1.12;
}

.login-card p {
  color: #63779b;
  font-size: 1rem;
}

.login-form {
  gap: 22px;
}

.login-field {
  gap: 10px;
}

.login-field > span:first-child {
  color: #0b2d67;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0;
}

.login-input-wrap {
  position: relative;
  display: block;
}

.field .login-input-wrap {
  gap: 0;
}

.login-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 1;
  width: 21px;
  height: 21px;
  color: #0c3475;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}

.login-field input {
  min-height: 56px;
  padding: 0 56px;
  border-color: #d5e3f5;
  border-radius: 12px;
  background: #fbfdff;
  color: #183b78;
  font-size: 0.96rem;
  box-shadow: inset 0 1px 0 rgba(10, 42, 102, 0.02);
}

.login-field input::placeholder {
  color: #7184a7;
}

.login-field input:focus {
  border-color: rgba(18, 55, 110, 0.58);
  box-shadow: 0 0 0 3px rgba(18, 55, 110, 0.12);
}

.login-password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #45699d;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 180ms ease, color 180ms ease;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  background: #eaf3ff;
  color: var(--login-menu-blue);
  outline: none;
}

.login-password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-recaptcha-container {
  display: grid;
  min-height: 74px;
  margin-top: -4px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    min-height 220ms ease,
    margin 220ms ease;
}

.login-recaptcha-container.hidden {
  display: none;
}

.login-submit {
  gap: 16px;
  min-height: 62px;
  margin-top: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--login-menu-blue) 0%, var(--login-menu-blue) 100%);
  font-size: 1.05rem;
  box-shadow: 0 18px 28px rgba(0, 84, 200, 0.32);
}

.login-submit svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-submit:hover {
  box-shadow: 0 22px 34px rgba(0, 84, 200, 0.38);
}

.login-status {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 26px;
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.login-status svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-status.neutral {
  color: #5e78a6;
}

.login-status.success {
  color: #087446;
}

.login-page-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  color: var(--login-menu-blue);
  font-size: 0.94rem;
}

.login-page-footnote svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-brand-secure .eyebrow,
.login-card-eyebrow .eyebrow {
  padding-left: 0;
}

.login-brand-secure .eyebrow::before,
.login-card-eyebrow .eyebrow::before {
  content: none;
}

.login-brand-footer p {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

@keyframes loginLinesReveal {
  0% {
    opacity: 0;
    transform: translate3d(-22px, 12px, 0) scale(1.025);
    filter: blur(1.2px);
  }

  55% {
    opacity: 0.18;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes loginLinesDriftA {
  from {
    transform: translate3d(-6px, -4px, 0) scale(1);
  }

  to {
    transform: translate3d(8px, 6px, 0) scale(1.01);
  }
}

@keyframes loginLinesDriftB {
  from {
    transform: translate3d(8px, -5px, 0) scale(1.01);
  }

  to {
    transform: translate3d(-8px, 7px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page::before,
  .login-page::after {
    animation: none;
  }
}

.sidebar-auth-card {
  display: none !important;
  gap: 10px;
}

.sidebar-auth-card p {
  word-break: break-word;
}

.sidebar-auth-role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-auth-button {
  min-height: 40px;
  margin-top: 6px;
}

@keyframes loginFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginLogoReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    filter: drop-shadow(0 10px 18px rgba(8, 26, 55, 0.04));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 18px 28px rgba(8, 26, 55, 0.1));
  }
}

@keyframes loginButtonShine {
  from {
    transform: translateX(-130%) skewX(-18deg);
  }

  to {
    transform: translateX(130%) skewX(-18deg);
  }
}

@keyframes sidebarNavShine {
  from {
    background-position: -180% 0, 0 0;
  }

  to {
    background-position: 180% 0, 0 0;
  }
}

@keyframes loginCardSlideIn {
  from {
    opacity: 0;
    transform: translateX(-88px) scale(0.98);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes loginWaveFadeIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loginWaveFloatA {
  from {
    transform: translate3d(-8px, -4px, 0);
  }

  to {
    transform: translate3d(10px, 8px, 0);
  }
}

@keyframes loginWaveFloatB {
  from {
    transform: translate3d(12px, -6px, 0);
  }

  to {
    transform: translate3d(-10px, 10px, 0);
  }
}

@keyframes cadastroModalEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.app-shell {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  padding: 24px;
  gap: 24px;
}

.sidebar,
.content {
  position: relative;
  z-index: 1;
}

.sidebar {
  z-index: 50;
}

.sidebar {
  --sidebar-expanded-width: 256px;
  --sidebar-collapsed-width: 82px;
  --sidebar-padding-x: 14px;
  --sidebar-item-height: 52px;
  --sidebar-item-radius: 10px;
  --sidebar-icon-size: 20px;
  --sidebar-icon-left: 18px;
  --sidebar-text-left: 52px;
  display: flex;
  position: sticky;
  top: 24px;
  flex: 0 0 var(--sidebar-expanded-width);
  flex-direction: column;
  align-self: flex-start;
  align-items: stretch;
  gap: 16px;
  width: var(--sidebar-expanded-width);
  min-height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  padding: 22px var(--sidebar-padding-x) 16px;
  border: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 0%, rgba(88, 101, 255, 0.2), transparent 34%),
    linear-gradient(180deg, #061a56 0%, #06235e 44%, #031744 100%);
  box-shadow: 18px 0 42px rgba(2, 13, 40, 0.22);
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  transition: flex-basis 260ms ease, width 260ms ease, padding 260ms ease, box-shadow 260ms ease;
}

.sidebar:not(:hover):not(:focus-within) {
  flex-basis: var(--sidebar-collapsed-width);
  width: var(--sidebar-collapsed-width);
  padding-right: 10px;
  padding-left: 10px;
  box-shadow: 12px 0 28px rgba(8, 26, 55, 0.14);
  overflow-y: hidden;
}

.brand-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex: 0 0 auto;
  height: auto;
  padding: 0 8px 22px;
  border-bottom: 1px solid rgba(180, 206, 255, 0.18);
}

.brand-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 62px;
  height: 44px;
  background: url("../assets/brand/ARCO SEMPRE - BRANCO (1).png") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-50%) scale(0.86);
  transition: opacity 200ms ease, transform 220ms ease;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: 158px;
  max-height: 46px;
  height: auto;
  image-rendering: auto;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  transition: opacity 180ms ease, transform 220ms ease;
}

.sidebar:not(:hover):not(:focus-within) .brand-block {
  align-items: center;
  min-height: 44px;
  padding-top: 8px;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-bottom: 0;
}

.sidebar:not(:hover):not(:focus-within) .brand-block::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.sidebar:not(:hover):not(:focus-within) .brand-logo {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.86);
}

.brand-block h1,
.hero h2,
.section-heading h3,
.dashboard-card h3 {
  margin: 0;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.brand-block p,
.hero p,
.sidebar-card p,
.dashboard-card p {
  margin: 0;
  line-height: 1.6;
}

.brand-block p {
  display: none;
  max-width: 220px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.75rem;
  line-height: 1.45;
  transition: opacity 180ms ease, transform 220ms ease;
}

.sidebar:not(:hover):not(:focus-within) .brand-block p,
.sidebar:not(:hover):not(:focus-within) .sidebar-card {
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
}

.sidebar:not(:hover):not(:focus-within) .nav-links {
  align-items: center;
  opacity: 1;
  transform: none;
}

.sidebar:not(:hover):not(:focus-within) .nav-link {
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: rgba(235, 244, 255, 0.9);
  font-size: 0;
}

.sidebar:not(:hover):not(:focus-within) .nav-link::before {
  left: 50%;
  transform: translate(-50%, -50%);
}

.sidebar:not(:hover):not(:focus-within) .nav-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
}

.sidebar:not(:hover):not(:focus-within) .nav-group-trigger::after,
.sidebar:not(:hover):not(:focus-within) .nav-submenu {
  display: none;
}

.sidebar:not(:hover):not(:focus-within) .sidebar-logout-button {
  align-self: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 0;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.sidebar:not(:hover):not(:focus-within) .sidebar-logout-button::before {
  right: -2px;
  left: -2px;
}

.sidebar:not(:hover):not(:focus-within) .sidebar-logout-button::after {
  left: 50%;
  transform: translate(-50%, -50%);
}

.eyebrow,
.card-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-left: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.eyebrow {
  margin-bottom: 10px;
  font-weight: 700;
}

.eyebrow::before,
.card-label::before {
  content: none;
}

.nav-links {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  user-select: none;
  transition: opacity 180ms ease, transform 220ms ease;
}

.sidebar-logout-button {
  position: relative;
  margin-top: auto;
  margin-left: 0;
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--sidebar-item-height);
  padding: 0 16px 0 var(--sidebar-text-left);
  border: 1px solid rgba(180, 206, 255, 0.2);
  border-radius: var(--sidebar-item-radius);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  overflow: visible;
  transition: opacity 180ms ease, transform 220ms ease, border-color 180ms ease, background 180ms ease;
}

.sidebar-logout-button::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% + 30px);
  left: 0;
  height: 1px;
  background: rgba(180, 206, 255, 0.18);
  pointer-events: none;
}

.sidebar-logout-button::after {
  content: "";
  position: absolute;
  left: var(--sidebar-icon-left);
  top: 50%;
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 12h9m-3-3 3 3-3 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 12h9m-3-3 3 3-3 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.76;
  transform: translateY(-50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sidebar-logout-button:hover,
.sidebar-logout-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(180, 206, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-logout-button:hover::after,
.sidebar-logout-button:focus-visible::after {
  opacity: 0.96;
  transform: translateY(-50%);
}

.sidebar-logout-button:active {
  transform: translateY(0) scale(0.98);
}

.nav-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--sidebar-item-height);
  padding: 0 16px 0 var(--sidebar-text-left);
  border: 1px solid rgba(180, 206, 255, 0.05);
  border-radius: var(--sidebar-item-radius);
  background-color: rgba(255, 255, 255, 0.045);
  background-image: linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.08) 56%, transparent 76%);
  background-position: -180% 0;
  background-repeat: no-repeat;
  background-size: 220% 100%;
  color: rgba(235, 244, 255, 0.9);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-link::before {
  content: "";
  position: absolute;
  left: var(--sidebar-icon-left);
  top: 50%;
  z-index: 1;
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  background-color: currentColor;
  opacity: 0.96;
  transform: translateY(-50%);
  -webkit-mask: var(--nav-icon, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.4' fill='black'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.4' fill='black'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.4' fill='black'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.4' fill='black'/%3E%3C/svg%3E")) center / contain no-repeat;
  mask: var(--nav-icon, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.4' fill='black'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.4' fill='black'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.4' fill='black'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.4' fill='black'/%3E%3C/svg%3E")) center / contain no-repeat;
}

.nav-link:hover,
.nav-link.active {
  transform: translateX(0);
  border-color: rgba(180, 206, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.08);
  background-image:
    linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.08) 56%, transparent 76%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  background-position: -180% 0, 0 0;
  background-repeat: no-repeat;
  background-size: 220% 100%, 100% 100%;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(2, 13, 40, 0.16);
}

.nav-link:hover,
.nav-link:focus-visible {
  animation: sidebarNavShine 900ms ease forwards;
}

.nav-link[href*="dashboard"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.3' fill='black'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.3' fill='black'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.3' fill='black'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.3' fill='black'/%3E%3C/svg%3E");
}

.nav-group:nth-of-type(1) > .nav-group-trigger {
  --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.5 19c.45-2.75 1.82-4.4 3.5-4.4s3.05 1.65 3.5 4.4M13.5 19c.45-2.75 1.82-4.4 3.5-4.4s3.05 1.65 3.5 4.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-group:nth-of-type(2) > .nav-group-trigger {
  --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h7M15 7h5M4 17h5M13 17h7M4 12h3M11 12h9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='7' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='11' cy='17' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='9' cy='12' r='2' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.nav-group {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

.nav-group[open] {
  z-index: 90;
}

.nav-group > summary {
  list-style: none;
  cursor: pointer;
}

.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group-trigger {
  gap: 10px;
  justify-content: space-between;
  padding-right: 18px;
}

.nav-group-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.nav-group[open] .nav-group-trigger::after {
  transform: translateY(2px) rotate(225deg);
}

.nav-submenu {
  position: static;
  z-index: 100;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 10px 0 2px 24px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav-submenu-link {
  width: 100%;
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 12px 0 16px;
  border-radius: 10px;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 700;
}

.nav-submenu-link::before {
  content: none;
}

.sidebar-card,
.hero,
.summary-card,
.import-card,
.form-card,
.mini-card,
.dashboard-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero::before,
.summary-card::before,
.import-card::before,
.form-card::before,
.mini-card::before,
.dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background: linear-gradient(90deg, rgba(18, 55, 110, 0.92) 0 24%, rgba(18, 55, 110, 0.22) 24% 58%, transparent 58%);
  opacity: 0.48;
}

.hero::after,
.summary-card::after,
.import-card::after,
.form-card::after,
.mini-card::after,
.dashboard-card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 78px;
  height: 10px;
  background-image:
    repeating-linear-gradient(90deg, rgba(42, 94, 168, 0.22) 0 8px, transparent 8px 14px),
    linear-gradient(90deg, rgba(42, 94, 168, 0.16), rgba(42, 94, 168, 0.16));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 8px;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.sidebar-card {
  margin-top: auto;
  padding: 16px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  color: #ffffff;
  transition: opacity 180ms ease, transform 220ms ease;
}

.sidebar-bottom {
  display: none;
}

.sidebar-import-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-import-summary {
  gap: 12px;
}

.sidebar-import-card strong {
  font-size: 1rem;
  line-height: 1.3;
}

.sidebar-import-card p {
  font-size: 0.92rem;
  line-height: 1.45;
}

.sidebar-history-block {
  display: grid;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(12, 34, 75, 0.1);
}

.sidebar-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
}

.sidebar-history-item,
.sidebar-history-empty {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(12, 34, 75, 0.05);
}

.sidebar-history-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-history-item strong,
.sidebar-history-item span {
  display: block;
}

.sidebar-history-item strong {
  margin-bottom: 4px;
  font-size: 0.92rem;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sidebar-history-item span,
.sidebar-history-empty {
  color: var(--text-soft);
  line-height: 1.45;
}

.sidebar-history-meta {
  font-size: 0.76rem;
}

.sidebar-history-periods {
  margin-top: 4px;
  font-size: 0.76rem;
}

.sidebar-history-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(12, 34, 75, 0.04);
  color: var(--primary);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.sidebar-history-delete:hover {
  transform: translateY(-1px);
  border-color: rgba(203, 69, 91, 0.35);
  background: rgba(203, 69, 91, 0.22);
}

.sidebar-history-delete svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.sidebar-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.sidebar-upload-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.18);
}

.sidebar-file-input {
  display: none;
}

.sidebar-status {
  min-height: 0;
  justify-content: start;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.78rem;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 26, 55, 0.24);
  backdrop-filter: blur(12px);
}

.base-data-overlay {
  background: rgba(8, 26, 55, 0.34);
  backdrop-filter: blur(16px);
}

.analysis-loading-overlay {
  z-index: 140;
  background: rgba(4, 15, 34, 0.52);
  backdrop-filter: blur(8px);
}

.analysis-loading-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(320px, calc(100vw - 48px));
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(9, 24, 49, 0.92);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.analysis-loading-card strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.analysis-loading-card p {
  margin: 0;
  color: rgba(232, 239, 251, 0.82);
  line-height: 1.5;
}

.analysis-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: #7fb0ff;
  border-radius: 999px;
  animation: analysis-loading-spin 0.9s linear infinite;
}

@keyframes analysis-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  width: min(760px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 60px rgba(8, 26, 55, 0.24);
}

.base-data-modal {
  width: min(1440px, 96vw);
  max-height: min(92vh, 960px);
  padding: 30px;
}

.import-models-modal {
  width: min(920px, 94vw);
  max-height: min(82vh, 760px);
}

.modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.modal-header h3 {
  margin-top: 4px;
  font-size: 1.6rem;
}

.modal-header p {
  color: var(--text-soft);
  max-width: 520px;
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(12, 34, 75, 0.04);
  color: var(--primary);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.modal-close:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.4);
  background: rgba(42, 94, 168, 0.08);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.modal-back-button:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.4);
  background: rgba(42, 94, 168, 0.08);
}

.modal-back-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.historical-modal-actions {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.import-models-grid {
  display: grid;
  gap: 14px;
}

.detailed-meta-modal {
  width: min(1560px, calc(100vw - 40px));
  max-height: min(94vh, 1040px);
  padding: 30px;
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.97));
}

.detailed-meta-modal-header {
  margin-bottom: 18px;
}

.detailed-meta-modal-header p {
  max-width: 760px;
}

.detailed-meta-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.detailed-meta-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  margin-top: -8px;
  margin-bottom: 18px;
}

.detailed-meta-save-button,
.detailed-meta-export-button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(31, 82, 153, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.98));
  color: #183b6d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.detailed-meta-save-button {
  margin-left: 0;
  border-color: rgba(31, 122, 76, 0.22);
  background:
    linear-gradient(180deg, rgba(246, 255, 250, 0.98), rgba(235, 249, 241, 0.98));
  color: #1f7048;
}

.detailed-meta-export-button {
  margin-left: 0;
}

.detailed-meta-save-button svg,
.detailed-meta-export-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.detailed-meta-save-button:hover,
.detailed-meta-export-button:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 82, 153, 0.28);
  box-shadow: 0 12px 24px rgba(12, 34, 75, 0.08);
}

.detailed-meta-save-button:hover {
  border-color: rgba(31, 122, 76, 0.34);
}

.detailed-meta-status-strip + .detailed-meta-status-strip {
  justify-content: flex-end;
  margin-top: -8px;
}

.detailed-meta-status-strip + .detailed-meta-status-strip > span {
  display: none;
}

.detailed-meta-workspace {
  display: grid;
  gap: 18px;
}

.detailed-meta-overview {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(22, 63, 120, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(112, 182, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(253, 254, 255, 0.99), rgba(245, 248, 252, 0.97));
  box-shadow:
    0 18px 36px rgba(8, 26, 55, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.detailed-meta-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.06) 60%, transparent 82%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  z-index: 2;
}

.detailed-meta-overview::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(82, 131, 190, 0.14);
  border-radius: 14px;
  pointer-events: none;
}

.detailed-meta-overview.shine-active::before {
  animation: loginButtonShine 900ms ease forwards;
}

.detailed-meta-overview-caption {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 4px 0 10px;
}

.detailed-meta-overview-caption::before,
.detailed-meta-overview-caption::after {
  content: "";
  position: absolute;
  top: 20px;
  width: calc(50% - 150px);
  height: 1px;
  background: linear-gradient(90deg, rgba(28, 81, 152, 0), rgba(28, 81, 152, 0.32));
}

.detailed-meta-overview-caption::before {
  left: 0;
}

.detailed-meta-overview-caption::after {
  right: 0;
  background: linear-gradient(90deg, rgba(28, 81, 152, 0.32), rgba(28, 81, 152, 0));
}

.detailed-meta-overview-caption .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

.detailed-meta-overview-caption h4 {
  margin: 0;
  max-width: 540px;
  color: var(--primary);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.detailed-meta-overview-caption p {
  margin: 0;
  max-width: 720px;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

.detailed-meta-overview-scroll {
  overflow-x: auto;
  padding: 4px 2px 10px;
}

.detailed-meta-overview-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(150px, 1fr));
  min-width: 720px;
}

.detailed-meta-overview-head {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 1px solid rgba(30, 79, 145, 0.12);
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.72);
}

.detailed-meta-overview-head .detailed-meta-overview-label,
.detailed-meta-overview-head-cell {
  min-height: 48px;
  padding: 12px 14px;
  border-right: 1px solid rgba(30, 79, 145, 0.08);
  background: rgba(118, 177, 240, 0.14);
  color: #163a6d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detailed-meta-overview-head-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.detailed-meta-overview-row {
  position: relative;
  border-left: 1px solid rgba(22, 63, 120, 0.12);
  border-right: 1px solid rgba(22, 63, 120, 0.12);
}

.detailed-meta-overview-row:last-child {
  border-bottom: 1px solid rgba(22, 63, 120, 0.12);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}

.detailed-meta-overview-row .detailed-meta-overview-label,
.detailed-meta-overview-value {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 14px 16px;
  border-top: 1px solid rgba(30, 79, 145, 0.09);
  background: rgba(255, 255, 255, 0.86);
  color: #173861;
  font-weight: 700;
}

.detailed-meta-overview-row .detailed-meta-overview-label {
  position: relative;
  letter-spacing: 0.02em;
  font-size: 0.98rem;
  padding-left: 34px;
  text-transform: uppercase;
}

.detailed-meta-overview-row .detailed-meta-overview-label::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 11px;
  bottom: 11px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(86, 151, 227, 0.9), rgba(39, 103, 180, 0.9));
}

.detailed-meta-overview-value {
  justify-content: flex-end;
  border-left: 1px solid rgba(30, 79, 145, 0.08);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  text-shadow: none;
}

.detailed-meta-overview-row:nth-child(odd):not(.grand-total) .detailed-meta-overview-label,
.detailed-meta-overview-row:nth-child(odd):not(.grand-total) .detailed-meta-overview-value {
  background: rgba(244, 248, 252, 0.92);
}

.detailed-meta-overview-row.grand-total .detailed-meta-overview-label,
.detailed-meta-overview-row.grand-total .detailed-meta-overview-value {
  border-top-color: rgba(61, 136, 215, 0.28);
  background:
    linear-gradient(180deg, rgba(243, 250, 255, 0.98), rgba(233, 245, 255, 0.98));
  color: #0f3464;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 0 0 1px rgba(92, 164, 236, 0.12);
}

.detailed-meta-overview-row.grand-total .detailed-meta-overview-label::before {
  background: linear-gradient(180deg, rgba(232, 184, 70, 0.98), rgba(194, 136, 14, 0.98));
}

.detailed-meta-region-list {
  display: grid;
  gap: 18px;
}

.detailed-meta-region-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(42, 94, 168, 0.14);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 255, 0.92));
  box-shadow: 0 22px 40px rgba(8, 26, 55, 0.08);
}

.detailed-meta-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.detailed-meta-region-head h4 {
  margin: 6px 0 0;
  font-size: 1.4rem;
}

.detailed-meta-region-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.1);
  color: #22579f;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.detailed-meta-region-stack {
  display: grid;
  gap: 16px;
}

.detailed-meta-branch-card,
.detailed-meta-region-total {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
}

.detailed-meta-region-total {
  background: linear-gradient(180deg, rgba(21, 62, 122, 0.08), rgba(21, 62, 122, 0.03));
}

.detailed-meta-branch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detailed-meta-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(20, 64, 124, 0.12), rgba(62, 118, 194, 0.08));
  color: var(--primary);
}

.detailed-meta-branch-badge .eyebrow {
  margin: 0;
}

.detailed-meta-branch-badge h5 {
  margin: 0;
  font-size: 1.1rem;
}

.detailed-meta-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(42, 94, 168, 0.24);
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.08);
  color: #23579f;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.detailed-meta-add-button:hover {
  transform: translateY(-1px);
  background: rgba(42, 94, 168, 0.14);
  border-color: rgba(42, 94, 168, 0.42);
}

.detailed-meta-add-agent-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(42, 94, 168, 0.16);
  border-radius: 14px;
  background: rgba(42, 94, 168, 0.06);
}

.detailed-meta-add-agent-panel.hidden {
  display: none;
}

.detailed-meta-add-agent-input {
  flex: 1;
  min-width: 220px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(12, 34, 75, 0.14);
  border-radius: 12px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
}

.detailed-meta-add-agent-confirm,
.detailed-meta-add-agent-cancel {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}

.detailed-meta-add-agent-confirm {
  border: 1px solid rgba(35, 87, 159, 0.3);
  background: #23579f;
  color: #fff;
}

.detailed-meta-add-agent-cancel {
  border: 1px solid rgba(12, 34, 75, 0.14);
  background: #fff;
  color: var(--primary);
}

.detailed-meta-grid-scroll {
  overflow: auto;
  border: 1px solid rgba(12, 34, 75, 0.08);
  border-radius: 18px;
}

.detailed-meta-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) repeat(3, minmax(150px, 1fr));
  align-items: stretch;
  min-width: 760px;
}

.detailed-meta-grid > * {
  min-width: 0;
}

.detailed-meta-grid-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf4fc;
}

.detailed-meta-head-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.12);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.detailed-meta-head-label:first-child {
  justify-content: flex-start;
  text-align: left;
}

.detailed-meta-agent-row {
  background: rgba(255, 255, 255, 0.94);
}

.detailed-meta-agent-row:nth-child(odd) {
  background: rgba(248, 250, 254, 0.94);
}

.detailed-meta-agent-row > *,
.detailed-meta-total-row > * {
  padding: 12px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.detailed-meta-agent-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  flex-wrap: wrap;
}

.detailed-meta-agent-cell strong {
  font-size: 0.98rem;
  line-height: 1.3;
}

.detailed-meta-agent-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.detailed-meta-agent-chip.muted {
  background: rgba(107, 122, 145, 0.1);
  color: #60708a;
}

.detailed-meta-agent-row.is-excluded-from-total {
  background: rgba(248, 250, 254, 0.76);
}

.detailed-meta-edit-button,
.detailed-meta-remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(190, 73, 73, 0.22);
  border-radius: 999px;
  background: rgba(190, 73, 73, 0.08);
  color: #a33b3b;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.detailed-meta-edit-button {
  margin-left: auto;
  border-color: rgba(42, 94, 168, 0.22);
  background: rgba(42, 94, 168, 0.08);
  color: #23579f;
  font-size: 0.8rem;
}

.detailed-meta-edit-button + .detailed-meta-remove-button {
  margin-left: 0;
}

.detailed-meta-remove-button {
  margin-left: auto;
}

.detailed-meta-edit-button:hover,
.detailed-meta-remove-button:hover {
  transform: translateY(-1px);
  background: rgba(190, 73, 73, 0.14);
  border-color: rgba(190, 73, 73, 0.34);
}

.detailed-meta-edit-button:hover {
  background: rgba(42, 94, 168, 0.14);
  border-color: rgba(42, 94, 168, 0.34);
}

.detailed-meta-field {
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailed-meta-field input {
  width: min(100%, 136px);
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(12, 34, 75, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--primary);
  font: inherit;
  text-align: center;
}

.detailed-meta-field input:focus {
  outline: none;
  border-color: rgba(42, 94, 168, 0.46);
  box-shadow: 0 0 0 4px rgba(42, 94, 168, 0.1);
}

.detailed-meta-total-row {
  background: rgba(12, 34, 75, 0.06);
}

.detailed-meta-total-row.region {
  background: linear-gradient(180deg, rgba(17, 62, 123, 0.16), rgba(17, 62, 123, 0.07));
}

.detailed-meta-total-row.branch {
  background: linear-gradient(180deg, rgba(42, 94, 168, 0.12), rgba(42, 94, 168, 0.05));
}

.detailed-meta-total-label,
.detailed-meta-total-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  color: var(--primary);
  font-weight: 800;
  text-align: center;
}

.detailed-meta-total-label {
  justify-content: flex-start;
  letter-spacing: 0.03em;
  text-align: left;
}

.detailed-meta-empty-state {
  padding: 24px;
  border: 1px dashed rgba(12, 34, 75, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
}

.detailed-meta-empty-state h4 {
  margin: 10px 0 8px;
  font-size: 1.35rem;
}

.import-model-card {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 22px;
  border: 1px solid rgba(42, 94, 168, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.92));
  color: var(--primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(8, 26, 55, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.import-model-card:hover {
  transform: translateY(-2px);
  border-color: rgba(42, 94, 168, 0.48);
  box-shadow: 0 24px 42px rgba(8, 26, 55, 0.14);
}

.import-model-card:disabled,
.import-model-card--pending {
  cursor: not-allowed;
  opacity: 0.72;
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 246, 250, 0.9));
}

.import-model-card:disabled:hover {
  transform: none;
  border-color: rgba(42, 94, 168, 0.22);
  box-shadow: none;
}

.import-model-card:focus-visible {
  outline: none;
  border-color: rgba(42, 94, 168, 0.64);
  box-shadow: 0 0 0 4px rgba(42, 94, 168, 0.12), 0 24px 42px rgba(8, 26, 55, 0.14);
}

.import-model-card strong {
  font-size: 1.08rem;
  line-height: 1.35;
}

.import-model-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.import-model-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.1);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.historical-modal-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.modal-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(42, 94, 168, 0.28);
  border-radius: 14px;
  background: rgba(42, 94, 168, 0.08);
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.modal-upload-button:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.5);
  background: rgba(42, 94, 168, 0.12);
}

.modal-upload-button.secondary {
  min-height: 40px;
  font-size: 0.88rem;
  background: rgba(12, 34, 75, 0.04);
}

.historical-status {
  justify-content: start;
  width: 100%;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 16px;
  white-space: normal;
  line-height: 1.45;
}

.historical-status.neutral {
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
}

.historical-status.success {
  background: rgba(20, 96, 52, 0.14);
  color: #146034;
}

.historical-status.error {
  background: rgba(148, 26, 49, 0.14);
  color: #941a31;
}

.modal-history-block {
  padding-top: 18px;
}

.modal-history-list {
  max-height: 320px;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 24px;
  min-width: 0;
}

.analysis-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.9fr);
  gap: 18px;
}

.analysis-summary-grid .mini-card {
  min-height: 118px;
}

.analysis-summary-grid .mini-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.analysis-summary-inline {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.analysis-summary-inline strong {
  display: inline;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.analysis-reference-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
  gap: 18px;
  align-items: center;
}

.analysis-reference-copy {
  min-width: 0;
}

.analysis-action-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}

.analysis-quickview-button {
  display: grid;
  grid-template-columns: 18px minmax(0, auto);
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  min-height: 36px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(42, 94, 168, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(233, 243, 255, 0.98));
  color: var(--primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 10px 18px rgba(8, 26, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  line-height: 1;
}

.analysis-quickview-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
  justify-self: center;
}

.analysis-quickview-button span {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  text-overflow: clip;
}

.analysis-quickview-button:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.4);
  box-shadow:
    0 14px 22px rgba(8, 26, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.analysis-quickview-button.secondary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 253, 0.98));
}

.analysis-quickview-button:disabled {
  opacity: 0.72;
  cursor: wait;
}

.analysis-kpi-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(243, 248, 255, 0.97));
  color: var(--text);
  border-color: rgba(42, 94, 168, 0.28);
  box-shadow:
    0 18px 36px rgba(8, 26, 55, 0.08),
    0 0 0 1px rgba(112, 182, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.analysis-kpi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(112, 182, 255, 0.035), rgba(112, 182, 255, 0.015) 18%, rgba(112, 182, 255, 0.015) 82%, rgba(112, 182, 255, 0.035)),
    linear-gradient(180deg, rgba(112, 182, 255, 0.045), rgba(112, 182, 255, 0.015) 18%, rgba(112, 182, 255, 0.015) 82%, rgba(112, 182, 255, 0.045));
  pointer-events: none;
  opacity: 0.72;
}

.analysis-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(120, 186, 255, 0.26);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}

.analysis-kpi-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 16px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(12, 34, 75, 0.52);
}

.analysis-kpi-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.analysis-kpi-item {
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid rgba(42, 94, 168, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 10px 18px rgba(8, 26, 55, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.analysis-kpi-item span {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(12, 34, 75, 0.48);
}

.analysis-kpi-item strong {
  display: block;
  color: var(--primary);
  font-size: 1.2rem;
  line-height: 1.15;
}

.analysis-kpi-item.highlight {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(42, 94, 168, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 18px rgba(42, 94, 168, 0.05),
    inset 0 0 0 1px rgba(120, 186, 255, 0.1);
}

.analysis-kpi-item.highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 94, 168, 0.72), rgba(120, 186, 255, 0.78));
}

.analysis-kpi-item.highlight strong {
  color: #1f5fb0;
}

.analysis-groups {
  display: grid;
  gap: 20px;
}

.analysis-empty-state,
.analysis-region-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.analysis-empty-state {
  padding: 24px;
}

.analysis-empty-state h3 {
  margin: 4px 0 10px;
  font-size: 1.4rem;
}

.analysis-empty-state p {
  max-width: 760px;
  color: var(--text-soft);
  line-height: 1.7;
}

.analysis-region-card {
  overflow: hidden;
  padding: 0 22px 22px;
}

.analysis-region-top,
.analysis-branch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.analysis-region-top {
  margin: 0 -22px 18px;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, rgba(15, 43, 87, 0.96), rgba(42, 94, 168, 0.92)),
    #163867;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.analysis-region-top h3,
.analysis-branch-row h4 {
  margin: 0;
}

.analysis-region-badge,
.analysis-branch-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.analysis-region-badge {
  color: #ffffff;
}

.analysis-region-badge h3 {
  font-size: 1.28rem;
  color: #ffffff;
}

.analysis-branch-badge {
  position: relative;
  padding: 14px 18px 14px 20px;
  border: 1px solid rgba(42, 94, 168, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(42, 94, 168, 0.1), rgba(255, 255, 255, 0.92) 58%),
    #ffffff;
  box-shadow:
    0 10px 24px rgba(8, 26, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.analysis-branch-badge::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(42, 94, 168, 0.9), rgba(15, 43, 87, 0.92));
}

.analysis-branch-badge h4 {
  font-size: 0.98rem;
  color: var(--primary);
}

.analysis-badge-label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}

.analysis-region-badge .analysis-badge-label,
.analysis-region-totals .analysis-total-pill {
  color: rgba(255, 255, 255, 0.84);
}

.analysis-region-totals,
.analysis-branch-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.analysis-region-totals strong,
.analysis-branch-totals strong {
  color: var(--primary);
}

.analysis-total-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(12, 34, 75, 0.08);
  border-radius: 999px;
  background: rgba(12, 34, 75, 0.04);
  color: var(--text-soft);
  white-space: nowrap;
  font-size: 0.82rem;
}

.analysis-total-pill.revenue {
  background: rgba(42, 94, 168, 0.08);
  border-color: rgba(42, 94, 168, 0.12);
}

.analysis-branch-list {
  display: grid;
  gap: 18px;
}

.analysis-branch-section {
  padding-top: 16px;
  border-top: 1px solid rgba(12, 34, 75, 0.08);
}

.analysis-branch-section:first-child {
  padding-top: 0;
  border-top: none;
}

.analysis-branch-row {
  margin-bottom: 10px;
}

.analysis-branch-row h4 {
  font-size: 1.05rem;
}

.analysis-table-shell {
  overflow: visible;
}

.analysis-agent-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.analysis-agent-main {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.analysis-agent-name {
  min-width: 0;
}

.analysis-missing-button {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(182, 63, 69, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 242, 243, 0.98), rgba(251, 232, 234, 0.94));
  color: #a22f37;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(110, 23, 28, 0.1);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.analysis-missing-button:hover,
.analysis-missing-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(182, 63, 69, 0.38);
  box-shadow: 0 10px 18px rgba(92, 20, 25, 0.14);
  background: linear-gradient(135deg, rgba(255, 234, 237, 0.98), rgba(252, 240, 242, 0.96));
}

.analysis-adjustment-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 127, 84, 0.12);
  color: #1f6f4f;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.analysis-adjustment-badge.is-positive {
  background: rgba(34, 127, 84, 0.12);
  color: #1f6f4f;
}

.analysis-adjustment-badge.is-negative {
  background: rgba(182, 63, 69, 0.12);
  color: #9b2f36;
}

.analysis-adjustment-badge:hover,
.analysis-adjustment-badge:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(15, 38, 78, 0.12);
}

.analysis-adjustment-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analysis-agent-adjustment-groups {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.analysis-adjustment-button {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(42, 94, 168, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(229, 238, 250, 0.94));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.analysis-adjustment-button:hover,
.analysis-adjustment-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.32);
  box-shadow: 0 10px 18px rgba(15, 38, 78, 0.12);
  background: linear-gradient(135deg, rgba(220, 234, 253, 0.98), rgba(243, 248, 255, 0.96));
}

.analysis-adjustment-button.is-negative {
  border-color: rgba(182, 63, 69, 0.18);
  color: #9b2f36;
  background: linear-gradient(135deg, rgba(255, 249, 249, 0.98), rgba(250, 235, 236, 0.94));
}

.analysis-adjustment-button.is-negative:hover,
.analysis-adjustment-button.is-negative:focus-visible {
  border-color: rgba(182, 63, 69, 0.34);
  box-shadow: 0 10px 18px rgba(92, 20, 25, 0.12);
  background: linear-gradient(135deg, rgba(255, 238, 240, 0.98), rgba(252, 244, 245, 0.96));
}

.analysis-quantity-adjustment-actions {
  padding-right: 8px;
  border-right: 1px solid rgba(12, 34, 75, 0.1);
}

.analysis-quantity-adjustment-badge {
  background: rgba(42, 94, 168, 0.1);
  color: #1b5b9e;
}

.analysis-missing-popover {
  position: fixed;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
}

.analysis-missing-popover.hidden {
  display: none;
}

.analysis-missing-popover-card {
  display: flex;
  flex-direction: column;
  max-height: var(--analysis-missing-popover-max-height, min(520px, calc(100vh - 48px)));
  padding: 16px;
  border: 1px solid rgba(182, 63, 69, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 22px 44px rgba(15, 38, 78, 0.16),
    0 8px 20px rgba(92, 20, 25, 0.08);
  backdrop-filter: blur(18px);
}

.analysis-missing-popover-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-missing-popover-header h4 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 1rem;
}

.analysis-missing-popover-close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(12, 34, 75, 0.08);
  border-radius: 999px;
  background: rgba(245, 248, 253, 0.98);
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.analysis-missing-popover-copy {
  margin: 12px 0 0;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.55;
}

.analysis-missing-popover-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.analysis-missing-popover-list::-webkit-scrollbar {
  width: 8px;
}

.analysis-missing-popover-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.24);
}

.analysis-missing-popover-list::-webkit-scrollbar-track {
  background: transparent;
}

.analysis-missing-item {
  padding: 12px;
  border: 1px solid rgba(12, 34, 75, 0.08);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
}

.analysis-missing-item.is-acknowledged .analysis-missing-item-protocol,
.analysis-missing-item.is-acknowledged .analysis-missing-item-meta {
  text-decoration: line-through;
  opacity: 0.58;
}

.analysis-missing-item-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 600;
}

.analysis-missing-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.analysis-missing-item-protocol {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(240, 244, 251, 0.98);
  color: var(--text);
  font-size: 0.8rem;
  font-family: "IBM Plex Mono", "Consolas", monospace;
  overflow-wrap: anywhere;
}

.analysis-missing-copy-button {
  flex: none;
  padding: 8px 10px;
  border: 1px solid rgba(42, 94, 168, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.analysis-missing-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.analysis-location-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.12);
  color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.analysis-location-pin svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.analysis-relief-button {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #d8e3f1;
  border-radius: 6px;
  background: #ffffff;
  color: #1f4f95;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.analysis-relief-button svg {
  width: 17px;
  height: 17px;
}

.analysis-relief-button:hover,
.analysis-relief-button:focus-visible,
.analysis-relief-button.is-active {
  border-color: #6f9dd2;
  background: #eff6ff;
  color: #12376e;
}

.analysis-relief-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #edf7f1;
  color: #23633f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.analysis-relief-modal-card {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.analysis-relief-status-card,
.analysis-relief-panel {
  border: 1px solid #dbe6f3;
  border-radius: 10px;
  background: #f8fbff;
  padding: 14px;
}

.analysis-relief-status-card {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.analysis-relief-status-label,
.analysis-relief-panel-head span {
  color: #657895;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.analysis-relief-status-card strong,
.analysis-relief-panel-head strong {
  color: #102d59;
  font-size: 0.9rem;
}

.analysis-relief-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.analysis-relief-panel.hidden {
  display: none;
}

.analysis-relief-panel-head {
  display: grid;
  gap: 4px;
}

.analysis-relief-form {
  display: grid;
  gap: 14px;
}

.analysis-relief-form label,
.analysis-relief-panel label {
  display: grid;
  gap: 7px;
  color: #1b3764;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.analysis-relief-form input,
.analysis-relief-form select,
.analysis-relief-panel input {
  width: 100%;
  border: 1px solid #d7e1ef;
  border-radius: 8px;
  padding: 11px 12px;
  color: #102d59;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.analysis-relief-status {
  min-height: 20px;
  margin: 0;
  color: #607395;
  font-size: 0.82rem;
  font-weight: 700;
}

.analysis-relief-status.success {
  color: #23704a;
}

.analysis-relief-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analysis-relief-history li {
  display: grid;
  gap: 3px;
  border-top: 1px solid #e1ebf6;
  padding-top: 8px;
  color: #607395;
  font-size: 0.78rem;
  font-weight: 700;
}

.analysis-relief-history li:first-child {
  border-top: 0;
  padding-top: 0;
}

.analysis-relief-history strong {
  color: #102d59;
  font-size: 0.82rem;
}

.analysis-relief-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analysis-relief-history-row div {
  display: grid;
  gap: 3px;
}

.analysis-relief-history-edit {
  border: 1px solid #c9d8eb;
  border-radius: 7px;
  background: #ffffff;
  color: #17447e;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.analysis-relief-history-edit:hover,
.analysis-relief-history-edit:focus-visible {
  border-color: #6f9dd2;
  background: #eff6ff;
}

.analysis-relief-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.analysis-relief-actions .analysis-quickview-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.analysis-table th,
.analysis-table td {
  padding: 10px 8px;
  border-top: 1px solid rgba(12, 34, 75, 0.08);
  text-align: left;
}

.analysis-table thead th {
  border-top: none;
  color: var(--text-soft);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.analysis-table th:first-child,
.analysis-table td:first-child {
  width: 31%;
  padding-left: 0;
}

.analysis-table th:nth-child(2),
.analysis-table td:nth-child(2) {
  width: 12%;
}

.analysis-table th:nth-child(3),
.analysis-table td:nth-child(3) {
  width: 12%;
}

.analysis-table th:nth-child(4),
.analysis-table td:nth-child(4) {
  width: 12%;
}

.analysis-table th:nth-child(5),
.analysis-table td:nth-child(5) {
  width: 15%;
}

.analysis-table th:nth-child(6),
.analysis-table td:nth-child(6) {
  width: 18%;
  padding-right: 0;
}

.analysis-table th:nth-child(2),
.analysis-table th:nth-child(3),
.analysis-table th:nth-child(4),
.analysis-table th:nth-child(5),
.analysis-table th:nth-child(6),
.analysis-table td:nth-child(2),
.analysis-table td:nth-child(3),
.analysis-table td:nth-child(4),
.analysis-table td:nth-child(5),
.analysis-table td:nth-child(6) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.analysis-table td {
  font-size: 0.88rem;
}

.analysis-table tbody tr:hover {
  background: rgba(42, 94, 168, 0.05);
}

.analysis-branch-totals {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(12, 34, 75, 0.08);
  justify-content: end;
}

.analysis-branch-totals .analysis-total-pill {
  min-height: 42px;
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(231, 238, 249, 0.92));
  border-color: rgba(42, 94, 168, 0.14);
  box-shadow:
    0 12px 24px rgba(8, 26, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 700;
}

.analysis-branch-totals .analysis-total-pill.revenue {
  background: linear-gradient(135deg, rgba(213, 233, 255, 0.98), rgba(238, 246, 255, 0.94));
}

.analysis-region-footer {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(12, 34, 75, 0.1);
}

.analysis-region-footer-pill {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(15, 43, 87, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 43, 87, 0.04), rgba(42, 94, 168, 0.12)),
    #fdfefe;
  box-shadow:
    0 18px 36px rgba(8, 26, 55, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: var(--primary);
  align-content: start;
  overflow: hidden;
  isolation: isolate;
}

.analysis-region-footer-pill::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(15, 43, 87, 0.98), rgba(42, 94, 168, 0.95));
}

.analysis-region-footer-pill::after {
  content: "";
  position: absolute;
  inset: auto -16px -18px auto;
  width: 88px;
  height: 88px;
  border-radius: 24px 0 22px 0;
  background: linear-gradient(135deg, rgba(42, 94, 168, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.analysis-region-footer-pill > * {
  position: relative;
  z-index: 1;
}

.analysis-region-footer-pill {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.analysis-region-footer-pill strong {
  display: block;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

.analysis-region-footer-pill.revenue {
  background:
    linear-gradient(135deg, rgba(225, 241, 255, 0.96), rgba(214, 232, 255, 0.98)),
    #fdfefe;
}

.analysis-region-footer-pill.revenue::before {
  background: linear-gradient(180deg, rgba(42, 94, 168, 0.92), rgba(112, 182, 255, 0.92));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body[data-page="commissions"] {
  background: #f6f8fc;
}

body[data-page="commissions"]::before {
  opacity: 0.45;
}

.commissions-content {
  gap: 18px;
}

.commissions-overview,
.commissions-panel {
  border: 1px solid rgba(29, 60, 108, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(16, 44, 86, 0.08);
}

.commissions-hero {
  min-height: 116px;
  padding: 8px 0 18px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.commissions-hero::before,
.commissions-hero::after {
  display: none;
}

.commissions-title-group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.commissions-stat-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
}

.commissions-stat-icon svg,
.commissions-search svg,
.commissions-filter-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.commissions-stat-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.commissions-hero .eyebrow,
.commissions-panel-heading .eyebrow {
  color: #233b64;
  letter-spacing: 0.08em;
}

.commissions-hero h2 {
  margin: 6px 0 10px;
  color: #071d45;
  font-size: clamp(2.35rem, 4vw, 3.15rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.commissions-hero p {
  max-width: 760px;
  margin: 0;
  color: #60718f;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

.commissions-period-box {
  min-width: 250px;
  padding: 18px;
  border: 1px solid rgba(29, 60, 108, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(16, 44, 86, 0.1);
}

.commissions-period-box label {
  color: #43577a;
  font-size: 0.72rem;
  font-weight: 800;
}

.commissions-period-box .period-panel {
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

.commissions-period-box .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

.commissions-period-box .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

.commissions-period-box .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

.commissions-period-box .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.commissions-period-box .period-month-button {
  min-height: 48px;
  border-radius: 9px;
  font-size: 0.82rem;
}

.commissions-period-box .period-month-button.active::after {
  display: none;
}

.commissions-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.commissions-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(29, 60, 108, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(16, 44, 86, 0.08);
  overflow: hidden;
}

.commissions-stat-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 22px 24px;
}

.commissions-stat-card + .commissions-stat-card {
  border-left: 1px solid rgba(29, 60, 108, 0.1);
}

.commissions-stat-icon {
  width: 48px;
  height: 48px;
}

.commissions-stat-icon.blue {
  background: #edf5ff;
  color: #2267d7;
}

.commissions-stat-icon.green {
  background: #e8f7f1;
  color: #14975e;
}

.commissions-stat-icon.purple {
  background: #f3edff;
  color: #7048d6;
}

.commissions-stat-icon.orange {
  background: #fff2e8;
  color: #f07728;
}

.commissions-stat-card > div > span,
.commissions-rule-panel .commissions-rule-title-row > span:first-child {
  display: block;
  color: #52627f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.commissions-stat-card strong,
.commissions-rule-panel strong {
  display: block;
  margin-top: 6px;
  color: #071d45;
  font-size: 1.36rem;
  line-height: 1.1;
}

.commissions-stat-card small {
  display: block;
  margin-top: 8px;
  color: #14975e;
  font-size: 0.74rem;
  font-weight: 700;
}

.commissions-stat-card:nth-child(3) small {
  color: #7048d6;
}

.commissions-stat-card:nth-child(4) small {
  color: #f07728;
}

.commissions-rule-panel {
  display: flex;
  align-items: start;
  gap: 18px;
  min-height: 112px;
  padding: 22px 24px;
  border: 1px solid rgba(34, 103, 215, 0.18);
  border-top-color: rgba(34, 103, 215, 0.38);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(16, 44, 86, 0.08);
}

.commissions-rule-panel strong {
  color: #1264d7;
  font-size: 1.12rem;
}

.commissions-rule-title-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.commissions-rule-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(34, 103, 215, 0.2);
  border-radius: 999px;
  background: #f2f7ff;
  color: #1d62cf;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  letter-spacing: 0;
  text-transform: none;
}

.commissions-rule-help:focus-visible {
  outline: 3px solid rgba(34, 103, 215, 0.18);
  outline-offset: 2px;
}

.commissions-rule-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 10;
  width: min(330px, calc(100vw - 48px));
  padding: 12px 14px;
  border: 1px solid rgba(29, 60, 108, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #263956;
  box-shadow: 0 18px 36px rgba(16, 44, 86, 0.16);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.commissions-rule-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(29, 60, 108, 0.12);
  border-bottom: 1px solid rgba(29, 60, 108, 0.12);
  background: #ffffff;
  transform: translate(-50%, -5px) rotate(45deg);
}

.commissions-rule-help:hover .commissions-rule-tooltip,
.commissions-rule-help:focus .commissions-rule-tooltip,
.commissions-rule-help:focus-visible .commissions-rule-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.commissions-rule-panel p {
  margin: 12px 0 0;
  color: #53617d;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.7;
}

.commissions-totals-panel {
  border: 1px solid rgba(29, 60, 108, 0.14);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(16, 44, 86, 0.08);
  overflow: hidden;
}

.commissions-totals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 0;
  color: #071d45;
}

.commissions-totals-header strong {
  color: #52627f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.commissions-totals-header p {
  margin: 0;
  color: #53617d;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.commissions-totals-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid rgba(29, 60, 108, 0.1);
}

.commissions-total-card {
  min-height: 104px;
  padding: 18px 20px;
}

.commissions-total-card + .commissions-total-card {
  border-left: 1px solid rgba(29, 60, 108, 0.1);
}

.commissions-total-card span {
  display: block;
  color: #52627f;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.commissions-total-card strong {
  display: block;
  margin-top: 8px;
  color: #071d45;
  font-size: 1.14rem;
  line-height: 1.1;
  white-space: nowrap;
}

.commissions-total-card small {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.commissions-total-card.green small {
  color: #14975e;
}

.commissions-total-card.purple small {
  color: #7048d6;
}

.commissions-total-card.orange small {
  color: #f07728;
}

.commissions-total-card.blue small {
  color: #2267d7;
}

.commissions-panel {
  padding: 0;
  overflow: hidden;
}

.commissions-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 18px;
}

.commissions-panel-heading h3 {
  margin: 4px 0 0;
  color: #071d45;
  font-size: 1.2rem;
}

.commissions-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.commissions-search {
  position: relative;
  display: block;
  width: min(280px, 34vw);
}

.commissions-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 42px 0 16px;
  border: 1px solid rgba(29, 60, 108, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: #0d2147;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0;
  outline: none;
}

.commissions-search input:focus {
  border-color: rgba(34, 103, 215, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 103, 215, 0.1);
}

.commissions-search-button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6b7a96;
  cursor: pointer;
  transform: translateY(-50%);
}

.commissions-search-button:hover,
.commissions-search-button:focus-visible {
  background: #eef5ff;
  color: #1d62cf;
  outline: none;
}

.commissions-search-button svg {
  width: 17px;
  height: 17px;
}

.commissions-filter-button,
.commissions-export-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(34, 103, 215, 0.14);
  border-radius: 8px;
  background: #f8fbff;
  color: #1d62cf;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.commissions-filter-button svg {
  width: 17px;
  height: 17px;
}

.commissions-export-button {
  background: #eef5ff;
  color: #1d62cf;
}

.commissions-table-shell {
  width: 100%;
  overflow-x: auto;
}

.commissions-table {
  width: 100%;
  min-width: 1680px;
  border-collapse: collapse;
  table-layout: fixed;
}

.commissions-table th,
.commissions-table td {
  padding: 14px 16px;
  border-top: 1px solid rgba(29, 60, 108, 0.1);
  text-align: left;
  vertical-align: middle;
}

.commissions-table thead th {
  color: #53627e;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.commissions-table th:first-child,
.commissions-table td:first-child {
  width: 20%;
  padding-left: 26px;
}

.commissions-table th:nth-child(2),
.commissions-table td:nth-child(2) {
  width: 10%;
}

.commissions-table th:nth-child(3),
.commissions-table td:nth-child(3) {
  width: 7%;
}

.commissions-table th:nth-child(4),
.commissions-table td:nth-child(4) {
  width: 12%;
}

.commissions-table th:nth-child(5),
.commissions-table td:nth-child(5) {
  width: 11%;
}

.commissions-table th:nth-child(6),
.commissions-table td:nth-child(6) {
  width: 12%;
}

.commissions-table th:nth-child(7),
.commissions-table td:nth-child(7) {
  width: 8%;
}

.commissions-table th:nth-child(8),
.commissions-table td:nth-child(8) {
  width: 7%;
}

.commissions-table th:nth-child(9),
.commissions-table td:nth-child(9) {
  width: 8%;
}

.commissions-table th:nth-child(10),
.commissions-table td:nth-child(10) {
  width: 9%;
  padding-right: 26px;
}

.commissions-table th:nth-child(2),
.commissions-table th:nth-child(3),
.commissions-table th:nth-child(4),
.commissions-table th:nth-child(5),
.commissions-table th:nth-child(6),
.commissions-table th:nth-child(7),
.commissions-table th:nth-child(8),
.commissions-table th:nth-child(9),
.commissions-table th:nth-child(10),
.commissions-table td:nth-child(2),
.commissions-table td:nth-child(3),
.commissions-table td:nth-child(4),
.commissions-table td:nth-child(5),
.commissions-table td:nth-child(6),
.commissions-table td:nth-child(7),
.commissions-table td:nth-child(8),
.commissions-table td:nth-child(9),
.commissions-table td:nth-child(10) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.commissions-table td {
  color: #10264f;
  font-size: 0.84rem;
  font-weight: 700;
}

.commissions-table tbody tr {
  transition: background 140ms ease;
}

.commissions-table tbody tr:hover {
  background: #f8fbff;
}

.commissions-table tbody tr.commissions-relief-detail-row:hover {
  background: #ffffff;
}

.commissions-relief-detail-row td {
  background: #fbfdff;
}

.commissions-relief-detail-row td:first-child {
  padding-left: 74px;
}

.commissions-relief-location-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.commissions-relief-location-cell strong {
  color: #10264f;
  font-size: 0.78rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.commissions-relief-location-cell span {
  color: #53627e;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.commissions-agent-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.commissions-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.commissions-avatar.tone-0 {
  background: #e8f0ff;
  color: #2f65d8;
}

.commissions-avatar.tone-1 {
  background: #e6f7ef;
  color: #168956;
}

.commissions-avatar.tone-2 {
  background: #f2eaff;
  color: #7048d6;
}

.commissions-avatar.tone-3 {
  background: #fff1e7;
  color: #e07026;
}

.commissions-avatar.tone-4 {
  background: #e8fbff;
  color: #12839b;
}

.commissions-avatar.tone-5 {
  background: #ffe8f6;
  color: #c93a9a;
}

.commissions-agent-info {
  display: grid;
  min-width: 0;
}

.commissions-relief-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(29, 60, 108, 0.14);
  border-radius: 999px;
  background: #f8fbff;
  color: #53627e;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.commissions-relief-toggle:hover,
.commissions-relief-toggle:focus-visible {
  background: #eef5ff;
  color: #1d62cf;
  outline: none;
}

.commissions-relief-toggle.is-open {
  color: #1d62cf;
  transform: rotate(180deg);
}

.commissions-agent-name,
.commissions-agent-location {
  display: block;
  min-width: 0;
}

.commissions-agent-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #10264f;
  font-size: 0.82rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.commissions-agent-location {
  margin-top: 4px;
  color: #53627e;
  font-size: 0.68rem;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.commissions-value-stack {
  display: inline-grid;
  justify-items: end;
  gap: 7px;
}

.commissions-value-stack strong {
  color: #154c9f;
  font-size: 0.84rem;
  font-weight: 900;
}

.commissions-manual-revenue {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: min(150px, 100%);
  min-height: 34px;
  padding: 3px 4px 3px 10px;
  border: 1px solid rgba(34, 103, 215, 0.18);
  border-radius: 8px;
  background: #ffffff;
}

.commissions-manual-revenue input {
  min-width: 0;
  width: 100%;
  min-height: 26px;
  padding: 0 6px 0 0;
  border: 0;
  background: transparent;
  color: #154c9f;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
  letter-spacing: 0;
  outline: none;
}

.commissions-manual-revenue:focus-within {
  border-color: rgba(34, 103, 215, 0.5);
  box-shadow: 0 0 0 3px rgba(34, 103, 215, 0.1);
}

.commissions-manual-revenue-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(34, 103, 215, 0.2);
  border-radius: 7px;
  background: #eef5ff;
  color: #2267d7;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.commissions-manual-revenue-confirm:hover,
.commissions-manual-revenue-confirm:focus-visible {
  border-color: rgba(34, 103, 215, 0.42);
  background: #dceaff;
  outline: none;
}

.commissions-manual-revenue-confirm:active {
  transform: translateY(1px);
}

.commissions-manual-revenue-confirm.is-confirmed {
  border-color: rgba(22, 137, 86, 0.35);
  background: #e8f8f0;
  color: #168956;
}

.commissions-manual-revenue-confirm svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.commissions-progress-track {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #e7edf5;
  overflow: hidden;
}

.commissions-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2267d7;
}

.commissions-progress-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.commissions-progress-cell strong {
  min-width: 44px;
  color: #10264f;
  font-weight: 900;
}

.commissions-progress-track {
  width: 92px;
}

.commissions-rate-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(34, 103, 215, 0.14);
  border-radius: 8px;
  background: #f2f7ff;
  color: #1d62cf;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.commissions-rate-pill.muted {
  border-color: rgba(34, 103, 215, 0.14);
  background: #f2f7ff;
  color: #1d62cf;
}

.commissions-rate-pill.success {
  border-color: rgba(34, 127, 84, 0.18);
  background: #eefaf5;
  color: #168956;
}

.commissions-rate-pill.danger {
  border-color: rgba(210, 52, 60, 0.18);
  background: #fff1f2;
  color: #c8323b;
}

.commissions-payroll-cell,
.commissions-quarterly-bonus-cell,
.commissions-hardware-cell,
.commissions-premium-cell,
.commissions-reanalysis-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.commissions-payroll-cell strong,
.commissions-quarterly-bonus-cell strong,
.commissions-hardware-cell strong,
.commissions-premium-cell strong,
.commissions-reanalysis-cell strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 900;
}

.commissions-payroll-cell strong {
  border: 1px solid rgba(34, 103, 215, 0.14);
  background: #f8fbff;
  color: #10264f;
}

.commissions-quarterly-bonus-cell strong,
.commissions-hardware-cell strong {
  border: 1px solid rgba(29, 60, 108, 0.12);
  background: #f8fbff;
  color: #10264f;
}

.commissions-premium-cell.positive strong {
  border: 1px solid rgba(34, 127, 84, 0.18);
  background: #eefaf5;
  color: #168956;
}

.commissions-premium-cell.zero strong {
  border: 1px solid rgba(210, 52, 60, 0.18);
  background: #fff1f2;
  color: #c8323b;
}

.commissions-reanalysis-cell strong {
  border: 1px solid rgba(29, 60, 108, 0.12);
  background: #f8fbff;
  color: #53627e;
}

.commissions-rule-section {
  border-top: 1px solid rgba(29, 60, 108, 0.1);
  background: #fbfdff;
}

.commissions-rule-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 18px;
}

.commissions-rule-section-heading h3 {
  margin: 4px 0 0;
  color: #071d45;
  font-size: 1.08rem;
}

.commissions-rule-section-heading p {
  margin: 6px 0 0;
  color: #53627e;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.commissions-rule-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(34, 103, 215, 0.14);
  border-radius: 8px;
  background: #eef5ff;
  color: #1d62cf;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.commissions-section-empty {
  margin: 0;
  border-top: 1px solid rgba(29, 60, 108, 0.1);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .commissions-overview {
    grid-template-columns: 1fr;
  }

  .commissions-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commissions-totals-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commissions-total-card:nth-child(4) {
    border-left: 0;
  }

  .commissions-total-card:nth-child(n+4) {
    border-top: 1px solid rgba(29, 60, 108, 0.1);
  }

  .commissions-stat-card:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(29, 60, 108, 0.1);
  }

  .commissions-stat-card:nth-child(4) {
    border-top: 1px solid rgba(29, 60, 108, 0.1);
  }
}

@media (max-width: 760px) {
  .commissions-hero,
  .commissions-panel-heading,
  .commissions-rule-section-heading,
  .commissions-overview {
    display: grid;
  }

  .commissions-hero {
    padding: 22px;
  }

  .commissions-title-group {
    display: grid;
  }

  .commissions-period-box,
  .commissions-search {
    width: 100%;
    min-width: 0;
  }

  .commissions-stat-grid {
    grid-template-columns: 1fr;
  }

  .commissions-totals-header {
    display: grid;
    gap: 6px;
  }

  .commissions-totals-header p {
    text-align: left;
  }

  .commissions-totals-list {
    grid-template-columns: 1fr;
  }

  .commissions-total-card + .commissions-total-card,
  .commissions-total-card:nth-child(4),
  .commissions-total-card:nth-child(n+4) {
    border-left: 0;
    border-top: 1px solid rgba(29, 60, 108, 0.1);
  }

  .commissions-stat-card + .commissions-stat-card,
  .commissions-stat-card:nth-child(3),
  .commissions-stat-card:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(29, 60, 108, 0.1);
  }

  .commissions-toolbar {
    display: grid;
    width: 100%;
  }

}

body[data-page="projection"] {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
  color: #071f4f;
}

body[data-page="projection"] .content {
  gap: 16px;
}

.projection-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 116px;
  padding: 8px 0 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.projection-hero::before,
.projection-hero::after {
  content: none;
}

.projection-hero h2 {
  margin-top: 6px;
  color: #071f4f;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.projection-hero p {
  max-width: 840px;
  margin-top: 8px;
  color: #51627f;
  font-size: 0.98rem;
  line-height: 1.55;
}

.projection-panel {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.projection-panel::before,
.projection-panel::after {
  content: none;
}

.projection-panel > .section-heading {
  display: none;
}

.projection-workspace {
  display: grid;
  gap: 14px;
}

.projection-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  position: relative;
  z-index: 4;
  margin: 0;
}

.projection-filter-field {
  width: min(100%, 250px);
  border-radius: 8px;
}

.projection-filter-field label {
  color: #43577a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.projection-filter-field .period-trigger {
  border-radius: 7px;
}

.projection-selection-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.projection-selection-card {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(7, 31, 79, 0.08);
}

.projection-selection-card span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.projection-selection-card strong {
  font-size: 1.2rem;
  line-height: 1.15;
}

.projection-selection-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.projection-executive-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.projection-executive-card {
  min-height: 132px;
  padding: 18px 20px;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(7, 31, 79, 0.08);
}

.projection-executive-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.projection-executive-card.compact {
  grid-template-columns: 1fr;
  align-content: center;
}

.projection-executive-card span,
.projection-total-strip span {
  color: #071f4f;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.projection-executive-card strong {
  display: block;
  margin-top: 8px;
  color: #071f4f;
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  line-height: 1.12;
}

.projection-executive-card p,
.projection-total-strip p {
  margin: 8px 0 0;
  color: #51627f;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.projection-executive-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 900;
  background: #eaf1ff;
  color: #0d51c3;
}

.projection-executive-card.revenue .projection-executive-icon {
  background: #ecebff;
  color: #3547d0;
}

.projection-executive-card.quantity .projection-executive-icon {
  background: #ddf7e7;
  color: #0f8d48;
}

.projection-executive-card.target .projection-executive-icon {
  background: #fff0df;
  color: #e56b00;
}

.projection-executive-card.projection .projection-executive-icon {
  background: #e8f1ff;
  color: #0b63d1;
}

.projection-empty-copy {
  margin: 0;
  color: #51627f;
  font-weight: 700;
  line-height: 1.4;
}

.projection-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.projection-overview-card {
  display: grid;
  gap: 10px;
  min-height: 148px;
  padding: 20px 22px;
  border: 1px solid rgba(15, 43, 87, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 253, 0.96));
}

.projection-overview-card.highlight {
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(230, 242, 255, 0.98), rgba(241, 247, 255, 0.96));
}

.projection-overview-card span,
.projection-year-metric span,
.projection-detail-item span,
.projection-kpi-card span,
.projection-progress-top span,
.projection-month-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.projection-overview-card strong {
  font-size: 1.62rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.projection-overview-card p,
.projection-year-header p,
.projection-year-empty p,
.projection-card-note,
.projection-notice-panel p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.projection-notice-panel {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(198, 140, 72, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(212, 162, 93, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(252, 246, 237, 0.96));
}

.projection-notice-panel h3,
.projection-year-empty h4 {
  margin: 6px 0 10px;
  font-size: 1.18rem;
  line-height: 1.3;
}

.projection-notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(203, 135, 52, 0.12);
  color: #945e19;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.projection-year-section {
  display: grid;
  gap: 18px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(15, 43, 87, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 253, 0.98));
}

.projection-year-section.empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 251, 0.94));
}

.projection-year-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.projection-year-header h3 {
  margin: 6px 0 8px;
  font-size: clamp(1.75rem, 2vw, 2.4rem);
  line-height: 1;
}

.projection-year-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.projection-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.projection-chip.positive {
  background: rgba(50, 138, 106, 0.14);
  color: #1f6d53;
}

.projection-chip.negative {
  background: rgba(203, 69, 91, 0.14);
  color: #a2344b;
}

.projection-chip.neutral {
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
}

.projection-year-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.projection-year-metric,
.projection-kpi-card,
.projection-detail-item {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 43, 87, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}

.projection-year-metric strong,
.projection-kpi-card strong {
  font-size: 1.2rem;
  line-height: 1.15;
}

.projection-year-metric p,
.projection-kpi-card p,
.projection-detail-item strong {
  margin: 0;
  color: var(--text-soft);
}

.projection-detail-item strong {
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--primary);
}

.projection-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.projection-month-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 43, 87, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.96));
}

.projection-month-card.positive {
  border-color: rgba(50, 138, 106, 0.18);
}

.projection-month-card.negative {
  border-color: rgba(203, 69, 91, 0.18);
}

.projection-month-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.projection-month-top strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
  line-height: 1.2;
}

.projection-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.projection-progress-list {
  display: grid;
  gap: 12px;
}

.projection-progress-item {
  display: grid;
  gap: 8px;
}

.projection-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.projection-progress-top strong {
  font-size: 0.96rem;
}

.projection-progress-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 43, 87, 0.08);
}

.projection-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(42, 94, 168, 0.9), rgba(90, 157, 235, 0.9));
}

.projection-progress-fill.positive {
  background: linear-gradient(90deg, rgba(35, 128, 96, 0.92), rgba(83, 180, 147, 0.92));
}

.projection-progress-fill.negative {
  background: linear-gradient(90deg, rgba(187, 61, 83, 0.92), rgba(221, 108, 128, 0.92));
}

.projection-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.projection-card-note {
  padding-top: 2px;
  font-size: 0.92rem;
}

.projection-empty-state,
.projection-year-empty {
  display: grid;
  gap: 8px;
  padding: 26px 28px;
  border: 1px dashed rgba(15, 43, 87, 0.18);
  border-radius: 24px;
  background: rgba(248, 250, 253, 0.8);
}

.projection-list-year {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(7, 31, 79, 0.07);
}

.projection-list-year.empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 251, 0.94));
}

.projection-list-year-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 0 6px 2px;
}

.projection-list-year-head h3,
.projection-list-month-head h4,
.projection-list-section-head h5 {
  margin: 6px 0 8px;
  line-height: 1.1;
}

.projection-list-year-head h3 {
  color: #071f4f;
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
}

.projection-list-year-head p,
.projection-list-month-head p,
.projection-list-warning p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.projection-list-year-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  min-width: min(100%, 430px);
}

.projection-list-year-metrics > div,
.projection-list-month-summary > div {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fbff;
}

.projection-list-year-metrics strong,
.projection-list-month-summary strong {
  font-size: 1.12rem;
  line-height: 1.15;
}

.projection-list-months {
  display: grid;
  gap: 18px;
}

.projection-list-month {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.projection-list-month.positive {
  border-color: rgba(50, 138, 106, 0.18);
}

.projection-list-month.negative {
  border-color: rgba(203, 69, 91, 0.18);
}

.projection-list-month-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 6px 0;
}

.projection-visibility-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(15, 43, 87, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 10px 18px rgba(15, 43, 87, 0.08);
}

.projection-visibility-button:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.24);
  background: rgba(246, 250, 255, 0.96);
}

.projection-visibility-button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.projection-visibility-button.active {
  border-color: rgba(42, 94, 168, 0.24);
  background: linear-gradient(135deg, rgba(32, 79, 143, 0.14), rgba(63, 125, 208, 0.08));
}

.projection-month-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
  margin-top: -4px;
}

.projection-excel-button {
  border-color: rgba(32, 118, 67, 0.22);
  color: #143f2a;
}

.projection-visibility-icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 10px;
  border: 1.8px solid currentColor;
  border-radius: 999px / 75%;
  opacity: 0.9;
}

.projection-visibility-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.projection-excel-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.7px solid currentColor;
  border-radius: 3px;
  opacity: 0.9;
}

.projection-excel-icon::before,
.projection-excel-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.projection-excel-icon::before {
  left: 3px;
  right: 3px;
  top: 6px;
  height: 1.5px;
}

.projection-excel-icon::after {
  top: 3px;
  bottom: 3px;
  left: 6px;
  width: 1.5px;
}

.projection-visibility-copy {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.projection-list-month-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  min-width: min(100%, 620px);
}

.projection-list-section {
  display: grid;
  gap: 10px;
}

.projection-list-section.pinned-summary {
  padding-top: 2px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(248, 251, 255, 0.9));
}

.projection-list-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 6px;
}

.projection-table-wrap {
  overflow: auto;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  contain: layout paint;
}

.projection-table {
  width: 100%;
  min-width: 1940px;
  border-collapse: collapse;
}

.projection-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 11px;
  background: #f0f5fd;
  color: #071f4f;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid #dbe5f2;
}

.projection-table thead th:first-child {
  min-width: 360px;
  width: 360px;
}

.projection-table tbody td {
  padding: 10px 11px;
  border-bottom: 1px solid #e5ebf4;
  white-space: nowrap;
  color: #071f4f;
  font-size: 0.82rem;
  font-weight: 700;
}

.projection-table thead th:not(:first-child),
.projection-table tbody td:not(:first-child) {
  text-align: center;
}

.projection-table tbody td:first-child {
  min-width: 360px;
  width: 360px;
  white-space: normal;
}

.projection-table-row.agent td {
  background: rgba(15, 43, 87, 0.02);
}

.projection-table-row.total td {
  background: rgba(15, 43, 87, 0.07);
  font-weight: 700;
}

.projection-table-row.branch td {
  background: #fbfdff;
}

.projection-table-row.branch td:first-child {
  box-shadow: inset 4px 0 0 rgba(37, 94, 171, 0.9);
}

.projection-table-row.total td {
  background: #fff8eb;
  font-weight: 800;
}

.projection-table-row.total td:first-child {
  box-shadow: inset 4px 0 0 rgba(190, 129, 33, 0.95);
}

.projection-table-label {
    display: grid;
    grid-template-columns: 74px auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 240px;
  }

.projection-table-label.level-1 {
  padding-left: 18px;
}

.projection-table-label strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.projection-table-row.branch .projection-table-label strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #173b70;
}

.projection-table-row.total .projection-table-label strong {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #7a4d0d;
}

.projection-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  min-width: 74px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.projection-row-badge.branch {
  background: linear-gradient(135deg, #204f8f, #3f7dd0);
  color: #fff;
  box-shadow: 0 10px 20px rgba(32, 79, 143, 0.18);
}

.projection-row-badge.agent {
  background: rgba(42, 94, 168, 0.12);
  color: #1f5fb0;
}

.projection-row-badge.total {
    background: linear-gradient(135deg, #a86a11, #d79a2b);
    color: #fff;
    box-shadow: 0 10px 20px rgba(168, 106, 17, 0.18);
  }

  .projection-branch-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(15, 43, 87, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #285fae;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
  }

  .projection-branch-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(42, 94, 168, 0.28);
    background: rgba(244, 248, 255, 0.98);
  }

  .projection-branch-toggle-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 180ms ease, margin-top 180ms ease;
  }

  .projection-branch-toggle.collapsed .projection-branch-toggle-arrow {
    transform: rotate(-45deg);
    margin-top: 0;
  }

  .projection-table-row.hidden-agent {
    display: none;
  }

.projection-list-warning {
  padding: 16px 18px;
  border: 1px dashed rgba(15, 43, 87, 0.16);
  border-radius: 18px;
  background: rgba(248, 250, 253, 0.75);
}

.projection-total-strip {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) repeat(6, minmax(140px, 1fr));
  align-items: center;
  gap: 0;
  padding: 18px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #06245c, #003b93);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(3, 30, 80, 0.22);
}

.projection-total-strip > div {
  min-height: 54px;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.projection-total-strip > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.projection-total-strip span,
.projection-total-strip strong,
.projection-total-strip p {
  color: #ffffff;
}

.projection-total-strip strong {
  display: block;
  margin-top: 6px;
  font-size: 1.15rem;
  line-height: 1.15;
}

.projection-total-strip p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
}

.projection-total-brand {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.projection-total-brand > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.2rem;
}

.insights-modal-card {
  width: min(1480px, calc(100vw - 48px));
  max-height: min(90vh, 980px);
  padding: 30px;
  background:
    radial-gradient(circle at top right, rgba(112, 182, 255, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96));
}


.insights-modal-header {
  margin-bottom: 24px;
}

.insights-modal-header p {
  max-width: 720px;
}

.insights-modal-content {
  display: grid;
  gap: 18px;
}

.insights-empty-state,
.insights-hero-panel,
.insights-stat-card,
.insights-note-card,
.insights-chart-card {
  border: 1px solid rgba(15, 43, 87, 0.1);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.96));
  box-shadow:
    0 18px 34px rgba(8, 26, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.insights-empty-state {
  padding: 34px;
  text-align: center;
}

.insights-empty-state h4 {
  margin: 6px 0 10px;
  font-size: 1.6rem;
  color: var(--primary);
}

.insights-empty-state p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-soft);
  line-height: 1.7;
}

.insights-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr);
  gap: 20px;
  padding: 24px;
}

.insights-hero-panel.positive {
  background:
    radial-gradient(circle at top right, rgba(77, 190, 126, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(248, 253, 250, 0.98), rgba(240, 249, 244, 0.96));
}

.insights-hero-panel.negative {
  background:
    radial-gradient(circle at top right, rgba(220, 104, 96, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 249, 247, 0.98), rgba(255, 241, 238, 0.96));
}

.insights-hero-copy h4,
.insights-note-card h4,
.insights-chart-card h4,
.insights-section-heading h4 {
  margin: 4px 0 10px;
  font-size: 1.45rem;
  color: var(--primary);
}

.insights-hero-copy p,
.insights-note-card p,
.insights-chart-copy {
  color: var(--text-soft);
  line-height: 1.7;
}

.insights-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.insights-projection-panel {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(15, 43, 87, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.insights-projection-panel.positive {
  background: linear-gradient(180deg, rgba(248, 253, 250, 0.9), rgba(241, 250, 245, 0.82));
}

.insights-projection-panel.negative {
  background: linear-gradient(180deg, rgba(255, 250, 248, 0.94), rgba(255, 243, 240, 0.86));
}

.insights-projection-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.insights-projection-copy {
  margin: 6px 0 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.insights-projection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.insights-projection-badge.positive {
  background: rgba(34, 151, 92, 0.14);
  color: #0e6a40;
}

.insights-projection-badge.negative {
  background: rgba(196, 83, 71, 0.14);
  color: #9b332c;
}

.insights-projection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.insights-projection-item {
  padding: 16px;
  border: 1px solid rgba(42, 94, 168, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.insights-projection-item-top,
.insights-projection-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.insights-projection-item-top span,
.insights-projection-values span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.insights-projection-item-top strong,
.insights-projection-values strong {
  color: var(--primary);
}

.insights-projection-item-top strong {
  font-size: 0.96rem;
}

.insights-projection-values {
  margin-top: 10px;
}

.insights-projection-values strong {
  font-size: 1.08rem;
}

.insights-projection-track {
  position: relative;
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(15, 43, 87, 0.08);
  overflow: hidden;
}

.insights-projection-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5a95dd, #12376e);
}

.insights-projection-fill.positive {
  background: linear-gradient(90deg, #6bbd87, #1b8b55);
}

.insights-projection-fill.negative {
  background: linear-gradient(90deg, #f1998d, #d05849);
}

.insights-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(42, 94, 168, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insights-progress-grid {
  display: grid;
  gap: 14px;
}

.insights-progress-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(42, 94, 168, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
}

.insights-progress-ring {
  --progress-angle: 0deg;
  width: 112px;
  height: 112px;
  padding: 10px;
  border-radius: 50%;
  background:
    conic-gradient(#1a4d94 0deg, #6aaef7 var(--progress-angle), rgba(18, 55, 110, 0.08) var(--progress-angle), rgba(18, 55, 110, 0.08) 360deg);
}

.insights-progress-core {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.96);
  text-align: center;
}

.insights-progress-core strong {
  color: var(--primary);
  font-size: 1.3rem;
}

.insights-progress-core span,
.insights-progress-meta span,
.insights-chart-meta span,
.insights-stat-card span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.insights-progress-meta strong {
  display: block;
  margin-top: 8px;
  color: var(--primary);
  font-size: 1.18rem;
}

.insights-progress-meta p {
  margin-top: 6px;
  color: var(--text-soft);
}

.insights-progress-support {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.08);
  color: var(--primary) !important;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.insights-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.insights-card-grid-secondary {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.insights-stat-card,
.insights-note-card {
  padding: 20px 22px;
}

.insights-stat-card strong {
  display: block;
  margin-top: 12px;
  color: var(--primary);
  font-size: 1.4rem;
  line-height: 1.2;
}

.insights-stat-card p {
  margin-top: 8px;
  color: var(--text-soft);
  line-height: 1.55;
}

.insights-stat-card.positive {
  background:
    linear-gradient(180deg, rgba(247, 253, 249, 0.98), rgba(240, 249, 244, 0.96));
}

.insights-stat-card.accent {
  background:
    linear-gradient(180deg, rgba(242, 248, 255, 0.98), rgba(233, 243, 255, 0.96));
}

.insights-bullet-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.insights-bullet-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
  line-height: 1.65;
}

.insights-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 43, 87, 0.96), rgba(79, 142, 225, 0.92));
}

.insights-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.insights-chart-card {
  padding: 22px;
}

.insights-chart-card-top,
.insights-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.insights-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 43, 87, 0.08);
  color: var(--primary);
}

.insights-badge.positive {
  background: rgba(34, 151, 92, 0.14);
  color: #0e6a40;
}

.insights-badge.negative {
  background: rgba(196, 83, 71, 0.14);
  color: #9d392d;
}

.insights-chart-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.insights-chart-meta div {
  padding: 14px;
  border: 1px solid rgba(42, 94, 168, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.insights-chart-meta strong {
  display: block;
  margin-top: 8px;
  color: var(--primary);
  font-size: 1rem;
}

.insights-chart-shell {
  margin-top: 18px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(241, 246, 255, 0.94), rgba(248, 251, 255, 0.98));
  border: 1px solid rgba(42, 94, 168, 0.1);
}

.insights-chart-svg {
  display: block;
  width: 100%;
  height: 320px;
}

@media (max-width: 1180px) {
  .analysis-region-footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .analysis-reference-card {
    grid-template-columns: 1fr;
  }

  .analysis-action-row {
    align-items: stretch;
  }

  .analysis-region-footer {
    grid-template-columns: 1fr;
  }
}

.hero {
  position: relative;
  z-index: 8;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: 20px 24px;
}

.form-hero {
  align-items: center;
  padding: 16px 20px;
}

.hero-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.hero h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  margin-bottom: 0;
}

.hero p {
  max-width: 640px;
  color: var(--text-soft);
  font-size: 0.96rem;
}

.form-hero p {
  display: none;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.period-box {
  min-width: 260px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #e9f0f8;
  border: 1px solid rgba(12, 34, 75, 0.08);
}

.period-box label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 700;
}

.analysis-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
}

.period-picker {
  position: relative;
}

.period-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-transform: capitalize;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.period-trigger:hover,
.period-trigger[aria-expanded="true"] {
  border-color: rgba(42, 94, 168, 0.65);
  box-shadow: 0 0 0 4px rgba(42, 94, 168, 0.1);
  transform: translateY(-1px);
}

.period-trigger svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

body[data-page="projection"] .projection-filter-field {
  border-radius: 7px;
}

body[data-page="projection"] .projection-filter-field .period-trigger {
  border-radius: 6px;
}

.period-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(460px, calc(100vw - 48px));
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid rgba(29, 60, 108, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 26px 58px rgba(8, 26, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.period-panel.hidden {
  display: none;
}

.period-panel::-webkit-scrollbar {
  width: 8px;
}

.period-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.26);
}

.period-year-row {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.period-year-button {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(29, 60, 108, 0.14);
  border-radius: 18px;
  background: #ffffff;
  color: #263956;
  font: inherit;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.06);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.period-year-button:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 103, 215, 0.34);
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(8, 26, 55, 0.1);
}

.period-year-input {
  min-height: 64px;
  width: 100%;
  appearance: textfield;
  padding: 12px 58px;
  border: 1px solid rgba(29, 60, 108, 0.14);
  border-radius: 18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 24px 50% / 25px 25px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") calc(100% - 24px) 50% / 24px 24px no-repeat,
    #ffffff;
  color: #10264f;
  text-align: center;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.06);
}

.period-year-input::-webkit-outer-spin-button,
.period-year-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.period-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, auto);
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(29, 60, 108, 0.09);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.period-month-button {
  position: relative;
  min-height: 72px;
  border: 1px solid rgba(29, 60, 108, 0.06);
  border-radius: 16px;
  padding: 12px 12px;
  background: #f8fafc;
  color: #10264f;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: capitalize;
  cursor: pointer;
  box-shadow:
    0 8px 16px rgba(8, 26, 55, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.period-month-button:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 103, 215, 0.2);
  background: #f1f6ff;
  box-shadow: 0 12px 22px rgba(8, 26, 55, 0.08);
}

.period-month-button.has-data::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #728196;
  transform: translateX(-50%);
}

.period-month-button.active {
  border-color: rgba(34, 103, 215, 0.82);
  background: #2474db;
  color: #ffffff;
  box-shadow: 0 14px 26px rgba(34, 103, 215, 0.24);
}

.period-month-button.active::after {
  content: "✓";
  position: absolute;
  right: 17px;
  top: 50%;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.period-month-button.active.has-data::before {
  background: rgba(255, 255, 255, 0.78);
}

.period-month-button.has-data::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 6px auto 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

.period-reference-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 43, 87, 0.08);
}

.period-reference-section.standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.period-reference-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.period-reference-heading span {
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.period-reference-heading strong {
  color: var(--primary);
  font-size: 0.82rem;
}

.period-reference-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.period-reference-button {
  border: 1px solid rgba(42, 94, 168, 0.16);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(15, 43, 87, 0.04);
  color: var(--primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.period-reference-button:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.38);
  background: rgba(42, 94, 168, 0.08);
}

.period-reference-button.active {
  border-color: rgba(42, 94, 168, 0.92);
  background: rgba(31, 111, 221, 0.12);
  color: #1f5fb0;
}

.period-reference-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

#analysisPeriodPanel {
  width: min(368px, calc(100vw - 64px));
}

#analysisReferencePanel {
  width: min(320px, calc(100vw - 64px));
}

#projectionReferencePanel {
  width: min(320px, calc(100vw - 64px));
}

.summary-grid,
.dashboard-grid {
  display: grid;
  gap: 18px;
}

.summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="cadastros"] .summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-card {
  min-height: 132px;
  padding: 18px 18px 16px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.summary-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.summary-card span,
.dashboard-card .eyebrow {
  color: var(--text-soft);
}

.summary-card strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--primary);
}

.summary-card-days {
  position: relative;
}

.summary-note {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.cadastro-access-summary {
  max-width: 100%;
  color: var(--primary);
  font-weight: 700;
}

.mini-gear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(12, 34, 75, 0.04);
  color: var(--primary);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.mini-gear-button:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.45);
  background: rgba(42, 94, 168, 0.08);
}

.mini-gear-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.february-rule-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.compact-field {
  gap: 8px;
}

.compact-field span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.compact-field input {
  padding: 12px 14px;
}

.february-rule-actions {
  display: flex;
  justify-content: end;
  margin-top: 8px;
}

.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.link-button:hover {
  color: var(--primary);
}

.form-card {
  padding: 30px;
}

.import-card {
  padding: 22px 22px 20px;
}

.base-data-card {
  display: grid;
  gap: 16px;
}

.manager-daily-import-card {
  display: grid;
  gap: 18px;
}

.manager-daily-import-heading {
  margin-bottom: 0;
}

.base-data-heading {
  margin-bottom: 0;
}

.base-data-visibility-badge {
  align-self: flex-start;
  white-space: nowrap;
}

.base-data-heading-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.base-data-cleanup-button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.base-data-cleanup-button svg {
  width: 14px;
  height: 14px;
}

.active-cleanup-modal {
  width: min(760px, 94vw);
  max-height: min(86vh, 760px);
  overflow-y: auto;
}

.active-cleanup-summary {
  display: grid;
  gap: 14px;
}

.active-cleanup-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.active-cleanup-summary-card {
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(8, 26, 55, 0.06);
}

.active-cleanup-summary-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.active-cleanup-summary-card strong {
  color: var(--primary);
  font-size: 1.05rem;
  line-height: 1.2;
}

.active-cleanup-model-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.active-cleanup-model-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 8px;
  background: #f8fbff;
}

.active-cleanup-model-item strong {
  color: var(--primary);
  font-size: 0.92rem;
}

.active-cleanup-model-item span {
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.active-cleanup-empty,
.active-cleanup-warning,
.active-cleanup-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #edf4ff;
  color: #1f5fb0;
  font-weight: 800;
}

.active-cleanup-warning {
  background: #fff7e6;
  color: #8a5a00;
}

.active-cleanup-error {
  background: #fff0f0;
  color: #a33a3a;
}

.active-cleanup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.active-cleanup-confirm-button {
  width: auto;
  min-width: 190px;
}

@media (max-width: 760px) {
  .active-cleanup-summary-grid {
    grid-template-columns: 1fr;
  }

  .active-cleanup-actions {
    flex-direction: column-reverse;
  }

  .active-cleanup-actions .ghost-button,
  .active-cleanup-confirm-button {
    width: 100%;
  }
}

.base-data-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.base-data-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.base-data-ghost-button {
  min-height: 46px;
  width: 100%;
}

.base-data-metric-card {
  min-height: 104px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px;
}

.base-data-metric-card strong {
  font-size: 1.2rem;
  line-height: 1.2;
}

.base-data-status-card strong {
  font-size: 1rem;
}

.base-data-status-metric-wrap {
  display: flex;
  align-items: center;
  min-height: 0;
}

.base-data-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #12376e, #2a5ea8);
  color: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(15, 43, 87, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.base-data-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 44px rgba(15, 43, 87, 0.26);
  filter: brightness(1.03);
}

.base-data-button:disabled,
.ghost-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.base-data-button:disabled:hover,
.ghost-button:disabled:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

.base-data-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

body[data-page="form"] {
  background: #f7f9fc;
  color: #071f4d;
}

body[data-page="form"]::before {
  background-image:
    linear-gradient(rgba(15, 43, 87, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 43, 87, 0.022) 1px, transparent 1px);
}

body[data-page="form"] .content {
  gap: 18px;
}

body[data-page="form"] .hero,
body[data-page="form"] .summary-card,
body[data-page="form"] .import-card,
body[data-page="form"] .form-card,
body[data-page="form"] .mini-card {
  border-color: rgba(9, 38, 85, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 10px 28px rgba(8, 26, 55, 0.055);
}

body[data-page="form"] .hero::before,
body[data-page="form"] .hero::after,
body[data-page="form"] .summary-card::before,
body[data-page="form"] .summary-card::after,
body[data-page="form"] .import-card::before,
body[data-page="form"] .import-card::after,
body[data-page="form"] .form-card::before,
body[data-page="form"] .form-card::after,
body[data-page="form"] .mini-card::before,
body[data-page="form"] .mini-card::after {
  content: none;
}

body[data-page="form"] .form-hero {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(250px, 286px);
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="form"] .form-hero-icon,
body[data-page="form"] .form-stat-icon,
body[data-page="form"] .base-data-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eef5ff;
  color: #0757ca;
}

body[data-page="form"] .form-hero-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

body[data-page="form"] .form-hero-icon svg,
body[data-page="form"] .form-stat-icon svg,
body[data-page="form"] .base-data-title-icon svg {
  width: 30px;
  height: 30px;
}

body[data-page="form"] .form-stat-icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

body[data-page="form"] .form-hero h2 {
  color: #071f4d;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .form-hero p {
  display: block;
  max-width: 760px;
  color: #506482;
  font-size: 1rem;
}

body[data-page="form"] .period-box {
  min-width: 250px;
  padding: 18px;
  border: 1px solid rgba(29, 60, 108, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(16, 44, 86, 0.1);
}

body[data-page="form"] .period-box label {
  color: #43577a;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-page="form"] .period-trigger {
  color: #071f4d;
}

body[data-page="form"] .period-panel {
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

body[data-page="form"] .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

body[data-page="form"] .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

body[data-page="form"] .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

body[data-page="form"] .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="form"] .period-month-button {
  min-height: 48px;
  border-radius: 9px;
  font-size: 0.82rem;
}

body[data-page="form"] .period-month-button.active::after {
  display: none;
}

body[data-page="form"] .summary-grid {
  grid-template-columns: minmax(280px, 0.95fr) repeat(2, minmax(320px, 1fr));
  gap: 14px;
}

body[data-page="form"] .summary-card {
  min-height: 150px;
  padding: 24px 28px;
}

body[data-page="form"] .form-stat-card {
  --summary-progress: 0%;
  --summary-color: #0757ca;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon caption"
    ". progress";
  align-content: center;
  column-gap: 18px;
  row-gap: 5px;
}

body[data-page="form"] .form-stat-card .form-stat-icon {
  grid-area: icon;
  align-self: center;
}

body[data-page="form"] .form-stat-icon-blue {
  background: #eef5ff;
  color: #0757ca;
}

body[data-page="form"] .summary-card-days .form-stat-icon-blue {
  color: #071f4d;
}

body[data-page="form"] .form-stat-icon-green {
  background: #eaf8f0;
  color: #0b8a50;
}

body[data-page="form"] .form-stat-icon-purple {
  background: #f1ebff;
  color: #7650c7;
}

body[data-page="form"] .summary-card-top {
  grid-area: label;
  align-items: center;
  padding: 0;
  border: 0;
}

body[data-page="form"] .summary-card span,
body[data-page="form"] .base-data-metric-card span {
  color: #293f63;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="form"] .summary-card strong {
  grid-area: value;
  margin: 0;
  color: #071f4d;
  font-size: clamp(1.9rem, 2.8vw, 2.35rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
}

body[data-page="form"] .form-stat-caption {
  grid-area: caption;
  margin: 0;
  color: #415676;
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="form"] .form-stat-progress {
  grid-area: progress;
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe5ec;
}

body[data-page="form"] .form-stat-progress span {
  display: block;
  width: var(--summary-progress);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--summary-color);
  transition: width 220ms ease;
}

body[data-page="form"] [data-summary-progress="quantity"] {
  --summary-color: #0b8a50;
}

body[data-page="form"] [data-summary-progress="revenue"] {
  --summary-color: #7650c7;
}

body[data-page="form"] .summary-card-days .summary-note,
body[data-page="form"] .summary-card-days .february-rule-panel {
  grid-column: 1 / -1;
}

body[data-page="form"] .base-data-card {
  gap: 18px;
  padding: 24px 26px 18px;
}

body[data-page="form"] .base-data-heading {
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

body[data-page="form"] .base-data-heading > div:first-child {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}

body[data-page="form"] .base-data-title-icon {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

body[data-page="form"] .base-data-title-icon svg {
  width: 26px;
  height: 26px;
}

body[data-page="form"] .base-data-heading h3 {
  color: #071f4d;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .base-data-heading p {
  grid-column: 2;
  margin: 2px 0 0;
  color: #506482;
  line-height: 1.45;
}

body[data-page="form"] .base-data-cleanup-button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #dff4e7;
  color: #168a46;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="form"] .base-data-visibility-badge {
  gap: 8px;
  min-height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #edf4ff;
  color: #0757ca;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="form"] .base-data-visibility-badge svg {
  width: 14px;
  height: 14px;
}

body[data-page="form"] .base-data-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="form"] .base-data-metric-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon note";
  align-content: center;
  min-height: 116px;
  padding: 18px 20px;
  column-gap: 18px;
  row-gap: 6px;
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 10px 24px rgba(8, 26, 55, 0.05);
}

body[data-page="form"] .base-data-metric-card .form-stat-icon {
  grid-area: icon;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #edf4ff;
  box-shadow: 0 10px 22px rgba(7, 87, 202, 0.08);
  color: #0757ca;
}

body[data-page="form"] .base-data-status-card .form-stat-icon {
  background: #dff4e7;
  color: #168a46;
}

body[data-page="form"] .base-data-metric-card span {
  grid-area: label;
  align-self: end;
  font-size: 0.78rem;
}

body[data-page="form"] .base-data-metric-card strong {
  grid-area: value;
  margin: 0;
  color: #071f4d;
  font-size: clamp(1.2rem, 1.55vw, 1.52rem);
  font-weight: 800;
  line-height: 1.12;
}

body[data-page="form"] .base-data-metric-card p {
  grid-area: note;
  margin: 0;
  color: #506482;
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="form"] .base-data-status-metric-wrap {
  align-items: center;
  width: 100%;
}

body[data-page="form"] .base-data-status-metric-wrap .status-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: clamp(1.08rem, 1.32vw, 1.32rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

body[data-page="form"] .base-data-status-metric-wrap .status-badge.success {
  color: #087446;
}

body[data-page="form"] .base-data-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="form"] .historical-import-menu {
  position: relative;
  display: grid;
  gap: 10px;
}

body[data-page="form"] .historical-import-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(170, 188, 216, 0.58);
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 14px 28px rgba(8, 26, 55, 0.08);
}

body[data-page="form"] .historical-import-panel.hidden {
  display: none;
}

body[data-page="form"] .historical-import-upload-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(9, 38, 85, 0.14);
  border-radius: 8px;
  background: #f7fbff;
  color: #071f4d;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

body[data-page="form"] .historical-import-upload-button:hover,
body[data-page="form"] .historical-import-upload-button:focus-visible {
  border-color: rgba(0, 81, 200, 0.28);
  background: #edf4ff;
  outline: none;
}

body[data-page="form"] .historical-import-upload-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-page="form"] .base-data-ghost-button {
  min-height: 42px;
  border-color: rgba(9, 38, 85, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: #071f4d;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 8px 18px rgba(8, 26, 55, 0.04);
}

body[data-page="form"] .base-data-card > .base-data-status-row {
  display: none;
}

body[data-page="form"] .historical-status {
  min-height: 40px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: #edf4ff;
  color: #1f5fb0;
  font-weight: 700;
}

body[data-page="form"] .base-data-button {
  gap: 10px;
  min-height: 42px;
  border-radius: 8px;
  background: #0051c8;
  box-shadow: 0 14px 24px rgba(0, 81, 200, 0.18);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

body[data-page="form"] .base-data-button svg {
  width: 20px;
  height: 20px;
}

body[data-page="form"] .base-data-button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5Zm0 0v5h5M9 13h6M9 17h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5Zm0 0v5h5M9 13h6M9 17h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="form"] .import-models-modal {
  width: min(980px, 94vw);
  max-height: min(86vh, 820px);
  padding: 24px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(8, 26, 55, 0.22);
}

body[data-page="form"] .import-models-modal .modal-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(9, 38, 85, 0.08);
}

body[data-page="form"] .import-models-modal .modal-header h3 {
  color: #071f4d;
  font-size: 1.35rem;
  letter-spacing: 0;
}

body[data-page="form"] .import-models-modal .modal-header p {
  color: #506482;
}

body[data-page="form"] .import-models-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="form"] .import-model-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "badge badge"
    "icon title"
    "icon description"
    "action action";
  align-content: start;
  gap: 8px 14px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 10px 28px rgba(8, 26, 55, 0.055);
  color: #071f4d;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-page="form"] .import-model-card:hover,
body[data-page="form"] .import-model-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 81, 200, 0.36);
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.05),
    0 18px 36px rgba(8, 26, 55, 0.1);
}

body[data-page="form"] .import-model-pill {
  grid-area: badge;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf4ff;
  color: #0757ca;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body[data-page="form"] .import-model-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: #eef5ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

body[data-page="form"] .import-model-icon-ticket {
  background-image: url("../assets/icons/icone-quantidade.png");
}

body[data-page="form"] .import-model-icon-emissions,
body[data-page="form"] .import-model-icon-online,
body[data-page="form"] .import-model-icon-ecommerce,
body[data-page="form"] .import-model-icon-cvd {
  background-image: url("../assets/icons/icone-faturamento.png");
  background-color: #eaf8f0;
}

body[data-page="form"] .import-model-icon-history {
  background-image: url("../assets/icons/grafico.png");
  background-color: #f1ebff;
}

body[data-page="form"] .import-model-card strong {
  grid-area: title;
  align-self: end;
  color: #071f4d;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

body[data-page="form"] .import-model-card p {
  grid-area: description;
  display: -webkit-box;
  overflow: hidden;
  min-height: 42px;
  margin: 0;
  color: #506482;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="form"] .import-model-card::after {
  content: "Selecionar";
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  border-radius: 8px;
  background: #0051c8;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px rgba(0, 81, 200, 0.18);
}

body[data-page="form"] .base-data-overlay .base-data-modal {
  width: min(1180px, 94vw);
  max-height: min(88vh, 860px);
  padding: 24px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 30px 80px rgba(8, 26, 55, 0.24);
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(9, 38, 85, 0.08);
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "icon eyebrow"
    "icon title"
    "icon text";
  column-gap: 16px;
  align-items: center;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header > div::before {
  content: "";
  grid-area: icon;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:
    url("../assets/icons/icone-quantidade.png") center / 30px 30px no-repeat,
    #eef5ff;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header .eyebrow {
  grid-area: eyebrow;
  margin: 0 0 4px;
  padding: 0;
  color: #0757ca;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header .eyebrow::before {
  content: none;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header h3 {
  grid-area: title;
  color: #071f4d;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-header p {
  grid-area: text;
  max-width: 740px;
  margin-top: 8px;
  color: #506482;
  font-weight: 700;
  line-height: 1.45;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-close {
  width: 42px;
  height: 42px;
  border-color: rgba(9, 38, 85, 0.12);
  background: #edf4ff;
  color: #071f4d;
  box-shadow: none;
}

body[data-page="form"] .base-data-overlay .base-data-modal .modal-back-button {
  border-color: rgba(9, 38, 85, 0.12);
  background: #ffffff;
  color: #0757ca;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.06);
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 16px;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-import-section,
body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-section {
  padding: 18px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 10px 28px rgba(8, 26, 55, 0.055);
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-section-heading {
  align-items: center;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(9, 38, 85, 0.08);
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-section-heading .eyebrow {
  margin: 0 0 8px;
  padding: 0;
  color: #0757ca;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-section-heading .eyebrow::before {
  content: none;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-section-heading h4 {
  margin: 0;
  color: #071f4d;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-section-heading .status-badge {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #edf4ff;
  color: #0757ca;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-upload-box {
  min-height: 132px;
  padding: 18px 18px 18px 78px;
  border: 1px dashed rgba(0, 81, 200, 0.28);
  border-radius: 16px;
  background: #f6f9fd;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-upload-box::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 22px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    url("../assets/icons/icone-quantidade.png") center / 24px 24px no-repeat,
    #eef5ff;
}

body[data-page="form"] .base-data-overlay .base-data-modal .upload-title {
  color: #293f63;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-upload-box strong {
  color: #071f4d;
  font-size: 1rem;
  font-weight: 800;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-upload-box p {
  color: #506482;
  font-weight: 700;
}

body[data-page="form"] .base-data-overlay .base-data-modal .ticket-sales-schema {
  padding: 14px;
  border: 1px solid rgba(9, 38, 85, 0.1);
  border-radius: 16px;
  background: #ffffff;
}

body[data-page="form"] .base-data-overlay .base-data-modal .ticket-sales-schema-list {
  gap: 8px;
}

body[data-page="form"] .base-data-overlay .base-data-modal .ticket-sales-schema-pill {
  min-height: 30px;
  border: 0;
  background: #edf4ff;
  color: #0757ca;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-status-row {
  width: 100%;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-status-row .status-badge {
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: #edf4ff;
  color: #1f5fb0;
  font-weight: 800;
  line-height: 1.2;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-details .mini-card {
  min-height: 112px;
  padding: 16px;
  border-color: rgba(9, 38, 85, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.035),
    0 8px 18px rgba(8, 26, 55, 0.045);
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-details .mini-card span {
  margin: 0 0 10px;
  color: #506482;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-details .mini-card strong {
  color: #071f4d;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.25;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-section {
  min-height: 100%;
}

body[data-page="form"] .base-data-overlay .base-data-modal .gear-toggle {
  width: 42px;
  height: 42px;
  border-color: rgba(9, 38, 85, 0.12);
  background: #ffffff;
  color: #071f4d;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.06);
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block {
  padding: 14px;
  border: 1px solid rgba(9, 38, 85, 0.1);
  border-radius: 16px;
  background: #f8fafc;
}

body[data-page="form"] .base-data-overlay .base-data-modal .history-heading .eyebrow {
  margin-bottom: 8px;
  padding: 0;
  color: #0757ca;
}

body[data-page="form"] .base-data-overlay .base-data-modal .history-heading .eyebrow::before {
  content: none;
}

body[data-page="form"] .base-data-overlay .base-data-modal .history-heading p,
body[data-page="form"] .base-data-overlay .base-data-modal .history-empty {
  color: #506482;
  font-weight: 700;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-list {
  display: grid;
  gap: 12px;
  max-height: 56vh;
  padding-right: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 42px;
  grid-template-areas:
    "file file file action"
    "imported rows value action";
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(9, 38, 85, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.035),
    0 8px 18px rgba(8, 26, 55, 0.045);
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div {
  min-width: 0;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:first-child {
  grid-area: file;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:nth-child(2),
body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:nth-child(3),
body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:nth-child(4) {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f9fd;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:nth-child(2) {
  grid-area: imported;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:nth-child(3) {
  grid-area: rows;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:nth-child(4) {
  grid-area: value;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item strong {
  margin: 0;
  color: #071f4d;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item span {
  color: #506482;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:first-child strong {
  display: block;
  max-width: calc(100% - 8px);
  overflow: hidden;
  color: #071f4d;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item > div:first-child span {
  margin-top: 6px;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-actions {
  grid-area: action;
  justify-content: center;
}

body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .gear-button {
  width: 40px;
  height: 40px;
  border-color: rgba(9, 38, 85, 0.12);
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.06);
}

.base-data-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 20px;
  align-items: start;
}

.base-data-import-section,
.base-data-history-section {
  display: grid;
  gap: 16px;
  align-content: start;
}

.base-data-section-heading {
  margin-bottom: 0;
}

.base-data-upload-box {
  min-height: 150px;
}

.base-data-api-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(15, 43, 87, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.base-data-api-sync strong {
  display: block;
  margin: 4px 0;
  color: var(--primary);
  font-size: 0.98rem;
  line-height: 1.25;
}

.base-data-api-sync p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.base-data-api-sync-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #0757ca;
  border-radius: 8px;
  background: #0757ca;
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.base-data-api-sync-button:hover,
.base-data-api-sync-button:focus-visible {
  transform: translateY(-1px);
  border-color: #0649aa;
  background: #0649aa;
}

.base-data-api-sync-button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
  transform: none;
}

.placeholder-upload-box {
  cursor: default;
  border-style: dashed;
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 246, 253, 0.94));
}

.gear-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.gear-toggle:disabled:hover {
  transform: none;
  box-shadow: none;
}

.emissions-history-block {
  display: grid;
}

.base-data-status-row {
  display: flex;
  justify-content: flex-start;
}

.base-data-details {
  margin-bottom: 0;
}

.base-data-history-block {
  padding-top: 0;
  border-top: 0;
}

.base-data-history-block .history-list {
  max-height: 52vh;
  overflow: auto;
}

body[data-page="form"] #baseDataCard .base-data-history-block {
  padding: 12px;
  border: 1px solid rgba(170, 188, 216, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

body[data-page="form"] #baseDataCard .sidebar-history-list {
  max-height: 210px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-heading h3 {
  margin-top: 0;
  font-size: 1.35rem;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}

.ghost-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ghost-button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.performance-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.performance-form .field:has(#diasUteis),
.performance-form .field:has(#realizadoQuantidade),
.performance-form .field:has(#percentualMetaQuantidade),
.performance-form .field:has(#realizadoFaturamento),
.performance-form .field:has(#percentualMetaFaturamento),
.performance-form .field:has(#metaDiariaQuantidade),
.performance-form .field:has(#metaDiariaFaturamento) {
  display: none;
}

.import-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: start;
}

.upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 112px;
  padding: 16px 18px;
  border: 1px dashed rgba(42, 94, 168, 0.35);
  border-radius: var(--radius-lg);
  background: #f2f6fb;
  cursor: pointer;
  align-self: start;
}

.upload-box.upload-box-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.upload-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-soft);
}

.upload-box strong {
  font-size: 1.02rem;
  font-family: inherit;
}

.upload-box p,
.history-heading p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-input:disabled {
  cursor: not-allowed;
}

.ticket-sales-schema {
  display: grid;
  gap: 10px;
}

.ticket-sales-schema-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-sales-schema-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(42, 94, 168, 0.18);
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.06);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.import-details {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.mini-card {
  min-height: 84px;
  padding: 16px 18px;
}

.mini-card span {
  display: block;
  color: var(--text-soft);
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.mini-card strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.compact-badge {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.status-badge::before,
.dashboard-badge::before,
.status-chip::before {
  content: none;
}

body[data-page="projection"] #projectionDataStatus::before {
  display: none;
}

.status-badge.neutral {
  background: rgba(15, 43, 87, 0.08);
  border-color: rgba(15, 43, 87, 0.14);
  color: var(--primary);
}

.status-badge.success {
  background: rgba(26, 118, 58, 0.14);
  border-color: rgba(26, 118, 58, 0.18);
  color: #146034;
}

.status-badge.error {
  background: rgba(166, 31, 53, 0.14);
  border-color: rgba(166, 31, 53, 0.18);
  color: #941a31;
}

.sidebar-status.neutral {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sidebar-status.success {
  background: rgba(46, 163, 96, 0.22);
  color: #ffffff;
}

.sidebar-status.error {
  background: rgba(203, 69, 91, 0.22);
  color: #ffffff;
}

.history-block {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.history-block.hidden {
  display: none;
}

.history-heading {
  margin-bottom: 18px;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.history-item,
.history-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(110px, 1fr)) 72px;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.history-item strong,
.history-item span {
  display: block;
}

.history-item strong {
  margin-bottom: 4px;
}

.history-item span,
.history-empty {
  color: var(--text-soft);
}

.history-actions {
  display: flex;
  justify-content: end;
}

.gear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.gear-button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: rgba(42, 94, 168, 0.06);
}

.gear-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field span {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font: inherit;
  color: var(--text);
  background: var(--surface-strong);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(42, 94, 168, 0.7);
  box-shadow: 0 0 0 4px rgba(42, 94, 168, 0.12);
  transform: translateY(-1px);
}

input[readonly] {
  background: #f4f7fb;
  color: var(--primary);
  font-weight: 700;
}

.period-select {
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.86);
}

.dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-card {
  padding: 24px;
  min-height: 190px;
}

.dashboard-card.featured {
  grid-column: span 2;
}

.cadastros-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cadastros-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 22px;
}

.cadastro-search-field {
  max-width: none;
}

.cadastro-role-field {
  max-width: 280px;
}

.cadastro-search-field input[type="search"] {
  min-height: 52px;
  padding-right: 18px;
}

.cadastro-card {
  padding: 18px 20px;
  min-height: 0;
  display: block;
}

.cadastro-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cadastro-card-copy {
  display: grid;
  gap: 5px;
}

.cadastro-card-copy h3 {
  margin: 0;
  font-size: 1.16rem;
  color: var(--primary);
  line-height: 1.2;
}

.cadastro-card-copy p {
  color: var(--text-soft);
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
}

.cadastro-card .eyebrow {
  font-size: 0.68rem;
}

.cadastro-role-chip,
.cadastro-access-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(42, 94, 168, 0.08);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cadastro-access-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cadastro-access-chip {
  background: rgba(15, 43, 87, 0.06);
  font-size: 0.74rem;
}

.cadastro-settings-button {
  flex: 0 0 auto;
}

.cadastro-modal-card {
  width: min(720px, 100%);
}

.cadastro-create-modal-card {
  width: min(820px, 100%);
  animation: cadastroModalEnter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cadastro-import-modal-card {
  width: min(1080px, 100%);
  max-height: min(88vh, 860px);
}

.cadastro-modal-content {
  display: grid;
  gap: 18px;
}

.cadastro-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cadastro-modal-pages {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(42, 94, 168, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.cadastro-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ghost-button-danger {
  border-color: rgba(166, 31, 53, 0.22);
  color: #8f2334;
}

.ghost-button-danger:hover {
  border-color: rgba(166, 31, 53, 0.4);
  background: rgba(166, 31, 53, 0.08);
}

.cadastro-modal-actions .ghost-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

body[data-page="rec"] .rec-page {
  gap: 14px;
}

body[data-page="contestacoes"] .contestacoes-page {
  gap: 22px;
  background: #f6f9fd;
  color: #0b2246;
}

body[data-page="contestacoes"] .contestacoes-header,
body[data-page="contestacoes"] .contestacoes-card,
body[data-page="contestacoes"] .contestacoes-panel {
  border: 1px solid #d9e3f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(17, 42, 79, 0.08);
}

body[data-page="contestacoes"] .contestacoes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 10px 0 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-page="contestacoes"] .contestacoes-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5d7192;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacoes-back-mark {
  color: #7b8aa2;
  font-size: 1rem;
  line-height: 1;
}

body[data-page="contestacoes"] .contestacoes-header h2 {
  margin: 16px 0 8px;
  color: #071f3d;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0;
}

body[data-page="contestacoes"] .contestacoes-header p {
  max-width: 760px;
  margin: 0;
  color: #657792;
  font-size: 0.86rem;
  font-weight: 700;
}

body[data-page="contestacoes"] .contestacoes-header .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
  color: #233b64;
  box-shadow: 0 10px 22px rgba(17, 42, 79, 0.06);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
  text-transform: none;
}

body[data-page="contestacoes"] .contestacoes-header .status-badge::before {
  display: none;
}

body[data-page="contestacoes"] .contestacoes-header .status-badge svg,
body[data-page="contestacoes"] .contestacoes-card-icon svg,
body[data-page="contestacoes"] .contestacoes-tool-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="contestacoes"] .contestacoes-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body[data-page="contestacoes"] .contestacoes-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 24px 24px 22px;
  overflow: hidden;
}

body[data-page="contestacoes"] .contestacoes-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 12px 0 0 12px;
  background: #2475f2;
}

body[data-page="contestacoes"] .contestacoes-card-review::before {
  background: #ffb44d;
}

body[data-page="contestacoes"] .contestacoes-card-done::before {
  background: #59c987;
}

body[data-page="contestacoes"] .contestacoes-card-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #e5efff;
  color: #126add;
}

body[data-page="contestacoes"] .contestacoes-card-review .contestacoes-card-icon {
  background: #fff0d7;
  color: #f19516;
}

body[data-page="contestacoes"] .contestacoes-card-done .contestacoes-card-icon {
  background: #dff6e8;
  color: #159652;
}

body[data-page="contestacoes"] .contestacoes-card-label {
  display: block;
  margin-bottom: 6px;
  color: #1473ef;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacoes-card-review .contestacoes-card-label {
  color: #f18b0b;
}

body[data-page="contestacoes"] .contestacoes-card-done .contestacoes-card-label {
  color: #159652;
}

body[data-page="contestacoes"] .contestacoes-card strong {
  color: #071f3d;
  font-size: 2rem;
  line-height: 1;
}

body[data-page="contestacoes"] .contestacoes-card p {
  margin: 8px 0 0;
  color: #667895;
  font-size: 0.84rem;
  font-weight: 700;
}

body[data-page="contestacoes"] .contestacoes-card-arrow {
  display: inline-grid;
  place-items: center;
  color: #31537f;
  font-size: 1.35rem;
  font-weight: 800;
}

body[data-page="contestacoes"] .contestacoes-card-arrow-button {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

body[data-page="contestacoes"] .contestacoes-card-arrow-button:hover,
body[data-page="contestacoes"] .contestacoes-card-arrow-button:focus-visible {
  background: #e9f7ef;
  color: #087743;
  transform: translateX(2px);
  outline: none;
}

body[data-page="contestacoes"] .contestacoes-panel {
  padding: 20px 18px 18px;
  border-radius: 12px;
}

body[data-page="contestacoes"] .contestacoes-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

body[data-page="contestacoes"] .contestacoes-panel-heading h3 {
  margin: 0;
  color: #071f3d;
  font-size: 1.15rem;
}

body[data-page="contestacoes"] .contestacoes-list-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="contestacoes"] .contestacoes-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dce6f2;
  border-radius: 8px;
  background: #ffffff;
  color: #233b64;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacoes-total-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  background: #ffffff;
  color: #1a3864;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacoes-empty-state {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 140px;
  padding: 20px;
  border: 1px dashed #bdd2ef;
  border-radius: 12px;
  background: #f7faff;
}

body[data-page="contestacoes"] .contestacoes-empty-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #e7f0ff;
  color: #12376e;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacoes-empty-state h3 {
  margin: 0 0 6px;
  color: #071f3d;
}

body[data-page="contestacoes"] .contestacoes-empty-state p {
  margin: 0;
  color: #667895;
  font-weight: 600;
}

body[data-page="contestacoes"] .contestacoes-list {
  display: grid;
  gap: 14px;
}

body[data-page="contestacoes"] .contestacao-item {
  display: block;
  padding: 18px 16px 14px;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body[data-page="contestacoes"] .contestacao-item.is-resolved {
  border-color: #c9ead8;
  background: #fbfffd;
}

body[data-page="contestacoes"] .contestacao-item-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

body[data-page="contestacoes"] .contestacao-item-summary::-webkit-details-marker {
  display: none;
}

body[data-page="contestacoes"] .contestacao-avatar {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #f7e7f8;
  color: #a13794;
  font-size: 1.05rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacao-summary-text {
  display: grid;
  min-width: 0;
  gap: 6px;
}

body[data-page="contestacoes"] .contestacao-summary-text > strong {
  color: #102a50;
  font-size: 0.94rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacao-summary-text > small {
  color: #5d7192;
  font-size: 0.8rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacao-observation {
  margin: 0;
  color: #49617f;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
}

body[data-page="contestacoes"] .contestacao-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7f1ff;
  color: #1473ef;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacao-item.is-resolved .contestacao-status {
  background: #def6e8;
  color: #087743;
}

body[data-page="contestacoes"] .contestacao-chevron {
  color: #31537f;
  font-weight: 900;
  line-height: 1.5;
}

body[data-page="contestacoes"] .contestacao-item:not([open]) .contestacao-chevron {
  transform: rotate(180deg);
}

body[data-page="contestacoes"] .contestacao-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="contestacoes"] .contestacao-tags span {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e9f1fe;
  color: #31537f;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacao-item-body {
  display: grid;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e5edf6;
}

body[data-page="contestacoes"] .contestacao-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="contestacoes"] .contestacao-metrics div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  align-items: center;
  gap: 4px 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4f7fb;
}

body[data-page="contestacoes"] .contestacao-metrics span {
  color: #7283a0;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacao-metric-icon {
  grid-area: icon;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #e3efff;
  color: #126add;
}

body[data-page="contestacoes"] .contestacao-metrics strong {
  grid-area: value;
  color: #071f3d;
  font-size: 0.96rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacao-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5edf6;
}

body[data-page="contestacoes"] .contestacao-item-footnote {
  margin-right: auto;
  color: #6d7f9d;
  font-size: 0.76rem;
  font-weight: 800;
}

body[data-page="contestacoes"] .contestacao-resolve-button {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #bfead2;
  border-radius: 8px;
  background: #e2f8eb;
  color: #087743;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

body[data-page="contestacoes"] .contestacao-resolve-button:hover,
body[data-page="contestacoes"] .contestacao-resolve-button:focus-visible {
  transform: translateY(-1px);
  border-color: #79d39d;
  background: #d0f3dd;
}

body[data-page="contestacoes"] .contestacao-resolved-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e2f8eb;
  color: #087743;
  font-size: 0.74rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacao-resolved-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #dcefe5;
  color: #087743;
  font-size: 0.76rem;
  font-weight: 900;
}

body[data-page="contestacoes"] .contestacao-resolved-meta span {
  display: grid;
  gap: 4px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eefbf3;
}

body[data-page="contestacoes"] .contestacao-resolved-meta strong {
  color: #5c7a6d;
  font-size: 0.66rem;
  text-transform: uppercase;
}

body[data-page="contestacoes"].contestacoes-modal-open {
  overflow: hidden;
}

body[data-page="contestacoes"] .contestacoes-history-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(8, 25, 52, 0.42);
  backdrop-filter: blur(10px);
}

body[data-page="contestacoes"] .contestacoes-history-modal.hidden {
  display: none;
}

body[data-page="contestacoes"] .contestacoes-history-dialog {
  width: min(1180px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(203, 216, 234, 0.92);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(8, 25, 52, 0.28);
}

body[data-page="contestacoes"] .contestacoes-history-dialog-heading {
  position: sticky;
  top: -22px;
  z-index: 2;
  margin: -22px -22px 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e3ebf5;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
}

body[data-page="contestacoes"] .contestacoes-history-kicker {
  display: block;
  margin-bottom: 5px;
  color: #159652;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-page="contestacoes"] .contestacoes-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body[data-page="contestacoes"] .contestacoes-modal-close {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #ffffff;
  color: #31537f;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

body[data-page="contestacoes"] .contestacoes-modal-close:hover,
body[data-page="contestacoes"] .contestacoes-modal-close:focus-visible {
  border-color: #bdd2ef;
  background: #f2f6fb;
  color: #071f3d;
  outline: none;
}

body[data-page="rec"] .rec-page-header,
body[data-page="rec"] .rec-compact-card,
body[data-page="rec"] .rec-info-card {
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(7, 31, 79, 0.06);
}

body[data-page="rec"] .rec-page-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 14px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-page="rec"] .rec-page-header h2 {
  margin: 8px 0 6px;
  color: #071f4f;
  font-size: clamp(1.7rem, 2.2vw, 2.35rem);
  line-height: 1.05;
}

body[data-page="rec"] .rec-page-header p {
  max-width: 780px;
  margin: 0;
  color: #526985;
  font-size: 0.9rem;
  font-weight: 600;
}

body[data-page="rec"] .rec-header-tools {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="rec"] .rec-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="rec"] .rec-header-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #b9d6ff;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f71d0;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

body[data-page="rec"] .rec-header-action-button:hover,
body[data-page="rec"] .rec-header-action-button:focus-visible {
  border-color: #8db9f4;
  background: #eaf3ff;
  color: #185fbf;
  outline: none;
}

body[data-page="rec"] .rec-header-action-button.active {
  border-color: #2f71d0;
  background: #2f71d0;
  color: #ffffff;
}

body[data-page="rec"] .rec-dashboard-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(7, 31, 79, 0.24);
  backdrop-filter: blur(10px);
}

body[data-page="rec"] .rec-dashboard-modal.hidden {
  display: none;
}

body[data-page="rec"] .rec-dashboard-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1880px, 99vw);
  height: min(900px, 94vh);
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(7, 31, 79, 0.24);
}

body[data-page="rec"] .rec-dashboard-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e1eaf5;
}

body[data-page="rec"] .rec-dashboard-dialog-header h3 {
  margin: 3px 0 0;
  color: #071f4f;
  font-size: 1.12rem;
}

body[data-page="rec"] .rec-dashboard-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d6e6fb;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f71d0;
  cursor: pointer;
}

body[data-page="rec"] .rec-dashboard-close-button:hover,
body[data-page="rec"] .rec-dashboard-close-button:focus-visible {
  border-color: #8db9f4;
  background: #eaf3ff;
  outline: none;
}

body[data-page="rec"] .rec-dashboard-close-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body[data-page="rec"] .rec-dashboard-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #f8fbff;
}

body[data-page="rec"] .rec-dashboard-stage {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid #e1eaf5;
  border-radius: 8px;
  background: #ffffff;
}

body[data-page="rec"] .rec-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
}

body[data-page="rec"] .rec-dashboard-kpi-card {
  display: grid;
  align-content: space-between;
  min-height: 118px;
  padding: 14px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: 0 8px 20px rgba(7, 31, 79, 0.05);
}

body[data-page="rec"] .rec-dashboard-kpi-card span {
  color: #526985;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

body[data-page="rec"] .rec-dashboard-kpi-card strong {
  margin-top: 12px;
  color: #071f4f;
  font-size: 1.45rem;
  line-height: 1.05;
}

body[data-page="rec"] .rec-dashboard-kpi-growth {
  justify-self: start;
  margin-top: 8px;
  padding: 3px 7px;
  border: 1px solid #dbe5f2;
  border-radius: 6px;
  background: #ffffff;
  color: #5f7390;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

body[data-page="rec"] .rec-dashboard-kpi-growth.positive {
  border-color: #b9dec7;
  background: #ecf8f0;
  color: #146034;
}

body[data-page="rec"] .rec-dashboard-kpi-growth.negative {
  border-color: #f0c2cc;
  background: #fff1f3;
  color: #941a31;
}

body[data-page="rec"] .rec-dashboard-kpi-card small {
  margin-top: 8px;
  color: #5f7390;
  font-size: 0.74rem;
  font-weight: 800;
}

body[data-page="rec"] .rec-dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

body[data-page="rec"] .rec-dashboard-chart-card {
  padding: 16px;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(7, 31, 79, 0.05);
}

body[data-page="rec"] .rec-dashboard-chart-animate {
  animation: rec-dashboard-card-refresh 260ms ease-out both;
}

body[data-page="rec"] .rec-dashboard-chart-heading,
body[data-page="rec"] .rec-dashboard-chart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="rec"] .rec-dashboard-chart-heading {
  flex-wrap: wrap;
}

body[data-page="rec"] .rec-dashboard-chart-heading h4 {
  margin: 4px 0 0;
  color: #071f4f;
  font-size: 1rem;
}

body[data-page="rec"] .rec-dashboard-chart-heading > strong {
  margin-left: auto;
  color: #071f4f;
  font-size: 1.35rem;
}

body[data-page="rec"] .rec-dashboard-range-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid #d6e6fb;
  border-radius: 8px;
  background: #f5f9ff;
}

body[data-page="rec"] .rec-dashboard-ranking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

body[data-page="rec"] .rec-dashboard-range-toggle button {
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2f71d0;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

body[data-page="rec"] .rec-dashboard-ranking-toggle button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d6e6fb;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f71d0;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

body[data-page="rec"] .rec-dashboard-range-toggle button:hover,
body[data-page="rec"] .rec-dashboard-range-toggle button:focus-visible,
body[data-page="rec"] .rec-dashboard-ranking-toggle button:hover,
body[data-page="rec"] .rec-dashboard-ranking-toggle button:focus-visible {
  background: #eaf3ff;
  outline: none;
}

body[data-page="rec"] .rec-dashboard-range-toggle button.active {
  background: #2f71d0;
  color: #ffffff;
}

body[data-page="rec"] .rec-dashboard-chart-summary {
  margin-top: 10px;
  color: #5f7390;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page="rec"] .rec-dashboard-chart-summary strong {
  color: #146034;
}

body[data-page="rec"] .rec-dashboard-chart-summary strong.negative {
  color: #941a31;
}

body[data-page="rec"] .rec-dashboard-line-chart {
  height: 220px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #e1eaf5;
  border-radius: 8px;
  background:
    linear-gradient(#edf4ff 1px, transparent 1px) 0 0 / 100% 25%,
    #f8fbff;
}

body[data-page="rec"] .rec-dashboard-line-chart svg {
  width: 100%;
  height: 100%;
}

body[data-page="rec"] .rec-dashboard-line-chart line {
  stroke: #c8d9ef;
  stroke-width: 2;
}

body[data-page="rec"] .rec-dashboard-line-chart polyline {
  fill: none;
  stroke: #2f71d0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-line-chart polyline {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: rec-dashboard-line-draw 520ms ease-out forwards;
}

body[data-page="rec"] .rec-dashboard-line-chart circle {
  fill: #ffffff;
  stroke: #2f71d0;
  stroke-width: 4;
}

body[data-page="rec"] .rec-dashboard-line-chart text {
  fill: #146034;
  font-size: 0.92rem;
  font-weight: 900;
  paint-order: stroke;
  stroke: #f8fbff;
  stroke-width: 5px;
}

body[data-page="rec"] .rec-dashboard-line-chart text.negative {
  fill: #941a31;
}

body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-line-chart circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: rec-dashboard-point-pop 360ms ease-out both;
}

body[data-page="rec"] .rec-dashboard-chart-labels {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
}

body[data-page="rec"] .rec-dashboard-chart-labels span {
  min-width: 0;
  color: #5f7390;
  text-align: center;
}

body[data-page="rec"] .rec-dashboard-chart-labels strong,
body[data-page="rec"] .rec-dashboard-chart-labels small {
  display: block;
}

body[data-page="rec"] .rec-dashboard-chart-labels strong {
  color: #071f4f;
  font-size: 0.68rem;
}

body[data-page="rec"] .rec-dashboard-chart-labels small {
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 800;
}

body[data-page="rec"] .rec-dashboard-ranking-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

body[data-page="rec"] .rec-dashboard-ranking-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

body[data-page="rec"] .rec-dashboard-ranking-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d6e6fb;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f71d0;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-dashboard-ranking-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
  color: #071f4f;
  font-size: 0.78rem;
  line-height: 1.25;
}

body[data-page="rec"] .rec-dashboard-ranking-label strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="rec"] .rec-dashboard-ranking-label span {
  justify-self: end;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body[data-page="rec"] .rec-dashboard-ranking-track {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #edf4ff;
}

body[data-page="rec"] .rec-dashboard-ranking-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2f71d0;
}

body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-ranking-track span {
  transform-origin: left;
  animation: rec-dashboard-ranking-bar-grow 420ms ease-out both;
}

body[data-page="rec"] .rec-dashboard-bar-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(42px, 1fr));
  gap: 8px;
  min-height: 220px;
  margin-top: 16px;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid #e1eaf5;
  border-radius: 8px;
  background:
    linear-gradient(#edf4ff 1px, transparent 1px) 0 0 / 100% 25%,
    #f8fbff;
}

body[data-page="rec"] .rec-dashboard-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  color: #526985;
  font-size: 0.66rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-dashboard-bar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body[data-page="rec"] .rec-dashboard-bar-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2f71d0;
}

body[data-page="rec"] .rec-dashboard-bar-legend i.tone-2 {
  background: #16a085;
}

body[data-page="rec"] .rec-dashboard-bar-legend i.tone-3 {
  background: #875ad7;
}

body[data-page="rec"] .rec-dashboard-bar-item {
  display: grid;
  grid-template-rows: minmax(148px, 1fr) auto;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

body[data-page="rec"] .rec-dashboard-grouped-bars {
  display: grid;
  grid-template-columns: repeat(3, 20px);
  gap: 3px;
  justify-content: center;
  justify-items: center;
}

body[data-page="rec"] .rec-dashboard-grouped-bars {
  justify-items: stretch;
}

body[data-page="rec"] .rec-dashboard-bar-value {
  color: #071f4f;
  font-size: 0.86rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-dashboard-bar-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  justify-items: center;
  width: 20px;
  min-height: 148px;
}

body[data-page="rec"] .rec-dashboard-bar-track strong {
  align-self: center;
  margin-bottom: 5px;
  color: #071f4f;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

body[data-page="rec"] .rec-dashboard-bar-track span {
  display: block;
  width: 20px;
  min-height: 8px;
  border-radius: 0;
  background: #2f71d0;
  box-shadow: 0 8px 18px rgba(47, 113, 208, 0.18);
}

body[data-page="rec"] .rec-dashboard-bar-track span.tone-2 {
  background: #16a085;
}

body[data-page="rec"] .rec-dashboard-bar-track span.tone-3 {
  background: #875ad7;
}

body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-bar-track span {
  transform-origin: bottom;
  animation: rec-dashboard-bar-grow 420ms ease-out both;
}

body[data-page="rec"] .rec-dashboard-bar-item > strong {
  min-width: 0;
  overflow: hidden;
  color: #071f4f;
  font-size: 0.72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes rec-dashboard-card-refresh {
  from {
    opacity: 0.55;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rec-dashboard-line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rec-dashboard-point-pop {
  from {
    opacity: 0;
    transform: scale(0.65);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rec-dashboard-bar-grow {
  from {
    transform: scaleY(0.12);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes rec-dashboard-ranking-bar-grow {
  from {
    transform: scaleX(0.08);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="rec"] .rec-dashboard-chart-animate,
  body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-line-chart polyline,
  body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-line-chart circle,
  body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-ranking-track span,
  body[data-page="rec"] .rec-dashboard-chart-animate .rec-dashboard-bar-track span {
    animation: none;
  }
}


@media (max-width: 1200px) {
  body[data-page="rec"] .rec-dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  body[data-page="rec"] .rec-dashboard-chart-card {
    width: auto;
  }

  body[data-page="rec"] .rec-dashboard-chart-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="rec"] .rec-dashboard-bar-chart {
    grid-template-columns: 1fr;
  }

  body[data-page="rec"] .rec-dashboard-bar-item {
    grid-template-columns: 34px minmax(0, 1fr) minmax(120px, 0.7fr);
    grid-template-rows: auto;
    align-items: center;
    text-align: left;
  }

  body[data-page="rec"] .rec-dashboard-bar-track {
    min-height: 12px;
    justify-content: flex-start;
  }

  body[data-page="rec"] .rec-dashboard-bar-track span {
    width: 100%;
    height: 10px !important;
  }

  body[data-page="rec"] .rec-dashboard-chart-labels {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

body[data-page="rec"] .rec-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2f71d0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="rec"] .rec-breadcrumb strong {
  color: #071f4f;
}

body[data-page="rec"] .rec-page-header .status-badge {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
  text-transform: uppercase;
}

body[data-page="rec"] .rec-page-header .status-badge.neutral,
body[data-page="rec"] .rec-page-header .status-badge.success {
  border-color: #bfead2;
  background: #e2f8eb;
  color: #087743;
}

body[data-page="rec"] .rec-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: stretch;
}

body[data-page="rec"] .rec-main-stack {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
  gap: 12px;
}

body[data-page="rec"] .rec-upload-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 154px;
  padding: 18px 22px;
  border: 1px dashed #8db9f4;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdff, #f7fbff);
  cursor: pointer;
  overflow: hidden;
}

body[data-page="rec"] .rec-upload-card .upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body[data-page="rec"] .rec-upload-content {
  display: flex;
  align-items: center;
  gap: 18px;
}

body[data-page="rec"] .rec-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid #cbd7e8;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(7, 31, 79, 0.08);
}

body[data-page="rec"] .rec-file-icon img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

body[data-page="rec"] .rec-upload-content strong {
  display: block;
  margin-bottom: 5px;
  color: #071f4f;
  font-size: 1.08rem;
}

body[data-page="rec"] .rec-upload-content small {
  display: block;
  color: #526985;
  font-weight: 700;
}

body[data-page="rec"] .rec-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 16px;
  padding: 0 14px;
  border: 1px solid #b9d6ff;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f71d0;
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid #b9d6ff;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f71d0;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  margin-top: 0;
}

body[data-page="rec"] .rec-export-button:hover {
  border-color: #8db9f4;
  background: #eaf3ff;
}

body[data-page="rec"] .rec-export-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-page="rec"] .rec-compact-card,
body[data-page="rec"] .rec-info-card {
  padding: 14px;
}

body[data-page="rec"] .rec-last-import-card {
  align-self: start;
  height: max-content;
  min-height: 0;
  padding: 8px 12px;
}

body[data-page="rec"] .rec-card-eyebrow {
  display: block;
  color: #526985;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="rec"] .rec-last-import-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(150px, 1fr) auto minmax(170px, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

body[data-page="rec"] .rec-icon-stat,
body[data-page="rec"] .rec-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  color: #071f4f;
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-file-pill {
  padding: 6px 10px;
  border-radius: 8px;
  background: #edf4ff;
  color: #2f71d0;
}

body[data-page="rec"] .rec-last-import-card .status-badge {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.72rem;
}

body[data-page="rec"] .rec-line-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid #d6e6fb;
  border-radius: 8px;
  background: #f2f7ff;
  color: #2f71d0;
  font-size: 0.66rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-section-toolbar,
body[data-page="rec"] .rec-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="rec"] .rec-summary-card .rec-section-toolbar {
  align-items: flex-start;
  margin-bottom: 8px;
}

body[data-page="rec"] .rec-info-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

body[data-page="rec"] .rec-info-list {
  display: grid;
  gap: 10px;
}

body[data-page="rec"] .rec-info-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e2eaf5;
  border-radius: 9px;
  background: #ffffff;
}

body[data-page="rec"] .rec-info-list span:not(.rec-line-icon) {
  display: block;
  margin-bottom: 4px;
  color: #526985;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-page="rec"] .rec-info-list strong {
  color: #071f4f;
  font-size: 0.96rem;
  line-height: 1.15;
}

body[data-page="rec"] .rec-history-panel,
body[data-page="rec"] .rec-summary-card {
  overflow: hidden;
}

body[data-page="rec"] .rec-section-toolbar h3 {
  margin: 4px 0 0;
  color: #071f4f;
  font-size: 1.05rem;
}

body[data-page="rec"] .rec-search-field {
  width: min(100%, 310px);
}

body[data-page="rec"] .rec-search-field input,
body[data-page="rec"] .rec-filter-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfdbeb;
  border-radius: 8px;
  background: #ffffff;
  color: #071f4f;
  font-weight: 800;
}

body[data-page="rec"] .rec-search-field input {
  padding: 0 12px;
}

body[data-page="rec"] .rec-filter-row {
  width: fit-content;
  justify-content: flex-start;
  gap: 8px;
  margin: 10px 0 10px;
  padding: 4px 6px;
  border: 1px solid #e2eaf5;
  border-radius: 8px;
  background: #fbfdff;
}

body[data-page="rec"] .rec-filter-row span {
  color: #526985;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="rec"] .rec-filter-row select {
  width: 150px;
  max-width: 150px;
  min-height: 32px;
  padding: 0 28px 0 10px;
  border-radius: 7px;
  font-size: 0.82rem;
}

body[data-page="rec"] .rec-history-table-shell,
body[data-page="rec"] .rec-table-shell {
  overflow-x: auto;
  border: 1px solid #e2eaf5;
  border-radius: 9px;
  background: #ffffff;
}

body[data-page="rec"] .rec-history-table,
body[data-page="rec"] .rec-summary-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
}

body[data-page="rec"] .rec-history-table th,
body[data-page="rec"] .rec-history-table td,
body[data-page="rec"] .rec-summary-table th,
body[data-page="rec"] .rec-summary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e6edf7;
  color: #071f4f;
  font-size: 0.78rem;
}

body[data-page="rec"] .rec-history-table thead th,
body[data-page="rec"] .rec-summary-table thead th {
  background: #edf4fc;
  color: #213f6b;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}

body[data-page="rec"] .rec-history-table tbody tr.active,
body[data-page="rec"] .rec-summary-table tbody tr:nth-child(even) {
  background: #f9fbfe;
}

body[data-page="rec"] .rec-history-table tbody tr:hover,
body[data-page="rec"] .rec-summary-table tbody tr:hover {
  background: #f4f8ff;
}

body[data-page="rec"] .rec-history-table td:nth-child(n+3),
body[data-page="rec"] .rec-summary-table td:nth-child(n+2),
body[data-page="rec"] .rec-summary-table th:nth-child(n+2) {
  text-align: center;
  font-weight: 900;
}

body[data-page="rec"] .rec-file-name,
body[data-page="rec"] .rec-agent-cell {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body[data-page="rec"] .rec-file-name strong,
body[data-page="rec"] .rec-agent-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="rec"] .rec-history-table td span:not(.rec-line-icon),
body[data-page="rec"] .rec-history-table td strong {
  display: block;
}

body[data-page="rec"] .rec-history-table td span:not(.rec-line-icon) {
  margin-top: 3px;
  color: #526985;
  font-size: 0.72rem;
  font-weight: 700;
}

body[data-page="rec"] .history-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}

body[data-page="rec"] .gear-button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border-color: #d6e6fb;
  color: #2f71d0;
  background: #ffffff;
}

body[data-page="rec"] .gear-button svg {
  width: 15px;
  height: 15px;
}

body[data-page="rec"] .rec-agent-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-agent-avatar.tone-0 {
  background: #e8f0ff;
  color: #2f65d8;
}

body[data-page="rec"] .rec-agent-avatar.tone-1 {
  background: #e6f7ef;
  color: #168956;
}

body[data-page="rec"] .rec-agent-avatar.tone-2 {
  background: #f2eaff;
  color: #7048d6;
}

body[data-page="rec"] .rec-agent-avatar.tone-3 {
  background: #fff1e7;
  color: #e07026;
}

body[data-page="rec"] .rec-agent-avatar.tone-4 {
  background: #e8fbff;
  color: #12839b;
}

body[data-page="rec"] .rec-agent-avatar.tone-5 {
  background: #ffe8f6;
  color: #c93a9a;
}

body[data-page="rec"] .rec-effectiveness-cell {
  display: grid;
  grid-template-columns: 56px minmax(90px, 1fr);
  align-items: center;
  gap: 10px;
}

body[data-page="rec"] .rec-effectiveness-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: #e3ecf8;
  overflow: hidden;
}

body[data-page="rec"] .rec-effectiveness-track span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: #3f82dc;
}

body[data-page="rec"] .rec-summary-table tfoot td {
  background: #edf4fc;
  font-weight: 900;
}

body[data-page="rec"] .rec-empty-row {
  padding: 20px;
  color: #526985;
  text-align: center;
  font-weight: 800;
}

body[data-page="rec"] .rec-agent-view {
  display: grid;
  gap: 16px;
}

body[data-page="rec"] .rec-agent-view.hidden {
  display: none;
}

body[data-page="rec"] .rec-agent-view-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 560px);
  align-items: end;
  gap: 24px;
}

body[data-page="rec"].rec-agent-restricted .rec-agent-view-heading {
  grid-template-columns: 1fr;
}

body[data-page="rec"] .rec-agent-view-heading h3 {
  margin: 5px 0 6px;
  color: #071f4f;
  font-size: 1.12rem;
}

body[data-page="rec"] .rec-agent-view-heading p {
  max-width: 720px;
  margin: 0;
  color: #526985;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.5;
}

body[data-page="rec"] .rec-agent-search {
  display: grid;
  gap: 7px;
}

body[data-page="rec"] .rec-agent-search > label {
  color: #526985;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="rec"] .rec-agent-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

body[data-page="rec"] .rec-agent-search-controls input {
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #cfdbeb;
  border-radius: 8px;
  background: #ffffff;
  color: #071f4f;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
}

body[data-page="rec"] .rec-agent-search-controls input:focus {
  border-color: #8db9f4;
  outline: 3px solid rgba(47, 113, 208, 0.1);
}

body[data-page="rec"] .rec-agent-search-controls button {
  min-width: 92px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #2f71d0;
  border-radius: 8px;
  background: #2f71d0;
  color: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

body[data-page="rec"] .rec-agent-search-controls button:hover,
body[data-page="rec"] .rec-agent-search-controls button:focus-visible {
  background: #185fbf;
  outline: none;
}

body[data-page="rec"] .rec-agent-export-button {
  min-width: 132px;
  border-color: #9fc3f4;
  background: #f6f9ff;
  color: #1c4fa3;
}

body[data-page="rec"] .rec-agent-export-button:hover,
body[data-page="rec"] .rec-agent-export-button:focus-visible {
  background: #e8f0ff;
}

body[data-page="rec"] .rec-agent-export-button:disabled {
  border-color: #cfdbeb;
  background: #edf3fb;
  color: #8ca0ba;
  cursor: not-allowed;
}

body[data-page="rec"] .rec-agent-search-suggestions {
  display: grid;
  width: calc(100% - 100px);
  max-height: 220px;
  margin-top: -1px;
  overflow-y: auto;
  border: 1px solid #cfdbeb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(7, 31, 79, 0.1);
}

body[data-page="rec"] .rec-agent-search-suggestions.hidden {
  display: none;
}

body[data-page="rec"] .rec-agent-search-suggestion {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid #edf2f8;
  background: transparent;
  color: #071f4f;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

body[data-page="rec"] .rec-agent-search-suggestion:last-child {
  border-bottom: 0;
}

body[data-page="rec"] .rec-agent-search-suggestion:hover,
body[data-page="rec"] .rec-agent-search-suggestion:focus-visible {
  background: #f2f7ff;
  outline: none;
}

body[data-page="rec"] .rec-agent-result-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  color: #526985;
  font-size: 0.76rem;
}

body[data-page="rec"] .rec-agent-result-summary strong {
  color: #071f4f;
  font-size: 0.9rem;
}

body[data-page="rec"] .rec-agent-result-summary small {
  margin-left: auto;
  color: #2f71d0;
  font-size: 0.74rem;
  font-weight: 900;
}

body[data-page="rec"] .rec-agent-detail-table-shell {
  overflow-x: auto;
  border: 1px solid #e2eaf5;
  border-radius: 9px;
  background: #ffffff;
}

body[data-page="rec"] .rec-agent-detail-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

body[data-page="rec"] .rec-agent-detail-table th,
body[data-page="rec"] .rec-agent-detail-table td {
  padding: 11px 12px;
  border-right: 1px solid #e6edf7;
  border-bottom: 1px solid #e6edf7;
  color: #071f4f;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

body[data-page="rec"] .rec-agent-detail-table th {
  background: #edf4fc;
  color: #213f6b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body[data-page="rec"] .rec-agent-detail-table tbody tr:nth-child(even) {
  background: #f9fbfe;
}

body[data-page="rec"] .rec-agent-detail-table tbody tr:hover {
  background: #f2f7ff;
}

@media (max-width: 1100px) {
  body[data-page="contestacoes"] .contestacoes-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="contestacoes"] .contestacao-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="contestacoes"] .contestacao-resolved-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="contestacoes"] .contestacoes-header,
  body[data-page="contestacoes"] .contestacoes-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="contestacoes"] .contestacoes-list-tools {
    justify-content: flex-start;
  }

  body[data-page="rec"] .rec-dashboard-grid,
  body[data-page="rec"] .rec-last-import-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="rec"] .rec-section-toolbar,
  body[data-page="rec"] .rec-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="rec"] .rec-header-tools {
    align-items: stretch;
    gap: 10px;
  }

  body[data-page="rec"] .rec-header-actions {
    justify-content: flex-end;
  }

  body[data-page="rec"] .rec-dashboard-modal {
    padding: 12px;
  }

  body[data-page="rec"] .rec-dashboard-dialog {
    width: 100%;
    height: 94vh;
  }

  body[data-page="rec"] .rec-dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="rec"] .rec-agent-view-heading {
    grid-template-columns: 1fr;
  }

  body[data-page="rec"] .rec-search-field {
    width: 100%;
  }
}

@media (max-width: 720px) {
  body[data-page="contestacoes"] .contestacoes-summary-grid,
  body[data-page="contestacoes"] .contestacao-item-summary,
  body[data-page="contestacoes"] .contestacao-resolved-meta {
    grid-template-columns: 1fr;
  }

  body[data-page="contestacoes"] .contestacoes-header,
  body[data-page="contestacoes"] .contestacoes-panel-heading,
  body[data-page="contestacoes"] .contestacao-actions {
    align-items: stretch;
  }

  body[data-page="contestacoes"] .contestacoes-list-tools,
  body[data-page="contestacoes"] .contestacoes-history-actions,
  body[data-page="contestacoes"] .contestacao-actions {
    flex-direction: column;
  }

  body[data-page="contestacoes"] .contestacoes-history-modal {
    padding: 14px;
  }

  body[data-page="contestacoes"] .contestacoes-history-dialog {
    max-height: calc(100vh - 28px);
    padding: 16px;
    border-radius: 14px;
  }

  body[data-page="contestacoes"] .contestacoes-history-dialog-heading {
    top: -16px;
    margin: -16px -16px 16px;
    padding: 16px;
  }

  body[data-page="contestacoes"] .contestacao-avatar {
    width: 44px;
    height: 44px;
  }

  body[data-page="rec"] .rec-upload-content,
  body[data-page="rec"] .rec-filter-row {
    align-items: center;
    width: 100%;
  }

  body[data-page="rec"] .rec-filter-row select {
    width: 100%;
    max-width: none;
  }

  body[data-page="rec"] .rec-export-button {
    width: 100%;
  }

  body[data-page="rec"] .rec-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="rec"] .rec-header-action-button {
    width: 100%;
  }

  body[data-page="rec"] .rec-agent-search-controls {
    grid-template-columns: 1fr;
  }

  body[data-page="rec"] .rec-agent-search-suggestions {
    width: 100%;
  }

  body[data-page="rec"] .rec-agent-result-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-page="rec"] .rec-agent-result-summary small {
    margin-left: 0;
  }
}

.cadastro-create-form {
  display: grid;
  gap: 16px;
}

.cadastro-create-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 10px;
}

.cadastro-create-submit {
  min-width: 220px;
  min-height: 48px;
  margin-top: 0;
  border: 1px solid rgba(42, 94, 168, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, #12376e, #2a5ea8);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(18, 55, 110, 0.18);
}

.cadastro-create-submit:disabled {
  border-color: rgba(12, 34, 75, 0.12);
  background: #e8eef7;
  color: #6a7c98;
  opacity: 1;
  cursor: wait;
  box-shadow: none;
  transform: none;
}

.cadastro-create-submit:disabled::before {
  display: none;
}

.cadastro-import-content {
  display: grid;
  gap: 16px;
}

.cadastro-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 16px;
  align-items: end;
}

.cadastro-import-upload-box {
  min-height: 136px;
}

.cadastro-import-preview {
  display: grid;
  gap: 16px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.cadastro-import-preview.hidden {
  display: none;
}

.cadastro-import-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cadastro-import-summary-card {
  min-height: 92px;
  padding: 16px;
}

.cadastro-import-summary-card span {
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cadastro-import-summary-card strong {
  display: block;
  margin-top: 8px;
  color: var(--primary);
  font-size: 1.35rem;
}

.cadastro-import-table-section {
  display: grid;
  gap: 10px;
}

.cadastro-import-table-heading {
  display: flex;
  align-items: center;
}

.cadastro-import-table-shell {
  overflow-x: auto;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
}

.cadastro-import-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.cadastro-import-table th,
.cadastro-import-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
  color: var(--primary);
  font-size: 0.82rem;
  text-align: left;
  vertical-align: top;
}

.cadastro-import-table thead th {
  background: #edf4fc;
  color: #082b60;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cadastro-import-table th:first-child,
.cadastro-import-table td:first-child {
  width: 72px;
  text-align: center;
}

.cadastro-import-actions {
  display: flex;
  justify-content: end;
}

.cadastro-import-confirm {
  min-width: 240px;
}

.cadastro-empty {
  grid-column: 1 / -1;
  padding: 26px;
  border: 1px dashed rgba(42, 94, 168, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.64);
}

.cadastro-empty h3 {
  margin: 8px 0 10px;
  color: var(--primary);
}

.cadastro-empty p {
  color: var(--text-soft);
}

/* Cadastros - layout administrativo inspirado na referencia enviada */
body[data-page="cadastros"] {
  background: #f8fbff;
  color: #0d2a58;
}

body[data-page="cadastros"] .app-shell {
  max-width: none;
  padding: 24px;
  gap: 22px;
}

body[data-page="cadastros"] .content {
  gap: 16px;
}

body[data-page="cadastros"] .cadastros-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 7600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 26, 55, 0.32);
  backdrop-filter: blur(14px) saturate(135%);
}

body[data-page="cadastros"] .cadastros-loading-card {
  width: min(92vw, 360px);
  animation: cadastroModalEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-page="cadastros"] .hero,
body[data-page="cadastros"] .summary-card,
body[data-page="cadastros"] .form-card,
body[data-page="cadastros"] .dashboard-card {
  overflow: visible;
  border: 1px solid rgba(170, 188, 216, 0.55);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(15, 43, 87, 0.06);
}

body[data-page="cadastros"] .hero::before,
body[data-page="cadastros"] .hero::after,
body[data-page="cadastros"] .summary-card::before,
body[data-page="cadastros"] .summary-card::after,
body[data-page="cadastros"] .form-card::before,
body[data-page="cadastros"] .form-card::after,
body[data-page="cadastros"] .dashboard-card::before,
body[data-page="cadastros"] .dashboard-card::after {
  content: none;
}

body[data-page="cadastros"] .cadastros-hero {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 118px;
  padding: 22px 24px;
}

body[data-page="cadastros"] .cadastros-hero-mark,
body[data-page="cadastros"] .cadastros-summary-icon,
body[data-page="cadastros"] .cadastros-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #eef5ff;
  color: #1568df;
}

body[data-page="cadastros"] .cadastros-hero-mark {
  width: 58px;
  height: 58px;
  border-radius: 13px;
}

body[data-page="cadastros"] .cadastros-hero-mark svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}

body[data-page="cadastros"] .cadastros-hero-copy {
  min-width: 0;
}

body[data-page="cadastros"] .eyebrow {
  margin: 0 0 6px;
  padding-left: 0;
  color: #315a96;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-page="cadastros"] .eyebrow::before {
  content: none;
}

body[data-page="cadastros"] .hero h2 {
  margin: 0;
  color: #0f2b60;
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-page="cadastros"] .hero p {
  max-width: 840px;
  margin-top: 8px;
  color: #566985;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

body[data-page="cadastros"] .status-badge {
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="cadastros"] .status-badge.success {
  background: #daf4e4;
  color: #087743;
}

body[data-page="cadastros"] .summary-grid {
  gap: 12px;
}

body[data-page="cadastros"] .cadastros-summary-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 86px;
  padding: 18px 22px;
}

body[data-page="cadastros"] .cadastros-summary-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

body[data-page="cadastros"] .cadastros-summary-icon-purple {
  background: #f2ecff;
  color: #6b45e6;
}

body[data-page="cadastros"] .cadastros-summary-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

body[data-page="cadastros"] .summary-card span:not(.cadastros-summary-icon) {
  display: block;
  color: #425b85;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="cadastros"] .summary-card strong {
  margin: 6px 0 0;
  color: #0b3b82;
  font-size: 1.7rem;
  line-height: 1;
}

body[data-page="cadastros"] .summary-note {
  margin: 8px 0 0;
  color: #657796;
  font-size: 0.78rem;
  font-weight: 700;
}

body[data-page="cadastros"] .cadastro-access-summary {
  color: #4b6080;
  font-weight: 800;
}

body[data-page="cadastros"] .form-card {
  padding: 20px 22px 24px;
}

body[data-page="cadastros"] .section-heading {
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

body[data-page="cadastros"] .section-heading > div:first-child {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

body[data-page="cadastros"] .cadastros-section-icon {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

body[data-page="cadastros"] .cadastros-section-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

body[data-page="cadastros"] .section-heading h3 {
  color: #0f2b60;
  font-size: 1.12rem;
  line-height: 1.15;
  letter-spacing: 0;
}

body[data-page="cadastros"] .section-actions {
  gap: 10px;
}

body[data-page="cadastros"] .ghost-button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 8px;
  border-color: rgba(170, 188, 216, 0.78);
  color: #16386d;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 43, 87, 0.04);
}

body[data-page="cadastros"] .cadastro-primary-action {
  border-color: #0c3d8d;
  background: #0c3d8d;
  color: #ffffff;
}

body[data-page="cadastros"] .cadastro-primary-action:hover {
  border-color: #0a3478;
  background: #0a3478;
}

body[data-page="cadastros"] .cadastros-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 16px;
  margin-bottom: 18px;
}

body[data-page="cadastros"] .field {
  gap: 8px;
}

body[data-page="cadastros"] .field span {
  color: #637795;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-page="cadastros"] .cadastro-role-field {
  max-width: none;
}

body[data-page="cadastros"] input,
body[data-page="cadastros"] select {
  min-height: 42px;
  border-radius: 8px;
  border-color: rgba(170, 188, 216, 0.9);
  background: #ffffff;
  color: #173767;
  font-size: 0.82rem;
  font-weight: 700;
}

body[data-page="cadastros"] .cadastro-search-field input[type="search"] {
  min-height: 42px;
  padding: 11px 14px;
}

body[data-page="cadastros"] .cadastros-list {
  gap: 10px 14px;
}

body[data-page="cadastros"] .cadastro-card {
  min-height: 58px;
  padding: 10px 10px;
  border-color: rgba(170, 188, 216, 0.52);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 43, 87, 0.05);
}

body[data-page="cadastros"] .cadastro-card-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 38px;
  gap: 10px;
}

body[data-page="cadastros"] .cadastro-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eaf4ff;
  color: #1568df;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page="cadastros"] .cadastro-card-purple .cadastro-avatar {
  background: #f3ecff;
  color: #7447d9;
}

body[data-page="cadastros"] .cadastro-card-green .cadastro-avatar {
  background: #e9f8ef;
  color: #168447;
}

body[data-page="cadastros"] .cadastro-card-orange .cadastro-avatar {
  background: #fff0e2;
  color: #c66a23;
}

body[data-page="cadastros"] .cadastro-card-red .cadastro-avatar {
  background: #ffe9ea;
  color: #db4949;
}

body[data-page="cadastros"] .cadastro-card-blue .cadastro-avatar {
  background: #e8f3ff;
  color: #1764c7;
}

body[data-page="cadastros"] .cadastro-card-teal .cadastro-avatar {
  background: #e6f7f8;
  color: #128391;
}

body[data-page="cadastros"] .cadastro-avatar-photo {
  padding: 0;
  overflow: hidden;
  background: #eef4fb;
}

body[data-page="cadastros"] .cadastro-avatar-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="cadastros"] .cadastro-card-copy {
  min-width: 0;
  gap: 3px;
}

body[data-page="cadastros"] .cadastro-card-copy h3 {
  overflow: hidden;
  margin: 0;
  color: #153365;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="cadastros"] .cadastro-card-copy p {
  overflow: hidden;
  color: #5c6f8d;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="cadastros"] .cadastro-role-chip {
  min-height: 24px;
  align-self: center;
  padding: 0 10px;
  border-radius: 7px;
  background: #e8f3ff;
  color: #1764c7;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page="cadastros"] .cadastro-role-purple {
  background: #f2ecff;
  color: #7447d9;
}

body[data-page="cadastros"] .cadastro-role-green {
  background: #e7f7ec;
  color: #168447;
}

body[data-page="cadastros"] .cadastro-role-orange {
  background: #fff0e2;
  color: #c66a23;
}

body[data-page="cadastros"] .cadastro-role-red {
  background: #ffe9ea;
  color: #db4949;
}

body[data-page="cadastros"] .cadastro-role-blue {
  background: #e8f3ff;
  color: #1764c7;
}

body[data-page="cadastros"] .cadastro-role-teal {
  background: #e6f7f8;
  color: #128391;
}

body[data-page="cadastros"] .gear-button.cadastro-settings-button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border-color: rgba(170, 188, 216, 0.82);
  color: #183c72;
}

body[data-page="cadastros"] .gear-button.cadastro-settings-button svg {
  width: 15px;
  height: 15px;
}

body[data-page="cadastros"] .cadastro-empty {
  border-radius: 10px;
  background: #ffffff;
}

body[data-page="cadastros"] .cadastros-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  margin-top: 16px;
}

body[data-page="cadastros"] .cadastro-pagination-summary {
  color: #526888;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page="cadastros"] .cadastro-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body[data-page="cadastros"] .cadastro-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(170, 188, 216, 0.82);
  border-radius: 8px;
  background: #ffffff;
  color: #173767;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-page="cadastros"] .cadastro-page-button svg {
  width: 15px;
  height: 15px;
}

body[data-page="cadastros"] .cadastro-page-button:hover {
  transform: translateY(-1px);
  border-color: #0c3d8d;
}

body[data-page="cadastros"] .cadastro-page-button.active {
  border-color: #0c63d8;
  background: #0c63d8;
  color: #ffffff;
}

body[data-page="cadastros"] .cadastro-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

body[data-page="cadastros"] .modal-overlay {
  background: rgba(8, 26, 55, 0.28);
  backdrop-filter: blur(10px);
}

body[data-page="cadastros"] #cadastroDetailsModal:not(.hidden) {
  animation: cadastroDetailsOverlayIn 220ms ease-out both;
}

body[data-page="cadastros"] .cadastro-modal-card {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  padding: 24px;
  border: 1px solid rgba(170, 188, 216, 0.64);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 43, 87, 0.18);
}

body[data-page="cadastros"] #cadastroDetailsModal:not(.hidden) .cadastro-modal-card {
  animation: cadastroDetailsCardIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 50% 46%;
}

body[data-page="cadastros"] .cadastro-modal-card .modal-header {
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(170, 188, 216, 0.42);
}

body[data-page="cadastros"] .cadastro-details-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body[data-page="cadastros"] .cadastro-photo-panel {
  display: grid;
  gap: 10px;
  justify-items: center;
}

body[data-page="cadastros"] .cadastro-photo-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(170, 188, 216, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, #eef5ff, #f8fbff);
  background-position: center;
  background-size: cover;
  color: #153665;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(15, 43, 87, 0.08);
}

body[data-page="cadastros"] .cadastro-photo-preview.has-photo span {
  display: none;
}

body[data-page="cadastros"] .cadastro-photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 190px;
}

body[data-page="cadastros"] .cadastro-photo-upload-button,
body[data-page="cadastros"] .cadastro-photo-remove-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.72rem;
}

body[data-page="cadastros"] .cadastro-photo-upload-button {
  cursor: pointer;
}

body[data-page="cadastros"] .cadastro-photo-upload-button.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

body[data-page="cadastros"] .cadastro-photo-remove-button {
  color: #8c4a1b;
}

body[data-page="cadastros"] .cadastro-modal-card .modal-header h3 {
  margin: 4px 0 0;
  color: #0f2b60;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page="cadastros"] .cadastro-modal-card .modal-header p {
  max-width: none;
  margin-top: 12px;
  color: #60728f;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
}

body[data-page="cadastros"] .cadastro-modal-card .modal-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border-color: rgba(170, 188, 216, 0.72);
  background: #f4f8fd;
  color: #153665;
}

body[data-page="cadastros"] .cadastro-modal-content {
  gap: 14px;
}

body[data-page="cadastros"] .cadastro-modal-grid {
  gap: 12px;
}

body[data-page="cadastros"] .cadastro-mini-card {
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid rgba(170, 188, 216, 0.58);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 43, 87, 0.06);
}

body[data-page="cadastros"] .cadastro-mini-card::before,
body[data-page="cadastros"] .cadastro-mini-card::after {
  content: none;
}

body[data-page="cadastros"] .cadastro-mini-card > span {
  margin: 0 0 10px;
  color: #60728f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="cadastros"] .cadastro-mini-card strong {
  color: #143365;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.3;
}

body[data-page="cadastros"] .cadastro-mini-card .status-badge {
  width: auto;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eef3f8;
  color: #16386d;
  font-size: 0.7rem;
}

body[data-page="cadastros"] .cadastro-modal-pages {
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(170, 188, 216, 0.58);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 43, 87, 0.04);
}

body[data-page="cadastros"] .cadastro-modal-pages .card-label {
  margin: 0;
  padding-left: 0;
  color: #315a96;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-page="cadastros"] .cadastro-modal-pages .card-label::before {
  content: none;
}

body[data-page="cadastros"] .cadastro-access-list {
  gap: 8px;
}

body[data-page="cadastros"] .cadastro-access-chip {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #eef4fb;
  color: #173767;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page="cadastros"] .cadastro-modal-actions {
  gap: 10px;
  padding-top: 2px;
}

body[data-page="cadastros"] .cadastro-modal-actions .ghost-button {
  min-height: 36px;
}

body[data-page="cadastros"] .cadastro-modal-actions .ghost-button-danger {
  border-color: rgba(220, 73, 73, 0.32);
  color: #b82938;
}

body[data-page="cadastros"] .cadastro-modal-actions .cadastro-deactivate-button {
  border-color: rgba(198, 106, 35, 0.34);
  color: #a85a1e;
}

body[data-page="cadastros"] .cadastro-modal-actions .cadastro-deactivate-button:hover {
  border-color: rgba(198, 106, 35, 0.48);
  background: #fff5eb;
}

body[data-page="cadastros"] .cadastro-modal-actions .cadastro-deactivate-button.is-reactivate {
  border-color: rgba(22, 132, 71, 0.32);
  color: #168447;
}

body[data-page="cadastros"] .cadastro-modal-actions .cadastro-deactivate-button.is-reactivate:hover {
  border-color: rgba(22, 132, 71, 0.48);
  background: #eaf8ef;
}

body[data-page="cadastros"] #cadastroDetailsActionStatus {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(170, 188, 216, 0.5);
  border-radius: 10px;
  background: #f8fbff;
  color: #526888;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
}

body[data-page="cadastros"] #cadastroDetailsActionStatus.success {
  border-color: rgba(22, 132, 71, 0.24);
  background: #eaf8ef;
  color: #168447;
}

body[data-page="cadastros"] #cadastroDetailsActionStatus.error {
  border-color: rgba(220, 73, 73, 0.24);
  background: #ffecec;
  color: #b82938;
}

@keyframes cadastroDetailsOverlayIn {
  from {
    background: rgba(8, 26, 55, 0);
    backdrop-filter: blur(0);
  }

  to {
    background: rgba(8, 26, 55, 0.28);
    backdrop-filter: blur(10px);
  }
}

@keyframes cadastroDetailsCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    box-shadow: 0 14px 34px rgba(15, 43, 87, 0.08);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 28px 80px rgba(15, 43, 87, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="cadastros"] #cadastroDetailsModal:not(.hidden),
  body[data-page="cadastros"] #cadastroDetailsModal:not(.hidden) .cadastro-modal-card {
    animation: none;
  }
}

@media (max-width: 720px) {
  body[data-page="cadastros"] .cadastros-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  body[data-page="cadastros"] .status-badge {
    justify-self: stretch;
    width: 100%;
  }

  body[data-page="cadastros"] .cadastros-summary-card {
    align-items: flex-start;
  }

  body[data-page="cadastros"] .section-heading > div:first-child,
  body[data-page="cadastros"] .cadastro-card-top {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body[data-page="cadastros"] .cadastro-role-chip {
    grid-column: 2;
    justify-self: start;
  }

  body[data-page="cadastros"] .gear-button.cadastro-settings-button {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  body[data-page="cadastros"] .cadastros-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="cadastros"] .cadastro-pagination-controls {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body[data-page="cadastros"] .cadastro-modal-card {
    width: min(100%, calc(100vw - 20px));
    padding: 18px;
  }

  body[data-page="cadastros"] .cadastro-modal-card .modal-header,
  body[data-page="cadastros"] .cadastro-modal-actions {
    align-items: stretch;
  }

  body[data-page="cadastros"] .cadastro-details-heading {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  body[data-page="cadastros"] .cadastro-photo-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    width: 100%;
  }

  body[data-page="cadastros"] .cadastro-photo-preview {
    width: 76px;
    height: 76px;
    border-radius: 16px;
  }

  body[data-page="cadastros"] .cadastro-photo-actions {
    justify-content: flex-start;
    max-width: none;
  }

  body[data-page="cadastros"] .cadastro-modal-actions .ghost-button {
    width: 100%;
  }
}

.dashboard-grid-custom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-period-box strong {
  display: block;
  font-size: 0.98rem;
  text-transform: capitalize;
}

.day-result-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-color: rgba(12, 34, 75, 0.1);
}

.closing-rhythm-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
}

.dashboard-card-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.dashboard-badge,
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.dashboard-badge.neutral,
.status-chip.neutral,
.progress-fill.neutral {
  background: rgba(15, 43, 87, 0.1);
  border-color: rgba(15, 43, 87, 0.14);
  color: var(--primary);
}

.dashboard-badge.positive,
.status-chip.positive,
.progress-fill.positive {
  background: rgba(20, 96, 52, 0.16);
  border-color: rgba(20, 96, 52, 0.18);
  color: #146034;
}

.dashboard-badge.negative,
.status-chip.negative,
.progress-fill.negative {
  background: rgba(148, 26, 49, 0.16);
  border-color: rgba(148, 26, 49, 0.18);
  color: #941a31;
}

.dashboard-lead {
  color: var(--text-soft);
  font-size: 1rem;
  max-width: 760px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.comparison-block {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.closing-grid {
  display: grid;
  gap: 12px;
}

.closing-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.closing-item span {
  color: var(--text-soft);
  font-size: 0.84rem;
}

.closing-item strong {
  font-size: 1.08rem;
  color: var(--primary);
  text-align: right;
}

.closing-item.emphasis {
  border-color: rgba(42, 94, 168, 0.22);
  background: #edf4fc;
}

.trend-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-soft);
  font-size: 0.84rem;
}

.trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.legend-dot.actual {
  background: #1c4f96;
}

.legend-dot.target {
  background: #d24f5b;
}

.trend-chart-area {
  position: relative;
  overflow: visible;
}

.trend-chart-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
}

.trend-mode-toggle {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(225, 237, 255, 0.5));
  color: var(--primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 10px 20px rgba(8, 26, 55, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(42, 94, 168, 0.08);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.trend-mode-toggle:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(42, 94, 168, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(223, 238, 255, 0.98));
  box-shadow:
    0 16px 28px rgba(8, 26, 55, 0.14),
    0 0 0 6px rgba(42, 94, 168, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--primary-strong);
}

.trend-range-label {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trend-range-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  box-shadow: 0 12px 24px rgba(8, 26, 55, 0.12);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.trend-range-toggle:hover,
.trend-range-toggle[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.55);
  background: #ffffff;
}

.trend-range-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.trend-range-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  width: min(340px, calc(100vw - 80px));
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 44px rgba(8, 26, 55, 0.18);
}

.trend-range-panel-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.trend-range-title {
  display: block;
  margin-bottom: 4px;
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.trend-range-summary {
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.trend-range-clear {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(12, 34, 75, 0.04);
  color: var(--primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.trend-range-clear:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.42);
  background: rgba(42, 94, 168, 0.08);
}

.trend-range-clear:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.trend-range-calendar {
  display: grid;
  gap: 10px;
}

.trend-range-month-label {
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: capitalize;
}

.trend-range-weekdays,
.trend-range-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.trend-range-weekdays span {
  text-align: center;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.trend-range-spacer {
  display: block;
  min-height: 38px;
}

.trend-range-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(12, 34, 75, 0.04);
  color: var(--primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.trend-range-day:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 94, 168, 0.32);
}

.trend-range-day.disabled {
  background: rgba(12, 34, 75, 0.04);
  color: var(--text-soft);
  cursor: default;
}

.trend-range-day.disabled:hover {
  transform: none;
  border-color: rgba(12, 34, 75, 0.04);
}

.trend-range-day.anchor,
.trend-range-day.selected-start,
.trend-range-day.selected-end {
  border-color: rgba(18, 55, 110, 0.72);
  background: #12376e;
  color: #ffffff;
}

.trend-range-day.selected-range {
  border-color: rgba(42, 94, 168, 0.24);
  background: rgba(42, 94, 168, 0.14);
}

.trend-range-day.preview-range {
  border-color: rgba(210, 79, 91, 0.24);
  background: rgba(210, 79, 91, 0.12);
}

.trend-range-day.preview-edge {
  border-color: rgba(210, 79, 91, 0.55);
}

.trend-chart-shell {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 251, 0.92));
}

.trend-chart {
  display: block;
  width: 100%;
  height: 320px;
}

.trend-bar {
  cursor: default;
}

.trend-bar-rect {
  opacity: 0.42;
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    filter 160ms ease;
  transition-delay: var(--trend-bar-delay, 0s), var(--trend-bar-delay, 0s), 0s;
}

.trend-chart-bars-enter .trend-bar-rect {
  opacity: 0.94;
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .trend-chart-bars-enter .trend-bar-rect {
    transition: none;
  }
}

.trend-tooltip {
  opacity: 0;
  transition: opacity 140ms ease;
}

.trend-tooltip-hitbox {
  fill: transparent;
  pointer-events: all;
}

.trend-bar:hover .trend-bar-rect {
  opacity: 1;
  filter: drop-shadow(0 8px 12px rgba(8, 26, 55, 0.18));
}

.trend-tooltip-layer:hover .trend-tooltip {
  opacity: 1;
}

.trend-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.trend-meta {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.trend-meta span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.trend-meta strong {
  font-size: 1.1rem;
  color: var(--primary);
}

.agent-panel-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 22px;
  align-items: end;
  margin-bottom: 18px;
}

.agent-panel-controls {
  display: grid;
  grid-template-columns: minmax(160px, 0.72fr) minmax(240px, 1fr);
  gap: 14px;
  align-items: end;
}

.agent-panel-period-box {
  min-width: 0;
}

.agent-panel-search {
  position: relative;
  display: grid;
  gap: 8px;
}

.agent-panel-search span {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-panel-search-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.agent-panel-search input {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
}

.agent-panel-search-control:focus-within {
  outline: none;
  border-color: rgba(42, 94, 168, 0.55);
  box-shadow: 0 0 0 4px rgba(42, 94, 168, 0.12);
}

.agent-panel-search input:focus {
  outline: none;
}

.agent-panel-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 50px;
  border: 0;
  border-left: 1px solid rgba(12, 34, 75, 0.1);
  background: rgba(42, 94, 168, 0.08);
  color: var(--primary);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.agent-panel-search-button:hover,
.agent-panel-search-button:focus-visible {
  background: rgba(42, 94, 168, 0.16);
  color: var(--primary-strong);
  outline: none;
}

.agent-panel-search-button svg {
  width: 20px;
  height: 20px;
}

.agent-panel-suggestions {
  position: absolute;
  z-index: 8;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 34px rgba(8, 26, 55, 0.16);
}

.agent-panel-suggestions.hidden {
  display: none;
}

.agent-panel-suggestion,
.agent-panel-suggestion-empty {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
}

.agent-panel-suggestion {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.agent-panel-suggestion:hover,
.agent-panel-suggestion:focus-visible {
  outline: none;
  background: rgba(42, 94, 168, 0.1);
}

.agent-panel-suggestion-empty {
  display: flex;
  align-items: center;
  color: var(--text-soft);
}

#agentPanelTrendRangePanel {
  right: 0;
  width: min(318px, calc(100vw - 72px));
  max-height: min(390px, calc(100vh - 120px));
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1200;
}

#agentPanelTrendRangePanel .trend-range-panel-top {
  gap: 10px;
  margin-bottom: 10px;
}

#agentPanelTrendRangePanel .trend-range-clear {
  min-height: 32px;
  padding: 0 10px;
}

#agentPanelTrendRangePanel .trend-range-calendar {
  gap: 8px;
}

#agentPanelTrendRangePanel .trend-range-weekdays,
#agentPanelTrendRangePanel .trend-range-grid {
  gap: 5px;
}

#agentPanelTrendRangePanel .trend-range-day,
#agentPanelTrendRangePanel .trend-range-spacer {
  min-height: 34px;
}

#agentPanelTrendRangePanel .trend-range-day {
  border-radius: 10px;
  font-size: 0.8rem;
}

.agent-panel-search input::-webkit-calendar-picker-indicator,
.agent-panel-search input::-webkit-search-decoration,
.agent-panel-search input::-webkit-search-results-button,
.agent-panel-search input::-webkit-search-results-decoration {
  display: none;
}

.agent-panel-search input[type="search"] {
  appearance: textfield;
  -webkit-appearance: textfield;
}

.agent-panel-grid {
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agent-panel-grid .trend-card,
.agent-panel-grid .trend-chart-area,
.agent-panel-grid .trend-chart-tools {
  overflow: visible;
}

.agent-panel-grid .trend-card {
  z-index: 6;
}

.agent-panel-grid .trend-chart-shell {
  position: relative;
  z-index: 1;
}

.agent-panel-metric {
  display: grid;
  align-content: center;
  min-height: 96px;
}

.agent-panel-metric span {
  font-weight: 800;
  letter-spacing: 0.08em;
}

.agent-panel-progress-card {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.agent-panel-progress-card strong {
  font-size: 1.08rem;
  color: var(--primary);
}

.agent-panel-quantity-summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  min-width: 0;
}

.agent-panel-quantity-summary > span {
  font-size: 1.22rem;
  font-weight: 900;
  min-width: 0;
}

.agent-panel-quantity-summary small {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text-soft);
  font-size: 0.84rem;
  font-weight: 800;
}

.agent-panel-quantity-summary small span {
  display: inline;
}

.agent-panel-revenue-summary {
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 2px;
  white-space: normal;
}

.agent-panel-revenue-summary > span {
  font-size: clamp(1rem, 1.05vw, 1.14rem);
  line-height: 1.15;
}

.agent-panel-revenue-summary small {
  font-size: 0.72rem;
  line-height: 1;
  max-width: 100%;
  white-space: normal;
  transform: translateY(1px);
}

.agent-panel-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 12px;
  line-height: 12px;
}

.agent-panel-progress-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(18, 55, 110, 0.12);
  overflow: hidden;
}

.agent-panel-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1c4f96, #2a5ea8);
  transition: width 220ms ease;
}

.agent-panel-progress-percent {
  display: block;
  height: 12px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 12px;
}

.agent-panel-progress-card small {
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.agent-panel-dual-metric {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.agent-panel-dual-metric div + div {
  padding-left: 14px;
  border-left: 1px solid rgba(12, 34, 75, 0.12);
}

.agent-panel-dual-metric small,
.agent-panel-dual-metric strong {
  display: block;
}

.agent-panel-dual-metric small {
  margin-bottom: 7px;
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.agent-panel-dual-metric strong {
  color: var(--primary);
  font-size: 1.02rem;
}

.comparison-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.comparison-top span,
.comparison-meta span {
  color: var(--text-soft);
  font-size: 0.84rem;
}

.comparison-top strong {
  font-size: 2rem;
  color: var(--primary);
  line-height: 1.1;
}

.comparison-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.progress-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 43, 87, 0.08);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.full-span {
  grid-column: 1 / -1;
}

.thermometer-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  border-color: rgba(42, 94, 168, 0.22);
  background:
    radial-gradient(circle at top right, rgba(42, 94, 168, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 246, 255, 0.92));
}

.thermometer-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.thermometer-primary span,
.thermometer-meta span,
.thermometer-legend span {
  color: var(--text-soft);
}

.thermometer-primary strong {
  display: block;
  margin: 10px 0 12px;
  font-size: clamp(3.1rem, 6vw, 4.8rem);
  line-height: 1;
  color: var(--primary);
}

.thermometer-primary p {
  color: var(--text-soft);
  max-width: 360px;
}

.thermometer-details {
  display: grid;
  gap: 18px;
}

.thermometer-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.thermometer-meta strong {
  font-size: 1.1rem;
  color: var(--primary);
}

.thermometer-bar-block {
  display: grid;
  gap: 10px;
}

.thermometer-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42, 94, 168, 0.12), rgba(15, 43, 87, 0.08));
  overflow: hidden;
}

.thermometer-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4d87d6, #12376e);
}

.thermometer-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font-size: 0.8rem;
}

.gear-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.gear-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: rgba(42, 94, 168, 0.06);
}

.gear-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 1100px) {
  .sidebar {
    flex-direction: column;
    align-items: stretch;
  }

  .login-panel {
    grid-template-columns: 1fr;
  }

  .nav-links {
    justify-content: flex-start;
    width: 100%;
  }

  .sidebar-logout-button {
    margin-left: 0;
  }

  .login-brand {
    min-height: 0;
  }

  .login-brand-logo {
    width: min(148px, 54%);
  }

  .login-brand-hero {
    gap: 8px;
  }

  .login-brand-copy {
    max-width: 320px;
    margin-top: 22px;
  }

  .summary-grid,
  .import-grid,
  .dashboard-grid,
  .performance-form,
  .analysis-summary-grid,
  .cadastros-list,
  .cadastro-modal-grid {
    grid-template-columns: 1fr;
  }

  .base-data-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .base-data-actions {
    grid-template-columns: 1fr;
  }

  .cadastros-toolbar {
    grid-template-columns: 1fr;
  }

  .analysis-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .projection-executive-grid,
  .projection-total-strip,
  .projection-overview-grid,
  .projection-year-summary,
  .projection-month-grid,
  .projection-selection-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detailed-meta-overview {
    padding: 16px;
  }

  .projection-year-header,
  .projection-notice-panel,
  .projection-list-year-head,
  .projection-list-month-head,
  .projection-filter-bar {
    flex-direction: column;
  }

  .projection-filter-bar {
    align-items: stretch;
    margin-top: 0;
    padding: 0;
  }

  .projection-filter-field {
    width: 100%;
    max-width: none;
  }

  .projection-year-badges {
    justify-content: start;
  }

  .projection-list-year-metrics,
  .projection-list-month-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .insights-hero-panel,
  .insights-card-grid,
  .insights-card-grid-secondary,
  .insights-chart-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card.featured {
    grid-column: span 1;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .thermometer-layout,
  .thermometer-legend {
    grid-template-columns: 1fr;
  }

  .import-details,
  .base-data-summary-grid,
  .base-data-actions,
  .history-item,
  .history-empty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .base-data-modal-grid {
    grid-template-columns: 1fr;
  }

  .history-actions {
    justify-content: start;
  }

  .analysis-region-top,
  .analysis-branch-row {
    flex-direction: column;
  }

  .analysis-region-totals,
  .analysis-branch-totals {
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .app-shell,
  body[data-page="dashboard"] .app-shell,
  body[data-page="analysis"] .app-shell,
  body[data-page="cadastros"] .app-shell {
    flex-direction: column;
  }

  .sidebar,
  body[data-page="agent-panel"] .sidebar {
    position: relative;
    top: auto;
    width: 100%;
    max-height: none;
    min-height: 0;
    flex-basis: auto;
  }

  .sidebar:not(:hover):not(:focus-within),
  body[data-page="agent-panel"] .sidebar:not(:hover):not(:focus-within) {
    width: 100%;
    flex-basis: auto;
    padding-right: 18px;
    padding-left: 18px;
    overflow-y: auto;
  }

  .sidebar:not(:hover):not(:focus-within) .brand-block {
    align-items: center;
    min-height: 0;
    padding: 0 8px 22px;
    border-bottom: 1px solid rgba(180, 206, 255, 0.18);
  }

  .sidebar:not(:hover):not(:focus-within) .brand-block::before {
    display: none;
  }

  .sidebar:not(:hover):not(:focus-within) .brand-logo {
    position: static;
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }

  .sidebar:not(:hover):not(:focus-within) .brand-block p,
  .sidebar:not(:hover):not(:focus-within) .nav-links,
  .sidebar:not(:hover):not(:focus-within) .sidebar-card,
  .sidebar:not(:hover):not(:focus-within) .sidebar-logout-button {
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }

  .sidebar:not(:hover):not(:focus-within) .nav-links {
    align-items: stretch;
  }

  .sidebar:not(:hover):not(:focus-within) .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-height: var(--sidebar-item-height);
    padding: 0 16px 0 var(--sidebar-text-left);
    font-size: 0.88rem;
  }

  .sidebar:not(:hover):not(:focus-within) .nav-link::before {
    left: var(--sidebar-icon-left);
    transform: translateY(-50%);
  }

  .sidebar:not(:hover):not(:focus-within) .nav-group {
    display: block;
    width: 100%;
  }

  .sidebar:not(:hover):not(:focus-within) .nav-group-trigger::after {
    display: block;
  }

  .sidebar:not(:hover):not(:focus-within) .nav-submenu {
    display: grid;
  }

  .sidebar:not(:hover):not(:focus-within) .sidebar-logout-button {
    width: 100%;
    min-height: var(--sidebar-item-height);
    padding: 0 16px 0 var(--sidebar-text-left);
    font-size: 0.86rem;
  }

  .sidebar:not(:hover):not(:focus-within) .sidebar-logout-button::after {
    left: var(--sidebar-icon-left);
    transform: translateY(-50%);
  }
}

@media (max-width: 720px) {
  .login-page {
    padding: 14px;
  }

  .app-shell {
    padding: 14px;
  }

  .login-brand,
  .login-card,
  .hero,
  .form-card,
  .analysis-region-card,
  .analysis-empty-state {
    padding: 22px;
  }

  .brand-block {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .nav-links {
    width: 100%;
  }

  .nav-group,
  .nav-group-trigger,
  .nav-submenu {
    width: 100%;
  }

  .nav-submenu {
    position: static;
    margin-top: 8px;
  }

  .sidebar-logout-button {
    width: 100%;
  }

  .form-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .base-data-summary-grid {
    grid-template-columns: 1fr;
  }

  .login-brand h1 {
    font-size: 2.15rem;
    max-width: 10ch;
    white-space: normal;
  }

  .login-brand-logo {
    width: min(96px, 74%);
    justify-self: start;
  }

  .modal-card {
    padding: 20px;
  }

  .base-data-modal {
    padding: 20px;
  }

  .import-models-modal {
    padding: 20px;
  }

  .detailed-meta-modal {
    width: min(100vw - 16px, 1560px);
    padding: 18px;
  }

  .base-data-button {
    min-height: 64px;
    white-space: normal;
    line-height: 1.25;
  }

  .import-model-card {
    padding: 18px;
  }

  .base-data-summary-grid,
  .base-data-actions,
  .base-data-modal-grid,
  .cadastro-import-grid,
  .cadastro-import-summary-grid {
    grid-template-columns: 1fr;
  }

  .detailed-meta-branch-head,
  .detailed-meta-region-head {
    flex-direction: column;
    align-items: start;
  }

  .insights-modal-card {
    padding: 20px;
    max-height: min(92vh, 980px);
  }

  .historical-modal-secondary-actions {
    grid-template-columns: 1fr;
  }

  .hero,
  .section-heading,
  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cadastro-card-top {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-card-top,
  .comparison-meta,
  .thermometer-meta,
  .closing-item,
  .modal-header,
  .insights-projection-top,
  .insights-chart-card-top {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="dashboard"] .dashboard-renewal-card-actions {
    justify-content: flex-start;
  }

  .insights-progress-grid {
    grid-template-columns: 1fr;
  }

  .insights-projection-grid {
    grid-template-columns: 1fr;
  }

  .summary-card-top {
    align-items: stretch;
  }

  .import-details,
  .history-item,
  .history-empty {
    grid-template-columns: 1fr;
  }

  .period-box {
    min-width: auto;
  }

  .period-panel {
    left: 0;
    right: auto;
    width: min(300px, calc(100vw - 48px));
  }

  .period-year-row {
    gap: 8px;
    margin-bottom: 12px;
  }

  .period-year-button {
    width: 40px;
    height: 40px;
  }

  .period-month-grid {
    gap: 8px;
  }

  .period-month-button {
    padding: 10px 6px;
  }

  .trend-chart-tools {
    top: 12px;
    right: 12px;
  }

  .trend-range-label {
    display: none;
  }

  .trend-mode-toggle {
    min-height: 32px;
    padding: 0 10px;
  }

  .trend-range-panel {
    width: min(100%, calc(100vw - 56px));
  }

  .trend-footer {
    grid-template-columns: 1fr;
  }

  .agent-panel-hero {
    grid-template-columns: 1fr;
  }

  .agent-panel-controls {
    grid-template-columns: 1fr;
  }

  .agent-panel-grid {
    grid-template-columns: 1fr;
  }

  .trend-chart {
    height: 260px;
  }

  .analysis-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights-progress-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .insights-chart-meta {
    grid-template-columns: 1fr;
  }

  .insights-chart-svg {
    height: 260px;
  }

  .projection-total-strip,
  .projection-overview-grid,
  .projection-year-summary,
  .projection-month-grid,
  .projection-kpi-grid,
  .projection-detail-grid,
  .projection-list-year-metrics,
  .projection-list-month-summary,
  .projection-selection-summary {
    grid-template-columns: 1fr;
  }

  .projection-hero {
    grid-template-columns: 1fr;
    padding: 18px 2px;
  }

  .projection-executive-card {
    min-height: 0;
  }

  .projection-total-strip > div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding: 14px 0 0;
  }

  .projection-total-strip > div:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .projection-overview-card,
  .projection-year-section,
  .projection-month-card,
  .projection-empty-state,
  .projection-year-empty,
  .projection-notice-panel,
  .projection-list-year,
  .projection-list-month {
    padding: 20px;
  }

  .projection-table {
    min-width: 1560px;
  }

}


body[data-page="agent-panel"] {
  background: #edf3f8;
}

body[data-page="agent-panel"]::before {
  opacity: 0.55;
}

body[data-page="agent-panel"] .content {
  width: 100%;
}

.agent-panel-page {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: 18px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(8, 26, 55, 0.12);
  overflow: visible;
}

.agent-panel-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) minmax(170px, 0.62fr) minmax(190px, 0.72fr) minmax(260px, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 102px;
  border: 1px solid rgba(12, 34, 75, 0.08);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
}

.agent-panel-header > * {
  min-width: 0;
  padding: 18px 20px;
}

.agent-panel-header > * + * {
  border-left: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-title-block {
  display: grid;
  align-content: center;
  gap: 18px;
}

.agent-panel-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: #006bad;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.agent-panel-back-link span {
  font-size: 1.1rem;
  line-height: 1;
}

.agent-panel-agent-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.agent-panel-agent-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.agent-panel-agent-title-row > div {
  min-width: 0;
}

.agent-panel-agent-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 10px;
}

.agent-panel-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--agent-panel-avatar-bg, #e8f0ff);
  color: var(--agent-panel-avatar-color, #2f65d8);
  font-size: 0.78rem;
  font-weight: 900;
}

.agent-panel-avatar.has-photo {
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
}

.agent-panel-avatar.tone-0 {
  --agent-panel-avatar-bg: #e8f0ff;
  --agent-panel-avatar-color: #2f65d8;
}

.agent-panel-avatar.tone-1 {
  --agent-panel-avatar-bg: #e6f7ef;
  --agent-panel-avatar-color: #168956;
}

.agent-panel-avatar.tone-2 {
  --agent-panel-avatar-bg: #f2eaff;
  --agent-panel-avatar-color: #7048d6;
}

.agent-panel-avatar.tone-3 {
  --agent-panel-avatar-bg: #fff1e7;
  --agent-panel-avatar-color: #e07026;
}

.agent-panel-avatar.tone-4 {
  --agent-panel-avatar-bg: #e8fbff;
  --agent-panel-avatar-color: #12839b;
}

.agent-panel-avatar.tone-5 {
  --agent-panel-avatar-bg: #ffe8f6;
  --agent-panel-avatar-color: #c93a9a;
}

.agent-panel-agent-heading h1 {
  margin: 0;
  color: #071c3f;
  font-size: clamp(1.35rem, 1.8vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.agent-panel-branch-button,
.agent-panel-contest-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(14, 93, 153, 0.18);
  border-radius: 10px;
  background: #eef7fb;
  color: #0b6f9b;
  box-shadow: 0 8px 18px rgba(14, 93, 153, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.agent-panel-contest-button {
  border-color: rgba(47, 101, 216, 0.18);
  background: #eef4ff;
  color: #2f65d8;
  box-shadow: 0 8px 18px rgba(47, 101, 216, 0.08);
}

.agent-panel-branch-button:hover,
.agent-panel-branch-button:focus-visible,
.agent-panel-contest-button:hover,
.agent-panel-contest-button:focus-visible {
  border-color: rgba(14, 93, 153, 0.34);
  background: #e4f3fa;
  color: #075b82;
  transform: translateY(-1px);
}

.agent-panel-contest-button:hover,
.agent-panel-contest-button:focus-visible {
  border-color: rgba(47, 101, 216, 0.34);
  background: #e4eeff;
  color: #2456be;
}

.agent-panel-branch-button:focus-visible,
.agent-panel-contest-button:focus-visible {
  outline: 3px solid rgba(42, 94, 168, 0.18);
  outline-offset: 2px;
}

.agent-panel-agent-heading p,
.agent-panel-header-stat small,
.agent-panel-kpi-strip p,
.agent-panel-chart-head p,
.agent-panel-detail-card p,
.agent-panel-performance-callout p {
  margin: 0;
  color: #4f6483;
  font-size: 0.78rem;
  line-height: 1.45;
}

.agent-panel-kpi-icon svg,
.agent-panel-mini-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.agent-panel-kpi-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-panel-kpi-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.agent-panel-mini-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-50%, -50%);
}

.agent-panel-header-stat {
  display: grid;
  align-content: center;
  gap: 5px;
}

.agent-panel-header-stat span,
.agent-panel-period-box label,
.agent-panel-search span {
  color: #5b6d88;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.agent-panel-header-stat strong {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #071c3f;
  font-size: 0.94rem;
  font-weight: 900;
}

.agent-panel-period-box {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 18px 16px;
  background: transparent;
  border: 0;
}

.agent-panel-search-control {
  min-height: 44px;
  border: 1px solid rgba(12, 34, 75, 0.14);
  border-radius: 5px;
  background: #ffffff;
  box-shadow: none;
}

.agent-panel-period-box .period-trigger {
  min-height: auto;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: inherit;
}

.agent-panel-period-box .period-panel {
  z-index: 4000;
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

.agent-panel-period-box .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

.agent-panel-period-box .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

.agent-panel-period-box .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

.agent-panel-period-box .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.agent-panel-period-box .period-month-button {
  min-height: 48px;
  border-radius: 9px;
  font-size: 0.82rem;
}

.agent-panel-period-box .period-month-button.active::after {
  display: none;
}

.agent-panel-search {
  position: relative;
  z-index: 60;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px 16px;
}

.agent-panel-search-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  overflow: hidden;
}

.agent-panel-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #10284e;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
}

.agent-panel-search input:focus {
  outline: none;
}

.agent-panel-search-control:focus-within {
  border-color: rgba(42, 94, 168, 0.55);
  box-shadow: 0 0 0 3px rgba(42, 94, 168, 0.12);
}

.agent-panel-search-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #0b2f5f;
  cursor: pointer;
}

.agent-panel-search-button svg {
  width: 18px;
  height: 18px;
}

.agent-panel-suggestions {
  position: absolute;
  z-index: 5000;
  top: calc(100% - 10px);
  left: 16px;
  right: 16px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(12, 34, 75, 0.14);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(8, 26, 55, 0.16);
}

.agent-panel-suggestions.hidden {
  display: none;
}

.agent-panel-suggestion,
.agent-panel-suggestion-empty {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  color: #0b2f5f;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: left;
}

.agent-panel-suggestion {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.agent-panel-suggestion:hover,
.agent-panel-suggestion:focus-visible {
  outline: none;
  background: #eef5ff;
}

.agent-panel-initial-loading {
  position: fixed;
  inset: 0;
  z-index: 7600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 26, 55, 0.32);
  backdrop-filter: blur(14px) saturate(135%);
}

.agent-panel-initial-loading.hidden {
  display: none;
}

.agent-panel-initial-loading-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(92vw, 360px);
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(7, 28, 63, 0.96), rgba(10, 49, 101, 0.96));
  box-shadow: 0 26px 68px rgba(7, 20, 42, 0.34);
  text-align: center;
  animation: agent-panel-loading-card-in 260ms ease-out both;
}

.agent-panel-initial-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: agent-panel-loading-spin 780ms linear infinite;
}

.agent-panel-initial-loading-card strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
}

.agent-panel-initial-loading-card p {
  margin: 0;
  color: rgba(232, 239, 251, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
}

@keyframes agent-panel-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes agent-panel-loading-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-panel-initial-loading-card,
  .agent-panel-initial-loading-spinner {
    animation: none;
  }
}

.agent-panel-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(12, 34, 75, 0.09);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

.agent-panel-kpi-strip article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 18px 20px;
}

.agent-panel-kpi-strip article + article {
  border-left: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-kpi-strip .agent-panel-kpi-combo {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.agent-panel-kpi-combo-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 11px 16px;
}

.agent-panel-kpi-combo-row + .agent-panel-kpi-combo-row {
  border-top: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-kpi-combo-row .agent-panel-kpi-icon {
  width: 30px;
  height: 30px;
}

.agent-panel-kpi-combo-row .agent-panel-kpi-icon img {
  width: 18px;
  height: 18px;
}

.agent-panel-kpi-combo-row small {
  min-width: 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.agent-panel-kpi-combo-row strong {
  margin: 0;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  text-align: right;
  white-space: nowrap;
}

.agent-panel-kpi-icon,
.agent-panel-mini-icon {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.agent-panel-kpi-icon {
  width: 48px;
  height: 48px;
}

.agent-panel-kpi-icon.blue,
.agent-panel-mini-icon.blue {
  background: #e8f3ff;
  color: #0c65ad;
}

.agent-panel-kpi-icon.teal {
  background: #ddf5f1;
  color: #0b8b84;
}

.agent-panel-kpi-icon.green,
.agent-panel-mini-icon.green {
  background: #e4f7e8;
  color: #149449;
}

.agent-panel-kpi-icon.purple,
.agent-panel-mini-icon.purple {
  background: #eee8fb;
  color: #7a55c7;
}

.agent-panel-kpi-strip small,
.agent-panel-card-head span,
.agent-panel-dual-metric small {
  display: block;
  color: #0b2f5f;
  font-size: 0.78rem;
  font-weight: 900;
}

.agent-panel-kpi-strip strong {
  display: block;
  margin: 5px 0 4px;
  color: #071c3f;
  font-size: clamp(1.28rem, 1.45vw, 1.72rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
}

.agent-panel-kpi-strip p {
  font-size: 0.86rem;
  font-weight: 700;
}

.agent-panel-kpi-strip p span,
.agent-panel-top-positive {
  color: #15923d;
  font-weight: 900;
}

.agent-panel-chart-card {
  position: relative;
  z-index: 20;
  display: grid;
  gap: 18px;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  padding: 24px 26px 18px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
  overflow: visible;
}

.agent-panel-chart-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.agent-panel-chart-head h2 {
  margin: 0 0 7px;
  color: #071c3f;
  font-size: 1rem;
  line-height: 1.2;
}

.agent-panel-chart-card .trend-chart-tools {
  position: relative;
  top: auto;
  right: auto;
  z-index: 120;
  flex: 0 0 auto;
}

.agent-panel-chart-card .trend-mode-toggle {
  min-height: 38px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
  color: #0b2f5f;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
}

.agent-panel-chart-card .trend-legend {
  margin: 0;
  gap: 28px;
}

.agent-panel-chart-card .trend-chart-shell {
  position: relative;
  z-index: 1;
  min-height: 220px;
  padding: 0 4px;
  border: 0;
  background: #ffffff;
  box-shadow: none;
  overflow: visible;
}

.agent-panel-chart-card .trend-chart {
  display: block;
  width: 100%;
  height: 260px;
  min-height: 260px;
}

.agent-panel-chart-note {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 5px;
  background: #eef7ff;
  color: #0b2f5f;
  font-size: 0.82rem;
  font-weight: 700;
}

.agent-panel-hidden-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#agentPanelTrendRangePanel {
  right: 0;
  width: min(312px, calc(100vw - 56px));
  max-height: min(420px, calc(100vh - 96px));
  padding: 14px;
  overflow-y: auto;
  z-index: 6000;
  border-radius: 14px;
}

.agent-panel-trend-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) repeat(2, minmax(220px, 0.82fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

.agent-panel-central-charts {
  display: contents;
}

.agent-panel-emission-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(170, 188, 216, 0.56);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
}

.agent-panel-emission-card .eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #2f65d8;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-panel-emission-card h3 {
  margin: 0;
  color: #102c5f;
  font-size: 1rem;
  line-height: 1.2;
}

.agent-panel-emission-donut-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 142px;
}

.agent-panel-emission-donut {
  --video-share: 0%;
  --donut-reveal: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: 138px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(#12376e 0 var(--video-share), #49bf7b var(--video-share) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(170, 188, 216, 0.4),
    0 14px 26px rgba(15, 43, 87, 0.08);
  overflow: hidden;
  opacity: 0;
}

.agent-panel-emission-donut.empty {
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(#dbe5f3 0 100%);
}

.agent-panel-emission-donut::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from -90deg, transparent 0 var(--donut-reveal), #ffffff var(--donut-reveal) 100%);
  -webkit-mask: radial-gradient(circle at center, transparent 0 48%, #000 49%);
  mask: radial-gradient(circle at center, transparent 0 48%, #000 49%);
  pointer-events: none;
}

.agent-panel-donut-enter {
  opacity: 1;
  transition: opacity 120ms ease;
}

.agent-panel-donut-enter::after {
  animation: agent-panel-donut-reveal 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@property --donut-reveal {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes agent-panel-donut-reveal {
  from {
    --donut-reveal: 0%;
  }

  to {
    --donut-reveal: 100%;
  }
}

.agent-panel-emission-donut-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #ffffff;
  color: #102c5f;
}

.agent-panel-emission-donut-core strong {
  font-size: 1.5rem;
  line-height: 1;
}

.agent-panel-emission-donut-core span {
  color: #647795;
  font-size: 0.72rem;
}

.agent-panel-certificate-model-donut {
  --cnpj-share: 0%;
  --cpf-share-end: 0%;
  --pj-share-end: 0%;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(
      #12376e 0 var(--cnpj-share),
      #2d7df0 var(--cnpj-share) var(--cpf-share-end),
      #49bf7b var(--cpf-share-end) var(--pj-share-end),
      #d84d5b var(--pj-share-end) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .agent-panel-emission-donut {
    opacity: 1;
  }

  .agent-panel-emission-donut::after {
    display: none;
  }

  .agent-panel-donut-enter::after {
    animation: none;
  }
}

.agent-panel-certificate-model-donut.empty {
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(#dbe5f3 0 100%);
}

.agent-panel-emission-list {
  display: grid;
  gap: 8px;
}

.agent-panel-emission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f3f7fd;
  color: #102c5f;
  font-size: 0.82rem;
}

.agent-panel-emission-item span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #647795;
}

.agent-panel-emission-item i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.agent-panel-emission-item.video i,
.agent-panel-emission-item.certificate-cnpj i {
  background: #12376e;
}

.agent-panel-emission-item.in-person i,
.agent-panel-emission-item.certificate-pj i {
  background: #49bf7b;
}

.agent-panel-emission-item.certificate-cpf i {
  background: #2d7df0;
}

.agent-panel-emission-item.certificate-safeid i {
  background: #d84d5b;
}

.agent-panel-emission-note {
  margin: 0;
  color: #647795;
  font-size: 0.78rem;
  line-height: 1.35;
}

.agent-panel-bottom-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.08fr) minmax(360px, 1.36fr) minmax(190px, 0.62fr);
  gap: 12px;
  align-items: stretch;
}

.agent-panel-detail-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 126px;
  padding: 18px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
}

.agent-panel-card-head {
  display: flex;
  align-items: center;
}

.agent-panel-mini-icon {
  width: 32px;
  height: 32px;
}

.agent-panel-progress-card {
  display: grid;
  gap: 9px;
}

.agent-panel-quantity-overview {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(112px, 0.68fr) minmax(126px, 0.78fr);
  gap: 12px;
  align-items: center;
}

.agent-panel-quantity-main-block {
  min-width: 0;
}

.agent-panel-quantity-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  white-space: normal;
}

.agent-panel-quantity-summary > span {
  color: #071c3f;
  font-size: clamp(1.38rem, 1.75vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
}

.agent-panel-large-value {
  color: #071c3f;
  font-size: clamp(1.22rem, 1.45vw, 1.55rem);
  font-weight: 900;
  line-height: 1.05;
}

.agent-panel-quantity-summary small {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #4f6483;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0;
}

.agent-panel-quantity-side-block {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 52px;
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(12, 34, 75, 0.12);
}

.agent-panel-quantity-side-block span {
  color: #4f6483;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.18;
  text-transform: uppercase;
}

.agent-panel-quantity-side-block strong {
  color: #071c3f;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  font-weight: 900;
  line-height: 1;
}

.agent-panel-revenue-summary > span {
  font-size: clamp(1.02rem, 1.2vw, 1.32rem);
}

.agent-panel-revenue-summary small {
  transform: none;
}

.agent-panel-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}

.agent-panel-progress-track {
  height: 10px;
  border-radius: 999px;
  background: #e4ebf3;
  overflow: hidden;
}

.agent-panel-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #0f67b2;
  transition: width 220ms ease;
}

.agent-panel-progress-percent {
  display: block;
  color: #0b2f5f;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 10px;
}

.agent-panel-progress-card > small {
  display: block;
  padding-top: 10px;
  border-top: 1px solid rgba(12, 34, 75, 0.1);
  color: #4f6483;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.agent-panel-detail-card p span {
  color: #4f6483;
  font-weight: 900;
}

.agent-panel-ticket-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}

.agent-panel-ticket-card {
  order: 3;
  min-height: 106px;
  padding: 16px;
}

.agent-panel-ticket-main {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.agent-panel-ticket-main small {
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agent-panel-commission-card {
  order: 2;
  padding-bottom: 0;
  overflow: hidden;
}

.agent-panel-dual-metric {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agent-panel-dual-metric div + div {
  padding-left: 14px;
  border-left: 1px solid rgba(12, 34, 75, 0.1);
}

.agent-panel-dual-metric small {
  margin-bottom: 6px;
  color: #4f6483;
  font-size: 0.78rem;
  text-transform: none;
}

.agent-panel-dual-metric strong {
  color: #071c3f;
  font-size: clamp(1.18rem, 1.25vw, 1.42rem);
  font-weight: 900;
  line-height: 1.05;
}

.agent-panel-detail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin: 4px -18px 0;
  padding: 0 18px;
  border: 0;
  border-top: 1px solid rgba(12, 34, 75, 0.08);
  background: transparent;
  color: #006bad;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.agent-panel-detail-link:disabled {
  color: #91a0b5;
  cursor: not-allowed;
}

.controle-page-shell {
  display: grid;
  gap: 18px;
}

.controle-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 18px;
}

.controle-period-box {
  display: grid;
  align-content: center;
  min-width: 0;
  width: auto;
  padding: 18px 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.controle-period-box label {
  color: #5b6d88;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.controle-period-box .period-trigger {
  min-height: auto;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: inherit;
}

.controle-period-box .period-panel {
  z-index: 4000;
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

.controle-period-box .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

.controle-period-box .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

.controle-period-box .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

.controle-period-box .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.controle-period-box .period-month-button {
  min-height: 48px;
  border-radius: 9px;
  font-size: 0.82rem;
}

.controle-period-box .period-month-button.active::after {
  display: none;
}

.controle-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.controle-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon note";
  align-content: center;
  min-height: 116px;
  padding: 18px 20px;
  column-gap: 18px;
  row-gap: 6px;
  border: 1px solid rgba(170, 188, 216, 0.58);
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(8, 26, 55, 0.04),
    0 10px 24px rgba(8, 26, 55, 0.05);
}

.controle-summary-card::before {
  content: "";
  grid-area: icon;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #edf4ff;
  box-shadow: 0 10px 22px rgba(7, 87, 202, 0.08);
}

.controle-summary-card::after {
  content: "";
  grid-area: icon;
  place-self: center;
  width: 26px;
  height: 26px;
  background: #0757ca;
  -webkit-mask: var(--controle-summary-icon) center / 26px 26px no-repeat;
  mask: var(--controle-summary-icon) center / 26px 26px no-repeat;
}

.controle-summary-card:nth-child(1) {
  --controle-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2M9.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM21 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
}

.controle-summary-card:nth-child(2) {
  --controle-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5ZM14 2v5h5M9 13h6M9 17h6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
}

.controle-summary-card:nth-child(3) {
  --controle-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
}

.controle-summary-card:nth-child(2)::before {
  background: #e9fbff;
}

.controle-summary-card:nth-child(3)::before {
  background: #eaf8ef;
}

.controle-summary-card:nth-child(2)::after {
  background: #0f8792;
}

.controle-summary-card:nth-child(3)::after {
  background: #168447;
}

.controle-summary-card span {
  grid-area: label;
  color: #61738e;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.controle-summary-card strong {
  grid-area: value;
  color: #071c3f;
  font-size: clamp(1.34rem, 1.55vw, 1.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

.controle-summary-card p {
  grid-area: note;
  margin: 0;
  color: #51627f;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.controle-toolbar {
  display: flex;
  justify-content: flex-end;
}

.controle-search-field {
  display: grid;
  gap: 8px;
  width: min(100%, 360px);
}

.controle-search-field span {
  color: #51627f;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.controle-search-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(12, 34, 75, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #071c3f;
  font-size: 0.94rem;
  font-weight: 700;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.controle-search-field input:focus {
  border-color: rgba(23, 93, 166, 0.34);
  box-shadow: 0 0 0 4px rgba(23, 93, 166, 0.12);
}

.controle-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(7, 28, 63, 0.07);
}

.controle-agent-table {
  width: 100%;
  border-collapse: collapse;
  color: #223c60;
}

.controle-agent-table th,
.controle-agent-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
  text-align: center;
  vertical-align: middle;
}

.controle-agent-table th {
  background: #f6f9ff;
  color: #51627f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.controle-agent-table tbody tr:hover {
  background: rgba(234, 241, 255, 0.5);
}

.controle-agent-table tbody tr:last-child td {
  border-bottom: 0;
}

.controle-agent-cell {
  display: grid;
  gap: 4px;
  text-align: left;
}

.controle-agent-cell strong {
  color: #071c3f;
  font-size: 0.92rem;
}

.controle-agent-cell span {
  color: #647792;
  font-size: 0.78rem;
  font-weight: 700;
}

.controle-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(23, 93, 166, 0.18);
  border-radius: 12px;
  background: #eef5ff;
  color: #175da6;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.controle-view-button svg {
  width: 19px;
  height: 19px;
}

.controle-view-button:hover {
  transform: translateY(-1px);
  background: #e2eeff;
  box-shadow: 0 12px 22px rgba(23, 93, 166, 0.15);
}

.controle-view-button:focus-visible {
  outline: 3px solid rgba(47, 101, 216, 0.18);
  outline-offset: 2px;
}

.controle-empty-message {
  margin: 0;
  padding: 30px 24px;
  color: #647792;
  text-align: center;
  font-weight: 800;
}

.controle-protocol-table td:nth-child(2) {
  min-width: 220px;
  white-space: normal;
}

.controle-protocol-table td:nth-child(5) {
  min-width: 220px;
  white-space: normal;
}


.agent-panel-commission-detail-overlay {
  z-index: 7300;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(7, 20, 42, 0.38);
  backdrop-filter: blur(14px);
}

.agent-panel-commission-detail-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 48px));
  max-height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(12, 34, 75, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 82px rgba(7, 20, 42, 0.28);
  animation: agent-panel-branch-card-in 0.26s ease both;
}

.agent-panel-commission-detail-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
  text-align: center;
}

.agent-panel-commission-detail-header .modal-close {
  position: static;
}

.agent-panel-commission-detail-actions {
  position: absolute;
  top: 18px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.agent-panel-commission-detail-export-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(23, 93, 166, 0.18);
  border-radius: 10px;
  background: #175da6;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(23, 93, 166, 0.18);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.agent-panel-commission-detail-export-button:hover,
.agent-panel-commission-detail-export-button:focus-visible {
  background: #0f4f91;
  box-shadow: 0 10px 22px rgba(23, 93, 166, 0.24);
  transform: translateY(-1px);
}

.agent-panel-commission-detail-export-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.agent-panel-commission-detail-header > div > span {
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-panel-commission-detail-header h3 {
  margin: 4px 0;
  color: #071c3f;
  font-size: 1.45rem;
}

.agent-panel-commission-detail-header p {
  margin: 0;
  color: #4f6483;
  font-size: 0.84rem;
  font-weight: 700;
}

.agent-panel-commission-detail-summary {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 0.8fr) minmax(260px, 1.5fr);
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  background: #f5f9ff;
  color: #4f6483;
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
}

.agent-panel-commission-detail-highlight {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(23, 93, 166, 0.13);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(7, 28, 63, 0.06);
}

.agent-panel-commission-detail-highlight small {
  color: #647792;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agent-panel-commission-detail-highlight strong {
  color: #071c3f;
  font-size: 1.05rem;
  font-weight: 900;
}

.agent-panel-commission-detail-search {
  display: grid;
  gap: 5px;
  text-align: left;
}

.agent-panel-commission-detail-search span {
  color: #4f6483;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agent-panel-commission-detail-search input {
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(12, 34, 75, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #071c3f;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.agent-panel-commission-detail-search input:focus {
  outline: 3px solid rgba(47, 101, 216, 0.14);
  border-color: rgba(47, 101, 216, 0.45);
}

.agent-panel-commission-detail-table-wrap {
  overflow: auto;
}

.agent-panel-commission-detail-table {
  width: 100%;
  border-collapse: collapse;
  color: #223c60;
  font-size: 0.84rem;
}

.agent-panel-commission-detail-table th,
.agent-panel-commission-detail-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.agent-panel-commission-detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  color: #4f6483;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agent-panel-commission-detail-table td:nth-child(2) {
  min-width: 240px;
  white-space: normal;
}

.agent-panel-certificate-status {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #175da6;
  font-size: 0.74rem;
  font-weight: 900;
}

.agent-panel-certificate-status.is-issued {
  background: #dcf8e8;
  color: #168447;
}

.agent-panel-certificate-status.is-pending {
  background: #fff2c7;
  color: #966900;
}

.agent-panel-certificate-status.is-canceled {
  background: #ffe4e4;
  color: #b42318;
}

.agent-panel-commission-detail-empty {
  margin: 0;
  padding: 48px 24px;
  color: #647792;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 720px) {
  .controle-page-heading {
    flex-direction: column;
  }

  .controle-period-box,
  .controle-summary-grid {
    width: 100%;
  }

  .controle-summary-grid {
    grid-template-columns: 1fr;
  }

  .controle-agent-table th,
  .controle-agent-table td {
    padding: 14px 12px;
    font-size: 0.82rem;
  }

  .agent-panel-commission-detail-overlay {
    padding: 12px;
  }

  .agent-panel-commission-detail-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .agent-panel-commission-detail-header,
  .agent-panel-commission-detail-summary {
    padding-left: 16px;
    padding-right: 16px;
  }

  .agent-panel-commission-detail-header {
    justify-content: flex-start;
    padding-right: 136px;
    text-align: left;
  }

  .agent-panel-commission-detail-actions {
    right: 16px;
  }

  .agent-panel-commission-detail-export-button {
    width: 38px;
    min-width: 38px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    white-space: nowrap;
  }

  .agent-panel-commission-detail-export-button::before {
    content: "XLS";
    color: #ffffff;
  }

  .agent-panel-commission-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-panel-commission-detail-search {
    grid-column: 1 / -1;
  }
}

.agent-panel-branch-modal-overlay {
  z-index: 7000;
  align-items: center;
  background: rgba(8, 26, 55, 0.26);
  backdrop-filter: blur(14px);
}

.agent-panel-branch-modal-overlay:not(.hidden) {
  animation: agent-panel-branch-overlay-in 240ms ease-out both;
}

.agent-panel-branch-modal-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 920px) minmax(0, 0);
  gap: 18px;
  width: min(920px, 100%);
  align-items: stretch;
  transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.agent-panel-branch-modal-overlay:not(.hidden) .agent-panel-branch-modal-stage {
  animation: agent-panel-branch-stage-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-panel-branch-modal-stage.is-expanded {
  grid-template-columns: minmax(0, 1fr) minmax(540px, 620px);
  width: min(1560px, calc(100vw - 48px));
}

.agent-panel-branch-modal-stage.is-result-expanded {
  grid-template-columns: minmax(0, 920px) minmax(500px, 580px);
  width: min(1520px, calc(100vw - 48px));
}

.agent-panel-branch-modal-stage.is-switching-to-result {
  grid-template-columns: minmax(0, 1fr) minmax(540px, 620px);
  width: min(1560px, calc(100vw - 48px));
}

.agent-panel-branch-modal-stage.is-loading .agent-panel-branch-insight-button {
  pointer-events: none;
  opacity: 0.55;
}

.agent-panel-branch-modal-stage.is-loading .agent-panel-branch-result-label {
  pointer-events: none;
  opacity: 0.55;
}

.agent-panel-branch-insight-button {
  position: absolute;
  top: -34px;
  left: -20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 10px;
  border: 1px solid rgba(14, 93, 153, 0.16);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(8, 26, 55, 0.16);
  cursor: pointer;
  animation: agent-panel-branch-nudge 1.55s ease-in-out infinite;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.agent-panel-branch-insight-button:hover,
.agent-panel-branch-insight-button:focus-visible {
  border-color: rgba(14, 93, 153, 0.34);
  box-shadow: 0 18px 40px rgba(8, 26, 55, 0.2);
  transform: translateY(-1px);
}

.agent-panel-branch-insight-button:focus-visible {
  outline: 3px solid rgba(42, 94, 168, 0.18);
  outline-offset: 2px;
}

.agent-panel-branch-insight-button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-insight-button {
  animation: none;
}

@keyframes agent-panel-branch-nudge {
  0%, 68%, 100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  72% {
    transform: translate3d(-2px, 0, 0) rotate(-4deg);
  }
  77% {
    transform: translate3d(3px, 0, 0) rotate(4deg);
  }
  82% {
    transform: translate3d(-3px, 0, 0) rotate(-3deg);
  }
  88% {
    transform: translate3d(2px, 0, 0) rotate(2deg);
  }
}

.agent-panel-branch-insight-panel {
  grid-column: 1;
  grid-row: 1;
  min-height: min(76vh, 720px);
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(12, 34, 75, 0);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 28px 60px rgba(8, 26, 55, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, 0, 0) scale(0.99);
  visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity 360ms ease 80ms,
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 40ms,
    border-color 260ms ease,
    visibility 0ms linear 420ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-insight-panel:not(.agent-panel-sempre-result-panel) {
  border-color: rgba(12, 34, 75, 0.1);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  transition:
    opacity 360ms ease 80ms,
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 40ms,
    border-color 260ms ease,
    visibility 0ms linear 0ms;
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-branch-insight-panel {
  grid-column: 1;
}

.agent-panel-branch-modal-stage.is-switching-to-result .agent-panel-branch-insight-panel:not(.agent-panel-sempre-result-panel) {
  border-color: rgba(12, 34, 75, 0.04);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-26px, 0, 0) scale(0.985);
  transition:
    opacity 150ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 150ms ease,
    visibility 0ms linear 220ms;
}

.agent-panel-sempre-result-panel {
  grid-column: 2;
  grid-row: 1;
  transform: translate3d(18px, 0, 0) scale(0.99);
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-panel {
  grid-column: 2;
  border-color: rgba(12, 34, 75, 0.1);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  transition:
    opacity 300ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    visibility 0ms linear 0ms;
}

.agent-panel-branch-insight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-branch-insight-header span,
.agent-panel-branch-insight-kpis span,
.agent-panel-branch-share-head span {
  display: block;
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-panel-branch-insight-header h3 {
  margin: 4px 0 3px;
  color: #071c3f;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.agent-panel-branch-insight-header p,
.agent-panel-branch-insight-kpis p,
.agent-panel-branch-share-head p,
.agent-panel-branch-share-empty p {
  margin: 0;
  color: #4f6483;
  font-size: 0.78rem;
  line-height: 1.45;
}

.agent-panel-branch-insight-kpis {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.agent-panel-branch-insight-kpis article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 124px;
  padding: 16px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
}

.agent-panel-branch-insight-kpis strong {
  display: block;
  max-width: 100%;
  min-width: 0;
  color: #071c3f;
  font-size: clamp(0.92rem, 1.35vw, 1.32rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  white-space: nowrap;
}

.agent-panel-branch-ticket-combo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.agent-panel-branch-ticket-combo > span {
  grid-column: 1 / -1;
}

.agent-panel-branch-ticket-combo div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.agent-panel-branch-ticket-combo .agent-panel-branch-ticket-realized {
  margin: 0;
  padding: 0;
}

.agent-panel-branch-ticket-realized strong {
  color: #075b82;
}

.agent-panel-branch-ticket-realized small {
  color: #0b6f9b;
}

.agent-panel-branch-ticket-combo div + div {
  padding-left: 14px;
  border-left: 1px solid rgba(12, 34, 75, 0.1);
}

.agent-panel-branch-ticket-combo small {
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
}

.agent-panel-branch-share-card {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(8, 26, 55, 0.05);
}

.agent-panel-branch-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.agent-panel-branch-share-head strong {
  display: block;
  margin-top: 3px;
  color: #071c3f;
  font-size: 1rem;
  font-weight: 900;
}

.agent-panel-branch-share-head p {
  color: #0b6f9b;
  font-weight: 900;
  text-align: right;
}

.agent-panel-branch-share-list {
  display: grid;
  gap: 12px;
}

.agent-panel-branch-share-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
}

.agent-panel-branch-share-label {
  min-width: 0;
}

.agent-panel-branch-share-label strong {
  display: block;
  overflow: hidden;
  color: #071c3f;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-panel-branch-share-label span {
  display: block;
  margin-top: 3px;
  color: #4f6483;
  font-size: 0.76rem;
  font-weight: 900;
}

.agent-panel-branch-share-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebf3;
}

.agent-panel-branch-share-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0b8fc0, #0f67b2);
}

.agent-panel-branch-share-row p {
  margin: 0;
  color: #0b2f5f;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: right;
}

.agent-panel-sempre-result-header img {
  width: 42px;
  height: 24px;
  object-fit: contain;
}

.agent-panel-sempre-result-hero {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(227, 11, 22, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(227, 11, 22, 0.08), rgba(255, 255, 255, 0.96) 70%);
  box-shadow: 0 12px 28px rgba(227, 11, 22, 0.08);
}

.agent-panel-sempre-result-hero.positive {
  border-color: rgba(22, 137, 86, 0.18);
  background:
    linear-gradient(135deg, rgba(22, 137, 86, 0.08), rgba(255, 255, 255, 0.96) 70%);
  box-shadow: 0 12px 28px rgba(22, 137, 86, 0.08);
}

.agent-panel-sempre-result-hero span,
.agent-panel-sempre-result-grid span {
  display: block;
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-panel-sempre-result-hero strong {
  color: #071c3f;
  font-size: clamp(1.7rem, 2.7vw, 2.35rem);
  font-weight: 900;
  line-height: 1.02;
}

.agent-panel-sempre-result-hero p {
  margin: 0;
  color: #5f6f87;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  line-height: 1.25;
}

.agent-panel-sempre-result-hero.positive strong {
  color: #0f5c34;
}

.agent-panel-sempre-result-hero.positive p,
.agent-panel-sempre-result-hero.positive .agent-panel-sempre-result-percent {
  color: #168956;
}

.agent-panel-sempre-result-label,
.agent-panel-sempre-result-percent {
  font-weight: 900;
}

.agent-panel-sempre-result-suffix {
  display: block;
  flex-basis: 100%;
  margin-top: 2px;
}

.agent-panel-sempre-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.agent-panel-sempre-result-grid article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 126px;
  padding: 16px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
}

.agent-panel-sempre-result-grid strong {
  color: #071c3f;
  font-size: clamp(1.2rem, 1.9vw, 1.62rem);
  font-weight: 900;
  line-height: 1.05;
}

.agent-panel-sempre-result-grid p {
  margin: 0;
  color: #4f6483;
  font-size: 0.78rem;
  font-weight: 800;
}

.agent-panel-sempre-result-track {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebf3;
}

.agent-panel-sempre-result-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f67b2, #0b8fc0);
}

.agent-panel-sempre-result-track.revenue span {
  background: linear-gradient(90deg, #e30b16, #ff7a45);
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-hero,
.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-grid article {
  animation: agent-panel-branch-organize 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-hero {
  animation-delay: 20ms;
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-grid article:nth-child(1) {
  animation-delay: 55ms;
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-grid article:nth-child(2) {
  animation-delay: 80ms;
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-grid article:nth-child(3) {
  animation-delay: 105ms;
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-sempre-result-grid article:nth-child(4) {
  animation-delay: 130ms;
}

.agent-panel-branch-share-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 8px;
  background: #f8fbff;
}

.agent-panel-branch-share-empty strong {
  color: #071c3f;
  font-size: 0.92rem;
}

.agent-panel-branch-modal-card {
  grid-column: 1 / 2;
  grid-row: 1;
  display: grid;
  gap: 16px;
  width: min(920px, 100%);
  max-height: none;
  overflow: visible;
  padding: 22px;
  border-radius: 12px;
  background: #ffffff;
  will-change: transform;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-panel-branch-modal-overlay:not(.hidden) .agent-panel-branch-modal-card {
  animation: agent-panel-branch-card-in 560ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-modal-card {
  grid-column: 2;
  width: 100%;
  transform: translateX(0);
}

.agent-panel-branch-modal-stage.is-result-expanded .agent-panel-branch-modal-card {
  grid-column: 1;
  width: 100%;
  animation: agent-panel-branch-card-result-swap 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-other-summary,
.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row {
  grid-template-columns: minmax(0, 1fr) minmax(76px, 0.24fr) minmax(130px, 0.36fr);
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row p {
  text-align: right;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-projection,
.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-metrics article,
.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-other-summary div,
.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row,
.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-total-row {
  animation: agent-panel-branch-organize 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-projection {
  animation-delay: 70ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-metrics article:nth-child(1) {
  animation-delay: 120ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-metrics article:nth-child(2) {
  animation-delay: 155ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-metrics article:nth-child(3) {
  animation-delay: 190ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-metrics article:nth-child(4) {
  animation-delay: 225ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-other-summary div:nth-child(1) {
  animation-delay: 255ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-other-summary div:nth-child(2) {
  animation-delay: 285ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row:nth-child(1) {
  animation-delay: 315ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row:nth-child(2) {
  animation-delay: 345ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row:nth-child(3) {
  animation-delay: 375ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-agent-row:nth-child(n + 4) {
  animation-delay: 405ms;
}

.agent-panel-branch-modal-stage.is-expanded .agent-panel-branch-total-row {
  animation-delay: 430ms;
}

@keyframes agent-panel-branch-organize {
  0% {
    opacity: 0.35;
    transform: translate3d(0, 10px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes agent-panel-branch-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(2px);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(14px);
  }
}

@keyframes agent-panel-branch-stage-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }

  58% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes agent-panel-branch-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.982);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes agent-panel-branch-card-result-swap {
  from {
    opacity: 0.78;
    transform: translate3d(24px, 0, 0) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes agent-panel-branch-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-panel-branch-modal-overlay:not(.hidden),
  .agent-panel-branch-modal-overlay:not(.hidden) .agent-panel-branch-modal-stage,
  .agent-panel-branch-modal-overlay:not(.hidden) .agent-panel-branch-modal-card {
    animation: none;
  }

  .agent-panel-branch-modal-stage.is-result-expanded .agent-panel-branch-modal-card {
    animation: none;
  }

  .agent-panel-branch-loading span {
    animation: none;
  }
}

.agent-panel-branch-modal-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 92px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-branch-modal-header span,
.agent-panel-branch-list-head span,
.agent-panel-branch-metrics span,
.agent-panel-branch-projection span,
.agent-panel-branch-total-row span {
  display: block;
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-panel-branch-modal-header h3 {
  margin: 4px 0 3px;
  color: #071c3f;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.agent-panel-branch-modal-header .agent-panel-branch-result-label {
  position: absolute;
  right: 0;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: #e30b16;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transform-origin: right center;
  transition: transform 180ms ease, color 180ms ease;
}

.agent-panel-branch-result-label img {
  display: block;
  width: 24px;
  height: 14px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.agent-panel-branch-result-label span {
  position: relative;
  display: inline-block;
  color: inherit;
}

.agent-panel-branch-result-label span::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -35%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  transform: translateX(-170%) skewX(-18deg);
  animation: agent-panel-result-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.agent-panel-branch-result-label:hover,
.agent-panel-branch-result-label:focus-visible {
  color: #b90811;
  transform: scale(1.08);
}

.agent-panel-branch-result-label:hover img,
.agent-panel-branch-result-label:focus-visible img {
  transform: translateX(-1px) scale(1.06);
}

.agent-panel-branch-result-label:focus-visible {
  outline: 2px solid rgba(14, 93, 153, 0.34);
  outline-offset: 3px;
  border-radius: 6px;
}

@keyframes agent-panel-result-shine {
  0%,
  48% {
    transform: translateX(-170%) skewX(-18deg);
  }

  74%,
  100% {
    transform: translateX(390%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-panel-branch-result-label,
  .agent-panel-branch-result-label img {
    transition: none;
  }

  .agent-panel-branch-result-label span::after {
    animation: none;
    display: none;
  }
}

.agent-panel-branch-modal-header p,
.agent-panel-branch-metrics p,
.agent-panel-branch-projection p,
.agent-panel-branch-empty p {
  margin: 0;
  color: #4f6483;
  font-size: 0.78rem;
  line-height: 1.45;
}

.agent-panel-branch-projection {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(14, 93, 153, 0.16);
  border-radius: 9px;
  background: linear-gradient(135deg, #eef7fb, #ffffff 72%);
  box-shadow: 0 12px 26px rgba(14, 93, 153, 0.08);
}

.agent-panel-branch-projection strong {
  color: #075b82;
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  font-weight: 900;
  line-height: 1;
}

.agent-panel-branch-projection p {
  color: #0b6f9b;
  font-weight: 900;
}

.agent-panel-branch-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.agent-panel-branch-metrics article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.04);
}

.agent-panel-branch-metrics strong {
  color: #071c3f;
  font-size: clamp(1.05rem, 1.4vw, 1.34rem);
  font-weight: 900;
  line-height: 1.05;
}

.agent-panel-branch-metrics p span {
  color: #0b6f9b;
  font-weight: 900;
}

.agent-panel-branch-list-block {
  display: grid;
  gap: 10px;
}

.agent-panel-branch-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-panel-branch-list-head strong {
  display: block;
  margin-top: 3px;
  color: #071c3f;
  font-size: 0.92rem;
  font-weight: 900;
}

.agent-panel-branch-other-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agent-panel-branch-other-summary div {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(12, 34, 75, 0.08);
  border-radius: 8px;
  background: #f8fbff;
}

.agent-panel-branch-other-summary span {
  color: #4f6483;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agent-panel-branch-other-summary strong {
  color: #071c3f;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
}

.agent-panel-branch-agent-list {
  display: grid;
  max-height: 230px;
  overflow: auto;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 9px;
}

.agent-panel-branch-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 22px;
  text-align: center;
  background: #f8fbff;
}

.agent-panel-branch-loading span {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(14, 93, 153, 0.15);
  border-top-color: #0b6f9b;
  border-radius: 999px;
  animation: agent-panel-branch-loading-spin 760ms linear infinite;
}

.agent-panel-branch-loading strong {
  color: #071c3f;
  font-size: 0.92rem;
}

.agent-panel-branch-loading p {
  margin: 0;
  color: #4f6483;
  font-size: 0.78rem;
}

.agent-panel-branch-agent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(76px, 0.24fr) minmax(130px, 0.36fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  background: #ffffff;
}

.agent-panel-branch-agent-row + .agent-panel-branch-agent-row {
  border-top: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-branch-agent-row > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.agent-panel-branch-agent-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(8, 26, 55, 0.08);
}

.agent-panel-branch-agent-avatar span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.agent-panel-branch-agent-avatar.tone-0 span {
  background: #e8f0ff;
  color: #2f65d8;
}

.agent-panel-branch-agent-avatar.tone-1 span {
  background: #e6f7ef;
  color: #168956;
}

.agent-panel-branch-agent-avatar.tone-2 span {
  background: #f2eaff;
  color: #7048d6;
}

.agent-panel-branch-agent-avatar.tone-3 span {
  background: #fff1e7;
  color: #e07026;
}

.agent-panel-branch-agent-avatar.tone-4 span {
  background: #e8fbff;
  color: #12839b;
}

.agent-panel-branch-agent-avatar.tone-5 span {
  background: #ffe8f6;
  color: #c93a9a;
}

.agent-panel-contest-modal-overlay {
  z-index: 6200;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(7, 20, 42, 0.34);
  backdrop-filter: blur(12px);
}

.agent-panel-contest-modal-card {
  display: grid;
  gap: 18px;
  width: min(620px, calc(100vw - 44px));
  max-height: min(720px, calc(100vh - 44px));
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(12, 34, 75, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 28px 72px rgba(7, 20, 42, 0.24);
  animation: agent-panel-branch-card-in 0.26s ease both;
}

.agent-panel-contest-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12, 34, 75, 0.08);
}

.agent-panel-contest-modal-header span,
.agent-panel-contest-observation span {
  display: block;
  color: #4f6483;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-panel-contest-modal-header h3 {
  margin: 4px 0 3px;
  color: #071c3f;
  font-size: 1.45rem;
  line-height: 1.08;
}

.agent-panel-contest-modal-header p,
.agent-panel-contest-section p {
  margin: 0;
  color: #4f6483;
  font-size: 0.82rem;
  font-weight: 700;
}

.agent-panel-contest-section {
  display: grid;
  gap: 12px;
}

.agent-panel-contest-section strong {
  display: block;
  margin-bottom: 4px;
  color: #071c3f;
  font-size: 1rem;
  font-weight: 900;
}

.agent-panel-contest-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agent-panel-contest-options label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 10px;
  background: #f8fbff;
  color: #071c3f;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.agent-panel-contest-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.agent-panel-contest-options label > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.agent-panel-contest-options label > span::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(12, 34, 75, 0.28);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: inset 0 0 0 4px #ffffff;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.agent-panel-contest-options input:checked + span::before {
  border-color: #2f65d8;
  background: #2f65d8;
  box-shadow: inset 0 0 0 4px #eef4ff;
}

.agent-panel-contest-options input:focus-visible + span::before {
  outline: 3px solid rgba(47, 101, 216, 0.16);
  outline-offset: 2px;
}

.agent-panel-contest-observation {
  display: grid;
  gap: 8px;
}

.agent-panel-contest-observation textarea {
  width: 100%;
  resize: vertical;
  min-height: 118px;
  padding: 12px 14px;
  border: 1px solid rgba(12, 34, 75, 0.13);
  border-radius: 10px;
  background: #ffffff;
  color: #071c3f;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
}

.agent-panel-contest-observation textarea:focus {
  outline: 3px solid rgba(47, 101, 216, 0.14);
  border-color: rgba(47, 101, 216, 0.42);
}

.agent-panel-contest-feedback {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff5f5;
  color: #b42332;
  font-size: 0.82rem;
  font-weight: 900;
}

.agent-panel-contest-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.agent-panel-contest-secondary,
.agent-panel-contest-submit {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.agent-panel-contest-secondary {
  border: 1px solid rgba(12, 34, 75, 0.12);
  background: #ffffff;
  color: #4f6483;
}

.agent-panel-contest-submit {
  border: 1px solid rgba(47, 101, 216, 0.18);
  background: #2f65d8;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(47, 101, 216, 0.18);
}

.agent-panel-branch-agent-row strong {
  min-width: 0;
  overflow: hidden;
  color: #071c3f;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-panel-branch-agent-row p {
  margin: 0;
  color: #0b2f5f;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
}

.agent-panel-branch-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  background: #ffffff;
}

.agent-panel-branch-empty strong {
  color: #071c3f;
  font-size: 0.92rem;
}

.agent-panel-branch-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f6f9fd;
}

.agent-panel-branch-total-row strong {
  color: #071c3f;
  font-size: 1rem;
  font-weight: 900;
  text-align: right;
}

.agent-panel-performance-callout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-height: 58px;
  padding: 12px 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #effbf2, #eefaf8);
}

.agent-panel-performance-callout > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-panel-performance-callout strong {
  display: block;
  margin-bottom: 3px;
  color: #071c3f;
  font-size: 0.86rem;
  font-weight: 900;
}

.agent-panel-analysis-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(12, 34, 75, 0.1);
  border-radius: 5px;
  background: #ffffff;
  color: #0b2f5f;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.08);
  cursor: pointer;
}

@media (max-width: 1440px) and (min-width: 761px) {
  body[data-page="agent-panel"] .app-shell {
    gap: 12px;
    padding: 12px;
  }

  .agent-panel-page {
    gap: 10px;
    padding: 12px;
  }

  .agent-panel-header {
    min-height: 84px;
  }

  .agent-panel-header > * {
    padding: 12px 14px;
  }

  .agent-panel-title-block {
    gap: 10px;
  }

  .agent-panel-agent-heading {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .agent-panel-avatar {
    width: 42px;
    height: 42px;
  }

  .agent-panel-agent-heading h1 {
    font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  }

  .agent-panel-agent-actions {
    gap: 6px;
  }

  .agent-panel-branch-button,
  .agent-panel-contest-button {
    min-height: 31px;
    padding: 0 10px;
    font-size: 0.64rem;
  }

  .agent-panel-kpi-strip article {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
    padding: 12px 14px;
  }

  .agent-panel-kpi-icon {
    width: 40px;
    height: 40px;
  }

  .agent-panel-kpi-strip strong {
    font-size: clamp(1.1rem, 1.25vw, 1.42rem);
  }

  .agent-panel-trend-layout {
    grid-template-columns: minmax(0, 2.45fr) repeat(2, minmax(190px, 0.82fr));
    gap: 10px;
  }

  .agent-panel-chart-card {
    gap: 12px;
    padding: 16px 18px 12px;
  }

  .agent-panel-chart-card .trend-chart-shell {
    min-height: 190px;
  }

  .agent-panel-chart-card .trend-chart {
    height: 220px;
    min-height: 220px;
  }

  .agent-panel-emission-card {
    gap: 8px;
    padding: 12px;
  }

  .agent-panel-emission-donut-wrap {
    min-height: 116px;
  }

  .agent-panel-emission-donut {
    width: 112px;
  }

  .agent-panel-emission-donut-core {
    width: 68px;
    height: 68px;
  }

  .agent-panel-bottom-grid {
    gap: 10px;
  }

  .agent-panel-detail-card {
    gap: 9px;
    min-height: 108px;
    padding: 14px;
  }

  .agent-panel-performance-callout {
    padding: 12px 14px;
  }
}

@media (max-height: 800px) and (min-width: 761px) {
  body[data-page="agent-panel"] .app-shell {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .agent-panel-page {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .agent-panel-chart-card .trend-chart {
    height: 205px;
    min-height: 205px;
  }

  .agent-panel-emission-donut-wrap {
    min-height: 104px;
  }

  .agent-panel-emission-donut {
    width: 102px;
  }

  .agent-panel-emission-donut-core {
    width: 62px;
    height: 62px;
  }

  .agent-panel-branch-modal-overlay {
    padding: 32px 48px;
  }

  .agent-panel-branch-modal-stage:not(.is-expanded):not(.is-result-expanded):not(.is-switching-to-result) {
    width: min(820px, calc(100vw - 96px));
  }

  .agent-panel-branch-modal-stage,
  .agent-panel-branch-modal-stage.is-expanded,
  .agent-panel-branch-modal-stage.is-result-expanded,
  .agent-panel-branch-modal-stage.is-switching-to-result {
    max-height: calc(100vh - 64px);
  }

  .agent-panel-branch-modal-card,
  .agent-panel-branch-insight-panel {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .agent-panel-branch-modal-card {
    gap: 8px;
    padding: 12px;
  }

  .agent-panel-branch-modal-header {
    min-height: 62px;
    padding-bottom: 7px;
  }

  .agent-panel-branch-modal-header h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  }

  .agent-panel-branch-modal-header .agent-panel-branch-result-label {
    bottom: 7px;
    gap: 4px;
    padding: 2px 0;
    font-size: 0.62rem;
    letter-spacing: 0.045em;
    overflow: visible;
    transition: none;
  }

  .agent-panel-branch-modal-header .agent-panel-branch-result-label:hover,
  .agent-panel-branch-modal-header .agent-panel-branch-result-label:focus-visible {
    transform: none;
  }

  .agent-panel-branch-modal-header .agent-panel-branch-result-label img {
    width: 18px;
    height: 11px;
  }

  .agent-panel-branch-modal-header .agent-panel-branch-result-label:hover img,
  .agent-panel-branch-modal-header .agent-panel-branch-result-label:focus-visible img {
    transform: none;
  }

  .agent-panel-branch-modal-header .agent-panel-branch-result-label span::after {
    display: none;
    animation: none;
  }

  .agent-panel-branch-insight-button {
    top: -18px;
    left: -18px;
    width: 48px;
    height: 48px;
    padding: 8px;
  }

  .agent-panel-branch-insight-button img {
    width: 28px;
    height: 28px;
  }

  .agent-panel-branch-projection {
    gap: 4px;
    padding: 9px 12px;
  }

  .agent-panel-branch-projection strong {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
  }

  .agent-panel-branch-metrics {
    gap: 8px;
  }

  .agent-panel-branch-metrics article {
    gap: 4px;
    min-height: 74px;
    padding: 8px 10px;
  }

  .agent-panel-branch-list-block {
    gap: 7px;
  }

  .agent-panel-branch-other-summary {
    gap: 8px;
  }

  .agent-panel-branch-other-summary div {
    padding: 7px 9px;
  }

  .agent-panel-branch-agent-list {
    max-height: 116px;
  }

  .agent-panel-branch-agent-row {
    min-height: 44px;
    padding: 5px 9px;
  }

  .agent-panel-branch-agent-avatar {
    width: 36px;
    height: 36px;
  }

  .agent-panel-branch-agent-avatar span {
    width: 27px;
    height: 27px;
  }

  .agent-panel-branch-total-row {
    padding: 7px 10px;
  }
}

@media (max-width: 1280px) {
  .agent-panel-header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agent-panel-trend-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-panel-trend-layout > .agent-panel-chart-card {
    grid-column: 1 / -1;
  }

  .agent-panel-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-panel-bottom-grid {
    grid-template-columns: minmax(220px, 1.05fr) minmax(280px, 1.28fr) minmax(160px, 0.62fr);
  }

  .agent-panel-quantity-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .agent-panel-quantity-side-block {
    min-height: auto;
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid rgba(12, 34, 75, 0.1);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .agent-panel-page {
    padding: 12px;
  }

  .agent-panel-chart-card {
    width: 100%;
  }

  .agent-panel-header,
  .agent-panel-kpi-strip,
  .agent-panel-bottom-grid {
    grid-template-columns: 1fr;
  }

  .agent-panel-trend-layout {
    grid-template-columns: 1fr;
  }

  .agent-panel-trend-layout > .agent-panel-chart-card {
    grid-column: 1;
  }

  .agent-panel-header > * + *,
  .agent-panel-kpi-strip article + article {
    border-left: 0;
    border-top: 1px solid rgba(12, 34, 75, 0.08);
  }

  .agent-panel-chart-head,
  .agent-panel-performance-callout {
    flex-direction: column;
    align-items: stretch;
  }

  .agent-panel-chart-card .trend-chart-tools {
    justify-content: start;
    flex-wrap: wrap;
  }

  .agent-panel-agent-title-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .agent-panel-agent-actions {
    justify-self: start;
    flex-wrap: wrap;
  }

  .agent-panel-contest-options,
  body[data-page="contestacoes"] .contestacao-metrics {
    grid-template-columns: 1fr;
  }

  .agent-panel-branch-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-panel-branch-agent-row {
    grid-template-columns: minmax(0, 1fr) minmax(68px, 0.24fr) minmax(118px, 0.36fr);
  }

  .agent-panel-branch-insight-kpis {
    grid-template-columns: 1fr;
  }

  .agent-panel-branch-share-row {
    grid-template-columns: minmax(150px, 0.48fr) minmax(0, 1fr) 50px;
  }
}

@media (max-width: 1100px) and (min-width: 881px) {
  .login-panel {
    grid-template-columns: minmax(360px, 1fr) minmax(340px, 440px);
  }

  .login-brand {
    min-height: 610px;
  }

  .login-brand-copy {
    margin-top: 76px;
  }

  .login-card {
    padding: 56px 38px;
  }
}

@media (max-width: 880px) {
  .login-page {
    align-items: start;
    padding: 18px 14px 22px;
  }

  .login-panel {
    grid-template-columns: 1fr;
  }

  .login-brand,
  .login-card {
    border-radius: 14px;
  }

  .login-brand {
    min-height: 520px;
    padding: 28px;
  }

  .login-brand-logo {
    width: min(118px, 32%);
  }

  .login-brand-copy {
    margin-top: 72px;
  }

  .login-card {
    padding: 32px 26px;
  }

  .login-brand h1 {
    max-width: 11ch;
    font-size: 2.72rem;
  }
}

@media (max-width: 520px) {
  .login-brand {
    min-height: 500px;
    padding: 24px 22px;
    background:
      radial-gradient(circle at 76% 68%, rgba(9, 73, 153, 0.34) 0 16%, transparent 17%),
      radial-gradient(circle at 78% 70%, transparent 0 25%, rgba(16, 88, 180, 0.22) 26% 31%, transparent 32%),
      linear-gradient(135deg, rgba(5, 26, 62, 0.98), rgba(0, 58, 128, 0.95)),
      linear-gradient(145deg, var(--login-menu-blue-deep), var(--login-menu-blue));
  }

  .login-brand-footer {
    grid-template-columns: 52px 1fr;
    gap: 14px;
    padding: 16px;
  }

  .login-brand-footer::after {
    left: 76px;
  }

  .login-brand-copy {
    margin-top: 58px;
  }

  .login-brand-logo {
    width: 96px;
  }

  .login-shield-large {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .login-shield-large svg {
    width: 38px;
    height: 38px;
  }

  .login-brand h1 {
    font-size: 2.22rem;
  }

  .login-card h2 {
    font-size: 1.72rem;
  }

  .login-page-footnote {
    align-items: flex-start;
    font-size: 0.86rem;
    text-align: left;
  }
}

.login-brand-secure .eyebrow,
.login-card-eyebrow .eyebrow {
  padding-left: 0;
}

.login-brand-secure .eyebrow::before,
.login-card-eyebrow .eyebrow::before {
  content: none;
}

.login-brand-footer p {
  color: rgba(255, 255, 255, 0.92);
}
/* Visual reformulado da pagina de Analise de Performance */
body[data-page="analysis"] {
  background: #f5f8fc;
}

body[data-page="analysis"]::before {
  display: none;
}

body[data-page="analysis"] .app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px;
  gap: 16px;
  box-sizing: border-box;
}

body[data-page="analysis"] .sidebar {
  display: flex;
}

body[data-page="analysis"] .content {
  gap: 16px;
  width: 100%;
}

body[data-page="analysis"] .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 640px);
  align-items: center;
  gap: 24px;
  min-height: 122px;
  padding: 22px 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

body[data-page="analysis"] .hero::before,
body[data-page="analysis"] .hero::after,
body[data-page="analysis"] .mini-card::before,
body[data-page="analysis"] .mini-card::after,
body[data-page="analysis"] .analysis-kpi-card::before,
body[data-page="analysis"] .analysis-kpi-card::after {
  display: none;
}

body[data-page="analysis"] .hero .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #1d5a9d;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

body[data-page="analysis"] .hero .eyebrow::before {
  content: "+";
  margin-right: 5px;
  font-size: 0.82rem;
}

body[data-page="analysis"] .hero h2 {
  margin: 0;
  color: #102a56;
  font-size: clamp(1.75rem, 2.2vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: 0;
}

body[data-page="analysis"] .hero p {
  max-width: 650px;
  margin-top: 10px;
  color: #526985;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.55;
}

body[data-page="analysis"] .analysis-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 14px;
  justify-content: stretch;
}

body[data-page="analysis"] .period-box {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dde8f6;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(21, 44, 80, 0.05);
}

body[data-page="analysis"] .period-box label {
  margin-bottom: 9px;
  color: #5c708f;
  font-size: 0.74rem;
  font-weight: 800;
}

body[data-page="analysis"] .period-trigger {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d9e5f4;
  border-radius: 8px;
  background: #fbfdff;
  color: #102a56;
  font-size: 0.86rem;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 14px;
  align-items: stretch;
}

body[data-page="analysis"] .analysis-summary-grid .mini-card {
  min-height: 154px;
  padding: 22px 24px;
  border: 1px solid #dde8f6;
  border-radius: 10px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(21, 44, 80, 0.04),
    0 14px 32px rgba(21, 44, 80, 0.07);
}

body[data-page="analysis"] .analysis-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="analysis"] .analysis-kpi-eyebrow {
  margin-bottom: 12px;
  color: #7a8da9;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

body[data-page="analysis"] .analysis-kpi-item {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 22px 18px 18px 76px;
  border: 1px solid #e1ebf7;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 22px rgba(21, 44, 80, 0.045);
}

body[data-page="analysis"] .analysis-kpi-item::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #9fc7ff;
  opacity: 0.65;
}

body[data-page="analysis"] .analysis-kpi-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 22px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef6ff, #dcecff);
  box-shadow:
    inset 0 0 0 1px rgba(42, 94, 168, 0.08),
    0 10px 20px rgba(21, 44, 80, 0.08);
  transform: translateY(-50%);
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(1)::before {
  background:
    url("../assets/icons/icone-dia-anterior.png") center / 22px 22px no-repeat,
    linear-gradient(135deg, #eef6ff, #dcecff);
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(2)::before {
  background:
    url("../assets/icons/icone-quantidade.png") center / 22px 22px no-repeat,
    linear-gradient(135deg, #e9fbff, #daf6f6);
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(2)::after {
  background: #76cfd6;
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(3)::before {
  background:
    url("../assets/icons/icone-faturamento.png") center / 22px 22px no-repeat,
    linear-gradient(135deg, #eaf9ef, #d9f0e4);
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(3)::after {
  background: #66bd8a;
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(4)::before {
  background:
    url("../assets/icons/icone-meta-quantidade.png") center / 22px 22px no-repeat,
    linear-gradient(135deg, #f2edff, #e8dcff);
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(4)::after {
  background: #a88be8;
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(5)::before {
  background:
    url("../assets/icons/icone-meta-quantidade.png") center / 22px 22px no-repeat,
    linear-gradient(135deg, #eaf4ff, #dceeff);
}

body[data-page="analysis"] .analysis-kpi-item:nth-child(5)::after {
  background: #6ca8e8;
}

body[data-page="analysis"] .analysis-kpi-item span {
  display: block;
  margin-bottom: 8px;
  color: #667895;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-page="analysis"] .analysis-kpi-item strong {
  color: #102a56;
  font-size: clamp(1.32rem, 1.5vw, 1.56rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0;
}

body[data-page="analysis"] .analysis-reference-card {
  display: flex;
  align-items: center;
}

body[data-page="analysis"] .analysis-reference-copy span {
  margin-bottom: 12px;
  color: #7a8da9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="analysis"] .analysis-reference-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #102a56;
  font-size: 1rem;
}

body[data-page="analysis"] .analysis-reference-copy strong::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, #dcecff, #f5faff);
  box-shadow: inset 0 0 0 1px rgba(42, 94, 168, 0.14);
}

body[data-page="analysis"] .analysis-summary-inline {
  margin-top: 14px;
  color: #526985;
  font-weight: 700;
}

body[data-page="analysis"] .analysis-actions-card {
  display: grid;
  align-items: center;
}

body[data-page="analysis"] .analysis-action-row {
  gap: 10px;
}

body[data-page="analysis"] .analysis-quickview-button {
  min-height: 42px;
  border: 1px solid #cfddec;
  border-radius: 8px;
  background: #ffffff;
  color: #102a56;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-quickview-button.secondary {
  background: #ffffff;
}

body[data-page="analysis"] .analysis-quickview-button:hover,
body[data-page="analysis"] .analysis-quickview-button:focus-visible {
  border-color: #9cbce2;
  background: #f7fbff;
  box-shadow: 0 8px 18px rgba(21, 44, 80, 0.08);
}

body[data-page="analysis"] .analysis-region-card {
  padding: 0;
  border: 1px solid #dce7f5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(21, 44, 80, 0.08);
  overflow: hidden;
}

body[data-page="analysis"] .analysis-region-top {
  min-height: 68px;
  margin: 0;
  padding: 16px 22px;
  background:
    linear-gradient(135deg, rgba(15, 43, 87, 0.98), rgba(28, 91, 168, 0.96)),
    #12376e;
}

body[data-page="analysis"] .analysis-region-badge {
  gap: 4px;
}

body[data-page="analysis"] .analysis-region-badge .analysis-badge-label {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.7rem;
}

body[data-page="analysis"] .analysis-region-badge h3 {
  color: #ffffff;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

body[data-page="analysis"] .analysis-branch-list {
  gap: 0;
  padding: 18px 22px 0;
}

body[data-page="analysis"] .analysis-branch-section {
  padding: 18px 0 18px;
  border-top: 1px solid #e4edf7;
}

body[data-page="analysis"] .analysis-branch-section:first-child {
  padding-top: 0;
  border-top: 0;
}

body[data-page="analysis"] .analysis-branch-row {
  margin-bottom: 12px;
}

body[data-page="analysis"] .analysis-branch-badge {
  min-width: 148px;
  padding: 12px 14px 12px 46px;
  border: 1px solid #e0ebf7;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-branch-badge::before {
  top: 13px;
  left: 14px;
  bottom: auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background:
    url("../assets/icons/predio-de-escritorios.png") center / 15px 15px no-repeat,
    linear-gradient(135deg, #edf7ff, #f7fbff);
  box-shadow: inset 0 0 0 1px rgba(42, 94, 168, 0.12);
}

body[data-page="analysis"] .analysis-branch-badge .analysis-badge-label {
  color: #6f819d;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

body[data-page="analysis"] .analysis-branch-badge h4 {
  color: #1c4c8c;
  font-size: 0.9rem;
}

body[data-page="analysis"] .analysis-branch-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="analysis"] .analysis-branch-relief-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-page="analysis"] .analysis-table th,
body[data-page="analysis"] .analysis-table td {
  height: 46px;
  padding: 8px 10px;
  border-top: 1px solid #e4edf7;
  color: #102a56;
}

body[data-page="analysis"] .analysis-table thead th {
  height: 36px;
  color: #667895;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

body[data-page="analysis"] .analysis-table th:first-child,
body[data-page="analysis"] .analysis-table td:first-child {
  width: 34%;
  padding-left: 0;
  text-align: left;
}

body[data-page="analysis"] .analysis-table th:nth-child(5),
body[data-page="analysis"] .analysis-table td:nth-child(5) {
  width: 19%;
}

body[data-page="analysis"] .analysis-table th:nth-child(n + 2),
body[data-page="analysis"] .analysis-table td:nth-child(n + 2) {
  text-align: center;
}

body[data-page="analysis"] .analysis-table td {
  font-size: 0.82rem;
  font-weight: 700;
}

body[data-page="analysis"] .analysis-table tbody tr:hover {
  background: #f8fbff;
}

body[data-page="analysis"] .analysis-agent-label {
  gap: 10px;
}

body[data-page="analysis"] .analysis-agent-main {
  gap: 7px;
}

body[data-page="analysis"] .analysis-agent-name {
  color: #102a56;
  font-size: 0.82rem;
  font-weight: 800;
}

body[data-page="analysis"] .analysis-adjustment-actions {
  gap: 6px;
}

body[data-page="analysis"] .analysis-agent-adjustment-groups {
  gap: 7px;
}

body[data-page="analysis"] .analysis-adjustment-button {
  width: 23px;
  height: 23px;
  border-radius: 6px;
  border-color: #bdd8f7;
  background: #ffffff;
  color: #1b73d1;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-adjustment-button.is-negative {
  border-color: #ffc3c8;
  background: #fffafb;
  color: #da4653;
}

body[data-page="analysis"] .analysis-adjustment-badge {
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-missing-button {
  width: 21px;
  height: 21px;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-performance-cell {
  display: grid;
  grid-template-columns: minmax(120px, 260px) 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
}

body[data-page="analysis"] .analysis-performance-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: #dce5ef;
  overflow: hidden;
}

body[data-page="analysis"] .analysis-performance-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f67bf, #78b8ff);
}

body[data-page="analysis"] .analysis-performance-cell strong {
  color: #102a56;
  font-size: 0.78rem;
  text-align: left;
}

body[data-page="analysis"] .analysis-branch-totals {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4edf7;
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill,
body[data-page="analysis"] .analysis-region-footer-pill {
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid #d9e5f4;
  border-radius: 999px;
  background: #ffffff;
  color: #667895;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 18px rgba(21, 44, 80, 0.05);
}

body[data-page="analysis"] .analysis-total-pill strong,
body[data-page="analysis"] .analysis-region-footer-pill strong {
  color: #102a56;
  font-size: 0.82rem;
  line-height: 1;
}

body[data-page="analysis"] .analysis-total-pill.revenue,
body[data-page="analysis"] .analysis-region-footer-pill.revenue {
  background: #eaf4ff;
  border-color: #cfe5ff;
  color: #1c4c8c;
}

body[data-page="analysis"] .analysis-region-footer {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 18px 22px 22px;
  border-top: 1px solid #e4edf7;
}

body[data-page="analysis"] .analysis-region-footer-pill {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 58px;
  padding: 13px 18px;
  border-radius: 26px;
}

body[data-page="analysis"] .analysis-region-footer-pill strong {
  margin-top: 4px;
  font-size: 1rem;
}

body[data-page="analysis"] .analysis-region-footer-pill::before,
body[data-page="analysis"] .analysis-region-footer-pill::after {
  display: none;
}

body[data-page="analysis"] #analysisPeriodPicker .period-panel {
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

body[data-page="analysis"] .analysis-filter-row > .dashboard-period-box:not(.analysis-reference-picker) {
  min-width: 250px;
  padding: 18px;
  border: 1px solid rgba(29, 60, 108, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(16, 44, 86, 0.1);
}

body[data-page="analysis"] .analysis-filter-row > .dashboard-period-box:not(.analysis-reference-picker) label {
  color: #43577a;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-page="analysis"] #analysisPeriodPicker .period-trigger {
  min-height: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  text-transform: capitalize;
}

body[data-page="analysis"] #analysisPeriodPicker .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

body[data-page="analysis"] #analysisPeriodPicker .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

body[data-page="analysis"] #analysisPeriodPicker .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

body[data-page="analysis"] #analysisPeriodPicker .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="analysis"] #analysisPeriodPicker .period-month-button {
  min-height: 48px;
  border-radius: 9px;
  font-size: 0.82rem;
}

body[data-page="analysis"] #analysisPeriodPicker .period-month-button.active::after {
  display: none;
}

@media (max-width: 1180px) {
  body[data-page="analysis"] .hero {
    grid-template-columns: 1fr;
  }

  body[data-page="analysis"] .analysis-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="analysis"] .analysis-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="analysis"] .app-shell {
    padding: 10px;
  }

  body[data-page="analysis"] .hero,
  body[data-page="analysis"] .analysis-summary-grid .mini-card {
    padding: 16px;
  }

  body[data-page="analysis"] .analysis-filter-row,
  body[data-page="analysis"] .analysis-kpi-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="analysis"] .analysis-branch-list {
    padding: 14px 14px 0;
  }

  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  body[data-page="analysis"] .analysis-branch-totals {
    justify-content: stretch;
  }

  body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill,
  body[data-page="analysis"] .analysis-region-footer-pill {
    width: 100%;
    justify-content: space-between;
  }

  body[data-page="analysis"] .analysis-table-shell {
    overflow-x: auto;
  }

  body[data-page="analysis"] .analysis-table {
    min-width: 880px;
  }
}

@media (max-width: 1180px) {
  body[data-page="form"] .form-hero {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  body[data-page="form"] .period-box {
    grid-column: 1 / -1;
  }

  body[data-page="form"] .summary-grid,
  body[data-page="form"] .base-data-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="form"] .base-data-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="form"] .form-hero {
    grid-template-columns: 1fr;
  }

  body[data-page="form"] .form-hero-icon {
    width: 58px;
    height: 58px;
  }

  body[data-page="form"] .summary-grid,
  body[data-page="form"] .base-data-summary-grid,
  body[data-page="form"] .base-data-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="form"] .summary-card,
  body[data-page="form"] .base-data-card,
  body[data-page="form"] .form-card {
    padding: 18px;
  }

  body[data-page="form"] .form-stat-card,
  body[data-page="form"] .base-data-metric-card {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 14px;
  }

  body[data-page="form"] .form-stat-icon,
  body[data-page="form"] .base-data-metric-card .form-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  body[data-page="form"] .base-data-heading {
    flex-direction: column;
  }

  body[data-page="form"] .base-data-heading-badges {
    width: 100%;
  }

  body[data-page="form"] .import-models-modal {
    padding: 18px;
  }

  body[data-page="form"] .import-models-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="form"] .import-model-card {
    min-height: 0;
  }

  body[data-page="form"] .base-data-overlay .base-data-modal {
    padding: 18px;
  }

  body[data-page="form"] .base-data-overlay .base-data-modal .modal-header,
  body[data-page="form"] .base-data-overlay .base-data-modal .modal-header > div,
  body[data-page="form"] .base-data-overlay .base-data-modal .base-data-modal-grid,
  body[data-page="form"] .base-data-overlay .base-data-modal .base-data-details {
    grid-template-columns: 1fr;
  }

  body[data-page="form"] .base-data-overlay .base-data-modal .modal-header > div::before {
    width: 48px;
    height: 48px;
  }

  body[data-page="form"] .base-data-overlay .base-data-modal .base-data-upload-box {
    padding-left: 18px;
    padding-top: 72px;
  }

  body[data-page="form"] .base-data-overlay .base-data-modal .base-data-upload-box::before {
    top: 18px;
  }

  body[data-page="form"] .base-data-overlay .base-data-modal .base-data-history-block .history-item {
    grid-template-columns: 1fr 42px;
    grid-template-areas:
      "file action"
      "imported action"
      "rows action"
      "value action";
  }
}

/* Ações do formulário - padrão visual atual */
body[data-page="form"] .form-card > .section-heading .section-actions {
  gap: 8px;
}

body[data-page="form"] .form-section-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

body[data-page="form"] .form-section-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

body[data-page="form"] .form-section-action-compact {
  min-height: 34px;
  padding: 0 11px;
  font-size: 0.74rem;
}

body[data-page="form"] .form-section-action-compact svg {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

body[data-page="form"] .form-section-action-primary {
  border-color: #0757ca;
  background: #0757ca;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(7, 87, 202, 0.16);
}

body[data-page="form"] .form-section-action-primary:hover,
body[data-page="form"] .form-section-action-primary:focus-visible {
  transform: translateY(-1px);
  border-color: #0649aa;
  background: #0649aa;
  box-shadow: 0 10px 22px rgba(7, 87, 202, 0.22);
  outline: none;
}

body[data-page="form"] .form-section-action-secondary {
  border-color: #d3deeb;
  background: #ffffff;
  color: #405675;
  box-shadow: 0 1px 2px rgba(8, 26, 55, 0.04);
}

body[data-page="form"] .form-section-action-secondary svg {
  color: #b53a4b;
}

body[data-page="form"] .form-section-action-secondary:hover,
body[data-page="form"] .form-section-action-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: #e3b8bf;
  background: #fff7f8;
  color: #9f2f40;
  box-shadow: 0 8px 18px rgba(142, 41, 56, 0.08);
  outline: none;
}

body[data-page="form"] .form-section-action:disabled {
  transform: none;
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

body[data-page="form"] .base-data-cleanup-button {
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 720px) {
  body[data-page="form"] .form-card > .section-heading .section-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body[data-page="form"] .form-section-action {
    width: 100%;
  }
}

/* Meta detalhada - mesma linguagem visual da nova tela de preenchimento */
body[data-page="form"] .detailed-meta-modal {
  width: min(1500px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  background: #f7f9fc;
  box-shadow: 0 28px 70px rgba(8, 26, 55, 0.22);
}

body[data-page="form"] .detailed-meta-modal-header {
  position: sticky;
  top: 0;
  z-index: 8;
  align-items: center;
  flex-direction: row;
  margin: 0;
  padding: 22px 24px;
  border-bottom: 1px solid #e2eaf4;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

body[data-page="form"] .detailed-meta-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body[data-page="form"] .detailed-meta-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eef5ff;
  color: #0757ca;
}

body[data-page="form"] .detailed-meta-heading-icon svg {
  width: 27px;
  height: 27px;
}

body[data-page="form"] .detailed-meta-heading-copy {
  min-width: 0;
}

body[data-page="form"] .detailed-meta-modal-header .eyebrow {
  margin: 0 0 4px;
  color: #0757ca;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

body[data-page="form"] .detailed-meta-modal-header .eyebrow::before {
  content: none;
}

body[data-page="form"] .detailed-meta-modal-header h3 {
  margin: 0;
  color: #071f4d;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="form"] .detailed-meta-modal-header p {
  max-width: 820px;
  margin: 5px 0 0;
  color: #506482;
  font-size: 0.86rem;
  line-height: 1.45;
}

body[data-page="form"] .detailed-meta-modal .modal-close {
  width: 40px;
  height: 40px;
  border-color: #d6e1ee;
  border-radius: 10px;
  background: #f7f9fc;
}

body[data-page="form"] .detailed-meta-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 16px 20px 0;
  padding: 12px 14px;
  border: 1px solid #e0e8f3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 26, 55, 0.035);
}

body[data-page="form"] .detailed-meta-status-strip,
body[data-page="form"] .detailed-meta-actions {
  margin: 0;
}

body[data-page="form"] .detailed-meta-status-strip {
  gap: 8px;
}

body[data-page="form"] .detailed-meta-status-strip .status-badge {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: #edf4ff;
  color: #275b9d;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

body[data-page="form"] .detailed-meta-status-strip .status-badge.success {
  background: #e5f6ed;
  color: #087446;
}

body[data-page="form"] .detailed-meta-save-button,
body[data-page="form"] .detailed-meta-export-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  box-shadow: none;
}

body[data-page="form"] .detailed-meta-save-button {
  border-color: #0757ca;
  background: #0757ca;
  color: #ffffff;
}

body[data-page="form"] .detailed-meta-export-button {
  border-color: #d3deeb;
  background: #ffffff;
  color: #173b6f;
}

body[data-page="form"] .detailed-meta-save-button:hover,
body[data-page="form"] .detailed-meta-save-button:focus-visible {
  border-color: #0649aa;
  background: #0649aa;
  box-shadow: 0 8px 18px rgba(7, 87, 202, 0.18);
  outline: none;
}

body[data-page="form"] .detailed-meta-export-button:hover,
body[data-page="form"] .detailed-meta-export-button:focus-visible {
  border-color: #9eb8da;
  background: #f7faff;
  box-shadow: 0 8px 18px rgba(8, 26, 55, 0.07);
  outline: none;
}

body[data-page="form"] .detailed-meta-workspace {
  gap: 14px;
  padding: 14px 20px 22px;
}

body[data-page="form"] .detailed-meta-overview {
  gap: 14px;
  padding: 18px;
  border-color: #dce6f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 26, 55, 0.04), 0 8px 22px rgba(8, 26, 55, 0.045);
}

body[data-page="form"] .detailed-meta-overview::before,
body[data-page="form"] .detailed-meta-overview::after,
body[data-page="form"] .detailed-meta-overview-caption::before,
body[data-page="form"] .detailed-meta-overview-caption::after {
  content: none;
}

body[data-page="form"] .detailed-meta-overview-caption {
  justify-items: start;
  gap: 3px;
  padding: 0;
}

body[data-page="form"] .detailed-meta-overview-caption .eyebrow {
  margin: 0;
  color: #4f6584;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

body[data-page="form"] .detailed-meta-overview-caption .eyebrow::before {
  content: none;
}

body[data-page="form"] .detailed-meta-overview-caption h4 {
  max-width: none;
  color: #071f4d;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

body[data-page="form"] .detailed-meta-overview-scroll {
  padding: 0;
  border: 1px solid #dfe8f2;
  border-radius: 9px;
}

body[data-page="form"] .detailed-meta-overview-grid {
  grid-template-columns: minmax(235px, 1.45fr) repeat(3, minmax(150px, 1fr));
  min-width: 700px;
}

body[data-page="form"] .detailed-meta-overview-head {
  border: 0;
  border-radius: 0;
  background: #edf4fc;
}

body[data-page="form"] .detailed-meta-overview-head .detailed-meta-overview-label,
body[data-page="form"] .detailed-meta-overview-head-cell {
  min-height: 42px;
  padding: 9px 11px;
  border-right-color: #dce6f2;
  background: #edf4fc;
  color: #27466e;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

body[data-page="form"] .detailed-meta-overview-row,
body[data-page="form"] .detailed-meta-overview-row:last-child {
  border: 0;
  border-radius: 0;
}

body[data-page="form"] .detailed-meta-overview-row .detailed-meta-overview-label,
body[data-page="form"] .detailed-meta-overview-value {
  min-height: 50px;
  padding: 10px 12px;
  border-top-color: #e4ebf4;
  background: #ffffff;
  color: #17385f;
  font-size: 0.84rem;
}

body[data-page="form"] .detailed-meta-overview-row .detailed-meta-overview-label {
  padding-left: 30px;
  text-transform: none;
}

body[data-page="form"] .detailed-meta-overview-row .detailed-meta-overview-label::before {
  left: 12px;
  top: 13px;
  bottom: 13px;
  width: 3px;
  background: #4585d8;
}

body[data-page="form"] .detailed-meta-overview-row:nth-child(odd):not(.grand-total) .detailed-meta-overview-label,
body[data-page="form"] .detailed-meta-overview-row:nth-child(odd):not(.grand-total) .detailed-meta-overview-value {
  background: #f9fbfe;
}

body[data-page="form"] .detailed-meta-overview-row.grand-total .detailed-meta-overview-label,
body[data-page="form"] .detailed-meta-overview-row.grand-total .detailed-meta-overview-value {
  border-top-color: #c8d9ed;
  background: #edf5ff;
  color: #0f376d;
  box-shadow: none;
}

body[data-page="form"] .detailed-meta-overview-row.grand-total .detailed-meta-overview-label::before {
  background: #d99a16;
}

body[data-page="form"] .detailed-meta-region-list {
  gap: 14px;
}

body[data-page="form"] .detailed-meta-region-card {
  gap: 14px;
  padding: 0;
  overflow: hidden;
  border-color: #dce5f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 26, 55, 0.04), 0 8px 22px rgba(8, 26, 55, 0.045);
}

body[data-page="form"] .detailed-meta-region-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid #e5ecf4;
  background: #fbfcfe;
}

body[data-page="form"] .detailed-meta-region-head .eyebrow {
  margin: 0;
  color: #0757ca;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

body[data-page="form"] .detailed-meta-region-head .eyebrow::before {
  content: none;
}

body[data-page="form"] .detailed-meta-region-head h4 {
  margin: 4px 0 0;
  color: #071f4d;
  font-size: 1.15rem;
  letter-spacing: 0;
}

body[data-page="form"] .detailed-meta-region-pill {
  min-height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  background: #edf4ff;
  color: #0757ca;
  font-size: 0.74rem;
  font-weight: 800;
}

body[data-page="form"] .detailed-meta-region-stack {
  gap: 12px;
  padding: 0 14px 14px;
}

body[data-page="form"] .detailed-meta-branch-card,
body[data-page="form"] .detailed-meta-region-total {
  gap: 10px;
  padding: 12px;
  border-color: #e0e8f2;
  border-radius: 10px;
  background: #ffffff;
}

body[data-page="form"] .detailed-meta-region-total {
  background: #f3f7fc;
}

body[data-page="form"] .detailed-meta-branch-badge {
  min-height: 38px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #071f4d;
}

body[data-page="form"] .detailed-meta-branch-badge .eyebrow {
  padding: 4px 8px;
  border-radius: 6px;
  background: #edf4ff;
  color: #0757ca;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

body[data-page="form"] .detailed-meta-branch-badge .eyebrow::before {
  content: none;
}

body[data-page="form"] .detailed-meta-branch-badge h5 {
  color: #17385f;
  font-size: 0.94rem;
  letter-spacing: 0;
}

body[data-page="form"] .detailed-meta-add-button {
  width: 34px;
  height: 34px;
  border-color: #b9d0ee;
  border-radius: 8px;
  background: #edf4ff;
  color: #0757ca;
}

body[data-page="form"] .detailed-meta-add-agent-panel {
  border-color: #d7e4f3;
  border-radius: 8px;
  background: #f5f9ff;
}

body[data-page="form"] .detailed-meta-add-agent-input,
body[data-page="form"] .detailed-meta-add-agent-confirm,
body[data-page="form"] .detailed-meta-add-agent-cancel {
  height: 36px;
  border-radius: 7px;
}

body[data-page="form"] .detailed-meta-add-agent-confirm {
  border-color: #0757ca;
  background: #0757ca;
}

body[data-page="form"] .detailed-meta-grid-scroll {
  border-color: #dfe7f1;
  border-radius: 8px;
}

body[data-page="form"] .detailed-meta-grid {
  grid-template-columns: minmax(260px, 1.65fr) repeat(3, minmax(150px, 1fr));
  min-width: 730px;
}

body[data-page="form"] .detailed-meta-grid-head {
  background: #edf4fc;
}

body[data-page="form"] .detailed-meta-head-label {
  min-height: 42px;
  padding: 9px 10px;
  border-right: 1px solid #dce6f2;
  border-bottom-color: #d7e2ef;
  color: #27466e;
  font-size: 0.67rem;
  letter-spacing: 0.04em;
}

body[data-page="form"] .detailed-meta-agent-row,
body[data-page="form"] .detailed-meta-agent-row:nth-child(odd) {
  background: #ffffff;
}

body[data-page="form"] .detailed-meta-agent-row:nth-child(even) {
  background: #f9fbfe;
}

body[data-page="form"] .detailed-meta-agent-row > *,
body[data-page="form"] .detailed-meta-total-row > * {
  padding: 9px 10px;
  border-right: 1px solid #e7edf5;
  border-bottom-color: #e3eaf3;
}

body[data-page="form"] .detailed-meta-agent-cell {
  min-height: 48px;
}

body[data-page="form"] .detailed-meta-agent-cell strong {
  color: #17385f;
  font-size: 0.84rem;
}

body[data-page="form"] .detailed-meta-agent-chip {
  min-height: 22px;
  padding: 0 8px;
  background: #edf4ff;
  color: #275b9d;
  font-size: 0.64rem;
}

body[data-page="form"] .detailed-meta-edit-button,
body[data-page="form"] .detailed-meta-remove-button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

body[data-page="form"] .detailed-meta-field input {
  width: min(100%, 128px);
  min-height: 36px;
  padding: 0 9px;
  border-color: #cfdae8;
  border-radius: 7px;
  background: #ffffff;
  color: #17385f;
  font-size: 0.82rem;
  font-weight: 700;
}

body[data-page="form"] .detailed-meta-field input:hover {
  border-color: #a9bfdc;
}

body[data-page="form"] .detailed-meta-field input:focus {
  border-color: #6da3e7;
  box-shadow: 0 0 0 3px rgba(7, 87, 202, 0.1);
}

body[data-page="form"] .detailed-meta-total-row.branch {
  background: #f1f6fc;
}

body[data-page="form"] .detailed-meta-total-row.region {
  background: #e8f1fc;
}

body[data-page="form"] .detailed-meta-total-label,
body[data-page="form"] .detailed-meta-total-value {
  min-height: 46px;
  color: #153a68;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  body[data-page="form"] .detailed-meta-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="form"] .detailed-meta-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 620px) {
  body[data-page="form"] .detailed-meta-modal {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 12px;
  }

  body[data-page="form"] .detailed-meta-modal-header {
    align-items: flex-start;
    padding: 16px;
  }

  body[data-page="form"] .detailed-meta-heading {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  body[data-page="form"] .detailed-meta-heading-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  body[data-page="form"] .detailed-meta-modal-header p {
    display: none;
  }

  body[data-page="form"] .detailed-meta-toolbar {
    margin: 10px 10px 0;
    padding: 10px;
  }

  body[data-page="form"] .detailed-meta-status-strip .status-badge {
    flex: 1 1 auto;
  }

  body[data-page="form"] .detailed-meta-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="form"] .detailed-meta-save-button,
  body[data-page="form"] .detailed-meta-export-button {
    justify-content: center;
  }

  body[data-page="form"] .detailed-meta-workspace {
    padding: 10px;
  }

  body[data-page="form"] .detailed-meta-overview {
    padding: 14px;
  }

  body[data-page="form"] .detailed-meta-region-head {
    align-items: flex-start;
    flex-direction: row;
    padding: 14px;
  }

  body[data-page="form"] .detailed-meta-region-stack {
    padding: 0 10px 10px;
  }

  body[data-page="form"] .detailed-meta-branch-head {
    align-items: center;
    flex-direction: row;
  }

  body[data-page="form"] .detailed-meta-add-agent-panel {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="form"] .detailed-meta-add-agent-input {
    min-width: 0;
  }
}

/* Análise de performance - resumo de filial integrado à tabela */
body[data-page="analysis"] .analysis-branch-totals {
  display: grid;
  grid-template-columns: 32% 11% 11% 11% 18% 17%;
  gap: 0;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7dce5;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body[data-page="analysis"] .analysis-branch-totals::before {
  content: "Resumo da filial";
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px 10px 0;
  border-right: 1px solid #d7dce5;
  background: rgba(229, 233, 239, 0.42);
  color: #4b5565;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid #d7dce5;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #697386;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-table th:first-child,
body[data-page="analysis"] .analysis-table td:first-child {
  width: 32%;
}

body[data-page="analysis"] .analysis-table th:nth-child(2),
body[data-page="analysis"] .analysis-table td:nth-child(2),
body[data-page="analysis"] .analysis-table th:nth-child(3),
body[data-page="analysis"] .analysis-table td:nth-child(3),
body[data-page="analysis"] .analysis-table th:nth-child(4),
body[data-page="analysis"] .analysis-table td:nth-child(4) {
  width: 11%;
}

body[data-page="analysis"] .analysis-table th:nth-child(5),
body[data-page="analysis"] .analysis-table td:nth-child(5) {
  width: 18%;
}

body[data-page="analysis"] .analysis-table th:nth-child(6),
body[data-page="analysis"] .analysis-table td:nth-child(6) {
  width: 17%;
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill:last-child {
  border-right: 0;
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill strong {
  display: block;
  color: #293241;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill:nth-child(4) {
  background: rgba(255, 255, 255, 0.18);
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill.revenue {
  border-color: #d7dce5;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #697386;
}

body[data-page="analysis"] .analysis-branch-totals .analysis-total-pill.revenue strong {
  color: #293241;
}

@media (max-width: 760px) {
  body[data-page="analysis"] .analysis-branch-totals {
    min-width: 880px;
  }
}

/* Análise de performance - resumo consolidado da região */
body[data-page="analysis"] .analysis-region-footer {
  display: grid;
  grid-template-columns: 32% 11% 11% 11% 18% 17%;
  gap: 0;
  width: auto;
  margin: 14px 22px 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7e2ef;
  border-radius: 10px;
  background: #f3f7fc;
}

body[data-page="analysis"] .analysis-region-footer::before {
  content: "Resumo da região";
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  border-right: 1px solid #d7e2ef;
  color: #244f84;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

body[data-page="analysis"] .analysis-region-footer-pill {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid #d7e2ef;
  border-radius: 0;
  background: transparent;
  color: #5f7390;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-region-footer-pill:last-child {
  border-right: 0;
}

body[data-page="analysis"] .analysis-region-footer-pill strong {
  display: block;
  margin: 0;
  color: #102a56;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

body[data-page="analysis"] .analysis-region-footer-pill:nth-child(4) {
  background: #edf3fa;
}

body[data-page="analysis"] .analysis-region-footer-pill.revenue {
  border-color: #cddff3;
  border-radius: 0;
  background: #e5f1ff;
  color: #315b91;
}

body[data-page="analysis"] .analysis-region-footer-pill.revenue strong {
  color: #0757ca;
}

@media (max-width: 1100px) {
  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="analysis"] .analysis-region-footer::before {
    grid-column: 1 / -1;
    min-height: 46px;
    border-right: 0;
    border-bottom: 1px solid #d7e2ef;
  }

  body[data-page="analysis"] .analysis-region-footer-pill {
    border-right: 1px solid #d7e2ef;
    border-bottom: 1px solid #d7e2ef;
  }

  body[data-page="analysis"] .analysis-region-footer-pill:nth-child(even) {
    border-right: 0;
  }

  body[data-page="analysis"] .analysis-region-footer-pill.revenue {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: 1fr;
    margin: 12px 14px 14px;
  }

  body[data-page="analysis"] .analysis-region-footer::before,
  body[data-page="analysis"] .analysis-region-footer-pill,
  body[data-page="analysis"] .analysis-region-footer-pill:nth-child(even) {
    grid-column: auto;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #d7e2ef;
  }

  body[data-page="analysis"] .analysis-region-footer-pill.revenue {
    grid-column: auto;
    border-bottom: 0;
  }
}

/* Dashboard gerencial - seletor mensal igual ao Painel do Agente */
body[data-page="dashboard"] .dashboard-period-box {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 18px 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="dashboard"] .dashboard-period-box label {
  margin-bottom: 8px;
  color: #5b6d88;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-page="dashboard"] .dashboard-period-box .period-trigger {
  min-height: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  font-size: inherit;
}

body[data-page="dashboard"] .dashboard-period-box .period-panel {
  z-index: 4000;
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

body[data-page="dashboard"] .dashboard-period-box .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

body[data-page="dashboard"] .dashboard-period-box .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

body[data-page="dashboard"] .dashboard-period-box .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

body[data-page="dashboard"] .dashboard-period-box .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="dashboard"] .dashboard-period-box .period-month-button {
  min-height: 48px;
  padding: 8px;
  border-radius: 9px;
  font-size: 0.82rem;
}

body[data-page="dashboard"] .dashboard-period-box .period-month-button.active::after {
  display: none;
}

@media (max-width: 720px) {
  body[data-page="dashboard"] .dashboard-period-box {
    width: 100%;
    padding: 14px 0 0;
  }

  body[data-page="dashboard"] .dashboard-period-box .period-panel {
    right: auto;
    left: 0;
    width: min(258px, calc(100vw - 40px));
  }
}

/* Insights da Análise - layout alinhado ao sistema atual */
body[data-page="analysis"] .insights-modal-card {
  width: min(1480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  background: #f7f9fc;
  box-shadow: 0 28px 70px rgba(8, 26, 55, 0.22);
}

body[data-page="analysis"] .insights-modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  align-items: center;
  flex-direction: row;
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid #e2eaf4;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

body[data-page="analysis"] .insights-modal-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body[data-page="analysis"] .insights-modal-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eef5ff;
  color: #0757ca;
}

body[data-page="analysis"] .insights-modal-heading-icon svg {
  width: 28px;
  height: 28px;
}

body[data-page="analysis"] .insights-modal-heading-copy {
  min-width: 0;
}

body[data-page="analysis"] .insights-modal-header .eyebrow,
body[data-page="analysis"] .insights-modal-content .eyebrow {
  margin: 0 0 4px;
  padding: 0;
  color: #0757ca;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body[data-page="analysis"] .insights-modal-header .eyebrow::before,
body[data-page="analysis"] .insights-modal-content .eyebrow::before {
  content: none;
}

body[data-page="analysis"] .insights-modal-header h3 {
  margin: 0;
  color: #071f4d;
  font-size: 1.38rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="analysis"] .insights-modal-header p {
  max-width: 820px;
  margin: 5px 0 0;
  color: #506482;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
}

body[data-page="analysis"] .insights-base-update {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #71829b;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

body[data-page="analysis"] .insights-base-update::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #168956;
}

body[data-page="analysis"] .insights-base-update.unavailable::before {
  background: #98a6ba;
}

body[data-page="analysis"] .insights-modal-header .modal-close {
  width: 40px;
  height: 40px;
  border-color: #d6e1ee;
  border-radius: 10px;
  background: #f7f9fc;
  box-shadow: none;
}

body[data-page="analysis"] .insights-modal-content {
  gap: 14px;
  padding: 18px 20px 22px;
}

body[data-page="analysis"] .insights-empty-state,
body[data-page="analysis"] .insights-hero-panel,
body[data-page="analysis"] .insights-stat-card,
body[data-page="analysis"] .insights-note-card,
body[data-page="analysis"] .insights-chart-card {
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 26, 55, 0.04), 0 8px 22px rgba(8, 26, 55, 0.045);
}

body[data-page="analysis"] .insights-empty-state {
  padding: 28px;
}

body[data-page="analysis"] .insights-hero-panel,
body[data-page="analysis"] .insights-hero-panel.positive,
body[data-page="analysis"] .insights-hero-panel.negative {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: 18px;
  padding: 18px;
  background: #ffffff;
}

body[data-page="analysis"] .insights-hero-panel.positive {
  border-left: 4px solid #168956;
}

body[data-page="analysis"] .insights-hero-panel.negative {
  border-left: 4px solid #d94b58;
}

body[data-page="analysis"] .insights-hero-panel.neutral {
  border-left: 4px solid #2f71d0;
}

body[data-page="analysis"] .insights-hero-copy h4,
body[data-page="analysis"] .insights-note-card h4,
body[data-page="analysis"] .insights-chart-card h4 {
  margin: 3px 0 7px;
  color: #071f4d;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page="analysis"] .insights-hero-copy > p,
body[data-page="analysis"] .insights-note-card p,
body[data-page="analysis"] .insights-chart-copy {
  margin: 0;
  color: #506482;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.5;
}

body[data-page="analysis"] .insights-chip-row {
  gap: 7px;
  margin-top: 13px;
}

body[data-page="analysis"] .insights-chip {
  min-height: 28px;
  padding: 0 10px;
  border-color: #d8e4f2;
  border-radius: 7px;
  background: #f3f7fc;
  color: #35577f;
  font-size: 0.66rem;
  letter-spacing: 0.035em;
}

body[data-page="analysis"] .insights-projection-panel,
body[data-page="analysis"] .insights-projection-panel.positive,
body[data-page="analysis"] .insights-projection-panel.negative {
  margin-top: 14px;
  padding: 14px;
  border-color: #dde6f0;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: none;
}

body[data-page="analysis"] .insights-projection-copy {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.45;
}

body[data-page="analysis"] .insights-projection-badge,
body[data-page="analysis"] .insights-badge {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

body[data-page="analysis"] .insights-projection-grid {
  gap: 10px;
  margin-top: 12px;
}

body[data-page="analysis"] .insights-projection-item {
  padding: 12px;
  border-color: #dfe7f1;
  border-radius: 8px;
  background: #ffffff;
}

body[data-page="analysis"] .insights-projection-track {
  height: 6px;
  margin-top: 9px;
  background: #dfe7f1;
}

body[data-page="analysis"] .insights-projection-values {
  margin-top: 8px;
}

body[data-page="analysis"] .insights-progress-grid {
  gap: 10px;
}

body[data-page="analysis"] .insights-progress-card {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  min-height: 126px;
  padding: 14px;
  border-color: #dfe7f1;
  border-radius: 10px;
  background: #ffffff;
}

body[data-page="analysis"] .insights-progress-ring {
  width: 84px;
  height: 84px;
  padding: 7px;
}

body[data-page="analysis"] .insights-progress-core strong {
  font-size: 1.05rem;
}

body[data-page="analysis"] .insights-progress-core span,
body[data-page="analysis"] .insights-progress-meta span,
body[data-page="analysis"] .insights-chart-meta span,
body[data-page="analysis"] .insights-stat-card span {
  font-size: 0.65rem;
  letter-spacing: 0.045em;
}

body[data-page="analysis"] .insights-progress-meta strong {
  margin-top: 5px;
  font-size: 1rem;
}

body[data-page="analysis"] .insights-progress-meta p {
  margin-top: 4px;
  font-size: 0.78rem;
}

body[data-page="analysis"] .insights-progress-support {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 7px;
  background: #edf4ff;
  font-size: 0.72rem;
}

body[data-page="analysis"] .insights-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="analysis"] .insights-stat-card,
body[data-page="analysis"] .insights-note-card {
  padding: 16px 18px;
}

body[data-page="analysis"] .insights-stat-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
}

body[data-page="analysis"] .insights-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #6d8fb9;
}

body[data-page="analysis"] .insights-stat-card.positive,
body[data-page="analysis"] .insights-stat-card.accent {
  background: #ffffff;
}

body[data-page="analysis"] .insights-stat-card.positive::before {
  background: #168956;
}

body[data-page="analysis"] .insights-stat-card.accent::before {
  background: #0757ca;
}

body[data-page="analysis"] .insights-stat-card strong {
  margin-top: 9px;
  color: #071f4d;
  font-size: 1.18rem;
}

body[data-page="analysis"] .insights-stat-card p {
  margin-top: 6px;
  color: #506482;
  font-size: 0.78rem;
  line-height: 1.4;
}

body[data-page="analysis"] .insights-card-grid-secondary {
  gap: 10px;
}

body[data-page="analysis"] .insights-bullet-list {
  gap: 8px;
  margin-top: 10px;
}

body[data-page="analysis"] .insights-bullet-list li {
  padding-left: 15px;
  color: #506482;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

body[data-page="analysis"] .insights-bullet-list li::before {
  top: 7px;
  width: 6px;
  height: 6px;
  background: #2f71d0;
}

body[data-page="analysis"] .insights-chart-grid {
  gap: 10px;
}

body[data-page="analysis"] .insights-chart-grid.single-chart {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="analysis"] .insights-chart-card {
  padding: 16px;
}

body[data-page="analysis"] .insights-chart-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="analysis"] .insights-trend-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #cbd9ea;
  border-radius: 7px;
  background: #ffffff;
  color: #1f5fb0;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body[data-page="analysis"] .insights-trend-mode-toggle:hover,
body[data-page="analysis"] .insights-trend-mode-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: #8fb2de;
  background: #edf4ff;
  color: #0757ca;
  outline: none;
}

body[data-page="analysis"] .insights-chart-meta {
  gap: 8px;
  margin-top: 12px;
}

body[data-page="analysis"] .insights-chart-meta div {
  padding: 10px 12px;
  border-color: #dfe7f1;
  border-radius: 8px;
  background: #f8fafc;
}

body[data-page="analysis"] .insights-chart-meta strong {
  margin-top: 5px;
  font-size: 0.88rem;
}

body[data-page="analysis"] .insights-chart-shell {
  margin-top: 12px;
  padding: 10px;
  border-color: #dfe7f1;
  border-radius: 8px;
  background: #f8fafc;
}

body[data-page="analysis"] .insights-chart-svg {
  height: 260px;
}

@media (max-width: 1100px) {
  body[data-page="analysis"] .insights-hero-panel,
  body[data-page="analysis"] .insights-card-grid,
  body[data-page="analysis"] .insights-card-grid-secondary,
  body[data-page="analysis"] .insights-chart-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="analysis"] .insights-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body[data-page="analysis"] .insights-modal-card {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 12px;
  }

  body[data-page="analysis"] .insights-modal-header {
    align-items: flex-start;
    padding: 15px;
  }

  body[data-page="analysis"] .insights-modal-heading {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  body[data-page="analysis"] .insights-modal-heading-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  body[data-page="analysis"] .insights-modal-header p {
    display: none;
  }

  body[data-page="analysis"] .insights-modal-content {
    padding: 10px;
  }

  body[data-page="analysis"] .insights-hero-panel,
  body[data-page="analysis"] .insights-hero-panel.positive,
  body[data-page="analysis"] .insights-hero-panel.negative,
  body[data-page="analysis"] .insights-card-grid,
  body[data-page="analysis"] .insights-projection-grid,
  body[data-page="analysis"] .insights-chart-meta {
    grid-template-columns: 1fr;
  }

  body[data-page="analysis"] .insights-progress-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  body[data-page="analysis"] .insights-progress-ring {
    width: 72px;
    height: 72px;
  }

  body[data-page="analysis"] .insights-projection-top,
  body[data-page="analysis"] .insights-chart-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-page="analysis"] .insights-chart-actions {
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Insights da Análise - abertura leve e fluida */
body[data-page="analysis"] #analysisInsightsModal:not(.hidden) {
  animation: analysisInsightsOverlayIn 220ms ease-out both;
}

body[data-page="analysis"] #analysisInsightsModal:not(.hidden) .insights-modal-card {
  transform-origin: center top;
  animation: analysisInsightsCardIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-page="analysis"] #analysisInsightsModal:not(.hidden) .insights-modal-content {
  animation: analysisInsightsContentIn 420ms 55ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes analysisInsightsOverlayIn {
  from {
    background: rgba(8, 26, 55, 0);
    backdrop-filter: blur(0);
  }

  to {
    background: rgba(8, 26, 55, 0.28);
    backdrop-filter: blur(8px);
  }
}

@keyframes analysisInsightsCardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes analysisInsightsContentIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="analysis"] #analysisInsightsModal:not(.hidden),
  body[data-page="analysis"] #analysisInsightsModal:not(.hidden) .insights-modal-card,
  body[data-page="analysis"] #analysisInsightsModal:not(.hidden) .insights-modal-content {
    animation: none;
  }
}

/* Resumo regional - correção final compacta */
body[data-page="analysis"] .analysis-region-footer {
  position: relative;
  display: grid;
  grid-template-columns: 32% 11% 11% 11% 18% 17%;
  align-items: center;
  gap: 0;
  width: auto;
  min-height: 76px;
  margin: 14px 22px 22px;
  padding: 24px 8px 8px 14px;
  overflow: hidden;
  border: 1px solid #c9ddf4;
  border-radius: 10px;
  background: linear-gradient(105deg, #ffffff 0%, #fbfdff 62%, #f4f9ff 100%);
  box-shadow: 0 6px 16px rgba(28, 83, 153, 0.06);
}

body[data-page="analysis"] .analysis-region-footer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: #0d6ef5;
}

body[data-page="analysis"] .analysis-region-ribbon {
  position: absolute;
  top: 0;
  left: 28px;
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 12px;
  border-radius: 0 0 6px 6px;
  background: #0d6ef5;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

body[data-page="analysis"] .analysis-region-summary-identity {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px 0 7px;
  text-align: left;
}

body[data-page="analysis"] .analysis-region-summary-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #e8f2ff;
  color: #0d6ef5;
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

body[data-page="analysis"] .analysis-region-summary-identity > div {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  min-width: 0;
}

body[data-page="analysis"] .analysis-region-summary-identity strong {
  color: #234f86;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

body[data-page="analysis"] .analysis-region-summary-identity > div > span {
  color: #526d91;
  font-size: 0.64rem;
  font-weight: 800;
}

body[data-page="analysis"] .analysis-region-summary-metric {
  display: grid;
  align-content: center;
  justify-items: center;
  place-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid #dce7f3;
  background: transparent;
  text-align: center;
}

body[data-page="analysis"] .analysis-region-summary-metric > span:first-child {
  color: #4f6a8f;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

body[data-page="analysis"] .analysis-region-summary-metric > strong {
  color: #071f4d;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

body[data-page="analysis"] .analysis-region-summary-metric.performance {
  align-content: center;
  justify-content: center;
  gap: 4px;
}

body[data-page="analysis"] .analysis-region-summary-track {
  display: block;
  width: min(100%, 112px);
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8f4;
}

body[data-page="analysis"] .analysis-region-summary-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0d6ef5;
}

body[data-page="analysis"] .analysis-region-summary-metric.revenue {
  align-self: stretch;
  min-height: 44px;
  margin: 0 4px 0 8px;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="analysis"] .analysis-region-summary-metric.revenue > span:first-child,
body[data-page="analysis"] .analysis-region-summary-metric.revenue > strong {
  color: #0d6ef5;
}

@media (max-width: 1100px) {
  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 30px;
  }

  body[data-page="analysis"] .analysis-region-summary-identity {
    grid-column: 1 / -1;
    justify-content: center;
    padding-bottom: 8px;
  }

  body[data-page="analysis"] .analysis-region-summary-metric {
    min-height: 58px;
    border-top: 1px solid #dce7f3;
  }

  body[data-page="analysis"] .analysis-region-summary-metric:nth-of-type(even) {
    border-left: 0;
  }

  body[data-page="analysis"] .analysis-region-summary-metric.revenue {
    grid-column: 1 / -1;
    min-height: 52px;
    margin: 8px;
  }
}

@media (max-width: 620px) {
  body[data-page="analysis"] .analysis-region-footer {
    grid-template-columns: 1fr;
    margin: 12px 14px 14px;
  }

  body[data-page="analysis"] .analysis-region-summary-identity,
  body[data-page="analysis"] .analysis-region-summary-metric,
  body[data-page="analysis"] .analysis-region-summary-metric.revenue {
    grid-column: auto;
    width: auto;
    margin: 0;
    border-left: 0;
  }

  body[data-page="analysis"] .analysis-region-summary-identity {
    justify-content: flex-start;
  }

  body[data-page="analysis"] .analysis-region-summary-metric.revenue {
    margin-top: 8px;
  }
}

/* Padrao visual dos quadros de filtro de periodo/data. */
.period-box,
.commissions-period-box,
body[data-page="form"] .period-box,
body[data-page="analysis"] .period-box,
body[data-page="analysis"] .analysis-filter-row > .dashboard-period-box:not(.analysis-reference-picker),
body[data-page="projection"] .projection-filter-field {
  border-radius: 7px;
}

.period-trigger,
.commissions-period-box .period-trigger,
body[data-page="form"] .period-trigger,
body[data-page="analysis"] .period-trigger,
body[data-page="analysis"] #analysisPeriodPicker .period-trigger,
body[data-page="projection"] .projection-filter-field .period-trigger,
body[data-page="dashboard"] .dashboard-period-box .period-trigger,
.agent-panel-period-box .period-trigger,
.controle-period-box .period-trigger {
  border-radius: 6px;
}

body[data-page="renovacao"] .renovacao-content {
  gap: 22px;
}

body[data-page="renovacao"] .renovacao-hero {
  align-items: flex-start;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-page="renovacao"] .renovacao-hero::before,
body[data-page="renovacao"] .renovacao-hero::after {
  display: none;
}

body[data-page="renovacao"] .renovacao-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
}

body[data-page="renovacao"] .renovacao-period-box {
  display: grid;
  align-content: center;
  min-width: 0;
  width: 258px;
  padding: 12px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}

body[data-page="renovacao"] .renovacao-period-box label {
  margin-bottom: 8px;
  color: #5b6d88;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-page="renovacao"] .renovacao-period-box .period-trigger {
  border-radius: 6px;
  min-height: auto;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
}

body[data-page="renovacao"] .renovacao-period-box .period-panel {
  z-index: 4000;
  width: 258px;
  padding: 12px;
  border-radius: 14px;
}

body[data-page="renovacao"] .renovacao-period-box .period-year-row {
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
}

body[data-page="renovacao"] .renovacao-period-box .period-year-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
}

body[data-page="renovacao"] .renovacao-period-box .period-year-input {
  min-height: 36px;
  padding: 7px 30px;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") 12px 50% / 16px 16px no-repeat,
    #ffffff;
  font-size: 0.92rem;
}

body[data-page="renovacao"] .renovacao-period-box .period-month-grid {
  grid-auto-rows: minmax(48px, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="renovacao"] .renovacao-period-box .period-month-button {
  min-height: 48px;
  padding: 8px;
  border-radius: 9px;
  font-size: 0.82rem;
}

body[data-page="renovacao"] .renovacao-period-box .period-month-button.active::after {
  display: none;
}

body[data-page="renovacao"] .metrics {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="renovacao"] .metric-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 188px;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: 40px 52px 36px 30px;
  align-content: start;
  column-gap: 13px;
  row-gap: 4px;
  padding: 18px 20px;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(24, 47, 74, 0.08);
}

body[data-page="renovacao"] .metric-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  margin: 0;
  place-items: center;
  border-radius: 8px;
  background: rgba(15, 139, 141, 0.11);
  color: #006b7b;
}

body[data-page="renovacao"] .metric-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body[data-page="renovacao"] .metric-icon-money-pending {
  background: rgba(255, 166, 0, 0.12);
  color: #b85c00;
}

body[data-page="renovacao"] .metric-card p {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-height: 0;
  margin: 2px 0 0;
  color: #526986;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
}

body[data-page="renovacao"] .metric-card strong {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  margin: 0;
  color: #0f1d32;
  font-size: 2.55rem;
  line-height: 1;
  letter-spacing: 0;
}

body[data-page="renovacao"] .metric-card-currency > strong {
  font-size: 2rem;
}

body[data-page="renovacao"] .metric-subdetail {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 4;
  align-items: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(200, 50, 65, 0.18);
  border-radius: 8px;
  background: rgba(200, 50, 65, 0.08);
  color: #7d2430;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

body[data-page="renovacao"] .metric-trend {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 3;
  align-items: center;
  align-self: start;
  min-width: 0;
  gap: 8px;
  flex-wrap: nowrap;
  color: #526986;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  row-gap: 2px;
}

body[data-page="renovacao"] .metric-trend strong {
  display: inline;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
}

body[data-page="renovacao"] .metric-trend span {
  color: #526986;
  font-size: 0.78rem;
  white-space: nowrap;
}

body[data-page="renovacao"] .metric-trend-up strong {
  color: #0f9f68;
}

body[data-page="renovacao"] .metric-trend-down strong {
  color: #c83241;
}

body[data-page="renovacao"] .metric-trend-neutral strong {
  color: #526986;
}

body[data-page="renovacao"] .performance-list {
  margin-top: 0;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(24, 47, 74, 0.08);
}

body[data-page="renovacao"] .list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid #dbe7f2;
}

body[data-page="renovacao"] .list-header h2 {
  margin: 0 0 6px;
  color: #0f1d32;
  font-size: 1.2rem;
}

body[data-page="renovacao"] .list-header p {
  margin: 0;
  color: #526986;
  font-size: 0.92rem;
}

body[data-page="renovacao"] .list-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page="renovacao"] .performance-search,
body[data-page="renovacao"] .client-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 340px;
  padding: 9px 12px;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(31, 49, 75, 0.06);
}

body[data-page="renovacao"] .performance-search span,
body[data-page="renovacao"] .client-search span {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid #526986;
  border-radius: 50%;
}

body[data-page="renovacao"] .performance-search span::after,
body[data-page="renovacao"] .client-search span::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #526986;
  transform: rotate(45deg);
}

body[data-page="renovacao"] .performance-search input,
body[data-page="renovacao"] .client-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #0f1d32;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

body[data-page="renovacao"] .view-switch {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
}

body[data-page="renovacao"] .view-switch button {
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #526986;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

body[data-page="renovacao"] .view-switch button.active {
  background: rgba(15, 139, 141, 0.1);
  color: #006b7b;
}

body[data-page="renovacao"] .renovacao-html-report-button {
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  color: #0f1d32;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(31, 49, 75, 0.06);
}

body[data-page="renovacao"] .renovacao-html-report-button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

body[data-page="renovacao"] .branch-list-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(5, minmax(108px, 140px));
  gap: 14px;
  padding: 16px 26px 10px;
  border-top: 1px solid #dbe7f2;
  color: #607391;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="renovacao"] .branch-list-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body[data-page="renovacao"] .branch-list-head span:first-child {
  justify-content: flex-start;
  text-align: left;
}

body[data-page="renovacao"] .branch-list {
  padding: 0 16px 18px;
}

body[data-page="renovacao"] .branch-item {
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(24, 47, 74, 0.06);
}

body[data-page="renovacao"] .branch-item + .branch-item {
  margin-top: 10px;
}

body[data-page="renovacao"] .branch-item summary,
body[data-page="renovacao"] .agent-row,
body[data-page="renovacao"] .agent-view-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(5, minmax(108px, 140px));
  gap: 14px;
  align-items: center;
}

body[data-page="renovacao"] .branch-item summary {
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

body[data-page="renovacao"] .branch-item summary::-webkit-details-marker {
  display: none;
}

body[data-page="renovacao"] .branch-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 800;
}

body[data-page="renovacao"] .branch-arrow {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: #eef4f9;
  color: #006b7b;
  transition: transform 160ms ease;
}

body[data-page="renovacao"] .branch-item[open] .branch-arrow {
  transform: rotate(90deg);
}

body[data-page="renovacao"] .branch-title {
  overflow: hidden;
  color: #0f1d32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="renovacao"] .branch-stat,
body[data-page="renovacao"] .agent-stat {
  display: grid;
  min-height: 48px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

body[data-page="renovacao"] .stat-label {
  display: block;
  margin-bottom: 4px;
  color: #526986;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="renovacao"] .stat-value {
  display: block;
  color: #0f1d32;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
}

body[data-page="renovacao"] .stat-button {
  display: grid;
  min-width: 62px;
  padding: 6px 12px;
  border: 1px solid rgba(15, 139, 141, 0.22);
  border-radius: 8px;
  background: rgba(15, 139, 141, 0.08);
  color: #006b7b;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  place-items: center;
  text-align: center;
}

body[data-page="renovacao"] .stat-button-danger {
  border-color: rgba(200, 50, 65, 0.28);
  background: rgba(200, 50, 65, 0.08);
  color: #b42335;
}

body[data-page="renovacao"] .stat-danger .stat-label {
  color: #b42335;
}

body[data-page="renovacao"] .stat-danger .stat-button-danger {
  border-color: rgba(200, 50, 65, 0.34);
  background: rgba(200, 50, 65, 0.11);
  color: #b42335;
}

body[data-page="renovacao"] .agent-list {
  border-top: 1px solid #dbe7f2;
}

body[data-page="renovacao"] .agent-row {
  padding: 13px 16px 13px 54px;
}

body[data-page="renovacao"] .agent-row + .agent-row {
  border-top: 1px solid #dbe7f2;
}

body[data-page="renovacao"] .agent-row:hover {
  background: rgba(15, 139, 141, 0.06);
}

body[data-page="renovacao"] .agent-view-row {
  padding: 14px 16px;
}

body[data-page="renovacao"] .agent-name {
  color: #526986;
  font-size: 0.92rem;
  font-weight: 800;
}

body[data-page="renovacao"] .agent-sources {
  display: block;
  margin-top: 5px;
  color: #526986;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

body[data-page="renovacao"] .table-empty {
  margin: 0;
  padding: 28px 16px;
  color: #526986;
  text-align: center;
}

body[data-page="renovacao"] .client-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 78px 28px 28px;
}

body[data-page="renovacao"] .client-modal[hidden] {
  display: none;
}

body[data-page="renovacao"] .client-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 32, 51, 0.38);
  backdrop-filter: blur(3px);
}

body[data-page="renovacao"] .client-modal-panel {
  position: relative;
  width: min(1280px, calc(100vw - 56px));
  max-height: min(720px, calc(100vh - 118px));
  overflow: hidden;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(18, 32, 51, 0.28);
}

body[data-page="renovacao"] .client-modal-header,
body[data-page="renovacao"] .client-modal-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid #dbe7f2;
  background: linear-gradient(180deg, #fbfdff, #f7fafc);
}

body[data-page="renovacao"] .client-modal-toolbar {
  align-items: center;
  padding: 18px 24px;
  background: #ffffff;
}

body[data-page="renovacao"] .client-modal-kicker {
  display: block;
  margin-bottom: 4px;
  color: #006b7b;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="renovacao"] .client-modal-danger .client-modal-kicker {
  color: #b42335;
}

body[data-page="renovacao"] .client-modal-header h2 {
  margin: 0;
  color: #0f1d32;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.1;
  white-space: nowrap;
}

body[data-page="renovacao"] .client-modal-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #ffffff;
  color: #0f1d32;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

body[data-page="renovacao"] .client-search {
  width: min(390px, 100%);
}

body[data-page="renovacao"] .renovacao-client-export-button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(15, 139, 141, 0.24);
  border-radius: 8px;
  background: #0f8b8d;
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

body[data-page="renovacao"] .renovacao-client-export-button:hover,
body[data-page="renovacao"] .renovacao-client-export-button:focus-visible {
  outline: none;
  background: #0a7476;
  box-shadow: 0 10px 20px rgba(15, 139, 141, 0.18);
}

body[data-page="renovacao"] .client-modal-body {
  max-height: calc(min(720px, 100vh - 118px) - 156px);
  overflow: auto;
  padding: 0 24px 18px;
}

body[data-page="renovacao"] .client-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dbe7f2;
  border-top: 4px solid #0f8b8d;
  border-radius: 8px;
  overflow: hidden;
}

body[data-page="renovacao"] .client-table th,
body[data-page="renovacao"] .client-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #dbe7f2;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

body[data-page="renovacao"] .client-table th {
  background: #fbfdff;
  color: #526986;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="renovacao"] .client-table td {
  color: #0f1d32;
  font-size: 0.9rem;
  font-weight: 700;
}

body[data-page="renovacao"] .client-table tbody tr:last-child td {
  border-bottom: 0;
}

body[data-page="renovacao"] .client-id-badge {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(15, 139, 141, 0.08);
  color: #006b7b;
  font-weight: 800;
}

body[data-page="renovacao"] .client-modal-danger .client-id-badge {
  background: rgba(200, 50, 65, 0.08);
  color: #b42335;
}

@media (max-width: 900px) {
  body[data-page="renovacao"] .metrics {
    grid-template-columns: 1fr;
  }

  body[data-page="renovacao"] .renovacao-filter-row {
    justify-content: stretch;
  }

  body[data-page="renovacao"] .renovacao-period-box {
    width: 100%;
  }

  body[data-page="renovacao"] .list-header,
  body[data-page="renovacao"] .list-controls,
  body[data-page="renovacao"] .client-modal-header,
  body[data-page="renovacao"] .client-modal-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="renovacao"] .performance-search,
  body[data-page="renovacao"] .client-search,
  body[data-page="renovacao"] .view-switch,
  body[data-page="renovacao"] .renovacao-html-report-button {
    width: 100%;
  }

  body[data-page="renovacao"] .branch-list-head {
    display: none;
  }

  body[data-page="renovacao"] .branch-item summary,
  body[data-page="renovacao"] .agent-row,
  body[data-page="renovacao"] .agent-view-row {
    grid-template-columns: 1fr;
  }

  body[data-page="renovacao"] .agent-row {
    padding-left: 16px;
  }

  body[data-page="renovacao"] .branch-stat,
  body[data-page="renovacao"] .agent-stat {
    justify-items: stretch;
    text-align: left;
  }

  body[data-page="renovacao"] .stat-button,
  body[data-page="renovacao"] .stat-value {
    justify-content: flex-start;
  }

  body[data-page="renovacao"] .client-modal {
    padding: 64px 14px 18px;
  }

  body[data-page="renovacao"] .client-modal-panel {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 82px);
  }

  body[data-page="renovacao"] .client-modal-body {
    max-height: calc(100vh - 250px);
  }
}

@media (max-width: 1450px) and (min-width: 901px) {
  body[data-page="renovacao"] .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}