/* ============================================================
   PERSONALIZADOR VISUAL GLOBAL
   As variáveis abaixo são atualizadas em tempo real pelo app.js.
   ============================================================ */
:root {
  --theme-surface-mix: 92%;
  --theme-blur: 16px;
  --theme-radius: 14px;
  --theme-shadow-strength: .42;
  --theme-glow-strength: 20%;
  --theme-on-primary: #ffffff;
  --theme-on-secondary: #1b0b03;
  --theme-density-factor: 1;
}

html[data-theme-motion="off"] *,
html[data-theme-motion="off"] *::before,
html[data-theme-motion="off"] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

html[data-theme-tone="light"] {
  color-scheme: light;
}

html[data-theme-tone="dark"] {
  color-scheme: dark;
}

body,
.public-site,
.app-shell,
.workspace,
.app-view {
  background-color: var(--canvas) !important;
  color: var(--text);
}

.public-site {
  background:
    var(--theme-grid-layer, linear-gradient(rgba(148, 163, 184, .032) 1px, transparent 1px)),
    var(--theme-grid-layer-horizontal, linear-gradient(90deg, rgba(148, 163, 184, .032) 1px, transparent 1px)),
    var(--theme-ambient-primary, radial-gradient(circle at 10% 3%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 30%)),
    var(--theme-ambient-secondary, radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 28%)),
    var(--canvas) !important;
  background-size: 32px 32px, 32px 32px, auto, auto, auto !important;
}

html[data-theme-texture="off"] {
  --theme-grid-layer: linear-gradient(transparent, transparent);
  --theme-grid-layer-horizontal: linear-gradient(transparent, transparent);
}

html[data-theme-gradients="off"] {
  --theme-ambient-primary: linear-gradient(transparent, transparent);
  --theme-ambient-secondary: linear-gradient(transparent, transparent);
}

.public-header,
.sidebar,
.mobile-header {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--canvas-deep) var(--theme-surface-mix), transparent) !important;
  backdrop-filter: blur(var(--theme-blur));
}

html[data-theme-glass="off"] .public-header,
html[data-theme-glass="off"] .sidebar,
html[data-theme-glass="off"] .mobile-header,
html[data-theme-glass="off"] .control-section-nav,
html[data-theme-glass="off"] .modal-card,
html[data-theme-glass="off"] .panel,
html[data-theme-glass="off"] .theme-customizer {
  backdrop-filter: none !important;
}

html[data-theme-glass="off"] :is(
  .analytics-hero-card,
  .analytics-kpi-card,
  .app-view[data-page="intelligence"] .counter-card,
  .app-view[data-page="intelligence"] .counter-comparison-card,
  .app-view[data-page="intelligence"] .counter-insights,
  .app-view[data-page="intelligence"] .analytics-compact-card,
  .app-view[data-page="intelligence"] .price-summary-card,
  .price-trend-grid article
) {
  backdrop-filter: none !important;
}

:is(
  .hero-features article,
  .plans-grid article,
  .summary-grid article,
  .quick-grid button,
  .counter-grid article,
  .trend-grid article,
  .support-channels a,
  .preview-window,
  .preview-metrics article,
  .preview-chart,
  .login-card,
  .panel,
  .command-bar,
  .program-tabs,
  .program-toolbar,
  .automation-row,
  .airline-switches label,
  .group-item,
  .strategy-card,
  .discount-row,
  .pricing-table tr,
  .filter-rule,
  .fleet-card,
  .sac-card,
  .faq-panel,
  .analytics-hero-card,
  .analytics-kpi-card,
  .app-view[data-page="intelligence"] .counter-card,
  .app-view[data-page="intelligence"] .counter-comparison-card,
  .app-view[data-page="intelligence"] .counter-insights,
  .app-view[data-page="intelligence"] .analytics-compact-card,
  .app-view[data-page="intelligence"] .price-summary-card,
  .price-trend-grid article,
  .modal-card,
  .toast
) {
  border-color: var(--line) !important;
  border-radius: var(--theme-radius) !important;
  background-color: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, var(--theme-shadow-strength));
  backdrop-filter: blur(var(--theme-blur));
}

/* O fundo pertence aos cards, não ao contêiner estrutural de cada seção. */
:is(
  .analytics-hero-card,
  .analytics-kpi-card,
  .app-view[data-page="intelligence"] .counter-card,
  .app-view[data-page="intelligence"] .counter-comparison-card,
  .app-view[data-page="intelligence"] .counter-insights,
  .app-view[data-page="intelligence"] .analytics-compact-card,
  .app-view[data-page="intelligence"] .price-summary-card,
  .price-trend-grid article
) {
  border: 1px solid var(--line) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent),
    color-mix(in srgb, var(--surface) 96%, transparent)
  ) !important;
}

html[data-theme-gradients="off"] :is(
  .analytics-hero-card,
  .analytics-kpi-card,
  .app-view[data-page="intelligence"] .counter-card,
  .app-view[data-page="intelligence"] .counter-comparison-card,
  .app-view[data-page="intelligence"] .counter-insights,
  .app-view[data-page="intelligence"] .analytics-compact-card,
  .app-view[data-page="intelligence"] .price-summary-card,
  .price-trend-grid article
) {
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
}

/* O resumo principal usa a paleta escolhida em todos os seus detalhes. */
.analytics-hero-card::before {
  background: color-mix(in srgb, var(--blue) 13%, transparent) !important;
}

.analytics-hero-card::after {
  background: linear-gradient(90deg, transparent, var(--blue), var(--orange)) !important;
}

.analytics-hero-card > header > span,
.analytics-hero-value > span,
.analytics-hero-value small,
.analytics-progress > div {
  color: var(--muted) !important;
}

.analytics-hero-card > header em {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 66%, var(--text)) !important;
}

.analytics-hero-value strong,
.analytics-progress > div strong {
  color: var(--text) !important;
}

.coverage-gauge {
  background: conic-gradient(var(--blue) var(--gauge-value), var(--surface-raised) 0) !important;
  box-shadow: 0 0 32px color-mix(in srgb, var(--blue) 14%, transparent) !important;
}

.coverage-gauge::before {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.coverage-gauge strong {
  color: var(--text) !important;
}

.coverage-gauge small {
  color: var(--muted) !important;
}

html[data-theme-gradients="off"] .analytics-hero-card::after {
  background: var(--blue) !important;
}

/* Cobertura do tema para a matriz e os resumos de preços. */
.app-view[data-page="pricing"] .pricing-panel {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .72)) !important;
}

.app-view[data-page="pricing"] .airline-panel-header {
  border-color: var(--line) !important;
  background: linear-gradient(
    105deg,
    color-mix(in srgb, var(--blue) 14%, var(--surface-soft)),
    var(--surface) 58%,
    color-mix(in srgb, var(--orange) 9%, var(--surface-soft))
  ) !important;
}

.app-view[data-page="pricing"] .automation-row,
.app-view[data-page="pricing"] .pricing-matrix-wrap {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
}

.app-view[data-page="pricing"] .pricing-help {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-soft)) !important;
  color: var(--muted) !important;
}

.app-view[data-page="pricing"] .program-tab {
  border-color: var(--line) !important;
  background: linear-gradient(180deg, var(--surface-soft), var(--surface)) !important;
  color: var(--muted) !important;
}

.app-view[data-page="pricing"] .program-tab:hover {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-soft)) !important;
  color: var(--text) !important;
}

.app-view[data-page="pricing"] .program-tab.active,
.app-view[data-page="pricing"] .program-tab[class*="airline-"].active {
  border-color: color-mix(in srgb, var(--blue) 75%, var(--line)) !important;
  border-left-color: var(--airline-color, var(--blue)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 86%, white), var(--blue-dark)) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--blue) 24%, transparent) !important;
}

.app-view[data-page="pricing"] .program-tab.add-program {
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 7%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--orange) 74%, var(--text)) !important;
}

.app-view[data-page="pricing"] .pricing-table th,
.app-view[data-page="pricing"] .pricing-table td {
  border-color: var(--line) !important;
}

.app-view[data-page="pricing"] .pricing-table th {
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}

.app-view[data-page="pricing"] .pricing-table th:nth-child(n+3):nth-child(-n+11) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, var(--surface-raised)), var(--blue-dark)) !important;
  color: var(--theme-on-primary) !important;
}

.pricing-sticky-header {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.pricing-sticky-table th {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}

.pricing-sticky-table th:nth-child(n+3):nth-child(-n+11) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, var(--surface-raised)), var(--blue-dark)) !important;
  color: var(--theme-on-primary) !important;
}

.app-view[data-page="pricing"] .pricing-table td:nth-child(n+3):nth-child(-n+11) {
  background: color-mix(in srgb, var(--blue) 8%, var(--surface)) !important;
}

.app-view[data-page="pricing"] .pricing-table tbody tr:hover td,
.app-view[data-page="pricing"] .pricing-table tbody tr:hover td:nth-child(n+3):nth-child(-n+11) {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface-soft)) !important;
}

.app-view[data-page="pricing"] .pricing-table .min-input,
.app-view[data-page="pricing"] .pricing-table .max-input,
.app-view[data-page="pricing"] .pricing-table .price-stack input,
.app-view[data-page="pricing"] .pricing-table input {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.app-view[data-page="pricing"] .pricing-table input:focus {
  border-color: var(--blue) !important;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 17%, transparent) !important;
}

.app-view[data-page="pricing"] .pricing-table .price-field small,
.app-view[data-page="pricing"] .range-discount > label > small {
  color: color-mix(in srgb, var(--blue) 68%, var(--text)) !important;
}

.app-view[data-page="pricing"] .pricing-table .price-field.liminar small {
  color: color-mix(in srgb, var(--orange) 72%, var(--text)) !important;
}

.app-view[data-page="pricing"] .pricing-table .liminar-price-input {
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 9%, var(--surface)) !important;
  color: var(--text) !important;
}

.app-view[data-page="pricing"] .pricing-table .row-save {
  border-color: color-mix(in srgb, var(--orange) 72%, var(--line)) !important;
  background: var(--orange) !important;
  color: var(--theme-on-secondary) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--orange) 18%, transparent) !important;
}

.app-view[data-page="intelligence"] .price-summary-card > header {
  border-color: var(--line) !important;
}

.app-view[data-page="intelligence"] .price-summary-identity strong,
.app-view[data-page="intelligence"] .price-type > strong {
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .price-summary-identity small,
.app-view[data-page="intelligence"] .price-type > div > small {
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .price-summary-card > header > em,
.app-view[data-page="intelligence"] .price-type {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-soft)) !important;
}

.app-view[data-page="intelligence"] .price-summary-card > header > em {
  color: color-mix(in srgb, var(--blue) 68%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .price-type.liminar {
  border-color: color-mix(in srgb, var(--orange) 34%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 8%, var(--surface-soft)) !important;
}

html[data-theme-gradients="off"] :is(
  .app-view[data-page="pricing"] .airline-panel-header,
  .app-view[data-page="pricing"] .program-tab,
  .app-view[data-page="pricing"] .program-tab.active,
  .app-view[data-page="pricing"] .program-tab[class*="airline-"].active,
  .app-view[data-page="pricing"] .pricing-table th:nth-child(n+3):nth-child(-n+11),
  .pricing-sticky-table th:nth-child(n+3):nth-child(-n+11)
) {
  background: var(--surface-soft) !important;
}

html[data-theme-gradients="off"] :is(
  .app-view[data-page="pricing"] .program-tab.active,
  .app-view[data-page="pricing"] .program-tab[class*="airline-"].active,
  .app-view[data-page="pricing"] .pricing-table th:nth-child(n+3):nth-child(-n+11),
  .pricing-sticky-table th:nth-child(n+3):nth-child(-n+11)
) {
  background: var(--blue) !important;
}

/* Cobertura do tema para os detalhes do painel de inteligência. */
.app-view[data-page="intelligence"] .counter-metrics > div {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

.app-view[data-page="intelligence"] .counter-metrics span,
.app-view[data-page="intelligence"] .counter-response-progress > span,
.app-view[data-page="intelligence"] .group-program-demands > small,
.app-view[data-page="intelligence"] .group-program-demands > div > span {
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .counter-metrics strong,
.app-view[data-page="intelligence"] .group-program-demands > div > b {
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .counter-metrics .accepted {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 7%, var(--surface)) !important;
}

.app-view[data-page="intelligence"] .counter-metrics .accepted strong {
  color: color-mix(in srgb, var(--green) 74%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .counter-metrics .countered {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 7%, var(--surface)) !important;
}

.app-view[data-page="intelligence"] .counter-metrics .countered strong {
  color: color-mix(in srgb, var(--orange) 74%, var(--text)) !important;
}

.app-view[data-page="intelligence"] :is(
  .analytics-progress > i,
  .counter-response-progress > i,
  .group-program-demands > div > em
) {
  background: var(--surface-raised) !important;
}

.app-view[data-page="intelligence"] :is(
  .analytics-progress > i > b,
  .counter-response-progress > i > b
) {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--blue) 30%, transparent) !important;
}

.app-view[data-page="intelligence"] .group-program-demands {
  border-color: var(--line) !important;
}

.app-view[data-page="intelligence"] .history-panel {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
}

.app-view[data-page="intelligence"] .history-panel .table-wrap {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.app-view[data-page="intelligence"] .history-sticky-header {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
}

.app-view[data-page="intelligence"] .history-table th {
  background: var(--surface-raised) !important;
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .history-table td {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .history-table tbody tr:hover td {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-soft)) !important;
}

.app-view[data-page="intelligence"] .history-table td:first-child strong {
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .history-table td:nth-child(2) {
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .history-message-cell .history-exact-message {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent) !important;
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .history-message-cell .history-response-message {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 9%, var(--surface)) !important;
}

.app-view[data-page="intelligence"] .history-rule-details {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 8%, var(--surface)) !important;
}

.app-view[data-page="intelligence"] .history-rule-details > strong {
  color: color-mix(in srgb, var(--orange) 76%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .history-rule-details ul {
  color: var(--text-soft) !important;
}

/* Cobertura do tema para horários, controle cruzado e bloqueios. */
.app-view[data-page="control"] .schedule-operation-status > div {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

.app-view[data-page="control"] .schedule-operation-status small {
  color: var(--muted) !important;
}

.app-view[data-page="control"] .schedule-operation-status strong {
  color: var(--text) !important;
}

.app-view[data-page="control"] .schedule-day {
  border-color: var(--line) !important;
}

.app-view[data-page="control"] .schedule-day.disabled {
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent) !important;
}

.app-view[data-page="control"] :is(
  .counter-matrix-wrap,
  .counter-matrix-scrollbar-top
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  scrollbar-color: color-mix(in srgb, var(--blue) 45%, var(--muted)) var(--surface) !important;
}

.counter-matrix-sticky-header,
.counter-matrix-sticky-scrollbar {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  scrollbar-color: color-mix(in srgb, var(--blue) 45%, var(--muted)) var(--surface) !important;
}

.counter-matrix-sticky-grid .counter-matrix-corner {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
}

.counter-matrix-sticky-grid .counter-matrix-program {
  border-color: var(--line) !important;
  background: linear-gradient(145deg, var(--surface-soft), var(--surface)) !important;
}

.counter-matrix-sticky-grid strong {
  color: var(--text) !important;
}

.counter-matrix-sticky-grid small {
  color: var(--muted) !important;
}

.counter-matrix-sticky-grid .counter-matrix-liminar {
  border-color: var(--line) !important;
}

.counter-matrix-sticky-grid .counter-matrix-liminar > span {
  color: color-mix(in srgb, var(--orange) 74%, var(--text)) !important;
}

.app-view[data-page="control"] .counter-matrix-corner {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
}

.app-view[data-page="control"] .counter-matrix-program {
  border-color: var(--line) !important;
  background: linear-gradient(145deg, var(--surface-soft), var(--surface)) !important;
}

.app-view[data-page="control"] .counter-matrix-group {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
}

.app-view[data-page="control"] .counter-matrix-cell {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.app-view[data-page="control"] .counter-matrix strong {
  color: var(--text) !important;
}

.app-view[data-page="control"] :is(
  .counter-matrix small,
  .counter-matrix-heading p,
  .counter-matrix-legend,
  .matrix-group-switch,
  .matrix-group-delay
) {
  color: var(--muted) !important;
}

.app-view[data-page="control"] .counter-matrix-liminar {
  border-color: var(--line) !important;
}

.app-view[data-page="control"] .counter-matrix-liminar > span {
  color: color-mix(in srgb, var(--orange) 74%, var(--text)) !important;
}

.app-view[data-page="control"] :is(
  .matrix-group-delay .group-delay-mode,
  .matrix-group-delay .group-delay-value
) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.app-view[data-page="control"] :is(.group-name-photo, .matrix-group-photo) {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line)) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 22%, var(--surface-soft)), var(--surface)) !important;
  color: color-mix(in srgb, var(--blue) 54%, var(--text)) !important;
}

.app-view[data-page="control"] .filter-search {
  color: var(--text) !important;
}

.app-view[data-page="control"] .filter-search input {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.app-view[data-page="control"] .filter-search input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 17%, transparent) !important;
}

.app-view[data-page="control"] .filter-list-toolbar {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-soft) 90%, transparent) !important;
}

.app-view[data-page="control"] .filter-list-toolbar > span,
.app-view[data-page="control"] .filter-limit-options small {
  color: var(--muted) !important;
}

.app-view[data-page="control"] .filter-limit-options button,
.app-view[data-page="control"] .filter-rule-actions button {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
  color: var(--muted) !important;
}

.app-view[data-page="control"] .filter-limit-options button:hover {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line)) !important;
  color: var(--text) !important;
}

.app-view[data-page="control"] .filter-limit-options button.active {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 18%, transparent) !important;
}

.app-view[data-page="control"] .filter-rule {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.app-view[data-page="control"] .filter-rule-heading strong {
  color: var(--text) !important;
}

html[data-theme-gradients="off"] .app-view[data-page="control"] :is(
  .counter-matrix-program,
  .group-name-photo,
  .matrix-group-photo
) {
  background: var(--surface-soft) !important;
}

html[data-theme-gradients="off"] .counter-matrix-sticky-grid .counter-matrix-program {
  background: var(--surface-soft) !important;
}

:is(
  .input-shell,
  .search-field,
  .history-filters select,
  .sac-card select,
  .modal-card select,
  .template-field textarea,
  .response-phrase-input,
  .sac-card input,
  .sac-card textarea,
  .modal-input,
  .behavior-grid > label > div,
  .blacklist-add input,
  .word-rule-add select,
  .schedule-block input,
  .pricing-table input,
  .suffix-field,
  .money-field,
  .theme-density-field select
) {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--text) !important;
}

/* O editor de frases acompanha superfícies, contraste e cor de destaque do tema ativo. */
.response-template-column {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface)) !important;
}

.response-template-column-header,
.response-phrase-card {
  border-color: color-mix(in srgb, var(--line) 72%, transparent) !important;
}

.response-template-legend,
.response-template-legend strong {
  border: 0 !important;
  background: transparent !important;
}

.response-template-legend {
  color: var(--muted) !important;
}

.response-template-legend strong {
  color: var(--text) !important;
}

.response-phrase-input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent) !important;
}

.response-phrase-card.has-warning .response-phrase-input {
  border-color: var(--red) !important;
}

.response-phrase-warning {
  color: var(--red) !important;
}

:is(
  .main-nav,
  .nav-item:hover,
  .nav-item.active,
  .secondary-button,
  .header-contact,
  .sidebar-user button,
  .mobile-header button,
  .load-more-button,
  .table-footer button,
  .period-filter,
  .period-filter button
) {
  border-color: var(--line) !important;
  background-color: color-mix(in srgb, var(--surface-soft) 92%, transparent) !important;
}

.app-shell :is(h1, h2, h3),
.public-site :is(h1, h2, h3),
.modal-card :is(h1, h2, h3),
.theme-customizer :is(h1, h2, h3) {
  color: var(--text) !important;
}

.app-shell :is(.page-title p, .panel-heading p, .analytics-section-heading p, .control-empty, .pricing-help, .airline-panel-header small, .fleet-summary),
.public-site :is(.hero-copy > p, .section-intro p, .login-benefits > p, .plans-grid p, .demo-banner p),
.modal-card p {
  color: var(--muted) !important;
}

.brand strong,
.sidebar-brand strong,
.sidebar-user strong,
.page-title h1,
.panel-heading h2,
.analytics-section-heading h2,
.airline-panel-header h2,
.login-card h3,
.hero-features strong,
.plans-grid h3,
.quick-grid strong,
.counter-grid strong,
.trend-grid strong {
  color: var(--text) !important;
}

.primary-button,
.demo-banner a,
.featured-plan > b {
  border-color: color-mix(in srgb, var(--orange) 75%, black) !important;
  background: var(--orange) !important;
  color: var(--theme-on-secondary) !important;
}

.primary-button:hover,
.demo-banner a:hover {
  background: color-mix(in srgb, var(--orange) 84%, white) !important;
}

.login-button {
  border-color: color-mix(in srgb, var(--blue) 72%, black) !important;
  background: linear-gradient(110deg, var(--blue-dark), var(--blue) 62%, var(--orange)) !important;
  color: var(--theme-on-primary) !important;
}

html[data-theme-gradients="off"] .login-button {
  background: var(--blue) !important;
}

.nav-item.active {
  color: color-mix(in srgb, var(--blue) 65%, var(--text)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent) !important;
}

/* A barra de atalhos administrativos acompanha integralmente o tema global. */
.control-section-nav {
  border-color: var(--line) !important;
  border-radius: var(--theme-radius) !important;
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .7)) !important;
  backdrop-filter: blur(var(--theme-blur));
}

.control-section-nav button {
  border-color: var(--line) !important;
  border-radius: calc(var(--theme-radius) * .72) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--muted) !important;
}

.control-section-nav button:hover {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-soft)) !important;
  color: var(--text) !important;
}

.control-section-nav button.active {
  border-color: color-mix(in srgb, var(--blue) 76%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 86%, white), var(--blue-dark)) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 24%, transparent) !important;
}

html[data-theme-gradients="off"] .control-section-nav button.active {
  background: var(--blue) !important;
}

.control-section-nav button > span,
.control-section-nav button.active > span {
  color: currentColor !important;
}

html[data-theme-glow="on"] .control-section-nav button.active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent),
    0 0 24px color-mix(in srgb, var(--blue) var(--theme-glow-strength), transparent),
    0 8px 18px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .65)) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: color-mix(in srgb, var(--blue) 48%, transparent) !important;
}

html[data-theme-glow="on"] :is(
  .primary-button,
  .login-button,
  .nav-item.active,
  .featured-plan,
  .analytics-hero-card,
  .theme-open-button
) {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent),
    0 0 32px color-mix(in srgb, var(--blue) var(--theme-glow-strength), transparent),
    0 16px 36px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .75)) !important;
}

html[data-theme-glow="on"] .primary-button,
html[data-theme-glow="on"] .featured-plan {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--orange) 28%, transparent),
    0 0 32px color-mix(in srgb, var(--orange) var(--theme-glow-strength), transparent),
    0 16px 36px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .75)) !important;
}

html[data-theme-tone="light"] :is(.public-header, .sidebar, .mobile-header) {
  background: color-mix(in srgb, var(--canvas-deep) 88%, white) !important;
}

.mobile-header #menuButton,
.sidebar-close {
  color: var(--text) !important;
}

html[data-theme-tone="light"] :is(
  .brand strong,
  .sidebar-brand strong,
  .sidebar-user strong,
  .page-title h1,
  .panel-heading h2,
  .analytics-section-heading h2,
  .airline-panel-header h2,
  .hero-copy h1,
  .login-card h3,
  .modal-card h3
) {
  color: var(--text) !important;
}

html[data-theme-tone="light"] :is(
  .search-field input,
  .template-field textarea,
  .response-phrase-input,
  .modal-input,
  .schedule-block input,
  .pricing-table input,
  .behavior-grid input,
  .blacklist-add input,
  .suffix-field input,
  .money-field input
) {
  color: var(--text) !important;
}

/* Nos dois presets monocromáticos, ícones seguem o contraste da superfície. */
html[data-theme-monochrome="on"] :is(
  .admin-nav-icon img,
  .admin-section-icon img,
  .filter-tab-icon,
  .main-nav-icon,
  .page-title-icon img,
  .semantic-icon-img,
  .login-benefit-icon,
  .analytics-kpi-icon,
  .counter-metric-icon,
  .history-semantic-icon,
  .status-semantic-icon,
  .simulation-result-icon,
  .header-simulator-button > img,
  .simulator-submit > img,
  .support-icon img,
  .sac-heading-icon img,
  .period-calendar-icon,
  .analytics-compact-card > span img
) {
  filter: var(--theme-icon-filter) !important;
}

html[data-theme-monochrome="on"] :is(
  .page-title-icon,
  .section-icon.admin-section-icon,
  .analytics-kpi-card > span,
  .feature-icon,
  .plan-icon,
  .stat-icon,
  .support-icon
) {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-soft)) !important;
  color: var(--blue) !important;
}

html[data-theme-monochrome="on"] :is(
  .section-icon.blue,
  .section-icon.red,
  .section-icon.green,
  .section-icon.orange,
  .section-icon.violet
) {
  --accent: var(--blue);
}

html[data-theme-monochrome="on"] :is(
  .analytics-kpi-card.success > span,
  .analytics-kpi-card.warning > span,
  .analytics-kpi-card.groups > span,
  .counter-metrics .accepted,
  .counter-metrics .countered
) {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface)) !important;
}

html[data-theme-monochrome="on"] :is(
  .analytics-kpi-card.success strong,
  .analytics-kpi-card.warning strong,
  .counter-metrics .accepted strong,
  .counter-metrics .countered strong
) {
  color: var(--text) !important;
}

html[data-theme-monochrome="on"] :is(
  .nav-item.active .main-nav-icon,
  .filter-tabs button.active .filter-tab-icon,
  .control-section-nav button.active .admin-nav-icon img,
  .period-filter button.active .period-calendar-icon,
  .simulator-submit > img,
  .primary-button img
) {
  filter: var(--theme-selected-icon-filter) !important;
}

html[data-theme-monochrome="on"] :is(
  .nav-item.active,
  .filter-tabs button.active,
  .control-section-nav button.active,
  .app-view[data-page="intelligence"] .period-filter button.active
) {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
  color: var(--theme-on-primary) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="pricing"] .program-tab.active .program-tab-logo {
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid #d4d4d4 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

html[data-theme-monochrome="on"] .app-view[data-page="pricing"] .program-tab.active .program-tab-logo img {
  filter: none !important;
}

html[data-theme-monochrome="on"] .analytics-hero-card::before {
  background: color-mix(in srgb, var(--blue) 5%, transparent) !important;
}

html[data-theme-monochrome="on"] .analytics-hero-card::after {
  background: var(--blue) !important;
}

html[data-theme-monochrome="on"] .analytics-hero-card > header > span,
html[data-theme-monochrome="on"] .analytics-hero-value > span,
html[data-theme-monochrome="on"] .analytics-hero-value small,
html[data-theme-monochrome="on"] .analytics-progress > div,
html[data-theme-monochrome="on"] .analytics-kpi-card small,
html[data-theme-monochrome="on"] .analytics-kpi-card em {
  color: var(--muted) !important;
}

html[data-theme-monochrome="on"] .analytics-hero-card > header em {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-soft)) !important;
  color: var(--text) !important;
}

html[data-theme-monochrome="on"] .analytics-hero-value strong,
html[data-theme-monochrome="on"] .analytics-progress > div strong,
html[data-theme-monochrome="on"] .analytics-kpi-card strong {
  color: var(--text) !important;
}

html[data-theme-monochrome="on"] .coverage-gauge {
  background: conic-gradient(var(--blue) var(--gauge-value), var(--line) 0) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent), 0 8px 22px rgba(0, 0, 0, .10) !important;
}

html[data-theme-monochrome="on"] .coverage-gauge::before {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
}

html[data-theme-monochrome="on"] .coverage-gauge strong {
  color: var(--text) !important;
}

html[data-theme-monochrome="on"] .coverage-gauge small {
  color: var(--muted) !important;
}

html[data-theme-monochrome="on"] .analytics-progress > i {
  background: var(--line) !important;
}

html[data-theme-monochrome="on"] .analytics-progress > i > b {
  background: var(--blue) !important;
  box-shadow: none !important;
}

html[data-theme-density="compact"] {
  --theme-density-factor: .82;
}

html[data-theme-density="comfortable"] {
  --theme-density-factor: 1;
}

html[data-theme-density="spacious"] {
  --theme-density-factor: 1.18;
}

html[data-theme-density="compact"] .app-shell .page-container {
  padding-block: 24px 38px;
}

html[data-theme-density="compact"] :is(.panel, .section-block, .control-card, .sac-card, .faq-panel) {
  padding: 16px !important;
}

html[data-theme-density="compact"] :is(.summary-grid article, .quick-grid button, .counter-grid article, .trend-grid article) {
  min-height: 126px !important;
  padding: 16px !important;
}

html[data-theme-density="spacious"] .app-shell .page-container {
  padding-block: 52px 70px;
}

html[data-theme-density="spacious"] :is(.panel, .section-block, .control-card, .sac-card, .faq-panel) {
  padding: 30px !important;
}

html[data-theme-density="spacious"] :is(.summary-grid article, .quick-grid button, .counter-grid article, .trend-grid article) {
  min-height: 172px !important;
  padding: 28px !important;
}

.theme-open-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-soft));
  color: color-mix(in srgb, var(--blue) 45%, var(--text));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.theme-open-button > span {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--blue), var(--orange), var(--green), var(--blue));
  color: transparent;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--surface-soft) 85%, transparent);
}

.theme-open-button:hover {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  transform: translateY(-1px);
}

.header-theme-button {
  width: auto !important;
  min-width: 74px;
  padding-inline: 10px !important;
}

.mobile-theme-button {
  margin-left: auto;
  color: transparent !important;
  background:
    conic-gradient(var(--blue), var(--orange), var(--green), var(--blue)) padding-box !important;
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

@media (max-width: 860px) {
  .mobile-header .mobile-theme-button {
    margin-left: 0;
  }
}

.mobile-header .mobile-status {
  margin-left: 3px;
}

.theme-customizer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: none;
}

.theme-customizer {
  width: min(610px, 100%);
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas-deep) 96%, transparent);
  color: var(--text);
  box-shadow: -28px 0 80px rgba(0, 0, 0, .48);
  animation: theme-drawer-in .22s ease both;
  backdrop-filter: blur(calc(var(--theme-blur) + 4px));
}

@keyframes theme-drawer-in {
  from { transform: translateX(24px); opacity: .4; }
  to { transform: translateX(0); opacity: 1; }
}

.theme-customizer-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.theme-customizer-header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.theme-customizer-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: conic-gradient(var(--blue), var(--orange), var(--green), var(--blue));
  color: transparent;
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--surface-soft) 88%, transparent);
}

.theme-customizer-header h2 {
  margin: 0;
  font-size: 19px;
}

.theme-customizer-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.theme-customizer-header > button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 22px;
}

.theme-customizer-scroll {
  overflow-y: auto;
  padding: 20px 22px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.theme-editor-section {
  padding: 0 0 24px;
}

.theme-editor-section + .theme-editor-section {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.theme-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.theme-editor-heading h3 {
  margin: 0;
  font-size: 15px;
}

.theme-editor-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.theme-live-badge {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 9%, transparent);
  color: color-mix(in srgb, var(--green) 70%, var(--text));
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-preset-grid button {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent);
  color: var(--text);
  text-align: left;
}

.theme-preset-grid button:hover,
.theme-preset-grid button.active {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-soft));
}

.theme-preset-grid i {
  width: 42px;
  height: 42px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--preset-a) 42%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 27% 28%, var(--preset-a) 0 18%, transparent 19%),
    radial-gradient(circle at 68% 68%, var(--preset-b) 0 18%, transparent 19%),
    var(--preset-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.theme-preset-grid span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.theme-preset-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-preset-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.theme-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-color-grid > label {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.theme-color-grid > label > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.theme-color-grid input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
}

.theme-color-grid output {
  width: 58px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.theme-range-list {
  display: grid;
  gap: 12px;
}

.theme-range-list > label {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
}

.theme-range-list > label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.theme-range-list b {
  color: var(--text);
  font-size: 10px;
}

.theme-range-list output {
  color: color-mix(in srgb, var(--blue) 55%, var(--text));
  font-size: 10px;
  font-weight: 850;
}

.theme-range-list input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
}

.theme-switch-list {
  display: grid;
  gap: 9px;
}

.theme-switch-list > label,
.theme-density-field {
  min-height: 59px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
}

.theme-switch-list > label > span,
.theme-density-field > span {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.theme-switch-list strong,
.theme-density-field strong {
  color: var(--text);
  font-size: 10px;
}

.theme-switch-list small,
.theme-density-field small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.theme-switch-list input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-switch-list i {
  position: relative;
  width: 42px;
  height: 23px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.theme-switch-list i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--muted);
  transition: .18s ease;
}

.theme-switch-list input:checked + i {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--line));
  background: color-mix(in srgb, var(--blue) 28%, var(--surface));
}

.theme-switch-list input:checked + i::after {
  left: 22px;
  background: var(--blue);
  box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 45%, transparent);
}

.theme-density-field {
  margin-top: 9px;
}

.theme-density-field select {
  min-width: 126px;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.theme-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.theme-file-actions button {
  flex: 1 1 170px;
}

.theme-customizer-footer {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas-deep) 96%, transparent);
}

.theme-customizer-footer > div {
  display: flex;
  gap: 9px;
}

.theme-reset-button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}

.theme-customizer-footer .primary-button,
.theme-customizer-footer .secondary-button {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 11px;
}

@media (max-width: 860px) {
  .public-theme-button b,
  .header-theme-button b {
    display: none;
  }

  .public-theme-button,
  .header-theme-button {
    width: 38px !important;
    min-width: 38px;
    padding: 0 !important;
  }

  .theme-customizer {
    width: min(560px, 100%);
  }
}

@media (max-width: 560px) {
  .theme-customizer-header,
  .theme-customizer-scroll,
  .theme-customizer-footer {
    padding-inline: 14px;
  }

  .theme-preset-grid,
  .theme-color-grid {
    grid-template-columns: 1fr;
  }

  .theme-customizer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .theme-customizer-footer > div {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
  }

  .theme-reset-button {
    order: 2;
  }
}
body.theme-editor-open { overflow: hidden; }
.header-theme-button {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
}
.header-theme-button b { display: none; }

/* Elementos operacionais que também devem acompanhar a paleta escolhida. */
.app-view[data-page="intelligence"] .period-filter {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-soft) 92%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent) !important;
}

.app-view[data-page="intelligence"] .period-filter button {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .period-filter button:hover {
  background: color-mix(in srgb, var(--blue) 10%, transparent) !important;
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .period-filter button.active {
  border-color: color-mix(in srgb, var(--blue) 68%, var(--line)) !important;
  background: var(--blue) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 24%, transparent) !important;
}

.app-view[data-page="intelligence"] .section-count {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] :is(.page-eyebrow, .decision-kicker) {
  color: color-mix(in srgb, var(--blue) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .page-eyebrow::before {
  background: linear-gradient(90deg, var(--blue), var(--orange)) !important;
}

.app-view[data-page="intelligence"] .demand-trend-card > header em {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 9%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--green) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .price-type-badge {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .price-type-badge.liminar {
  background: color-mix(in srgb, var(--orange) 14%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--orange) 72%, var(--text)) !important;
}

.app-view[data-page="faq"] .support-channels em,
.app-view[data-page="faq"] .contact-support {
  color: color-mix(in srgb, var(--green) 72%, var(--text)) !important;
}

.app-view[data-page="faq"] .support-channels a,
.app-view[data-page="faq"] .sac-card,
.support-feedback {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
}

/* O mesmo contrato de superfície atende todos os cards da Inteligência. */
.app-view[data-page="intelligence"] :is(
  .counter-comparison-card,
  .counter-insights,
  .demand-trend-card,
  .analytics-compact-card,
  .price-summary-card,
  .history-panel
) {
  border-color: var(--line) !important;
  border-radius: var(--theme-radius) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent),
    color-mix(in srgb, var(--surface) 96%, transparent)
  ) !important;
  color: var(--text) !important;
  backdrop-filter: blur(var(--theme-blur));
}

html[data-theme-gradients="off"] .app-view[data-page="intelligence"] :is(
  .counter-comparison-card,
  .counter-insights,
  .demand-trend-card,
  .analytics-compact-card,
  .price-summary-card,
  .history-panel
) {
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
}

.app-view[data-page="intelligence"] :is(
  .counter-chart-legend,
  .counter-airline-card,
  .market-counter-card,
  .counter-highlight,
  .demand-trend-legend > div,
  .analytics-compact-card > span,
  .price-type,
  .history-panel .table-wrap
) {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

.app-view[data-page="intelligence"] :is(
  .counter-comparison-card > header,
  .counter-airline-card > summary,
  .market-counter-card > header,
  .counter-insights > header,
  .demand-trend-card > header,
  .price-summary-card > header,
  .history-panel > .panel-heading,
  .demand-trend-legend,
  .counter-ranking > div,
  .counter-ranking-section,
  .counter-bars
) {
  border-color: var(--line) !important;
}

.app-view[data-page="intelligence"] :is(
  .counter-comparison-card > header strong,
  .counter-airline-identity strong,
  .counter-airline-bar span,
  .market-counter-identity strong,
  .market-counter-hover-details > strong,
  .market-counter-hover-metrics b,
  .market-counter-program-identity strong,
  .counter-insights > header strong,
  .counter-highlight > strong,
  .counter-highlight > span,
  .counter-ranking strong,
  .counter-bar-identity strong,
  .counter-vertical-bar span,
  .analytics-compact-card strong,
  .demand-trend-card > header strong,
  .demand-trend-legend strong,
  .demand-trend-legend span
) {
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] :is(
  .counter-comparison-card > header small,
  .counter-airline-identity small,
  .counter-airline-axis,
  .counter-airline-program-identity strong,
  .counter-airline-program-identity small,
  .counter-airline-program-identity em,
  .counter-airline-empty,
  .market-counter-identity small,
  .market-counter-axis,
  .market-counter-hover-metrics small,
  .market-counter-program-identity small,
  .market-counter-empty,
  .counter-insights > header small,
  .counter-chart-legend span,
  .counter-chart-axis,
  .counter-highlight small,
  .counter-highlight > em,
  .counter-insights h3,
  .counter-ranking > div > b,
  .counter-ranking small,
  .analytics-compact-card small,
  .analytics-compact-card em,
  .demand-trend-card > header > div small
) {
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .counter-chart-grid i {
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px) !important;
}

.app-view[data-page="intelligence"] .counter-airline-grid-lines i {
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px) !important;
}

.app-view[data-page="intelligence"] .market-counter-grid-lines i {
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px) !important;
}

.app-view[data-page="intelligence"] .counter-airline-bars {
  border-color: var(--line) !important;
}

.app-view[data-page="intelligence"] .counter-summary-metrics > span,
.app-view[data-page="intelligence"] .counter-airline-card[open] > summary {
  border-color: var(--line) !important;
}

.app-view[data-page="intelligence"] .counter-airline-card > summary {
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .counter-airline-card > summary:hover,
.app-view[data-page="intelligence"] .counter-airline-card[open] > summary {
  background: color-mix(in srgb, var(--blue) 5%, var(--surface)) !important;
}

.app-view[data-page="intelligence"] .counter-summary-metrics small {
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .counter-summary-metrics strong {
  color: var(--text) !important;
}

.app-view[data-page="intelligence"] .counter-accordion-indicator {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .counter-airline-card[open] .counter-accordion-indicator {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .counter-integration-status.active {
  border-color: color-mix(in srgb, var(--green) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 9%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--green) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .counter-integration-status.inactive {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

.app-view[data-page="intelligence"] .counter-bar-photo {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 68%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .counter-chart-legend i.demands,
.app-view[data-page="intelligence"] .counter-vertical-bar.demands {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 70%, white), var(--blue-dark)) !important;
}

.app-view[data-page="intelligence"] .counter-chart-legend i.responses,
.app-view[data-page="intelligence"] .counter-vertical-bar.responses,
.app-view[data-page="intelligence"] .counter-airline-bar.responses {
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 70%, white), var(--green)) !important;
}

.app-view[data-page="intelligence"] .counter-chart-legend i.coverage {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 70%, white), var(--blue-dark)) !important;
}

.app-view[data-page="intelligence"] .market-counter-legend i.demands {
  background: var(--text) !important;
}

.app-view[data-page="intelligence"] .market-counter-legend i.responses {
  background: var(--orange) !important;
}

.app-view[data-page="intelligence"] .market-counter-legend i.match {
  background: var(--green) !important;
}

.app-view[data-page="intelligence"] .counter-highlight.volume {
  border-top-color: var(--blue) !important;
}

.app-view[data-page="intelligence"] .counter-highlight.efficiency {
  border-top-color: var(--green) !important;
}

.app-view[data-page="intelligence"] :is(.counter-bar-identity small, .counter-ranking em) {
  color: color-mix(in srgb, var(--green) 72%, var(--text)) !important;
}

.app-view[data-page="intelligence"] .counter-ranking em {
  background: color-mix(in srgb, var(--green) 9%, var(--surface-soft)) !important;
}

.app-view[data-page="intelligence"] :is(.chart-grid-line, .demand-series-point) {
  stroke: var(--line);
}

.app-view[data-page="intelligence"] .chart-axis-label {
  fill: var(--muted);
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .counter-chart-legend i.responses,
html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .counter-vertical-bar.responses {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blue) 68%, var(--surface-soft)),
    color-mix(in srgb, var(--blue) 48%, var(--surface-soft))
  ) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .counter-integration-status.active {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-bar {
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 58%, var(--surface))) !important;
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px color-mix(in srgb, var(--text) 14%, transparent) !important;
}

html[data-theme-monochrome-mode="light"] {
  --market-demand-color: #111111;
  --market-response-color: #c2410c;
  --market-match-color: #15803d;
}

html[data-theme-monochrome-mode="dark"] {
  --market-demand-color: #f5f5f5;
  --market-response-color: #fb923c;
  --market-match-color: #4ade80;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-bar-values b.demands {
  color: var(--market-demand-color) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-bar-values b.responses {
  color: var(--market-response-color) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-bar-values b.match {
  color: var(--market-match-color) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-legend i.demands {
  background: var(--market-demand-color) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-legend i.responses {
  background: var(--market-response-color) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="intelligence"] .market-counter-legend i.match {
  background: var(--market-match-color) !important;
}

html[data-theme-monochrome="on"] .demand-series-0 { --monochrome-series: var(--text); }
html[data-theme-monochrome="on"] .demand-series-1 { --monochrome-series: color-mix(in srgb, var(--text) 84%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-2 { --monochrome-series: color-mix(in srgb, var(--text) 70%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-3 { --monochrome-series: color-mix(in srgb, var(--text) 56%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-4 { --monochrome-series: color-mix(in srgb, var(--text) 46%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-5 { --monochrome-series: color-mix(in srgb, var(--text) 38%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-6 { --monochrome-series: color-mix(in srgb, var(--text) 30%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-7 { --monochrome-series: color-mix(in srgb, var(--text) 22%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-8 { --monochrome-series: color-mix(in srgb, var(--text) 76%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-9 { --monochrome-series: color-mix(in srgb, var(--text) 62%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-10 { --monochrome-series: color-mix(in srgb, var(--text) 50%, var(--surface-soft)); }
html[data-theme-monochrome="on"] .demand-series-11 { --monochrome-series: color-mix(in srgb, var(--text) 34%, var(--surface-soft)); }

html[data-theme-monochrome="on"] .demand-series-line {
  stroke: var(--monochrome-series) !important;
}

html[data-theme-monochrome="on"] .demand-series-point {
  fill: var(--monochrome-series) !important;
}

html[data-theme-monochrome="on"] .demand-series-marker {
  background: var(--monochrome-series) !important;
}

html[data-theme-monochrome="on"] :is(.demand-series-line.demand-series-1, .demand-series-line.demand-series-3, .demand-series-line.demand-series-5, .demand-series-line.demand-series-7) {
  stroke-dasharray: 8 6;
}

/* Sombras consistentes na Inteligência, proporcionais ao ajuste global. */
.app-view[data-page="intelligence"] :is(
  .analytics-hero-card,
  .analytics-kpi-card,
  .counter-card,
  .counter-comparison-card,
  .counter-insights,
  .analytics-compact-card,
  .price-summary-card,
  .price-trend-grid article,
  .history-panel
) {
  box-shadow:
    0 22px 58px rgba(0, 0, 0, var(--theme-shadow-strength)),
    0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset !important;
}

.app-view[data-page="intelligence"] :is(
  .period-filter,
  .section-count,
  .counter-live-state,
  .counter-coverage,
  .counter-metrics > div,
  .price-type,
  .history-panel .table-wrap
) {
  box-shadow:
    0 9px 22px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .48)),
    0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset !important;
}

.app-view[data-page="intelligence"] :is(
  .analytics-section-heading .section-icon,
  .counter-group-photo,
  .analytics-kpi-card > span
) {
  box-shadow:
    0 8px 18px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .42)),
    0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent) inset !important;
}

.app-view[data-page="intelligence"] .coverage-gauge {
  box-shadow:
    0 13px 30px rgba(0, 0, 0, calc(var(--theme-shadow-strength) * .58)),
    0 0 32px color-mix(in srgb, var(--blue) 14%, transparent) !important;
}

.app-view[data-page="intelligence"] .program-demand-row > em > i {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--airline-color, #60a5fa) 64%, var(--surface)),
    var(--airline-color, #60a5fa)
  ) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--airline-color, #60a5fa) 34%, transparent) !important;
}

/* Contraste final dos presets preto e branco, sem herdar fundos azulados. */
html[data-theme-monochrome="on"] :is(
  body,
  .public-site,
  .app-shell,
  .workspace,
  .app-view,
  .app-view[data-page="intelligence"]
) {
  background: var(--canvas) !important;
  background-image: none !important;
}

html[data-theme-monochrome="on"] :is(.toggle, .theme-switch-list i) {
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
}

html[data-theme-monochrome="on"] .toggle.active,
html[data-theme-monochrome="on"] .theme-switch-list input:checked + i {
  border-color: var(--blue) !important;
  background: var(--blue) !important;
}

html[data-theme-monochrome="on"] .toggle.active span,
html[data-theme-monochrome="on"] .theme-switch-list input:checked + i::after {
  background: var(--theme-on-primary) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-on-primary) 38%, transparent) !important;
}

html[data-theme-monochrome="on"] :is(
  .service-dot,
  .mobile-status,
  .group-status-indicator.active
) {
  background: var(--blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent) !important;
}

html[data-theme-monochrome-mode="light"] .app-shell :is(
  .nav-item.active,
  .period-filter button.active,
  .control-section-nav button.active,
  .filter-tabs button.active,
  .filter-limit-options button.active,
  .program-tab.active,
  .table-footer button.active
) {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

html[data-theme-monochrome-mode="dark"] .app-shell :is(
  .nav-item.active,
  .period-filter button.active,
  .control-section-nav button.active,
  .filter-tabs button.active,
  .filter-limit-options button.active,
  .program-tab.active,
  .table-footer button.active
) {
  border-color: #f5f5f5 !important;
  background: #171717 !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16) inset,
    0 7px 18px rgba(255, 255, 255, .07) !important;
}

html[data-theme-monochrome-mode="dark"] .app-shell .app-view[data-page="intelligence"] .period-filter button.active {
  border-color: #f5f5f5 !important;
  background: #171717 !important;
  color: #ffffff !important;
}

html[data-theme-monochrome-mode="dark"] .app-shell .sidebar .main-nav .nav-item.active,
html[data-theme-monochrome-mode="dark"] .app-shell .app-view .filter-tabs button.active,
html[data-theme-monochrome-mode="dark"] .app-shell .app-view[data-page="control"] .control-section-nav button.active,
html[data-theme-monochrome-mode="dark"] .app-shell .app-view[data-page="pricing"] .program-tab.active,
html[data-theme-monochrome-mode="dark"] .app-shell .app-view .table-footer button.active {
  border-color: #f5f5f5 !important;
  background: #171717 !important;
  color: #ffffff !important;
}

html[data-theme-monochrome-mode="dark"] .app-shell :is(
  .nav-item.active .main-nav-icon,
  .period-filter button.active .period-calendar-icon,
  .control-section-nav button.active .admin-nav-icon img,
  .filter-tabs button.active .filter-tab-icon
) {
  filter: brightness(0) saturate(100%) invert(1) !important;
}

html[data-theme-monochrome="on"] :is(.demand-trend-photo, .counter-ranking-empty) {
  border-color: var(--line) !important;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="pricing"] .program-tab-remove {
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="pricing"] .program-tab-remove:hover,
html[data-theme-monochrome="on"] .app-view[data-page="pricing"] .program-tab-remove:focus-visible {
  background: transparent !important;
  color: var(--text) !important;
}

.program-catalog-summary,
.program-catalog-option,
.program-catalog-feedback {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--text) !important;
}

.program-catalog-option {
  border-left-color: var(--airline-color, var(--blue)) !important;
}

.program-catalog-option:not(:disabled):hover,
.program-catalog-option.selected {
  border-color: color-mix(in srgb, var(--airline-color, var(--blue)) 62%, var(--line)) !important;
  background: color-mix(in srgb, var(--airline-color, var(--blue)) 10%, var(--surface-soft)) !important;
}

.program-catalog-option small {
  color: var(--muted) !important;
}

.program-catalog-option em {
  background: color-mix(in srgb, var(--green) 9%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--green) 65%, var(--text)) !important;
}

/* O Painel de Permissoes acompanha integralmente o tema global. */
.app-view[data-page="permissions"] :is(
  .permission-invite-card,
  .permission-summary-card,
  .permission-people-card
) {
  border-color: var(--line) !important;
  border-radius: var(--theme-radius) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent),
    color-mix(in srgb, var(--surface) 96%, transparent)
  ) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, var(--theme-shadow-strength)) !important;
  backdrop-filter: blur(var(--theme-blur));
}

.app-view[data-page="permissions"] :is(
  .permissions-page-icon,
  .permission-heading-icon
) {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-soft)) !important;
}

.app-view[data-page="permissions"] :is(
  .permissions-page-icon img,
  .permission-heading-icon img
) {
  filter: var(--theme-icon-filter) !important;
  opacity: .88;
}

.app-view[data-page="permissions"] :is(
  .permission-card-heading > div > span,
  .permission-card-heading p,
  .profile-option-copy > small,
  .permission-delivery-note,
  .permission-person-identity small,
  .permission-email-field > span small
) {
  color: var(--muted) !important;
}

.app-view[data-page="permissions"] :is(
  .permission-email-field,
  .profile-options > legend,
  .profile-option-copy > strong,
  .permission-person-identity strong
) {
  color: var(--text) !important;
}

.app-view[data-page="permissions"] .permission-email-field input {
  border-color: var(--line) !important;
  border-radius: calc(var(--theme-radius) * .72) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--text) !important;
}

.app-view[data-page="permissions"] .permission-email-field input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 17%, transparent) !important;
}

.app-view[data-page="permissions"] .permission-email-field input::placeholder {
  color: var(--muted-deep) !important;
}

.app-view[data-page="permissions"] .profile-option {
  border-color: var(--line) !important;
  border-radius: calc(var(--theme-radius) * .82) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

.app-view[data-page="permissions"] .profile-option:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-soft)) !important;
}

.app-view[data-page="permissions"] .profile-option.selected {
  border-color: color-mix(in srgb, var(--blue) 78%, var(--line)) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--blue) 16%, var(--surface-soft)),
    color-mix(in srgb, var(--orange) 7%, var(--surface))
  ) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent) !important;
}

.app-view[data-page="permissions"] .profile-option-marker {
  border-color: color-mix(in srgb, var(--muted) 58%, var(--line)) !important;
  background: var(--surface) !important;
}

.app-view[data-page="permissions"] .profile-option.selected .profile-option-marker {
  border-color: var(--blue) !important;
  background: var(--theme-on-primary) !important;
}

.app-view[data-page="permissions"] .profile-access-list em {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 44%, var(--text)) !important;
}

.app-view[data-page="permissions"] :is(
  .permission-matrix,
  .permission-person-row
) {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
}

.app-view[data-page="permissions"] .permission-matrix-row {
  border-color: var(--line) !important;
}

.app-view[data-page="permissions"] .permission-matrix-head {
  background: var(--surface-raised) !important;
}

.app-view[data-page="permissions"] .permission-matrix-row > span {
  color: var(--text) !important;
}

.app-view[data-page="permissions"] .permission-matrix-head :is(span, strong) {
  color: var(--muted) !important;
}

.app-view[data-page="permissions"] .permission-master-access {
  color: color-mix(in srgb, var(--blue) 48%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-matrix .denied {
  color: var(--muted-deep) !important;
}

.app-view[data-page="permissions"] .permission-screen-switch > span {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
}

.app-view[data-page="permissions"] .permission-screen-switch > span::after {
  background: var(--muted) !important;
}

.app-view[data-page="permissions"] .permission-screen-switch input:checked + span {
  border-color: color-mix(in srgb, var(--green) 66%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 18%, var(--surface-soft)) !important;
}

.app-view[data-page="permissions"] .permission-screen-switch input:checked + span::after {
  background: var(--green) !important;
}

.app-view[data-page="permissions"] .permission-count {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 48%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-person-avatar {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line)) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--canvas-deep) 28%, transparent);
}

.app-view[data-page="permissions"] .permission-person-telegram {
  color: color-mix(in srgb, var(--blue) 60%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-person-telegram::before {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-soft)) !important;
}

.app-view[data-page="permissions"] .permission-person-telegram:hover {
  color: var(--text) !important;
}

.permission-telegram-modal-note {
  color: var(--muted) !important;
}

.app-view[data-page="permissions"] :is(
  .permission-profile-badge,
  .permission-status-badge
) {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent) !important;
  color: var(--muted) !important;
}

.app-view[data-page="permissions"] .permission-profile-badge.master {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--blue) 52%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-status-badge.active {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 8%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--green) 62%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-status-badge.pending {
  border-color: color-mix(in srgb, var(--orange) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 8%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--orange) 62%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-people-guidance {
  color: color-mix(in srgb, var(--blue) 62%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-person-action {
  border-color: color-mix(in srgb, var(--red) 26%, var(--line)) !important;
  background: color-mix(in srgb, var(--red) 5%, var(--surface-soft)) !important;
  color: color-mix(in srgb, var(--red) 58%, var(--text)) !important;
}

.app-view[data-page="permissions"] .permission-person-action:hover {
  border-color: color-mix(in srgb, var(--red) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--red) 8%, var(--surface-soft)) !important;
  color: var(--red) !important;
}

.app-view[data-page="permissions"] .permission-person-access {
  border-color: var(--line) !important;
}

.app-view[data-page="permissions"] .permission-person-access > div:first-child strong {
  color: var(--text) !important;
}

.app-view[data-page="permissions"] .permission-person-access > div:first-child small {
  color: var(--muted) !important;
}

.app-view[data-page="permissions"] .permission-person-screen-option {
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent) !important;
}

.app-view[data-page="permissions"] .permission-person-screen-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--green) 44%, var(--line)) !important;
  background: color-mix(in srgb, var(--green) 9%, var(--surface-soft)) !important;
}

.app-view[data-page="permissions"] .permission-person-screen-option > span {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.app-view[data-page="permissions"] .permission-person-screen-option input:checked + span {
  border-color: var(--green) !important;
  background: var(--green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent) !important;
}

.app-view[data-page="permissions"] .permission-person-screen-option b {
  color: var(--text) !important;
}

html[data-theme-gradients="off"] .app-view[data-page="permissions"] :is(
  .permission-invite-card,
  .permission-summary-card,
  .permission-people-card,
  .profile-option.selected
) {
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
}

html[data-theme-glass="off"] .app-view[data-page="permissions"] :is(
  .permission-invite-card,
  .permission-summary-card,
  .permission-people-card
) {
  backdrop-filter: none !important;
}

html[data-theme-glow="on"] .app-view[data-page="permissions"] .profile-option.selected {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 22%, transparent),
    0 0 24px color-mix(in srgb, var(--blue) var(--theme-glow-strength), transparent) !important;
}

html[data-theme-monochrome="on"] .app-view[data-page="permissions"] :is(
  .permissions-page-icon img,
  .permission-heading-icon img
) {
  filter: var(--theme-icon-filter) !important;
}

/* Contrato da paleta para todos os controles operacionais do Administrador. */
.app-view[data-page="control"] :is(
  .price-guard-row,
  .fleet-summary,
  .filter-tabs,
  .delay-settings,
  .segmented-control
) {
  border-color: var(--line) !important;
  border-radius: var(--theme-radius) !important;
  background: color-mix(in srgb, var(--surface-soft) var(--theme-surface-mix), transparent) !important;
}

.app-view[data-page="control"] .price-guard-row input,
.app-view[data-page="control"] .group-info input,
.app-view[data-page="control"] .group-delay-control :is(select, input) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.app-view[data-page="control"] .price-guard-row input:focus,
.app-view[data-page="control"] .group-info input:focus,
.app-view[data-page="control"] .group-delay-control :is(select, input):focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 17%, transparent) !important;
}

.app-view[data-page="control"] :is(
  .price-guard-identity,
  .fleet-card strong,
  .template-field,
  .behavior-grid > label
) {
  color: var(--text) !important;
}

.app-view[data-page="control"] .filter-tabs button.active,
.app-view[data-page="control"] .segmented-control input:checked + span {
  background: var(--blue) !important;
  color: var(--theme-on-primary) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 40%, transparent) !important;
}

.app-view[data-page="control"] .segmented-control input:focus-visible + span {
  outline-color: color-mix(in srgb, var(--blue) 48%, transparent) !important;
}

.app-view[data-page="control"] .fleet-actions button {
  border-color: var(--line) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
}

.app-view[data-page="control"] .fleet-actions button:last-child {
  border-color: color-mix(in srgb, var(--orange) 46%, var(--line)) !important;
  color: color-mix(in srgb, var(--orange) 72%, var(--text)) !important;
}

.app-view[data-page="control"] .fleet-state.running {
  color: var(--green) !important;
}

.app-view[data-page="control"] .fleet-state.stopped,
.app-view[data-page="control"] .fleet-error {
  color: var(--red) !important;
}

.app-view[data-page="control"] .fleet-state.unknown {
  color: var(--orange) !important;
}

/* Estados visuais finais da matriz de preços em qualquer tema. */
.app-view[data-page="pricing"] .pricing-table td.has-price-value:nth-child(n+3):nth-child(-n+11) {
  background: color-mix(in srgb, var(--blue) 15%, var(--surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 13%, transparent) !important;
}

.app-view[data-page="pricing"] .pricing-table .price-field:not(.has-price-value) input {
  border-color: color-mix(in srgb, var(--line) 62%, transparent) !important;
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.app-view[data-page="pricing"] .pricing-table .price-field.has-price-value .price-input {
  border-color: color-mix(in srgb, var(--blue) 68%, var(--line)) !important;
  background: color-mix(in srgb, var(--blue) 13%, var(--surface)) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 var(--blue), 0 5px 14px color-mix(in srgb, var(--blue) 10%, transparent) !important;
}

.app-view[data-page="pricing"] .pricing-table .price-field.liminar.has-price-value .liminar-price-input {
  border-color: color-mix(in srgb, var(--orange) 72%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 12%, var(--surface)) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 var(--orange), 0 5px 14px color-mix(in srgb, var(--orange) 10%, transparent) !important;
}