/* Shared visual tokens and responsive refinements. Keep this stylesheet last. */
:root {
  color-scheme: light;
  --app-background: #f4f7fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f7f9fc;
  --app-text: #17253b;
  --app-text-muted: #516079;
  --app-border: #d8e1ed;
  --app-control-border: #7f90a8;
  --app-accent: #1d4ed8;
  --app-focus: #1d4ed8;
  --app-icon-tint: #edf3ff;
  --app-shadow: 0 8px 24px rgba(22, 39, 67, 0.06);
  --editor-key-allowed-bg: #eaf2ff;
  --editor-key-allowed-border: #2563eb;
  --editor-key-allowed-text: #153e75;
  --editor-key-allowed-hover: #d7e7ff;
  --editor-key-restricted-bg: #edf0f4;
  --editor-key-restricted-border: #8492a6;
  --editor-key-restricted-text: #455468;
}

:root:is([data-theme="dark"], .dark-theme),
body.dark-theme {
  color-scheme: dark;
  --app-background: #0b1220;
  --app-surface: #111c2d;
  --app-surface-soft: #172438;
  --app-text: #f2f6fc;
  --app-text-muted: #b7c4d8;
  --app-border: #34445d;
  --app-control-border: #667b99;
  --app-accent: #8bb8ff;
  --app-focus: #8bb8ff;
  --app-icon-tint: #1b2d49;
  --app-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  --editor-key-allowed-bg: #1c4269;
  --editor-key-allowed-border: #76bbff;
  --editor-key-allowed-text: #f4f9ff;
  --editor-key-allowed-hover: #265781;
  --editor-key-restricted-bg: #111b2a;
  --editor-key-restricted-border: #7888a0;
  --editor-key-restricted-text: #c4cedc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) {
    color-scheme: dark;
    --app-background: #0b1220;
    --app-surface: #111c2d;
    --app-surface-soft: #172438;
    --app-text: #f2f6fc;
    --app-text-muted: #b7c4d8;
    --app-border: #34445d;
    --app-control-border: #667b99;
    --app-accent: #8bb8ff;
    --app-focus: #8bb8ff;
    --app-icon-tint: #1b2d49;
    --app-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    --editor-key-allowed-bg: #1c4269;
    --editor-key-allowed-border: #76bbff;
    --editor-key-allowed-text: #f4f9ff;
    --editor-key-allowed-hover: #265781;
    --editor-key-restricted-bg: #111b2a;
    --editor-key-restricted-border: #7888a0;
    --editor-key-restricted-text: #c4cedc;
  }
}

body {
  background-color: var(--app-background);
  color: var(--app-text);
}

body > .main {
  max-width: 1180px;
  min-width: 0;
  padding: clamp(16px, 3vw, 34px) clamp(12px, 3vw, 28px);
}

body > .main > * {
  min-width: 0;
  max-width: 100%;
}

body > .main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  max-width: 100%;
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-control-border);
}

body > .main :is(input, textarea)::placeholder {
  color: var(--app-text-muted);
  opacity: 1;
}

body > .main :is(button, input, select, textarea, summary, a):focus-visible,
.menu-icon:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 3px;
}

footer {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

.footer-links li a,
.footer-links li button,
.footer-copy {
  color: var(--app-text-muted);
}

.productivity-tip {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-muted);
  box-shadow: none;
}

.tela-inicial {
  max-width: 1120px;
  gap: clamp(20px, 3vw, 30px);
}

.hero-inicial {
  position: relative;
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
  text-align: left;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(135deg, var(--app-surface) 12%, var(--app-surface-soft) 100%);
  box-shadow: var(--app-shadow);
}

.hero-inicial .hero-badge {
  color: #1e40af;
  background: #eaf1ff;
  border-color: #cbdcff;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.hero-inicial .titulo-inicial {
  max-width: 18ch;
  margin-bottom: 12px;
  color: var(--app-text);
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-align: left;
}

.hero-inicial .subtitulo-inicial {
  max-width: 62ch;
  margin: 0 0 26px;
  color: var(--app-text-muted);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.7;
  text-align: left;
}

.hero-inicial .hero-actions {
  justify-content: flex-start;
  gap: 10px;
}

.hero-inicial .hero-actions button {
  min-height: 48px;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 0.94rem;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.hero-inicial .hero-actions .btn-hero-primary {
  background: #1e40af;
}

.hero-inicial .hero-actions .btn-hero-primary:hover {
  background: #1e3a8a;
}

.hero-inicial .hero-actions .btn-hero-secondary {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
}

.hero-inicial .hero-actions .btn-hero-secondary:hover {
  border-color: #8aa9db;
  background: var(--app-surface-soft);
}

.hero-inicial .hero-actions button:hover {
  transform: translateY(-1px);
}

.grid-recursos-destaque {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.grid-recursos-destaque .item-recurso-destaque {
  min-width: 0;
  padding: 18px;
  border-color: var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
  box-shadow: none;
}

.grid-recursos-destaque .item-recurso-destaque:hover {
  border-color: #a9bddb;
  box-shadow: 0 8px 20px rgba(22, 39, 67, 0.08);
  transform: translateY(-1px);
}

.grid-recursos-destaque .recurso-icon {
  background: var(--app-icon-tint);
}

.grid-recursos-destaque .recurso-textos h3 {
  color: var(--app-text);
}

.grid-recursos-destaque .recurso-textos p {
  color: var(--app-text-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.secao-modulos-container {
  scroll-margin-top: 88px;
  gap: 18px;
}

.secao-modulos-header .secao-modulos-titulo {
  color: var(--app-text);
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  letter-spacing: -0.025em;
}

.secao-modulos-header .secao-modulos-sub {
  color: var(--app-text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.calculadora-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: stretch;
  gap: 16px;
}

.calculadora-list .card-modulo-calculadora {
  min-width: 0;
  min-height: 0;
  padding: 22px;
  border-color: var(--app-border);
  border-radius: 18px;
  background: var(--app-surface);
  box-shadow: 0 2px 8px rgba(22, 39, 67, 0.035);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.calculadora-list .card-modulo-calculadora::before {
  height: 3px;
  opacity: 0.8;
}

.calculadora-list .card-modulo-calculadora:hover,
.calculadora-list .card-modulo-calculadora:focus-within {
  border-color: #a9bddb;
  box-shadow: 0 12px 28px rgba(22, 39, 67, 0.09);
  transform: translateY(-2px);
}

.calculadora-list .card-modulo-calculadora .card-modulo-top {
  align-items: center;
  gap: 13px;
}

.calculadora-list .card-modulo-icon {
  background: var(--app-icon-tint);
}

.calculadora-list .card-modulo-titulo {
  min-width: 0;
  color: var(--app-text);
  font-size: 1.03rem;
  line-height: 1.35;
}

.calculadora-list .card-modulo-desc {
  margin-bottom: 14px;
  color: var(--app-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.calculadora-list .card-modulo-details {
  margin: 0 0 16px;
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.calculadora-list .card-modulo-details summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--app-accent);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.calculadora-list .card-modulo-details summary::-webkit-details-marker {
  display: none;
}

.calculadora-list .card-modulo-details summary::after {
  content: "+";
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--app-surface-soft);
  font-size: 1rem;
  line-height: 1;
}

.calculadora-list .card-modulo-details[open] summary::after {
  content: "−";
}

.calculadora-list .card-modulo-features {
  gap: 8px;
  margin: 0;
  padding: 0 0 15px;
}

.calculadora-list .card-modulo-features li {
  align-items: flex-start;
  color: var(--app-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.calculadora-list .card-modulo-features li::before {
  flex: 0 0 auto;
  color: #047857;
}

.calculadora-list .card-modulo-btn {
  min-height: 46px;
  margin-top: auto;
  border-radius: 11px;
  background: #1e40af;
}

.calculadora-list .card-modulo-btn:hover {
  background: #1e3a8a;
}

/* Conditional calculator: clearer surfaces, labels, and compact-screen controls. */
.tela-condicional-container {
  width: 100%;
  max-width: 1200px;
  padding: clamp(12px, 2vw, 20px) clamp(10px, 2vw, 20px) 40px;
  color: var(--app-text);
}

.tela-condicional-container :is(.condicional-header, .cond-box, .cond-result-hero-box, .cond-result-main-card) {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

.tela-condicional-container :is(.condicional-title, .cond-box-title, .cond-res-numeric) {
  color: var(--app-text);
}

.tela-condicional-container :is(.condicional-subtitle, .cond-box-sub, .cond-res-label, .cond-save-state, .sim-count-label, .cond-tabela-actions) {
  color: var(--app-text-muted);
}

.tela-condicional-container :is(.cond-workspace-tabs, .cond-density-toggle, .cond-preset-selector-bar) {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
}

.tela-condicional-container .cond-tab-btn {
  min-height: 40px;
  color: var(--app-text-muted);
}

.tela-condicional-container .cond-tab-btn.active {
  background: var(--app-surface);
  color: var(--app-accent);
}

.tela-condicional-container :is(.btn-cond-action, .btn-copiar-res, .btn-sim-action, .btn-cond-limpar-vars) {
  min-height: 40px;
  border-color: var(--app-control-border);
  background: var(--app-surface);
  color: var(--app-text);
}

.tela-condicional-container :is(.cond-select, .cond-select-sm, .cond-input-var, .cond-input-sm) {
  background-color: var(--app-surface);
  border-color: var(--app-control-border);
  color: var(--app-text);
}

.tela-condicional-container :is(.cond-var-card, .cond-parecer-box, .cond-equacao-card, .cond-regras-summary-box, .cond-simulacao-form, .cond-sim-empty) {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
}

.tela-condicional-container .cond-parecer-msg,
.tela-condicional-container .cond-tabela-planilha td {
  color: var(--app-text);
}

.tela-condicional-container .cond-tabela-planilha th {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
}

:root:is([data-theme="dark"], .dark-theme) .tela-condicional-container :is(.cond-var-card, .cond-parecer-box, .cond-equacao-card, .cond-regras-summary-box, .cond-simulacao-form, .cond-sim-empty),
body.dark-theme .tela-condicional-container :is(.cond-var-card, .cond-parecer-box, .cond-equacao-card, .cond-regras-summary-box, .cond-simulacao-form, .cond-sim-empty) {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
}

:root:is([data-theme="dark"], .dark-theme) .tela-condicional-container .cond-tab-badge,
body.dark-theme .tela-condicional-container .cond-tab-badge {
  border-color: var(--app-border);
  background: #263954;
  color: #d6e2f3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .tela-condicional-container :is(.cond-var-card, .cond-parecer-box, .cond-equacao-card, .cond-regras-summary-box, .cond-simulacao-form, .cond-sim-empty) {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .tela-condicional-container .cond-tab-badge {
    border-color: var(--app-border);
    background: #263954;
    color: #d6e2f3;
  }
}

:root:is([data-theme="dark"], .dark-theme) .hero-inicial .hero-badge,
body.dark-theme .hero-inicial .hero-badge {
  color: #c4d8ff;
  background: #1a2d4b;
  border-color: #34517c;
}

:root:is([data-theme="dark"], .dark-theme) .hero-inicial .hero-actions .btn-hero-primary,
body.dark-theme .hero-inicial .hero-actions .btn-hero-primary,
:root:is([data-theme="dark"], .dark-theme) .calculadora-list .card-modulo-btn,
body.dark-theme .calculadora-list .card-modulo-btn {
  background: #2857b8;
  color: #ffffff;
}

:root:is([data-theme="dark"], .dark-theme) .hero-inicial .hero-actions .btn-hero-primary:hover,
body.dark-theme .hero-inicial .hero-actions .btn-hero-primary:hover,
:root:is([data-theme="dark"], .dark-theme) .calculadora-list .card-modulo-btn:hover,
body.dark-theme .calculadora-list .card-modulo-btn:hover {
  background: #3267cf;
}

:root:is([data-theme="dark"], .dark-theme) .hero-inicial .hero-actions .btn-hero-secondary,
body.dark-theme .hero-inicial .hero-actions .btn-hero-secondary {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
}

:root:is([data-theme="dark"], .dark-theme) .grid-recursos-destaque .item-recurso-destaque:hover,
body.dark-theme .grid-recursos-destaque .item-recurso-destaque:hover,
:root:is([data-theme="dark"], .dark-theme) .calculadora-list .card-modulo-calculadora:hover,
body.dark-theme .calculadora-list .card-modulo-calculadora:hover,
:root:is([data-theme="dark"], .dark-theme) .calculadora-list .card-modulo-calculadora:focus-within,
body.dark-theme .calculadora-list .card-modulo-calculadora:focus-within {
  border-color: #5b7395;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

:root:is([data-theme="dark"], .dark-theme) .calculadora-list .card-modulo-features li::before,
body.dark-theme .calculadora-list .card-modulo-features li::before {
  color: #6ee7b7;
}

:root:is([data-theme="dark"], .dark-theme) footer,
body.dark-theme footer,
:root:is([data-theme="dark"], .dark-theme) .productivity-tip,
body.dark-theme .productivity-tip {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

:root:is([data-theme="dark"], .dark-theme) .footer-links li a,
body.dark-theme .footer-links li a,
:root:is([data-theme="dark"], .dark-theme) .footer-links li button,
body.dark-theme .footer-links li button,
:root:is([data-theme="dark"], .dark-theme) .footer-copy,
body.dark-theme .footer-copy {
  color: var(--app-text-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .hero-inicial .hero-badge {
    color: #c4d8ff;
    background: #1a2d4b;
    border-color: #34517c;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .hero-inicial .hero-actions .btn-hero-primary,
  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .calculadora-list .card-modulo-btn {
    background: #2857b8;
    color: #ffffff;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .hero-inicial .hero-actions .btn-hero-secondary {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) .calculadora-list .card-modulo-features li::before {
    color: #6ee7b7;
  }
}

@media (max-width: 760px) {
  .body > .main {
    padding: 16px clamp(12px, 3vw, 20px);
  }

  .hero-inicial {
    padding: clamp(24px, 6vw, 36px);
  }

  .grid-recursos-destaque {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .body > .main {
    padding: 12px;
  }

  .tela-inicial {
    gap: 18px;
  }

  .hero-inicial {
    padding: 24px 18px;
    border-radius: 19px;
  }

  .hero-inicial .titulo-inicial {
    font-size: clamp(1.85rem, 9vw, 2.3rem);
  }

  .hero-inicial .subtitulo-inicial {
    margin-bottom: 20px;
    font-size: 0.94rem;
  }

  .hero-inicial .hero-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .hero-inicial .hero-actions button {
    width: 100%;
  }

  .grid-recursos-destaque {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .grid-recursos-destaque .item-recurso-destaque {
    padding: 15px;
  }

  .calculadora-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .calculadora-list .card-modulo-calculadora {
    padding: 19px;
  }

  .tela-condicional-container {
    padding: 10px 0 28px;
  }

  .tela-condicional-container .condicional-header {
    align-items: flex-start;
    padding: 14px;
  }

  .tela-condicional-container .condicional-heading-wrap {
    align-items: flex-start;
    gap: 10px;
  }

  .tela-condicional-container .condicional-title {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .tela-condicional-container .condicional-subtitle {
    max-width: 48ch;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .tela-condicional-container .condicional-actions-top,
  .tela-condicional-container .cond-quick-actions {
    width: 100%;
  }

  .tela-condicional-container .cond-density-toggle {
    width: 100%;
  }

  .tela-condicional-container .btn-density-opt {
    min-height: 44px;
    flex: 1 1 0;
    justify-content: center;
  }

  .tela-condicional-container .cond-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tela-condicional-container .cond-quick-actions > button {
    min-height: 44px;
    justify-content: center;
  }

  .tela-condicional-container .cond-save-state {
    grid-column: 1 / -1;
    white-space: normal;
    text-align: left;
  }

  .tela-condicional-container .cond-workspace-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .tela-condicional-container .cond-tab-btn {
    min-height: 44px;
    flex: 0 0 auto;
    padding-inline: 12px;
  }

  .tela-condicional-container .cond-selector-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tela-condicional-container .cond-box {
    padding: 15px 14px;
  }

  .tela-condicional-container .cond-res-top-line {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .tela-condicional-container .cond-res-numeric {
    max-width: 100%;
    font-size: clamp(1.5rem, 8vw, 2rem);
    overflow-wrap: anywhere;
  }

  .tela-condicional-container .tabela-scrollable {
    overflow: auto;
  }

  .tela-condicional-container .rule-item-top {
    align-items: flex-start;
  }

  .tela-condicional-container .rule-summary-line {
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
  }

  .tela-condicional-container .rule-item-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .tela-condicional-container .rule-item-actions button,
  .tela-condicional-container .cond-rules-footer-actions button,
  .tela-condicional-container .cond-tabela-actions button,
  .tela-condicional-container .btn-gerar-simulacao {
    min-width: 42px;
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared finish for calculator screens that have their own feature styles. */
#main :is(
  .conversor-page,
  .geo-page,
  .formas-page,
  .datas-page,
  .calculo-avancado-page,
  .tela-grafica-container,
  .tela-terreno-container,
  .bodyTelaCalculosProgramavel,
  .superiorSectionEditarProgramavel
) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#main :is(.conversor-page, .geo-page, .formas-page, .datas-page, .calculo-avancado-page, .tela-terreno-container) {
  color: var(--app-text);
}

#main :is(.conversor-header, .geo-header, .formas-header, .datas-header, .calculo-avancado-header) {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  min-height: 0;
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main :is(.grafica-header, .terreno-header) {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  min-height: 0;
}

#main :is(.conversor-header h1, .geo-header h1, .formas-header h1, .datas-header h1, .calculo-avancado-header h1) {
  color: var(--app-text);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

#main :is(.conversor-kicker, .geo-header .tool-page-heading span, .formas-header .tool-page-heading span, .datas-header > div > span, .calculo-avancado-kicker, .grafica-badge) {
  color: var(--app-accent);
}

#main .grafica-badge {
  border-color: var(--app-border);
  background: var(--app-icon-tint);
}

#main :is(
  .conversor-header p,
  .geo-header p,
  .geo-card-title p,
  .formas-header p,
  .formas-title p,
  .datas-header p,
  .datas-card-title p,
  .calculo-avancado-header p,
  .terreno-subtitle,
  .grafica-subtitle
) {
  color: var(--app-text-muted);
  line-height: 1.55;
}

#main :is(
  .geo-card,
  .geo-metrics article,
  .geo-dialog,
  .formas-card,
  .formas-metrics article,
  .datas-card,
  .datas-modo,
  .conversor-categorias,
  .conversor-card,
  .conversor-reference,
  .conversor-history,
  .conv-history-item,
  .calculo-card,
  .calculo-ajuda-avancada
) {
  border-color: var(--app-border);
  background-color: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main :is(.geo-header, .formas-header, .conversor-header, .datas-header, .calculo-avancado-header) {
  background: linear-gradient(135deg, var(--app-surface), var(--app-surface-soft));
}

#main :is(.geo-help, .formas-help) {
  border-color: var(--app-border);
  background: var(--app-icon-tint);
  color: var(--app-text);
}

#main :is(.geo-help p, .formas-help p) {
  color: var(--app-text-muted);
}

#main :is(.geo-model-card, .formas-shape-card, .conv-quick, .datas-curiosidades article, .calculo-exemplos) {
  border-color: var(--app-border);
  background-color: var(--app-surface-soft);
  color: var(--app-text);
}

#main :is(.geo-model-card small, .geo-model-card em, .geo-model-selected small, .formas-shape-card small, .formas-fields label, .conv-field > label, .conv-quick span, .conv-quick small, .conv-history-item small, .datas-modo small, .datas-fields label, .datas-unit, .datas-check, .datas-note, .datas-facts p, .calculo-campo-ajuda, .calculo-campo small, .calculo-campo em) {
  color: var(--app-text-muted);
}

#main :is(.geo-field-grid input, .geo-field-grid select, .formas-fields input, .formas-title select, .datas-fields input, .datas-fields select, .datas-unit select, .calculo-avancado-page input, .calculo-avancado-page select, .calculo-avancado-page textarea, .conversor-card-head select, .conv-field input, .conv-field select, .conv-search input) {
  border-color: var(--app-control-border);
  background-color: var(--app-surface);
  color: var(--app-text);
}

#main :is(.geo-field-grid input, .geo-field-grid select, .formas-fields input, .formas-title select, .datas-fields input, .datas-fields select, .datas-unit select, .calculo-avancado-page input, .calculo-avancado-page select, .calculo-avancado-page textarea, .conversor-card-head select, .conv-field input, .conv-field select):focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}

#main .conv-field.result input {
  border-color: #86cda8;
  background: #e8f7ee;
  color: #145c39;
}

#main :is(.conv-empty, .geo-empty) {
  color: var(--app-text-muted);
}

#main .datas-result-card {
  border-color: var(--app-border);
  background: linear-gradient(130deg, var(--app-icon-tint), var(--app-surface));
}

#main :is(.datas-result-main h2, .datas-curiosidades strong, .datas-facts strong) {
  color: var(--app-accent);
}

#main :is(.datas-result-main p, .datas-stats span, .datas-stats small, .datas-timeline, .datas-calendar-hint, .datas-legend) {
  color: var(--app-text-muted);
}

#main .datas-stats strong,
#main .datas-timeline strong {
  color: var(--app-text);
}

#main .datas-day.selected {
  color: #fff;
}

#main .shared-result[data-result-state="error"] .datas-result-card {
  border-color: #e7a1a1;
  background: #fff1f1;
  color: #8b1e1e;
}

#main .shared-result[data-result-state="error"] .datas-result-main h2 {
  color: #8b1e1e;
}

#main :is(.datas-stats, .datas-stats article, .datas-timeline, .datas-calendar-hint) {
  border-color: var(--app-border);
}

#main :is(.geo-btn, .formas-btn, .datas-btn, .conv-btn, .calculo-btn-secondary, .calculo-btn-quiet, .calculo-btn-copy, .btn-terreno-action, .btn-terreno-voltar, .btn-preset, .btn-grafica-action, .btn-grafica-voltar) {
  min-height: 42px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
}

#main :is(.geo-btn.ghost, .formas-btn, .datas-btn, .conv-btn.ghost, .calculo-btn-secondary, .calculo-btn-quiet, .calculo-btn-copy, .btn-terreno-action, .btn-preset, .btn-grafica-action) {
  border-color: var(--app-control-border);
  background-color: var(--app-surface);
  color: var(--app-text);
}

#main :is(.geo-zoom button, .formas-zoom button, .datas-calendar-head > button, .datas-day, .canvas-hud-toolbar .hud-btn) {
  color: var(--app-text);
}

#main .datas-day.outside,
#main .datas-day.weekend,
#main .datas-weekdays span {
  color: var(--app-text-muted);
}

#main .geo-zoom {
  grid-template-columns: 40px 56px 40px;
  flex-basis: 136px;
  width: 136px;
  min-width: 136px;
}

#main .formas-zoom {
  grid-template-columns: 40px 56px 40px;
  flex-basis: 136px;
  width: 136px;
}

#main :is(.geo-zoom button, .formas-zoom button, .datas-calendar-head > button, .canvas-hud-toolbar .hud-btn) {
  min-height: 40px;
}

/* Use the same contrast-safe tokens in dark mode, including controls whose
   feature styles still contain fixed light-theme colors. */
:root:is([data-theme="dark"], .dark-theme) #main :is(.geo-page, .formas-page, .conversor-page, .datas-page, .calculo-avancado-page, .tela-terreno-container, .tela-grafica-container),
body.dark-theme #main :is(.geo-page, .formas-page, .conversor-page, .datas-page, .calculo-avancado-page, .tela-terreno-container, .tela-grafica-container) {
  color: var(--app-text);
}

:root:is([data-theme="dark"], .dark-theme) #main :is(.geo-card, .geo-metrics article, .geo-dialog, .formas-card, .formas-metrics article, .datas-card, .datas-modo, .conversor-categorias, .conversor-card, .conversor-reference, .conversor-history, .conv-history-item, .calculo-card, .calculo-ajuda-avancada),
body.dark-theme #main :is(.geo-card, .geo-metrics article, .geo-dialog, .formas-card, .formas-metrics article, .datas-card, .datas-modo, .conversor-categorias, .conversor-card, .conversor-reference, .conversor-history, .conv-history-item, .calculo-card, .calculo-ajuda-avancada) {
  border-color: var(--app-border);
  background-color: var(--app-surface);
  color: var(--app-text);
}

:root:is([data-theme="dark"], .dark-theme) #main :is(.geo-header, .formas-header, .conversor-header, .datas-header, .calculo-avancado-header),
body.dark-theme #main :is(.geo-header, .formas-header, .conversor-header, .datas-header, .calculo-avancado-header) {
  background: linear-gradient(135deg, var(--app-surface), var(--app-surface-soft));
}

:root:is([data-theme="dark"], .dark-theme) #main :is(.geo-help, .formas-help, .geo-model-card, .formas-shape-card, .conv-quick, .datas-curiosidades article, .calculo-exemplos),
body.dark-theme #main :is(.geo-help, .formas-help, .geo-model-card, .formas-shape-card, .conv-quick, .datas-curiosidades article, .calculo-exemplos) {
  border-color: var(--app-border);
  background-color: var(--app-surface-soft);
  color: var(--app-text);
}

:root:is([data-theme="dark"], .dark-theme) #main :is(.geo-field-grid input, .geo-field-grid select, .formas-fields input, .formas-title select, .datas-fields input, .datas-fields select, .datas-unit select, .calculo-avancado-page input, .calculo-avancado-page select, .calculo-avancado-page textarea, .conversor-card-head select, .conv-field input, .conv-field select, .conv-search input),
body.dark-theme #main :is(.geo-field-grid input, .geo-field-grid select, .formas-fields input, .formas-title select, .datas-fields input, .datas-fields select, .datas-unit select, .calculo-avancado-page input, .calculo-avancado-page select, .calculo-avancado-page textarea, .conversor-card-head select, .conv-field input, .conv-field select, .conv-search input) {
  border-color: var(--app-control-border);
  background-color: var(--app-surface-soft);
  color: var(--app-text);
}

:root:is([data-theme="dark"], .dark-theme) #main .conv-field.result input,
body.dark-theme #main .conv-field.result input {
  border-color: #2c7154;
  background: #12382d;
  color: #a7f3c5;
}

:root:is([data-theme="dark"], .dark-theme) #main :is(.geo-btn.ghost, .formas-btn, .datas-btn, .conv-btn.ghost, .calculo-btn-secondary, .calculo-btn-quiet, .calculo-btn-copy, .btn-terreno-action, .btn-preset, .btn-grafica-action),
body.dark-theme #main :is(.geo-btn.ghost, .formas-btn, .datas-btn, .conv-btn.ghost, .calculo-btn-secondary, .calculo-btn-quiet, .calculo-btn-copy, .btn-terreno-action, .btn-preset, .btn-grafica-action) {
  border-color: var(--app-control-border);
  background-color: var(--app-surface-soft);
  color: var(--app-text);
}

/* Graph and land workspaces have different composition from the form tools. */
#main .tela-grafica-container {
  min-width: 0;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-background);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main .grafica-header,
#main .grafica-sidebar,
#main .grafica-sidebar .grafica-tabs {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
}

#main :is(.grafica-title, .grafica-sidebar h2, .grafica-sidebar h3) {
  color: var(--app-text);
}

#main .grafica-canvas-container {
  background: var(--app-surface-soft);
}

#main .grafica-header .grafica-subtitle {
  display: block;
}

#main .tela-terreno-container {
  max-width: 1400px;
}

#main :is(.terreno-header, .terreno-toolbar-presets, .terreno-box, .hero-result-box) {
  border-color: var(--app-border);
  background-color: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main :is(.terreno-title, .box-title, .terreno-header h1) {
  color: var(--app-text);
}

#main :is(.terreno-subtitle, .box-sub-info, .preset-title) {
  color: var(--app-text-muted);
}

#main .bodyTelaCalculosProgramavel .change-tabs {
  --workspace-bg: var(--app-surface-soft);
  --workspace-border: var(--app-border);
  --workspace-muted: var(--app-text-muted);
  --workspace-text: var(--app-text);
  --workspace-tab-bg: var(--app-surface);
  --workspace-tab-border: var(--app-border);
  --workspace-active-bg: var(--app-icon-tint);
  --workspace-active-border: var(--app-accent);
  box-shadow: var(--app-shadow);
}

#main .bodyTelaCalculosProgramavel .workspace-tab-number {
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
}

#main .bodyTelaCalculosProgramavel .workspace-tab-formula,
#main .bodyTelaCalculosProgramavel .workspace-tab-status,
#main .bodyTelaCalculosProgramavel .workspace-tabs-heading p {
  color: var(--app-text-muted);
}

#main .bodyTelaCalculosProgramavel .workspace-tab-status.has-calculations {
  color: #087044;
}

:root:is([data-theme="dark"], .dark-theme) #main .bodyTelaCalculosProgramavel .workspace-tab-status.has-calculations,
body.dark-theme #main .bodyTelaCalculosProgramavel .workspace-tab-status.has-calculations {
  color: #75e0ad;
}

#main .superiorSectionEditarProgramavel {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main .superiorSectionEditarProgramavel :is(input:not([type="color"]), select, textarea) {
  border-color: var(--app-control-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
}

#main :is(.equation-header, .firstLineEditarProgramavel, .terreno-actions-top, .preset-group, .preset-buttons, .grafica-actions-top) {
  min-width: 0;
}

#main :is(.geo-page, .formas-page, .conversor-page, .datas-page, .calculo-avancado-page, .tela-terreno-container, .tela-grafica-container, .bodyTelaCalculosProgramavel, .superiorSectionEditarProgramavel) :is(img, svg, canvas) {
  max-width: 100%;
}

@media (max-width: 760px) {
  body > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand tools" "search search";
    align-items: center;
    gap: 8px 10px;
    box-sizing: border-box;
    min-height: 0;
    padding: 8px 12px;
  }

  body > header .header-left {
    grid-area: brand;
    min-width: 0;
    gap: 6px;
  }

  body > header .header-left .logo {
    height: 30px;
  }

  body > header .header-search-container {
    grid-area: search;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  body > header .header-right {
    grid-area: tools;
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
    gap: 5px;
  }

  body > header .header-right > * {
    flex: 0 0 auto;
  }

  body > header .language-control {
    min-width: 0;
  }

  body > header .language-control select {
    max-width: 96px;
  }

  body > header .shortcuts-toggle-btn,
  body > header .theme-toggle-btn {
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
    padding: 6px 8px;
  }

  body > header .shortcuts-toggle-btn .shortcuts-text {
    display: none;
  }

  body > header .user-icon {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
  }

  body > header .user-avatar-badge {
    gap: 4px;
    padding: 4px;
  }

  body > header .user-avatar-badge .admin-crown-pill {
    display: none;
  }

  #main :is(.conversor-page, .geo-page, .formas-page, .datas-page, .calculo-avancado-page, .tela-terreno-container) {
    padding-inline: 12px;
  }

  #main :is(.conversor-header, .geo-header, .formas-header, .datas-header, .calculo-avancado-header) {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px;
  }

  #main :is(.tool-page-heading, .geo-header .tool-page-heading, .formas-header .tool-page-heading) {
    min-width: 0;
    gap: 12px;
  }

  #main :is(.conversor-layout, .geo-layout, .formas-layout, .calculo-avancado-layout) {
    grid-template-columns: minmax(0, 1fr);
  }

  #main :is(.conversor-main, .geo-config, .geo-results, .formas-config, .formas-results, .datas-main, .datas-side, .calculo-card) {
    min-width: 0;
  }

  #main :is(.conversor-card, .conversor-reference, .conversor-history, .geo-card, .formas-card, .datas-card, .calculo-card) {
    padding: 18px;
  }

  #main :is(.conversor-card-head, .conversor-section-title, .geo-card-title, .formas-title, .datas-card-title) {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #main :is(.geo-header > .geo-btn, .formas-header > .formas-btn, .datas-header > .datas-btn, .conversor-header > .conv-btn, .calculo-avancado-header > .calculo-btn-secondary) {
    min-height: 44px;
  }

  #main :is(.geo-field-grid, .formas-fields, .datas-fields, .calculo-opcoes, .calculo-campo-grid) {
    min-width: 0;
  }

  #main .tela-grafica-container {
    height: auto;
    min-height: min(760px, calc(100dvh - 120px));
    overflow: visible;
  }

  #main .grafica-header {
    align-items: flex-start;
    padding: 14px;
  }

  #main .grafica-actions-top {
    width: 100%;
    gap: 7px;
  }

  #main .grafica-actions-top > button {
    min-height: 42px;
  }

  #main .grafica-workspace {
    min-height: 0;
  }

  #main :is(.terreno-actions-top, .preset-group, .preset-buttons, .firstLineEditarProgramavel) {
    flex-wrap: wrap;
  }

  #main .tela-terreno-container .terreno-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  #main .tela-terreno-container .terreno-canvas-column,
  #main .tela-terreno-container :is(.terreno-box, .terreno-header, .terreno-toolbar-presets) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #main .tela-terreno-container .terreno-header {
    flex-direction: column;
  }

  #main .tela-terreno-container :is(.terreno-title-group, .terreno-heading-wrap, .terreno-heading-wrap > div) {
    min-width: 0;
    max-width: 100%;
  }

  #main .tela-terreno-container :is(.terreno-title, .terreno-subtitle) {
    overflow-wrap: anywhere;
  }

  #main .terreno-actions-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #main .terreno-actions-top > * {
    min-width: 0;
    justify-content: center;
  }

  #main .terreno-actions-top > .btn-terreno-voltar {
    grid-column: 1 / -1;
  }

  #main .terreno-toolbar-presets {
    flex-direction: column;
    align-items: stretch;
  }

  #main .terreno-toolbar-presets :is(.preset-group, .preset-buttons, .terreno-saved-group) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #main .terreno-toolbar-presets .preset-group {
    align-items: stretch;
    flex-direction: column;
  }

  #main .terreno-toolbar-presets .preset-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main .terreno-toolbar-presets .btn-preset {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  #main .terreno-saved-group select {
    width: 100%;
    max-width: 100%;
  }

  #main .canvas-controls-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  #main .canvas-controls-bar :is(.tool-buttons-group, .canvas-toggles-group, .canvas-zoom-group) {
    min-width: 0;
    max-width: 100%;
  }

  #main .canvas-controls-bar .tool-buttons-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main .canvas-controls-bar .btn-tool {
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }

  #main .canvas-controls-bar .canvas-toggles-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main .canvas-controls-bar .toggle-checkbox-label {
    min-width: 0;
    align-items: flex-start;
    overflow-wrap: anywhere;
  }

  #main .canvas-controls-bar .toggle-checkbox-label input {
    flex: 0 0 auto;
  }

  #main .canvas-controls-bar .canvas-zoom-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #main .canvas-controls-bar .canvas-zoom-group button {
    min-width: 0;
    min-height: 40px;
    padding: 6px 4px;
    white-space: normal;
  }

  #main .tela-terreno-container .canvas-footer-info {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #main .tela-terreno-container .tabela-lados-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  #main :is(.btn-terreno-action, .btn-terreno-voltar, .btn-preset) {
    min-height: 42px;
  }
}

@media (max-width: 520px) {
  body > header {
    gap: 7px 8px;
    padding-inline: 10px;
  }

  #main :is(.conversor-page, .geo-page, .formas-page, .datas-page, .calculo-avancado-page, .tela-terreno-container) {
    padding-inline: 8px;
  }

  #main :is(.conversor-header, .geo-header, .formas-header, .datas-header, .calculo-avancado-header) {
    padding: 16px;
  }

  #main :is(.conversor-header h1, .geo-header h1, .formas-header h1, .datas-header h1, .calculo-avancado-header h1) {
    font-size: clamp(1.4rem, 7vw, 1.75rem);
  }

  #main :is(.conversor-card, .conversor-reference, .conversor-history, .geo-card, .formas-card, .datas-card, .calculo-card) {
    padding: 15px;
  }

  #main :is(.conversor-actions, .calculo-acoes) {
    width: 100%;
  }

  #main :is(.conversor-actions > button, .calculo-acoes > button) {
    min-height: 44px;
    flex: 1 1 auto;
  }

  #main .calculo-operacoes {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .calculo-operacao {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 60px;
  }

  #main :is(.geo-card-title .geo-zoom, .formas-zoom) {
    flex-basis: 136px;
    width: 136px;
  }

  #main :is(.datas-modos, .formas-metrics, .geo-metrics) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main .datas-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .datas-stats article {
    border-right: 0;
  }

  #main :is(.geo-visual svg, .formas-visual svg) {
    min-height: 240px;
  }

  #main .grafica-header .grafica-actions-top > button {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  #main .bodyTelaCalculosProgramavel .equation-header {
    flex-wrap: wrap;
  }

  #main .bodyTelaCalculosProgramavel .equation-header > * {
    min-width: min(100%, 130px);
  }

  #main .superiorSectionEditarProgramavel .firstLineEditarProgramavel > button {
    min-height: 42px;
  }
}

@media (max-width: 360px) {
  body > header .language-control select {
    max-width: 84px;
    padding-right: 16px;
  }

  body > header .user-avatar-badge .user-status-dot {
    display: none;
  }
}

/* Extend token-based contrast to the detailed work areas as well. */
#main .calculo-avancado-page {
  --calculo-texto: var(--app-text);
  --calculo-suave: var(--app-text-muted);
  --calculo-borda: var(--app-border);
  --calculo-superficie: var(--app-surface);
  --calculo-superficie-suave: var(--app-surface-soft);
  --calculo-sombra: var(--app-shadow);
}

#main :is(.geo-card-title label, .formas-title label, .conversor-card-head label, .calculo-label, .calculo-tipo-integral legend) {
  color: var(--app-text-muted);
}

#main :is(.calculo-resultado-destaque, .calculo-exemplos, .calculo-aviso-engine) {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
}

#main .calculo-resultado-destaque:not([data-estado]) {
  border-color: #b7c9e3;
  background: linear-gradient(135deg, var(--app-icon-tint), var(--app-surface));
}

#main .calculo-resultado-destaque[data-estado="aviso"] {
  border-color: #c89b36;
  background: #fff7df;
  color: #684700;
}

#main .calculo-resultado-destaque[data-estado="erro"] {
  border-color: #d58b8b;
  background: #fff0f0;
  color: #8b1e1e;
}

#main :is(.calculo-expressao-resultado, .calculo-vazio) {
  color: var(--app-text);
}

#main :is(.calculo-result-label, .calculo-aviso-engine strong) {
  color: var(--app-accent);
}

#main #calculoStatus[data-estado="erro"] {
  color: #a51f1f;
}

#main #calculoStatus[data-estado="pendente"] {
  color: #835900;
}

#main :is(.geo-model-card.active, .formas-shape-card.active, .datas-modo.active, .grafica-tab-btn.active) {
  border-color: var(--app-accent);
  background: var(--app-icon-tint);
  color: var(--app-text);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

#main :is(.formas-metrics strong, .geo-metrics strong, .calculo-operacao.active) {
  color: var(--app-accent);
}

#main .geo-model-selected {
  border-color: var(--app-border);
  background: var(--app-icon-tint);
  color: var(--app-text);
}

#main .conv-category:not(.active) {
  color: var(--app-text-muted);
}

#main .conv-category:not(.active):hover {
  background: var(--app-surface-soft);
  color: var(--app-text);
}

#main .conversor-equivalencia {
  border: 1px solid var(--app-border);
  background: var(--app-icon-tint);
  color: var(--app-accent);
}

#main .btn-preset.active {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}

#main .grafica-sidebar :is(.grafica-tab-btn, .grafica-tab-pane, .grafica-keypad, .grafica-keypad-wrapper) {
  border-color: var(--app-border);
  background-color: var(--app-surface);
  color: var(--app-text);
}

#main .grafica-sidebar :is(input, select, textarea, .grafica-select, .grafica-num-input) {
  min-height: 42px;
  border-color: var(--app-control-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
}

#main .grafica-sidebar .grafica-tab-btn {
  min-height: 44px;
}

#main .grafica-canvas-container :is(.canvas-hud-toolbar, .canvas-hud-coords, .canvas-hud-dica) {
  border-color: var(--app-control-border);
  background: var(--app-surface);
  color: var(--app-text);
}

#main .grafica-canvas-container .canvas-hud-toolbar .hud-btn {
  width: 40px;
  height: 40px;
}

#main .tela-terreno-container :is(.terreno-modal-box, .hero-metric-card, .estimativa-card, .estimativas-form, .cerca-resultado-summary) {
  border-color: var(--app-border);
  background-color: var(--app-surface);
  color: var(--app-text);
}

#main .tela-terreno-container :is(.metric-label, .metric-sub, .metric-unit, .box-sub-info, .cerca-res-lbl, .unidade-desc) {
  color: var(--app-text-muted);
}

#main .tela-terreno-container :is(.terreno-select-sm, .input-comprimento-lado, .input-angulo-lado, .input-lado-inline, .cerca-field input, .estimativa-inputs-row input, .modal-input-group input, .modal-input-group select) {
  border-color: var(--app-control-border);
  background-color: var(--app-surface-soft);
  color: var(--app-text);
}

#main .bodyTelaCalculosProgramavel {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main .bodyTelaCalculosProgramavel :is(.equation-header select, .equation-structure, .variables-container, .variables-container .variavel-linha, .history-container, .result-container) {
  border-color: var(--app-border);
  background-color: var(--app-surface-soft);
  color: var(--app-text);
}

#main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .var-desc {
  border-color: var(--app-control-border);
  background: var(--app-surface);
  color: var(--app-text);
}

#main .bodyTelaCalculosProgramavel :is(.variables-container .variavel-linha .var-name, .history-container h3, .history-container .history-title-wrap h3) {
  color: var(--app-text);
}

#main .bodyTelaCalculosProgramavel .linhaTecladoHistoricoCalculoProgramavel .btnTecladoCalcularProgramavel {
  min-height: 42px;
  border-color: var(--app-control-border);
  background: var(--app-surface);
  color: var(--app-text);
}

#main .bodyTelaCalculosProgramavel :is(#result, .stat-num, .historicoResultadoValor) {
  color: var(--app-accent) !important;
}

#main .bodyTelaCalculosProgramavel .historicoNomeFormula {
  color: var(--app-text) !important;
}

#main .bodyTelaCalculosProgramavel .historicoLinhaCalculosProgramavel :is(.btnExportHistoricoLinhaPdf, .btnRestaurarHistorico) {
  border-color: var(--app-control-border) !important;
  background: var(--app-surface-soft) !important;
  color: var(--app-text) !important;
}

:root:is([data-theme="dark"], .dark-theme) #main .calculo-resultado-destaque[data-estado="aviso"],
body.dark-theme #main .calculo-resultado-destaque[data-estado="aviso"] {
  border-color: #a16207;
  background: #422006;
  color: #fde68a;
}

:root:is([data-theme="dark"], .dark-theme) #main .calculo-resultado-destaque[data-estado="erro"],
body.dark-theme #main .calculo-resultado-destaque[data-estado="erro"] {
  border-color: #991b1b;
  background: #450a0a;
  color: #fecaca;
}

:root:is([data-theme="dark"], .dark-theme) #main .shared-result[data-result-state="error"] .datas-result-card,
body.dark-theme #main .shared-result[data-result-state="error"] .datas-result-card {
  border-color: #b91c1c;
  background: #3b151a;
  color: #fecaca;
}

:root:is([data-theme="dark"], .dark-theme) #main .shared-result[data-result-state="error"] .datas-result-main h2,
body.dark-theme #main .shared-result[data-result-state="error"] .datas-result-main h2,
:root:is([data-theme="dark"], .dark-theme) #main #calculoStatus[data-estado="erro"],
body.dark-theme #main #calculoStatus[data-estado="erro"] {
  color: #fecaca;
}

:root:is([data-theme="dark"], .dark-theme) #main #calculoStatus[data-estado="pendente"],
body.dark-theme #main #calculoStatus[data-estado="pendente"] {
  color: #fde68a;
}

:root:is([data-theme="dark"], .dark-theme) #main .btn-preset.active,
body.dark-theme #main .btn-preset.active {
  border-color: #2857b8;
  background: #2857b8;
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main .calculo-resultado-destaque[data-estado="aviso"] {
    border-color: #a16207;
    background: #422006;
    color: #fde68a;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main .calculo-resultado-destaque[data-estado="erro"] {
    border-color: #991b1b;
    background: #450a0a;
    color: #fecaca;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main .shared-result[data-result-state="error"] .datas-result-card {
    border-color: #b91c1c;
    background: #3b151a;
    color: #fecaca;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main :is(.shared-result[data-result-state="error"] .datas-result-main h2, #calculoStatus[data-estado="erro"]) {
    color: #fecaca;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main #calculoStatus[data-estado="pendente"] {
    color: #fde68a;
  }

  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main .btn-preset.active {
    border-color: #2857b8;
    background: #2857b8;
    color: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not([data-theme="dark"]) #main .conv-field.result input {
    border-color: #2c7154;
    background: #12382d;
    color: #a7f3c5;
  }
}

/* Keep programmable-calculator rows and long results usable on narrow phones. */
@media (max-width: 480px) {
  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "name clear"
      "input input"
      "history random";
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
    padding: 8px;
  }

  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .var-name {
    grid-area: name;
    justify-self: start;
    min-width: 0;
  }

  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .var-desc {
    grid-area: input;
    width: 100%;
    min-width: 0;
  }

  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .btn-clear {
    grid-area: clear;
    justify-self: end;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }

  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .btn-history {
    grid-area: history;
    justify-self: end;
    min-height: 36px;
  }

  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .random-wrap {
    grid-area: random;
    justify-self: end;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
  }

  #main .bodyTelaCalculosProgramavel .variables-container .variavel-linha .random-wrap .calculosButton {
    min-height: 36px;
  }

  #main .bodyTelaCalculosProgramavel .result-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 10px;
  }

  #main .bodyTelaCalculosProgramavel .result-container .result-main-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "label value"
      "pdf share";
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  #main .bodyTelaCalculosProgramavel .result-container .result-label {
    grid-area: label;
  }

  #main .bodyTelaCalculosProgramavel .result-container .result-main-line #result {
    grid-area: value;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    text-align: right;
    white-space: nowrap;
    word-break: normal;
    font-size: 14px;
  }

  #main .bodyTelaCalculosProgramavel .result-container #btnExportResultadoAtualPdf {
    grid-area: pdf;
    justify-self: end;
    min-height: 34px;
  }

  #main .bodyTelaCalculosProgramavel .result-container #btnCompartilharCalculoAtual {
    grid-area: share;
    min-height: 34px;
  }

  #main .bodyTelaCalculosProgramavel .result-stats-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    min-width: 0;
  }

  #main .bodyTelaCalculosProgramavel .result-stats-container .stat-pill {
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #main .bodyTelaCalculosProgramavel .result-stats-container .stat-num {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #main .bodyTelaCalculosProgramavel .historicoResultadoLinha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    grid-template-areas:
      "result result result"
      ". pdf reuse";
    align-items: center;
    gap: 6px;
  }

  #main .bodyTelaCalculosProgramavel .historicoResultadoInfo {
    grid-area: result;
    min-width: 0;
    flex-wrap: wrap;
  }

  #main .bodyTelaCalculosProgramavel .historicoResultadoLinha .btnExportHistoricoLinhaPdf {
    grid-area: pdf;
    min-height: 36px;
  }

  #main .bodyTelaCalculosProgramavel .historicoResultadoLinha .btnRestaurarHistorico {
    grid-area: reuse;
    min-height: 36px;
  }
}

/* Formula editor: readable previews, aligned controls and consistent keyboard actions. */
#main #tecladosEditarProgramavel {
  min-width: 0;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
}

#main .keyboardEditarProgramavel {
  min-width: 0;
  color: var(--app-text);
}

#main .keyboardEditarProgramavel .tabEditarProgramavel {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
}

#main .keyboardEditarProgramavel .tablinksEditarProgramavel {
  min-height: 42px;
  color: var(--app-text-muted);
}

#main .keyboardEditarProgramavel .tablinksEditarProgramavel:hover {
  background: var(--app-icon-tint);
  color: var(--app-text);
}

#main .keyboardEditarProgramavel .tablinksEditarProgramavel.tablinksEditarProgramavelAtivo {
  border-color: var(--app-control-border);
  background: var(--app-surface);
  color: var(--app-accent);
}

#main .keyboardEditarProgramavel :is(.selecaoVarEditarProgramavel, .selecaoFormulaEditarProgramavel) {
  min-height: 42px;
  border: 1px solid var(--app-control-border);
  border-radius: 10px;
  background: var(--app-surface-soft);
  color: var(--app-text);
  padding: 8px 12px;
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel, .linFormEditarProgramavel) {
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel > label, .linFormEditarProgramavel > label) {
  color: var(--app-text-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel input, .linFormEditarProgramavel input, #inpNameVarEditarProgramavel) {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--app-control-border);
  border-radius: 9px;
  background: var(--app-surface-soft);
  color: var(--app-text);
  padding: 8px 10px;
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel input, .linFormEditarProgramavel input)::placeholder,
#main .keyboardEditarProgramavel #inpNameVarEditarProgramavel[data-placeholder="true"] {
  color: var(--app-text-muted);
  opacity: 1;
}

#main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child,
#main .keyboardEditarProgramavel .linFormEditarProgramavel {
  display: grid;
  min-width: 0;
  align-items: stretch;
}

#main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#main .keyboardEditarProgramavel .linFormEditarProgramavel {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel:last-child > button, .linFormEditarProgramavel > button) {
  width: auto;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--app-control-border);
  border-radius: 10px;
  background: var(--app-surface-soft);
  color: var(--app-text);
  font-size: 0.92rem;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(16, 30, 52, 0.08);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel:last-child > button:hover, .linFormEditarProgramavel > button:hover) {
  transform: translateY(-1px);
  border-color: var(--app-accent);
  background: var(--app-icon-tint);
  color: var(--app-accent);
}

#main .keyboardEditarProgramavel :is(.linVarEditarProgramavel:last-child > button:focus-visible, .linFormEditarProgramavel > button:focus-visible) {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}

#main .keyboardEditarProgramavel #btnInserirVarEditarProgramavel,
#main .keyboardEditarProgramavel #btnInserirFormEditarProgramavel {
  border-color: #138a50;
  background: #138a50;
  color: #fff;
}

#main .keyboardEditarProgramavel #btnExcluirVarEditarProgramavel {
  border-color: #c62828;
  background: #c62828;
  color: #fff;
}

#main .keyboardEditarProgramavel :is(#btnInserirVarEditarProgramavel, #btnInserirFormEditarProgramavel, #btnExcluirVarEditarProgramavel):hover {
  filter: brightness(0.94);
  color: #fff;
}

#main .keyboardEditarProgramavel .previlFormulaKeyboardEditarProgramavel {
  min-height: 88px;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface-soft);
  color: var(--app-text);
  text-align: center;
}

#main .keyboardEditarProgramavel .previlFormulaKeyboardEditarProgramavel > div:first-child {
  color: var(--app-text) !important;
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.5;
}

#main .keyboardEditarProgramavel .previlFormulaKeyboardEditarProgramavel > div:last-child {
  color: var(--app-text-muted) !important;
  font-size: 0.94rem;
  line-height: 1.5;
}

#main .superiorSectionEditarProgramavel .firstLineEditarProgramavel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.2fr) minmax(150px, 0.9fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: 10px;
}

#main .superiorSectionEditarProgramavel .firstLineEditarProgramavel > button {
  min-width: 0;
  min-height: 42px;
  margin: 0;
  border-radius: 10px;
}

#main #btnCompartilharEditarProgramavel {
  border: 1px solid var(--app-border);
  background: var(--app-icon-tint);
  color: var(--app-accent);
  font-weight: 650;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

#main #btnCompartilharEditarProgramavel:hover {
  transform: translateY(-1px);
  border-color: var(--app-accent);
  background: var(--app-surface-soft);
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(78px, 0.42fr) minmax(96px, 0.75fr) minmax(96px, 0.75fr);
  grid-template-areas: "decimals color undo zoom";
  align-items: end;
  gap: 12px;
  min-width: 0;
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div {
  min-width: 0;
  gap: 6px;
  flex: initial;
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div:nth-child(1) {
  grid-area: decimals;
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div:nth-child(2) {
  grid-area: color;
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div:nth-child(3) {
  grid-area: undo;
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div:nth-child(4) {
  grid-area: zoom;
}

#main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel label {
  min-width: 0 !important;
  color: var(--app-text-muted);
  font-size: 0.82rem;
}

#main #labelSelecaoCorEditarProgramavel {
  color: var(--app-text-muted) !important;
}

#main #inpSliderEditarProgramavel {
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0;
  accent-color: var(--app-accent);
}

#main #corEquacaoEditarProgramavel {
  width: 68px;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--app-control-border);
  border-radius: 10px;
  background: var(--app-surface-soft);
  cursor: pointer;
}

#main :is(#btnDesfazerEditarProgramavel, #btnLupaEditarProgramavel) {
  width: 100%;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--app-control-border);
  border-radius: 10px;
  background: var(--app-surface-soft);
  color: var(--app-text);
  box-shadow: none;
}

#main :is(#btnDesfazerEditarProgramavel, #btnLupaEditarProgramavel):hover {
  border-color: var(--app-accent);
  background: var(--app-icon-tint);
  color: var(--app-accent);
}

#main #btnLupaEditarProgramavel.ativo {
  border-color: var(--app-accent);
  background: var(--app-icon-tint);
  color: var(--app-accent);
}

@media (max-width: 640px) {
  .productivity-tip {
    box-sizing: border-box;
    width: calc(100% - 16px);
    max-width: none;
    margin-inline: 8px;
  }

  #main .superiorSectionEditarProgramavel .firstLineEditarProgramavel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "back save" "share delete";
    gap: 8px;
  }

  #main .superiorSectionEditarProgramavel #btnRetornarEditarProgramavel {
    grid-area: back;
  }

  #main .superiorSectionEditarProgramavel #btnSalvarEditarProgramavel {
    grid-area: save;
  }

  #main .superiorSectionEditarProgramavel #btnCompartilharEditarProgramavel {
    grid-area: share;
  }

  #main .superiorSectionEditarProgramavel #btnExcluirEditarProgramavel {
    grid-area: delete;
  }

  #main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "decimals decimals" "color undo" "zoom zoom";
    gap: 10px 12px;
  }

  #main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div:nth-child(2) {
    align-items: start;
  }

  #main .superiorSectionEditarProgramavel .linhaDecimaisCorEditarProgramvel > div:nth-child(4) {
    align-items: start;
  }

  #main #btnLupaEditarProgramavel {
    width: min(100%, 160px);
  }

  #main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "insert insert delete delete" "left right del back";
  }

  #main .keyboardEditarProgramavel #btnInserirVarEditarProgramavel {
    grid-area: insert;
  }

  #main .keyboardEditarProgramavel #btnExcluirVarEditarProgramavel {
    grid-area: delete;
  }

  #main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child > button:nth-of-type(3) {
    grid-area: left;
  }

  #main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child > button:nth-of-type(4) {
    grid-area: right;
  }

  #main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child > button:nth-of-type(5) {
    grid-area: del;
  }

  #main .keyboardEditarProgramavel .linVarEditarProgramavel:last-child > button:nth-of-type(6) {
    grid-area: back;
  }

  #main .keyboardEditarProgramavel .linFormEditarProgramavel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "insert insert insert insert" "left right del back";
  }

  #main .keyboardEditarProgramavel #btnInserirFormEditarProgramavel {
    grid-area: insert;
  }

  #main .keyboardEditarProgramavel .linFormEditarProgramavel > button:nth-of-type(2) {
    grid-area: left;
  }

  #main .keyboardEditarProgramavel .linFormEditarProgramavel > button:nth-of-type(3) {
    grid-area: right;
  }

  #main .keyboardEditarProgramavel .linFormEditarProgramavel > button:nth-of-type(4) {
    grid-area: del;
  }

  #main .keyboardEditarProgramavel .linFormEditarProgramavel > button:nth-of-type(5) {
    grid-area: back;
  }
}

@media (max-width: 380px) {
  #main .keyboardEditarProgramavel .tabEditarProgramavel {
    gap: 2px;
    padding: 3px;
    overflow: hidden;
  }

  #main .keyboardEditarProgramavel .tablinksEditarProgramavel {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 2px;
    font-size: 0.72rem;
    white-space: normal;
  }
}

/* Make available and context-restricted formula keys easy to tell apart in both themes. */
#main .keyboardEditarProgramavel .btnTecladoEditarProgramavel.tecla-valida {
  border: 1px solid var(--editor-key-allowed-border);
  background: var(--editor-key-allowed-bg);
  color: var(--editor-key-allowed-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.16);
}

#main .keyboardEditarProgramavel .btnTecladoEditarProgramavel.tecla-valida:hover {
  border-color: var(--app-accent);
  background: var(--editor-key-allowed-hover);
  color: var(--editor-key-allowed-text);
}

#main .keyboardEditarProgramavel .btnTecladoEditarProgramavel.tecla-invalida {
  border: 1px dashed var(--editor-key-restricted-border);
  background: var(--editor-key-restricted-bg);
  color: var(--editor-key-restricted-text);
  opacity: 1;
  box-shadow: none;
}

#main .keyboardEditarProgramavel .btnTecladoEditarProgramavel:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}

.cond-grafico-heading h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 750;
}
.cond-grafico-heading p {
  margin: 4px 0 0;
  color: var(--app-text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.tela-condicional-container .cond-grafico-wrap {
  margin: 14px 0 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
}
.tela-condicional-container .cond-grafico-wrap[hidden],
.tela-condicional-container .cond-grafico-canvas-wrap[hidden],
.tela-condicional-container .cond-grafico-erro[hidden] {
  display: none !important;
}
.cond-grafico-heading { margin-bottom: 10px; }
.cond-grafico-canvas-wrap {
  position: relative;
  width: 100%;
  height: clamp(230px, 34vw, 340px);
  min-width: 0;
}
.cond-grafico-canvas-wrap canvas { max-width: 100%; }
.cond-grafico-erro {
  margin: 0;
  padding: 20px 12px;
  border-radius: 9px;
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
  font-size: 12px;
  text-align: center;
}
.cond-rule-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.cond-rule-shortcut .btn-link-regras {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--app-control-border);
  border-radius: 7px;
  background: var(--app-surface);
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.cond-rule-workspace-slot > .cond-box { margin-top: 14px; }
.cond-tab-btn.cond-rule-jump { color: var(--app-accent); }
.cond-tab-btn.cond-rule-jump:hover { background: color-mix(in srgb, var(--app-accent) 8%, transparent); }
.btn-grafico-sim:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.cond-result-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.btn-salvar-resultado-cond,
.btn-history-export,
.btn-history-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--app-control-border);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.btn-salvar-resultado-cond:hover,
.btn-history-export:hover { border-color: var(--app-accent); color: var(--app-accent); }
.btn-history-clear:hover { border-color: #dc2626; color: #dc2626; }
.btn-salvar-resultado-cond:disabled,
.btn-history-export:disabled,
.btn-history-clear:disabled { opacity: .55; cursor: not-allowed; }
.cond-history-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 13px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}
.cond-history-header,
.cond-history-title-wrap,
.cond-history-actions { display: flex; align-items: center; }
.cond-history-header { justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.cond-history-title-wrap { min-width: 0; gap: 10px; }
.cond-history-title-wrap > div { min-width: 0; }
.cond-history-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--app-accent) 11%, var(--app-surface)); font-size: 17px; }
.cond-history-title-wrap h2 { margin: 0; color: var(--app-text); font-size: 14px; font-weight: 750; }
.cond-history-title-wrap p { margin: 4px 0 0; color: var(--app-text-muted); font-size: 11px; line-height: 1.45; }
.cond-history-actions { justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.cond-history-count { color: var(--app-text-muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.cond-history-status { margin: 0 0 10px; color: var(--app-accent); font-size: 11px; }
.cond-history-status[hidden] { display: none !important; }
.cond-history-list { display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.cond-history-empty { padding: 20px 12px; border: 1px dashed var(--app-border); border-radius: 9px; color: var(--app-text-muted); font-size: 12px; text-align: center; }
.cond-history-item { min-width: 0; padding: 12px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-soft); }
.cond-history-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cond-history-item-head > div:first-child { min-width: 0; }
.cond-history-item-head h3 { margin: 0; color: var(--app-text); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.cond-history-item-head time { flex: 0 0 auto; color: var(--app-text-muted); font-size: 10px; }
.cond-history-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cond-history-value { min-width: 0; padding: 8px 9px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface); }
.cond-history-value span { display: block; color: var(--app-text-muted); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.cond-history-value strong { display: block; margin-top: 4px; color: var(--app-text); font-size: 14px; overflow-wrap: anywhere; }
.cond-history-value.is-final strong { color: var(--app-accent); }
.cond-history-outcome { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.cond-history-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 8px; border-radius: 7px; font-size: 10px; font-weight: 750; overflow-wrap: anywhere; }
.cond-history-condition,
.cond-history-vars { margin: 7px 0 0; color: var(--app-text-muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.cond-history-condition strong,
.cond-history-vars strong { color: var(--app-text); }
@media (max-width: 640px) {
  .cond-rule-shortcut { align-items: stretch; flex-direction: column; }
  .cond-rule-shortcut .btn-link-regras { align-self: flex-start; }
  .tela-condicional-container .cond-grafico-wrap { padding: 12px; }
  .cond-grafico-canvas-wrap { height: 235px; }
  .cond-history-panel { padding: 12px; }
  .cond-history-header { align-items: stretch; flex-direction: column; }
  .cond-history-actions { justify-content: flex-start; }
  .cond-history-count { width: 100%; }
  .cond-history-item-head { flex-direction: column; }
  .cond-history-item-head time { flex: 0 0 auto; }
}