/*
 * Contrato cromático público.
 *
 * Os 14 nomes editáveis não devem ser renomeados: temas personalizados os
 * armazenam como chaves JSON no banco. --warning é interno e vem do tema-base.
 * Cores suaves são derivadas com color-mix() no ponto de uso, evitando dezenas
 * de tokens duplicados por tema.
 */
:root {
    color-scheme: light;
    --bg: #f7f8fb;
    --surface: #ffffff;
    --surface-muted: #f1f4f8;
    --line: #d9dee7;
    --ink: #0d1424;
    --muted: #677386;
    --accent-2: #2f6fcd;
    --chart-primary: #111111;
    --contribution: #2f6fcd;
    --conclusion-bg: #111111;
    --conclusion-ink: #ffffff;
    --danger: #d9333f;
    --success: #157a56;
    --warning: #c47c12;
    --benefit: #7c3aed;
}

html.theme-dark,
body.theme-dark {
    color-scheme: dark;
    --bg: #10141d;
    --surface: #171d29;
    --surface-muted: #202838;
    --line: #303a4d;
    --ink: #f4f7fb;
    --muted: #a7b0c0;
    --accent-2: #75a7ff;
    --chart-primary: #b7bfcc;
    --contribution: #75a7ff;
    --conclusion-bg: #f4f7fb;
    --conclusion-ink: #07111f;
    --danger: #ff7a85;
    --success: #157a56;
    --warning: #e0a64a;
    --benefit: #b99cff;
}

html.theme-modern-light,
body.theme-modern-light {
    color-scheme: light;
    --bg: #e2f5f8;
    --surface: #fbfeff;
    --surface-muted: #d3ecef;
    --line: #a8d2da;
    --ink: #071924;
    --muted: #486f7a;
    --accent-2: #00a6a6;
    --chart-primary: #073b4c;
    --contribution: #00a6a6;
    --conclusion-bg: #073b4c;
    --conclusion-ink: #ffffff;
    --danger: #d7263d;
    --success: #118c68;
    --warning: #b86b00;
    --benefit: #6842b8;
}

html.theme-vintage,
body.theme-vintage {
    color-scheme: light;
    --bg: #efe4cf;
    --surface: #fff7e8;
    --surface-muted: #ead9b8;
    --line: #d4bd91;
    --ink: #241a12;
    --muted: #705f49;
    --accent-2: #a45f2a;
    --chart-primary: #2b2118;
    --contribution: #2f6588;
    --conclusion-bg: #3a2718;
    --conclusion-ink: #fff7e8;
    --danger: #9b2f2f;
    --success: #3f6b45;
    --warning: #9b5a21;
    --benefit: #73508a;
}

html.theme-dark-black,
body.theme-dark-black {
    color-scheme: dark;
    --bg: #050505;
    --surface: #0b0b0d;
    --surface-muted: #151518;
    --line: #26262b;
    --ink: #f5f5f5;
    --muted: #a3a3a3;
    --accent-2: #d4af37;
    --chart-primary: #e7e7e7;
    --contribution: #d4af37;
    --conclusion-bg: #f5f5f5;
    --conclusion-ink: #050505;
    --danger: #ff5c5c;
    --success: #42d392;
    --warning: #d4af37;
    --benefit: #b78cff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--bg); overflow-x: hidden; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
html.is-modal-locked,
body.is-modal-locked { overflow: hidden; }
body.is-mobile-nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
:where(a, button, [role="button"]):focus-visible {
    outline-width: calc(var(--border-width) * 2);
    outline-style: solid;
    outline-color: var(--accent-2);
    outline-offset: var(--space-1);
}
.skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--layer-modal);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-md);
    color: var(--conclusion-ink);
    background: var(--conclusion-bg);
    transform: translateY(calc(-100% - var(--space-4)));
}
.skip-link:focus { transform: none; }
[data-icon] { display: inline-grid; place-items: center; flex: 0 0 auto; line-height: 1; }
[data-icon] svg { display: block; width: 1em; height: 1em; fill: currentColor; }
[data-icon] svg path { fill: currentColor; }
[data-icon]:empty::before { content: ""; display: block; width: 1em; height: 1em; }
.icon-button[data-icon]:empty::before,
.theme-button[data-icon]:empty::before { width: var(--icon-lg); height: var(--icon-lg); }
.sosomar-brand-mark { display: inline-grid; place-items: center; color: currentColor; background: transparent; box-shadow: none; line-height: 1; }
.sosomar-brand-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sosomar-brand-mark svg path { fill: currentColor; }
.app-shell,
.sidebar,
.topbar,
.mobile-bar,
.nav-item,
.tool-card,
.tool-card__button,
.panel,
.summary-card,
.search-box,
.suggestion-card,
.account-button,
.account-menu,
.primary-button,
.ghost-button,
.icon-button,
.theme-button,
input,
select,
textarea {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: var(--motion-fast);
    transition-timing-function: ease;
}
.ghost-button, .primary-button {align-content: center;}

/* Shell principal: a primeira coluna acompanha a largura real da sidebar para
   evitar que o menu expandido cubra o conteudo. */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    /* O body tambem e .app-shell. Preservar somente a transicao do grid aqui
       sobrescrevia as cores declaradas em body e fazia o fundo trocar de uma
       vez enquanto os demais componentes ainda animavam o tema. */
    transition:
        grid-template-columns var(--motion-normal) ease,
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}
.app-shell:has(.sidebar.is-collapsed) { grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: var(--layer-sidebar); width: var(--sidebar-width); height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 22px var(--space-4); border-right: var(--border-width) solid var(--line); background: var(--surface); overflow-y: auto; overflow-x: hidden; box-shadow: 18px 0 34px rgba(15, 23, 42, .08); }
.sidebar__brand { display: grid; grid-template-columns: 3rem 1fr 2.125rem; align-items: center; gap: 10px; min-height: 3.25rem; }
.sidebar__logo { display: grid; place-items: center; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; }
.sidebar__mark, .auth-modal__logo { width: 2.875rem; height: 2.875rem; object-fit: contain; }
.sidebar__mark { width: 2.125rem; height: 2.125rem; }
.sidebar__name, .mobile-brand { min-width: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .icon-button (mais abaixo) define largura pelo token de controle e vencia por ordem, deixando o
   botao 6px maior que a faixa de 34px do grid da marca. */
.sidebar .sidebar__toggle { width: var(--control-sm); min-width: var(--control-sm); min-height: var(--control-sm); }
button.sidebar__close { display: none; }
.sidebar__nav { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nav-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.nav-group__title { margin: 0; min-width: 0; padding: 0 10px; color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-sm); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04rem; }
.nav-group__title[data-nav-group-toggle] { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.nav-group__title[data-nav-group-toggle] > span:not(.nav-group__icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group__icon { flex: 0 0 var(--icon-lg); display: inline-grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); min-width: var(--icon-lg); margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; color: inherit; background: inherit; box-shadow: none; line-height: 1; }
.nav-group__icon svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.nav-group__icon svg path { fill: currentColor; }
.nav-group.is-nav-collapsed > .nav-item { display: none; }
/* O estado salvo é aplicado no <html> antes do CSS carregar. Estas regras
   mantêm o primeiro frame igual ao estado que o JavaScript irá hidratar. */
html[data-expanded-nav-groups~="financeiras"] [data-nav-group="financeiras"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="empresariais"] [data-nav-group="empresariais"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="uteis"] [data-nav-group="uteis"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="reforma-tributaria"] [data-nav-group="reforma-tributaria"].is-nav-collapsed > .nav-item,
html[data-expanded-nav-groups~="membros"] [data-nav-group="membros"].is-nav-collapsed > .nav-item { display: flex; }
.nav-item { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--control-sm); padding: 9px 10px; border-radius: var(--radius-md); color: var(--muted); background: transparent; overflow: hidden; text-align: left; line-height: 1.2; }
.nav-item__icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: currentColor; }
.nav-item__icon svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
/* Rotulos longos ficam em uma linha com reticencias em vez de quebrar o menu. */
.nav-item__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-tag { display: inline-flex; align-items: center; min-height: 1.25rem; padding: 1px 7px; border-radius: var(--radius-pill); color: var(--surface); background: var(--accent-2); font-family: var(--font-sans); font-weight: 700; font-size: 0.625rem; line-height: 1; letter-spacing: 0.04rem; vertical-align: middle; white-space: nowrap; }
.page-title-with-tag { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.page-title-with-tag h1 { margin: 0; }
.nav-item > .beta-tag { flex: 0 0 auto; margin-left: auto; }
.nav-item--child { min-height: var(--control-sm); padding-left: 18px; font-size: var(--font-size-md); }
.nav-item--group { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-sm); letter-spacing: 0.04rem; }
.nav-item:hover, .nav-item.is-active { color: var(--ink); background: var(--surface-muted); }
.nav-item--button { width: 100%; }
.sidebar__footer { margin-top: auto; display: grid; gap: 10px; }
.sidebar__mobile-actions { display: none; }
.sidebar__site { display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--muted); }
.sidebar__site-icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: currentColor; }
.sidebar__site-icon svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.sidebar.is-collapsed { width: var(--sidebar-collapsed); align-items: center; padding-inline: 10px; box-shadow: none; }
.sidebar.is-collapsed .sidebar__brand { grid-template-columns: 1fr; justify-items: center; }
.sidebar.is-collapsed .sidebar__name,
.sidebar.is-collapsed .nav-group__title,
.sidebar.is-collapsed .nav-item__label,
.sidebar.is-collapsed .sidebar__footer { display: none; }
.sidebar.is-collapsed .sidebar__toggle { display: inline-grid; margin-top: var(--space-2); }
.sidebar.is-collapsed .sidebar__logo::after { display: none; }
.sidebar.is-collapsed .sidebar__logo { cursor: pointer; }
.sidebar.is-collapsed .nav-group { width: 100%; height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-muted); }
.sidebar.is-collapsed .nav-item { display: none; }

.mobile-bar { display: none; }

/* Expandir/recolher da sidebar. A largura da barra e a coluna do grid usam a
   mesma duracao e curva, entao o conteudo acompanha o movimento em vez de
   saltar quando a animacao termina. */
@media (min-width: 47.5625rem) {
    .sidebar { transition: width var(--motion-normal) ease, padding var(--motion-normal) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
    .sidebar__brand { transition: grid-template-columns var(--motion-normal) ease; }
    .sidebar__mark { transition: width var(--motion-normal) ease, height var(--motion-normal) ease; }
    .sidebar__nav,
    .sidebar__footer { transition: opacity var(--motion-fast) ease; }
    .sidebar.is-collapsed .sidebar__nav { opacity: 0.85; }
    .nav-group { transition: height var(--motion-normal) ease, background-color var(--motion-normal) ease; }
    .nav-item { transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
}

.app-main { min-width: 0; width: 100%; }
.topbar { position: sticky; top: 0; z-index: var(--layer-header); display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: var(--topbar-height); padding: var(--space-4) clamp(18px, 3vw, 36px); border-bottom: var(--border-width) solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
.search-area { position: relative; width: min(38.75rem, 100%); transition: margin-left var(--motion-normal) ease; }
.search-box { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-lg); padding: 0 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface); }
.search-box span { font-size: var(--font-size-md); }
.search-box > span[data-icon] { display: inline-grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); flex: 0 0 var(--icon-lg); }
.search-box > span[data-icon] svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-suggestions { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: calc(var(--layer-dropdown) - 5); display: grid; gap: var(--space-2); max-height: min(70vh, 26.875rem); overflow: auto; padding: 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.search-suggestions[hidden] { display: none; }
.suggestion-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); text-align: left; }
.suggestion-card:hover,
.suggestion-card.is-active { border-color: var(--accent-2); background: var(--surface); box-shadow: 0 0 0 3px rgba(47, 111, 205, .12); }
.suggestion-card__content { display: grid; gap: var(--space-1); min-width: 0; }
.suggestion-card small { color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; }
.suggestion-card strong { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.suggestion-card__content .beta-tag { min-height: 1.125rem; color: var(--surface); font-size: 0.5625rem; }
.suggestion-card__content span { color: var(--muted); font-size: var(--font-size-md); line-height: 1.35; }
.suggestion-card__action { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.suggestion-empty { margin: 0; padding: var(--space-3); color: var(--muted); }
.topbar__actions { display: flex; gap: 10px; align-items: center; }
.primary-button, .ghost-button, .icon-button, .theme-button { min-height: var(--control-md); border-radius: var(--radius-md); padding: 0 var(--space-4); transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.theme-button { width: var(--control-md); padding: 0; display: inline-grid; place-items: center; color: var(--ink); }
.primary-button { color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: 0 10px 20px rgba(6, 23, 51, .16); }
.ghost-button, .icon-button, .theme-button { background: var(--surface-muted); border: var(--border-width) solid var(--line); }
.account-menu-wrap { position: relative; }
.account-button { width: var(--control-md); height: var(--control-md); min-height: var(--control-md); display: inline-grid; place-items: center; place-content: center; padding: 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface-muted); box-shadow: none; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.account-button[aria-expanded="true"] { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface-muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
/* Avatar: caixa quadrada unica que centraliza icone, iniciais ou foto do usuario. */
.account-avatar,
.account-menu__avatar { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: transparent; font-family: var(--font-sans); font-weight: 600; line-height: 1; text-align: center; text-transform: uppercase; }
.account-avatar { width: 1.625rem; height: 1.625rem; color: currentColor; font-size: var(--font-size-xs); }
/* Qualquer conteudo do avatar ocupa a mesma celula, entao fica sempre centralizado. */
.account-avatar > *,
.account-menu__avatar > * { grid-area: 1 / 1; place-self: center; max-width: 100%; }
.account-avatar svg,
.account-menu__avatar svg { display: block; margin: 0; fill: currentColor; transform: none; }
.account-avatar svg { width: var(--icon-md); height: var(--icon-md); }
/* Foto do usuario: preenche o circulo inteiro sem distorcer nem vazar. */
.account-avatar img,
.account-menu__avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; }
.account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: calc(var(--layer-modal) - 30); width: min(20rem, 88vw); overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); transform-origin: top right; animation: accountMenuIn var(--motion-fast) ease both; }
.account-menu[hidden] { display: none; }
.account-menu__header { display: grid; grid-template-columns: 3rem 1fr; gap: 14px; align-items: center; padding: 18px var(--space-4) 20px; border-bottom: var(--border-width) solid var(--line); background: var(--surface-muted); }
.account-menu__header strong,
.account-menu__header > div span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__header > div span { color: var(--muted); font-size: var(--font-size-sm); }
.account-menu__avatar { width: 3rem; height: var(--control-lg); border: var(--border-width) solid var(--line); color: var(--ink); background: var(--surface); font-size: var(--font-size-base); }
.account-menu__avatar svg { width: var(--icon-lg); height: var(--icon-lg); }
/* Os itens do menu podem ser <button> (ações) ou <a role="menuitem"> (links
   como Gestão e Ver planos). O seletor cobre os dois para que um link não
   fique sem recuo, ícone e hover só por ser navegação em vez de ação. */
.account-menu button,
.account-menu [role="menuitem"] { width: 100%; min-height: var(--control-md); display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); border-bottom: var(--border-width) solid var(--line); color: var(--ink); background: var(--surface); text-align: left; text-decoration: none; font: inherit; }
.account-menu button > [data-icon],
.account-menu [role="menuitem"] > [data-icon] { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); color: currentColor; }
.account-menu button > [data-icon] svg,
.account-menu [role="menuitem"] > [data-icon] svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.account-menu button:last-child,
.account-menu [role="menuitem"]:last-child { border-bottom: 0; }
.account-menu button:hover,
.account-menu [role="menuitem"]:hover { background: var(--surface-muted); }
.account-menu .account-menu__close { display: none; }
.platform-toast-stack { position: fixed; top: 18px; right: 18px; z-index: calc(var(--layer-modal) + 20); display: grid; gap: 10px; width: min(22.5rem, calc(100vw - 2rem)); pointer-events: none; }
.platform-toast { padding: 14px var(--space-4); border: var(--border-width) solid var(--line); border-left: 4px solid var(--success); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 600; animation: toastIn var(--motion-normal) ease both; }
.platform-toast--error { border-left-color: var(--danger); }
.platform-toast.is-leaving { animation: toastOut var(--motion-normal) ease both; }
.sidebar__mobile-actions .account-menu-wrap { flex: 1; min-width: 0; }
.sidebar__mobile-actions .account-button { width: 100%; justify-content: center; }
.sidebar__mobile-actions .account-menu { left: 0; right: auto; bottom: calc(100% + 10px); top: auto; width: min(16.25rem, 72vw); transform-origin: bottom left; }
.primary-button:hover,
.ghost-button:hover,
.icon-button:hover,
.theme-button:hover,
.account-button:hover,
.tool-card:hover .tool-card__button,
.suggestion-card:hover .suggestion-card__action { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(6, 23, 51, .14); }
.ghost-button:hover,
.icon-button:hover,
.theme-button:hover { border-color: var(--accent-2); background: var(--surface); color: var(--ink); }
.ghost-button:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.ghost-button:disabled:hover { transform: none; box-shadow: none; border-color: var(--line); background: var(--surface-muted); }
.icon-text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.icon-text-button [data-icon] { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); }
.icon-text-button svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.icon-button { width: var(--control-md); padding: 0; display: inline-grid; place-items: center; }
.icon-button svg,
.theme-button svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; }
.icon-button svg path,
.theme-button svg path { fill: currentColor; }
.sidebar__toggle svg,
[data-mobile-menu] svg { transition: transform var(--motion-fast) ease; }
.sidebar__toggle.is-collapsed svg { transform: rotate(180deg); }
.content { width: min(var(--content-max), 100%); margin: 0 auto; padding: 30px clamp(18px, 3vw, 42px) var(--space-8); }
.page-header { margin-bottom: var(--space-5); }
.page-header h1 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 700; font-size: clamp(var(--font-size-3xl), 3.4vw, var(--font-size-display)); letter-spacing: 0; }
.page-header h1 .home-title-full,
.page-header h1 .home-title-mobile { font-family: var(--font-sans); font-weight: 600; }
.page-header p { max-width: 47.5rem; margin: 0; color: var(--muted); font-size: var(--font-size-base); line-height: 1.55; }
.page-header .form-tip { margin-top: var(--space-3); font-size: var(--font-size-sm); line-height: 1.45; }
/* Home de calculadoras: grupos empilhados e cards responsivos por breakpoint. */
.tool-groups { display: grid; gap: 30px; max-width: 100%; }
.tool-section h2 { margin: 0 0 14px; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); text-transform: uppercase; color: var(--muted); }
.tool-section__header { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; margin-bottom: 14px; }
.tool-section__header h2 { margin: 0; }
.tool-scroll-controls { display: flex; gap: var(--space-2); align-items: center; }
.tool-scroll-controls .icon-button { min-height: var(--control-sm); width: var(--control-sm); padding: 0; font-family: var(--font-sans); font-weight: 600; }
.tool-grid { display: flex; flex-wrap: wrap; gap: 18px; max-width: 100%; overflow: visible; padding: 2px 2px 14px; scroll-snap-type: none; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: auto; user-select: none; }
.tool-grid::-webkit-scrollbar { display: none; }
.tool-grid .tool-card { user-select: none; }
.tool-card { flex: 1 1 calc((100% - 3.375rem) / 4); max-width: calc((100% - 3.375rem) / 4); min-height: 11rem; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; align-items: start; padding: 20px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; text-align: left; scroll-snap-align: start; }
.tool-card__icon,
.tool-card__forward,
.tool-card__desc-mobile,
.home-title-mobile { display: none; }
.tool-card__icon svg,
.tool-card__forward svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.tool-card h3 { margin: 0; padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--line); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-xl);}
.tool-card p { margin: 0; padding-bottom: 14px; border-bottom: var(--border-width) solid var(--line); color: var(--muted); line-height: 1.45; }
.tool-card__button { justify-self: start; display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 14px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.tool-card.is-locked { opacity: 0.88; }

/* Layout padrao das calculadoras: formulario de um lado e resumo do outro em desktop. */
.calculator-layout { display: grid; grid-template-columns: minmax(35rem, 1.25fr) minmax(22.5rem, .75fr); gap: var(--space-5); align-items: start; }
.calculator-layout--wide { grid-template-columns: minmax(27.5rem, .85fr) minmax(38.75rem, 1.15fr); }
/* 60% para o formulario e 40% para o resumo. */
.calculator-layout--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.calculator-layout--comparison { grid-template-columns: minmax(31.25rem, 1fr) minmax(31.25rem, 1fr); max-width: none; margin-inline: 0; }
.calculator-layout > *,
.panel,
.panel__body,
.calculator-form,
.form-grid,
.form-grid > label,
.form-subsection,
.dynamic-section,
.dynamic-list,
.dynamic-row,
.summary-card,
.result-list { min-width: 0; }
.panel { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.panel__body { padding: var(--space-5); }
.calculator-form { display: grid; gap: 20px; }
[data-simple-tax] #simpleTaxRegime,
[data-simple-tax] #simpleTaxPeriod { height: 2.625rem; min-height: 2.625rem; }
[data-simple-tax] .form-grid > label { align-content: start; }
[data-simple-tax] [data-field-label] { display: flex; align-items: center; gap: 6px; min-width: 0; }
[data-simple-tax] [data-field-tooltip] { position: relative; display: inline-grid; place-items: center; flex: 0 0 var(--icon-md); width: var(--icon-md); height: var(--icon-md); border: var(--border-width) solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); cursor: help; }
[data-simple-tax] [data-field-tooltip]::after { content: attr(data-field-tooltip); position: absolute; z-index: calc(var(--layer-modal) - 30); bottom: calc(100% + 8px); left: 50%; width: min(17.5rem, 72vw); padding: var(--space-2) 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.4; text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, visibility var(--motion-fast) ease; }
[data-simple-tax] [data-field-tooltip]:hover::after,
[data-simple-tax] [data-field-tooltip]:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
[data-simple-tax] [data-tax-summary-explanation] { margin: 0 var(--space-4) var(--space-3); color: var(--muted); font-size: var(--font-size-sm); line-height: 1.45; }
[data-simple-tax] [data-tax-breakdown] { padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
[data-simple-tax] [data-tax-breakdown] summary { cursor: pointer; color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
[data-simple-tax] [data-tax-breakdown] dl { display: grid; gap: 6px; margin: 10px 0 0; }
[data-simple-tax] [data-tax-breakdown] dl div { display: flex; justify-content: space-between; gap: var(--space-3); }
[data-simple-tax] [data-tax-breakdown] dt { color: var(--muted); }
[data-simple-tax] [data-tax-breakdown] dd { margin: 0; text-align: right; }
[data-simple-tax] [data-tax-breakdown] p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-subsection { display: grid; gap: 14px; padding-top: var(--space-1); margin-top: var(--space-4);}
.form-subsection > strong { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
label { display: grid; gap: var(--space-2); color: var(--ink); font-family: var(--font-sans); font-weight: 600; }
.field-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.field-description { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
input, select, textarea { width: 100%; min-height: var(--control-lg); padding: 0 var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); outline: none; }
textarea { min-height: 7.875rem; padding-block: var(--space-3); resize: vertical; line-height: 1.45; }
input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; opacity: var(--opacity-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
.calculated-field { display: flex; align-items: center; width: 100%; min-height: var(--control-lg); padding: 0 var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--accent-2); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; }
.calculated-field.is-negative { color: var(--danger); }
.money-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-width: 0; min-height: var(--control-lg); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.money-field span { padding: 0 var(--space-3); color: var(--muted); border-right: var(--border-width) solid var(--line); }
.money-field input { min-width: 0; border: 0; border-radius: 0; }
.money-field:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(47, 111, 205, .14); }
.suffix-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; min-height: var(--control-lg); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.suffix-field input { min-width: 0; border: 0; border-radius: 0; }
.suffix-field span { padding: 0 var(--space-3); color: var(--muted); border-left: var(--border-width) solid var(--line); }
.suffix-field input:placeholder-shown + span { display: none; }
.suffix-field:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(47, 111, 205, .14); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-1); }
.form-actions--center { justify-content: center; }
.form-actions--split { justify-content: space-between; }
.form-actions > button { min-width: 0; }
.form-hint { color: var(--muted); font-size: var(--font-size-md); line-height: 1.4; }
.form-hint[data-error-for],
.form-hint[data-validation-summary] { color: var(--danger); }
.estimate-note { margin: var(--space-2) 0 0; padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); font-size: var(--font-size-sm); line-height: 1.45; }
.dynamic-section { display: grid; gap: var(--space-3); padding-top: var(--space-1); }
.dynamic-list { display: grid; gap: 10px; }
.dynamic-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.dynamic-row label { gap: 6px; font-size: var(--font-size-md); }
.dynamic-row .money-field { min-height: var(--control-md); }
.dynamic-row input { min-height: var(--control-md); }
.dynamic-row button { min-width: 6.5rem; min-height: var(--control-md); }
.summary-card { padding: var(--space-5); }
.summary-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.summary-card h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; }
.result-list { display: grid; gap: 10px; }
.result-row { display: grid; grid-template-columns: minmax(6.875rem, auto) 1fr auto; gap: var(--space-3); align-items: center; min-height: 2.625rem; padding: 0 10px; border: var(--border-width) solid var(--line); border-left: 4px solid var(--row-accent, var(--line)); border-radius: var(--radius-md); background: var(--row-bg, var(--surface)); }
.result-row strong { min-width: 0; font-family: var(--font-sans); font-weight: 600; overflow-wrap: anywhere; }
.result-row strong:last-child,
.chart-metric strong,
.chart-legend__item span:last-child { overflow-wrap: anywhere; }
.result-row strong:last-child { text-align: right; white-space: nowrap; overflow-wrap: normal; }
.result-row.is-total { --row-bg: var(--conclusion-bg); --row-accent: var(--conclusion-bg); min-height: 3.875rem; font-size: var(--font-size-lg); color: var(--conclusion-ink); border-color: var(--conclusion-bg); }
/* Mesmo peso do total, sem preenchimento: contorno e texto na cor do tema. */
.result-row.is-outlined { --row-bg: transparent; --row-accent: var(--ink); min-height: 2.8rem; font-size: var(--font-size-base); color: var(--ink); border-color: var(--ink); }
.result-row.is-outlined span:nth-child(2) { border-bottom-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.result-row.is-danger { --row-bg: color-mix(in srgb, var(--danger) 12%, var(--surface)); --row-accent: var(--danger); color: var(--danger); }
.result-row.is-success { --row-bg: color-mix(in srgb, var(--success) 12%, var(--surface)); --row-accent: var(--success); color: var(--success); }
.result-row.is-benefit { --row-bg: color-mix(in srgb, var(--benefit) 12%, var(--surface)); --row-accent: var(--benefit); color: var(--benefit); }
.result-row.is-contribution { --row-bg: color-mix(in srgb, var(--contribution) 12%, var(--surface)); --row-accent: var(--contribution); color: var(--contribution); }
.result-row.is-total span:nth-child(2) { border-bottom-color: color-mix(in srgb, var(--conclusion-ink) 38%, transparent); }
.result-row span:nth-child(2) { border-bottom: var(--border-width) dotted var(--line); }

/* Linha de apoio logo abaixo de um result-row, explicando como o valor saiu. */
.result-detail { margin: -4px 0 0; padding: 0 var(--space-3); color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.result-detail[hidden] { display: none; }
.comparison-summary { width: 100%; max-width: none; justify-self: stretch; padding: 20px; }
.comparison-groups { display: grid; gap: 14px; }
.comparison-group { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); overflow: hidden; }
.comparison-group summary { list-style: none; cursor: pointer; }
.comparison-group summary::-webkit-details-marker { display: none; }
.comparison-group__header { display: grid; grid-template-columns: 1fr auto auto; justify-content: space-between; gap: var(--space-3); align-items: center; padding: 14px; }
.comparison-group__header::after,
.comparison-subgroup summary::after { content: "+"; display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface); font-family: var(--font-sans); font-weight: 600; }
.comparison-group[open] > .comparison-group__header { border-bottom: var(--border-width) solid var(--line); }
.comparison-group[open] > .comparison-group__header::after,
.comparison-subgroup[open] > summary::after { content: "-"; }
.comparison-group__header h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.comparison-group__header strong { padding: var(--space-2) 10px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.comparison-subgroup { margin: var(--space-3) 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.comparison-subgroup summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px var(--space-3); }
.comparison-subgroup summary strong { padding: 5px var(--space-2); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.comparison-subgroup h4 { margin: 0; color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); letter-spacing: 0.04rem; text-transform: uppercase; }
.comparison-group > .result-list { gap: var(--space-2); padding: var(--space-3) 14px 14px; }
.comparison-subgroup .result-list { gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.comparison-subgroup .result-row,
.comparison-group > .result-list .result-row { min-height: 2.375rem; grid-template-columns: minmax(9.375rem, auto) 1fr auto; font-size: var(--font-size-md); }
/* Total fora dos grupos recolhiveis: fica sempre visivel no rodape do resumo. */
.result-list--footer { margin-top: 14px; }
.comparison-chart-panel { margin-top: var(--space-5); }
.comparison-chart-grid { display: grid; gap: 18px; }
.comparison-donut { grid-template-columns: minmax(11.875rem, 15rem) minmax(0, 1fr); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.comparison-notes { margin-top: var(--space-5); }
.disclosure-list { display: grid; gap: 10px; }
.disclosure-item { border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); overflow: hidden; }
.disclosure-item summary { cursor: pointer; padding: 14px var(--space-4); font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.disclosure-item p { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--muted); line-height: 1.55; }

.break-even-page { display: grid; gap: 28px; }
.break-even-page .page-header { margin-bottom: 0; }
.break-even-page .calculator-layout { margin-bottom: var(--space-2); }
.break-even-page .calculator-form { gap: 26px; }
.break-even-page .form-subsection { gap: var(--space-4); margin-top: 0; padding-top: 0; }
.break-even-page .form-subsection + .form-subsection { padding-top: 22px; border-top: var(--border-width) solid var(--line); }
.break-even-page input,
.break-even-page select,
.break-even-page .money-field { height: var(--control-lg); min-height: var(--control-lg); }
.break-even-page .money-field input { height: 100%; min-height: 0; }
.break-even-page .estimate-note { margin-top: 2px; }
.break-even-page .calculator-form > .form-actions { margin-top: 2px; }
.break-even-cta-panel { margin-top: 6px; }
.break-even-cta-panel__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.break-even-cta-panel__content .summary-card__header { margin-bottom: var(--space-3); }
.break-even-cta-panel__content .form-hint { margin: 0; }
.break-even-cta-panel__content .form-actions { justify-content: flex-end; margin-top: 0; align-self: end; }
.break-even-cta-panel__content .ghost-button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }

.history-panel { margin-top: var(--space-5); }
.history-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.history-list { display: grid; gap: 10px; margin-top: 14px; }
.history-item { display: grid; grid-template-columns: minmax(13.75rem, 1fr) auto auto auto; gap: var(--space-2); align-items: center; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.history-item small { color: var(--muted); }
.history-item button:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.empty-state { color: var(--muted); padding: 14px; border: var(--border-width) dashed var(--line); border-radius: var(--radius-md); }

.chart-panel { margin-top: var(--space-5); }
.chart-stack { display: grid; gap: 22px; }
.chart-layout { display: grid; grid-template-columns: minmax(13.75rem, 18.75rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.donut-chart { width: min(17.5rem, 100%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--chart-gradient, conic-gradient(var(--line) 0% 100%)); box-shadow: inset 0 0 0 1px var(--line); }
.donut-chart__center { width: 54%; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: var(--space-1); border-radius: 50%; background: var(--surface); text-align: center; box-shadow: 0 0 0 1px var(--line); }
.donut-chart__center span { color: var(--muted); font-size: var(--font-size-sm); }
.donut-chart__center strong { max-width: 100%; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: clamp(var(--font-size-md), 1.7vw, var(--font-size-xl)); overflow-wrap: anywhere; }
.chart-details { display: grid; gap: var(--space-4); min-width: 0; }
.chart-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.875rem, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.chart-legend__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-2); align-items: center; padding: 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.chart-swatch { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.chart-legend__item strong { font-family: var(--font-sans); font-weight: 600; }
.chart-legend__item span:last-child { grid-column: 2; color: var(--muted); font-size: var(--font-size-md); }
.chart-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: 10px; }
.chart-metric { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.chart-metric span { color: var(--muted); font-size: var(--font-size-sm); }
.chart-metric strong { font-family: var(--font-sans); font-weight: 600; }
.chart-table-wrap { margin-top: calc(18px + var(--space-5)); overflow-x: auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.chart-table { width: 100%; min-width: 32.5rem; border-collapse: collapse; }
.chart-table th, .chart-table td { padding: var(--space-3) 14px; border-bottom: var(--border-width) solid var(--line); text-align: left; }
.chart-table th { color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; }
.chart-table tr:last-child td { border-bottom: 0; }
.chart-table td:nth-child(2), .chart-table td:nth-child(3) { font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.line-chart { position: relative; display: grid; gap: var(--space-3); min-width: 0; }
.line-chart svg { width: 100%; min-height: 16.25rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
#fgtsLineChart svg { min-height: 20rem; }
.line-grid { stroke: var(--line); stroke-width: 1; }
.line-axis { fill: var(--muted); font: 12px var(--font-sans); }
.line-path { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line-point { fill: var(--surface); stroke: var(--accent-2); stroke-width: 3; pointer-events: none; }
.line-hit { fill: transparent; stroke: transparent; cursor: crosshair; pointer-events: all; }
.line-hit:focus { outline: none; stroke: var(--accent-2); stroke-width: 2; }
.line-tooltip { position: absolute; z-index: 2; max-width: 13.125rem; padding: var(--space-2) 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); line-height: 1.3; pointer-events: none; white-space: nowrap; }

/* ============================================================
   Precificacao de produtos/servicos
   ============================================================ */

/* Grid alinhado: rotulo, campo e descricao de cada coluna compartilham as
   mesmas tres faixas do grid pai, entao os campos ficam na mesma linha mesmo
   com textos de tamanhos diferentes. */
.form-grid--aligned > label { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-2); min-width: 0; }
.form-grid--aligned > label > .field-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.form-grid--aligned > label > .money-field,
.form-grid--aligned > label > input,
.form-grid--aligned > label > output,
.form-grid--aligned > label > select { align-self: stretch; height: 100%; }
.form-grid--aligned > label > .field-description { align-self: start; }
.form-grid--field-aligned > label { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--space-2); min-width: 0; }
.form-grid--field-aligned > label > .money-field,
.form-grid--field-aligned > label > .suffix-field,
.form-grid--field-aligned > label > input,
.form-grid--field-aligned > label > select { align-self: start; height: var(--control-lg); min-height: var(--control-lg); }
.form-grid--field-aligned > label > .field-description { align-self: start; }

/* Sem suporte a subgrid o layout volta ao empilhamento simples. */
@supports not (grid-template-rows: subgrid) {
    .form-grid--aligned > label { grid-row: auto; grid-template-rows: none; }
    .form-grid--field-aligned > label { grid-row: auto; grid-template-rows: none; }
}

/* Tooltip de campo: bolha revelada no hover/foco, sem depender de JS. */
.label-row { display: inline-flex; align-items: center; gap: 6px; }
.field-tip { position: relative; display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); border: var(--border-width) solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); line-height: 1; cursor: help; }
.field-tip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* display: none em vez de visibility: hidden. A bolha e mais larga que o campo
   e, mesmo invisivel, continuava no layout inflando o scrollWidth dos pais -
   o que gerava rolagem horizontal na pagina em telas intermediarias. */
.field-tip::after { content: attr(data-tip); display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: calc(var(--layer-sidebar) + 5); width: max-content; max-width: 15.625rem; padding: 9px 11px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; text-align: left; white-space: normal; transform: translateX(-50%); }
.field-tip:hover::after,
.field-tip:focus::after,
.field-tip:focus-visible::after { display: block; }

/* Dica da secao de dados do produto/venda. */
.form-tip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); font-size: var(--font-size-sm); line-height: 1.45; }
.form-tip__icon { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); flex: 0 0 var(--icon-md); color: var(--accent-2); }
.form-tip__icon svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }

/* Alteracao de custo: so aparece o campo quando o usuario marca a opcao. */
.cost-change { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.cost-change:has(#alterarCusto:checked) { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(47, 111, 205, .12); background: var(--surface); }
.cost-change__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.cost-change__head input[type="checkbox"] { width: var(--icon-md); height: var(--icon-md); min-height: var(--icon-md); margin-top: 3px; padding: 0; accent-color: var(--accent-2); cursor: pointer; }
.cost-change__text { display: grid; gap: var(--space-1); min-width: 0; }
.cost-change__text strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.cost-change__text small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
.cost-change__field { gap: var(--space-2); max-width: 20rem; font-size: var(--font-size-md); }
.cost-change__field[hidden] { display: none; }

/* Campo que o regime nao usa: continua visivel, mas sem competir por atencao. */
label.is-muted { opacity: 0.6; }

/* Checkbox a esquerda do rotulo do campo. */
.field-label--check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.payroll-check { width: var(--icon-sm); height: var(--icon-sm); min-height: var(--icon-sm); flex: 0 0 var(--icon-sm); margin: 0; padding: 0; accent-color: var(--accent-2); cursor: pointer; }

/* Plano de aportes variaveis (juros compostos). */
.contribution-plan { display: grid; gap: 14px; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.contribution-plan .summary-card__header { margin-bottom: 0; }
.contribution-plan .summary-card__header h2 { font-size: var(--font-size-base); }
.contribution-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 8.25rem auto; background: var(--surface); }
.contribution-row.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
.contribution-row input[readonly] { background: var(--surface-muted); cursor: default; }
.contribution-row__info { align-self: end; padding-bottom: var(--space-3); color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; }
.contribution-row.is-invalid .contribution-row__info { color: var(--danger); }
.form-hint[data-contribution-error] { color: var(--danger); }
.contribution-row__actions { align-self: end; display: flex; gap: 6px; padding-bottom: 6px; }
.contribution-row__actions .icon-button { width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; display: inline-grid; place-items: center; }
.contribution-row__actions .icon-button svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.contribution-row.is-editing .contribution-row__actions [data-edit-contribution] { color: var(--accent-2); border-color: var(--accent-2); }
.contribution-remaining { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); }

/* Detalhe dos aportes no resumo: uma faixa por linha, valor alinhado a direita. */
.result-detail--list { display: grid; gap: 6px; margin-top: 6px; padding: 10px var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.result-detail--list > strong { color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.result-detail--list ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.result-detail--list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.result-detail--list li strong { color: var(--ink); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }

/* Opcao booleana em bloco destacado, reaproveitada por outras calculadoras. */
.payroll-discount { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); margin-top: var(--space-4);}
.payroll-discount:has(input[type="checkbox"]:checked) { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(47, 111, 205, .12); background: var(--surface); }
.payroll-discount__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.payroll-discount__head input[type="checkbox"] { width: var(--icon-md); height: var(--icon-md); min-height: var(--icon-md); margin-top: 3px; padding: 0; accent-color: var(--accent-2); cursor: pointer; }
.payroll-discount__text { display: grid; gap: var(--space-1); min-width: 0; }
.payroll-discount__text strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.payroll-discount__text small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }

/* Abas de etapa: barra horizontal que rola quando nao cabe na largura.
   Componente compartilhado - nasceu no Simulador Empresarial e agora serve
   tambem as calculadoras que dividem o formulario em etapas. */
.business-workspace { min-width: 0; overflow: visible; }
.business-tabs-wrap { overflow-x: auto; border-bottom: var(--border-width) solid var(--line); scrollbar-width: thin; }
.business-tabs { display: flex; min-width: max-content; padding-inline: var(--space-3); }
.business-tabs :is(button, a) { position: relative; min-height: 3.625rem; padding-inline: var(--space-4); color: var(--muted); background: transparent; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); white-space: nowrap; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.business-tabs :is(button, a)::after { content: ""; position: absolute; right: 16px; bottom: 0; left: 16px; height: 0.1875rem; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: transparent; }
.business-tabs :is(button, a):hover { color: var(--ink); background: var(--surface-muted); }
.business-tabs :is([aria-selected="true"], [aria-current="page"]) { color: var(--accent-2); }
.business-tabs :is([aria-selected="true"], [aria-current="page"])::after { background: var(--accent-2); }
.business-tabs :is(button, a):focus-visible { outline: 2px solid var(--accent-2); outline-offset: calc(2px * -1); }
.business-workspace__body { padding: var(--space-5); }

/* Objetivo: cartoes de radio com o campo do alvo embutido. */
.goal-options { display: grid; gap: var(--space-3); }
.goal-option { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.goal-option.is-active { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(47, 111, 205, .12); background: var(--surface); }
.goal-option__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.goal-option__head input[type="radio"] { width: var(--icon-md); height: var(--icon-md); min-height: var(--icon-md); margin-top: 3px; padding: 0; accent-color: var(--accent-2); cursor: pointer; }
.goal-option__text { display: grid; gap: var(--space-1); min-width: 0; }
.goal-option__text strong { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }
.goal-option__text small { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
.goal-option__field { gap: var(--space-2); max-width: 20rem; font-size: var(--font-size-md); }
.goal-option:not(.is-active) .goal-option__field { opacity: 0.6; }

/* Resumo: destaque do preco sugerido e cartoes de margem/markup. */
.price-highlight { display: grid; gap: 6px; margin-bottom: 18px; padding: var(--space-4); border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); }
.price-highlight span { font-size: var(--font-size-md); opacity: 0.85; }
.price-highlight strong { font-family: var(--font-sans); font-weight: 700; font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl)); line-height: 1.15; overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); margin-top: 18px; }
.metric-card { display: grid; gap: var(--space-1); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); justify-items: center; text-align: center; }
.metric-card span { color: var(--muted); font-size: var(--font-size-sm); }
.metric-card strong { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.metric-card small { color: var(--muted); font-size: var(--font-size-xs); }

/* Tabela Atual x Simulacao. */
.scenario-panel { margin-top: var(--space-5); }
.chart-table-wrap--tight { margin-top: var(--space-4); }
.scenario-table td:nth-child(4) { white-space: nowrap; }
.scenario-variation { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); font-weight: 600; }
.scenario-variation.is-up { color: var(--success); }
.scenario-variation.is-down { color: var(--danger); }
.scenario-variation__icon { display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); }
.scenario-variation__icon svg { display: block; width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }

.split-payment-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "form summary" "scenarios scenarios" "guidance guidance" "history history"; gap: var(--space-5); align-items: start; }
.split-payment-form-panel { grid-area: form; }
.split-payment-summary-panel { grid-area: summary; }
.split-payment-scenarios-panel { grid-area: scenarios; margin-top: 0; }
.split-guidance-panel { grid-area: guidance; margin-top: 0; }
.split-payment-history-panel { grid-area: history; margin-top: 0; }
.split-custom-fields { display: grid; gap: var(--space-3); }
.split-payment-summary-panel .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-payment-applied-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: var(--space-1); align-items: center; justify-items: stretch; text-align: left; }
.split-payment-applied-card span { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; }
.split-payment-applied-card small { grid-column: 1; grid-row: 2; min-width: 0; align-self: start; }
.split-payment-applied-card strong { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: center; justify-self: end; text-align: right; overflow-wrap: anywhere; }
.split-toggle { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 400; line-height: 1.45; }
.split-toggle input { flex: 0 0 auto; width: 1.125rem; min-height: 1.125rem; margin-top: 2px; }
.split-guidance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); gap: var(--space-3); }
.split-guidance-card { display: grid; gap: 7px; padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.split-guidance-card strong { font-family: var(--font-sans); font-weight: 600; }
.split-guidance-card p { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.scenario-table td.is-danger { color: var(--danger); font-family: var(--font-sans); font-weight: 600; }
.sales-conditions-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "form summary" "table table" "alerts alerts" "history history"; gap: var(--space-5); align-items: start; }
.sales-conditions-form-panel { grid-area: form; }
.sales-conditions-summary-panel { grid-area: summary; }
.sales-conditions-table-panel { grid-area: table; margin-top: 0; }
.sales-conditions-alert-panel { grid-area: alerts; margin-top: 0; }
.sales-conditions-history-panel { grid-area: history; margin-top: 0; }
.sales-condition-list { display: grid; gap: 14px; }
.sales-condition-card { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.sales-condition-card h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.sales-condition-card .form-grid { gap: 14px; }
.sales-conditions-table { min-width: 57.5rem; }
.sales-conditions-table td:first-child strong { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-weight: 600; }
.sales-conditions-table tr.is-loss { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.sales-conditions-table tr.is-low-margin:not(.is-loss) { background: color-mix(in srgb, var(--warning) 8%, transparent); }
.sales-conditions-table td.is-danger { color: var(--danger); font-family: var(--font-sans); font-weight: 600; }
.sales-conditions-table td.is-warning { color: var(--warning); font-family: var(--font-sans); font-weight: 600; }
.condition-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.condition-badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-xs); line-height: 1; white-space: nowrap; }
.condition-alert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.condition-alert { display: grid; gap: 7px; padding: 14px; border: var(--border-width) solid var(--line); border-left-width: 0.25rem; border-radius: var(--radius-md); background: var(--surface-muted); }
.condition-alert strong { font-family: var(--font-sans); font-weight: 600; }
.condition-alert p { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.condition-alert.is-danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.condition-alert.is-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.condition-alert.is-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }

.is-calculation-feedback { animation: calculationFeedback 550ms ease both; }

@keyframes calculationFeedback {
    0% { transform: translateY(8px); opacity: 0.72; box-shadow: 0 0 0 rgba(47, 111, 205, 0); }
    45% { transform: translateY(0); opacity: 1; box-shadow: 0 0 0 4px rgba(47, 111, 205, .14); }
    100% { transform: translateY(0); opacity: 1; box-shadow: var(--shadow-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .primary-button, .ghost-button, .icon-button, .theme-button,
    .is-calculation-feedback { transition: none; animation: none; }
    .business-tabs :is(button, a) { transition: none; }
    .app-shell,
    .sidebar,
    .topbar,
    .mobile-bar,
    .nav-item,
    .tool-card,
    .tool-card__button,
    .panel,
    .summary-card,
    .search-box,
    .suggestion-card,
    .account-button,
    .account-menu,
    input,
    select,
    textarea { transition: none; }
    .app-shell, .sidebar, .sidebar__brand, .sidebar__mark,
    .sidebar__nav, .sidebar__footer, .nav-group { transition: none; }
}

.modal-backdrop { position: fixed; inset: 0; z-index: var(--layer-modal); display: grid; place-items: center; padding: 18px; background: rgb(13 20 36 / var(--opacity-overlay)); }
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.is-open .auth-modal { animation: modalEnter var(--motion-fast) ease both; }
.auth-modal { position: relative; width: min(42.5rem, 100%); min-height: min(26.875rem, calc(100vh - 2.375rem)); max-height: min(92vh, 51.25rem); overflow: auto; padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .24); }
.modal-backdrop[data-auth-active="register"] .auth-modal { width: min(57.5rem, calc(100vw - 2.25rem)); max-height: calc(100vh - 2.25rem); overflow: visible; }
.auth-modal__close { position: absolute; top: 16px; right: 16px; }
.auth-modal__header { display: flex; gap: var(--space-4); align-items: center; padding-right: 44px; margin-bottom: 20px; }
.auth-modal__logo { flex: 0 0 2.875rem; color: var(--ink); }
.auth-modal__header h2 { margin: 0 0 var(--space-1); font-family: var(--font-sans); font-weight: 700; }
.auth-modal__header p { margin: 0; color: var(--muted); }
.auth-page-brand__mark { width: 2.25rem; height: var(--control-sm); color: var(--ink); }
.auth-form { display: none; gap: var(--space-4); }
.auth-form.is-active { display: grid; animation: authFormIn var(--motion-normal) ease both; }
.auth-form .form-grid > label:not(.checkbox-field) { align-content: start; grid-template-rows: auto auto 1.25rem; }
.auth-form[data-auth-form="register"] { gap: var(--space-3); }
.auth-form[data-auth-form="register"] .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) 14px; }
.auth-form[data-auth-form="register"] .form-grid > label:not(.checkbox-field) { gap: 6px; grid-template-rows: auto auto 1.25rem; }
.auth-form[data-auth-form="register"] input { min-height: var(--control-md); }
.auth-form[data-auth-form="register"] .password-field button { width: var(--control-md); }
.auth-message { min-height: 1.375rem; margin: 0 0 10px; color: var(--danger); }
.auth-message.is-success { color: var(--success); }
.auth-message:not(:empty) { animation: validationMessageIn var(--motion-normal) ease both; }
.auth-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.auth-links button { padding: 0; color: var(--accent-2); background: transparent; }
.auth-code-field { gap: 10px; }
.auth-code-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); }
.auth-code-grid input { width: 100%; min-width: 0; height: 4.5rem; padding: 0; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); line-height: 1; }
.auth-reset-page { min-height: calc(100vh - var(--topbar-height)); display: grid; place-items: center; padding: var(--space-6) 18px; }
.auth-reset-panel { width: min(32.5rem, 100%); display: grid; gap: 18px; padding: 26px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-reset-panel__header { display: grid; gap: var(--space-2); }
.auth-reset-panel__header h1 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); line-height: 1.15; }
.auth-reset-panel__header p { margin: 0; color: var(--muted); line-height: 1.45; }

/* A verificação usa um documento isolado, sem HTML da plataforma no fundo.
   Reutiliza as classes de modal; ajustes locais não criam classes novas. */
html[data-navigation-document], body[data-navigation-document] { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-navigation-document] { background: var(--bg); }
body[data-navigation-document] { background: transparent; }
[data-navigation-overlay] { background: transparent; }
[data-navigation-overlay] > .auth-modal { width: min(35rem, 100%); min-height: 0; max-height: calc(100dvh - 36px); overscroll-behavior: contain; }
[data-navigation-challenge] { gap: var(--space-3); }
[data-navigation-challenge]:focus { outline: none; }
[data-navigation-challenge] .auth-reset-panel__header { text-align: center; }
[data-navigation-logo] { display: block; width: 3rem; height: 3rem; margin: 0 auto var(--space-2); flex: none; }
[data-navigation-challenge] [data-hold-button] { width: 6rem; height: 6rem; padding: 4px; margin: var(--space-1) auto; color: var(--accent-2); background: transparent; border: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-navigation-challenge] [data-hold-button] svg { width: 100%; height: 100%; }
[data-deadline-line], [data-verification-message], [data-navigation-account-links] { text-align: center; }
[data-navigation-login] { color: var(--accent-2); }
[data-navigation-register] { color: var(--muted); }
[data-navigation-account-links] a:hover { text-decoration: underline; }
[data-navigation-challenge] [data-verification-continue] { text-align: center; }
[data-navigation-challenge] [data-refuse-verification] { text-align: center; }
.password-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.password-rule { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--danger); font-size: var(--font-size-sm); line-height: 1.25; }
.password-rule [data-rule-icon] { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 var(--icon-sm); align-self: center; color: currentColor; }
.password-rule [data-rule-icon] svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; }
.password-rule.is-met { color: var(--success); }
.password-field { display: grid; grid-template-columns: 1fr auto; align-items: center; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.password-field input { border: 0; border-radius: 0; }
.password-field button { align-self: stretch; width: var(--control-lg); padding: 0; display: grid; place-items: center; background: var(--surface-muted); border-left: var(--border-width) solid var(--line); color: var(--muted); }
.password-field button svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; transition: transform var(--motion-fast) ease; }
.password-field button:active svg { transform: scale(.9); }
.checkbox-field { grid-column: 1 / -1; display: grid; grid-template-columns: var(--icon-md) 1fr; gap: var(--space-2); align-items: center; padding: 9px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.3; }
.checkbox-field input { width: var(--icon-sm); min-height: var(--icon-sm); margin: 0; accent-color: var(--accent-2); }
.checkbox-field span:not(.field-error) { min-width: 0; }
.checkbox-field .field-error { grid-column: 1 / -1; }
.has-error input,
.has-error select,
.has-error textarea,
.has-error .password-field,
.has-error .money-field,
.has-error .suffix-field,
.has-error.checkbox-field { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(217, 51, 63, .12); }
.has-success input,
.has-success .password-field,
.has-success .suffix-field { border-color: var(--success); }
.is-validation-feedback input,
.is-validation-feedback select,
.is-validation-feedback textarea,
.is-validation-feedback .password-field,
.is-validation-feedback .suffix-field,
.is-validation-feedback.checkbox-field { animation: validationFieldPulse var(--motion-slow) ease both; }
.is-validation-feedback .field-error:not(:empty) { animation: validationMessageIn var(--motion-normal) ease both; }
.field-error { display: block; min-height: 1.125rem; color: var(--danger); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-sm); line-height: 1.35; }
.field-error:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: var(--icon-sm); height: var(--icon-sm); margin-right: 6px; border-radius: 50%; color: #fff; background: var(--danger); font-size: var(--font-size-xs); font-family: var(--font-sans); font-weight: 600; }
.feedback-modal { width: min(38.75rem, 100%); }
.feedback-form { display: grid; gap: var(--space-4); }
.feedback-form .form-grid { gap: 14px; }
.feedback-form textarea { height: 11.625rem; min-height: 11.625rem; max-height: 11.625rem; resize: none; color: var(--ink); background: var(--surface); }
.feedback-backdrop.is-success .feedback-modal { display: none; }
.modal-backdrop.is-success > .auth-modal { display: none; }
.feedback-success-modal { width: min(32.5rem, 92vw); padding: 5rem 5rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .24); text-align: center; animation: modalEnter var(--motion-normal) ease both; }
.feedback-success-modal[hidden] { display: none; }
.feedback-success-icon { display: inline-grid; place-items: center; width: 4.875rem; height: 4.875rem; margin: 0 auto 18px; border: var(--border-width) solid var(--line); border-radius: 50%; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.feedback-success-icon svg { width: 3.25rem; height: 3.25rem; overflow: visible; }
.feedback-success-icon svg path { fill: transparent; stroke: currentColor; stroke-width: 72; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.feedback-success-modal.is-drawn .feedback-success-icon svg path { animation: checkedDraw 700ms ease forwards, checkedFill var(--motion-fast) ease 700ms forwards; }
.feedback-success-modal h2 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.feedback-success-modal p { margin: 0; color: var(--muted); line-height: 1.45; }
.feedback-note { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.45; }
.feedback-message { min-height: 1.375rem; margin: 0; color: var(--muted); font-family: var(--font-sans); font-weight: 600; }
.feedback-message.is-error { color: var(--danger); }
.feedback-message.is-success { color: var(--success); animation: feedbackSuccess var(--motion-slow) ease both; }
.feedback-form.is-sent { animation: calculationFeedback 550ms ease both; }
.primary-button.is-loading { position: relative; color: transparent; pointer-events: none; }
.primary-button.is-loading::after { content: ""; position: absolute; inset: 0; width: 1.125rem; height: 1.125rem; margin: auto; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--conclusion-ink); animation: buttonSpin 650ms linear infinite; }
.settings-backdrop { padding: 20px; }
.settings-modal { position: relative; width: min(61.25rem, 96vw); max-height: min(88vh, 47.5rem); overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .24); animation: modalEnter var(--motion-fast) ease both; }
.settings-modal__header { min-height: 3.875rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 18px 0 var(--space-5); border-bottom: var(--border-width) solid var(--line); background: var(--surface-muted); }
.settings-modal__title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.settings-menu-button { display: none; }
.settings-modal__header h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.settings-modal__body { display: grid; grid-template-columns: 14.375rem minmax(0, 1fr); height: min(40rem, calc(88vh - 4rem)); }
.settings-tabs { display: flex; flex-direction: column; border-right: var(--border-width) solid var(--line); background: var(--surface-muted); }
.settings-tabs button { position: relative; min-height: var(--control-lg); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); color: var(--ink); background: transparent; text-align: left; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.settings-tabs button:hover,
.settings-tabs button.is-active { background: var(--surface); }
.settings-tabs button:hover { transform: translateX(2px); }
.settings-tabs button.is-active { color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-2); }
.settings-tabs .settings-subtab { min-height: 2.375rem; padding-left: 34px; color: var(--muted); font-size: var(--font-size-md); }
.settings-tabs .settings-subtab.is-active { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, var(--surface)); }
.settings-tab-parent { justify-content: space-between; }
.settings-tab-parent::after { content: "+"; display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); line-height: 1; transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.settings-tab-parent.is-expanded::after { content: "-"; }
.settings-tab-parent.is-expanded::after,
.settings-tabs .settings-tab-parent.is-active::after { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, var(--surface)); transform: rotate(180deg); }
.settings-tabs .settings-tab-parent.is-active { background: var(--surface); color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-2); }
.settings-modal:not(.is-appearance-expanded) .settings-subtab { display: none; }
.settings-content { overflow: auto; padding: 28px; }
.settings-content.is-picker-open { overflow: hidden; }
.settings-pane { display: none; max-width: 47.5rem; }
.settings-pane.is-active { display: grid; gap: 18px; animation: settingsPaneIn var(--motion-normal) ease both; }
.settings-pane.is-active > * { animation: settingsItemIn var(--motion-normal) ease both; }
.settings-pane.is-active > *:nth-child(2) { animation-delay: 25ms; }
.settings-pane.is-active > *:nth-child(3) { animation-delay: 50ms; }
.settings-pane.is-active > *:nth-child(4) { animation-delay: 75ms; }
.settings-pane.is-active > *:nth-child(n+5) { animation-delay: 100ms; }
.settings-pane h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); }
.settings-muted { margin: 0; color: var(--muted); line-height: 1.5; }
.settings-highlight { margin: -8px 0 0; color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; line-height: 1.45; }
.settings-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.settings-option:hover { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); background: color-mix(in srgb, var(--accent-2) 5%, var(--surface-muted)); transform: translateY(-1px); }
.settings-option strong { display: block; margin-bottom: var(--space-1); }
.settings-option p { margin: 0; color: var(--muted); line-height: 1.4; }
.settings-option > span { padding: 7px 10px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.settings-license-card { padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); min-width: 0; }
.settings-license-card__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.settings-license-card h4, .settings-license-history h4 { margin: 0; font-size: var(--font-size-base); overflow-wrap: anywhere; }
.settings-license-status { padding: 5px 9px; border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.settings-license-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 16px; margin: 18px 0 0; }
.settings-license-details > div { min-width: 0; }
.settings-license-details dt { margin-bottom: 5px; color: var(--muted); font-size: var(--font-size-sm); }
.settings-license-details dd { margin: 0; overflow-wrap: anywhere; }
.settings-license-history { display: grid; gap: 12px; min-width: 0; }
.settings-license-history__list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.settings-license-history__list li { display: grid; gap: 6px; padding: 12px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.settings-license-history__list p { margin: 0; color: var(--muted); line-height: 1.5; font-size: var(--font-size-sm); }
.theme-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 10px; }
.theme-cycle-manager { display: grid; gap: 14px; }
.theme-cycle-box { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.theme-cycle-box h4 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.theme-choice-grid button { min-height: 3.625rem; display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--space-1) 9px; align-items: center; justify-items: start; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); font-family: var(--font-sans); font-weight: 600; text-align: left; transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.theme-choice-grid button span[data-icon] { display: inline-grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); }
.theme-choice-grid button svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.theme-choice-grid button strong { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-choice-grid button small { grid-column: 2; color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: var(--font-size-xs); }
.theme-choice-grid button:hover,
.theme-choice-grid button.is-active { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, var(--surface)); }
.theme-choice-grid button:hover { transform: translateY(-1px); }
.theme-choice-grid button.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
.theme-active-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-active-item { min-height: 3.375rem; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: var(--space-2) 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); text-align: left; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.theme-active-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-2) 48%, var(--line)); }
.theme-active-item > span { grid-row: span 2; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.theme-active-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; }
.theme-active-item small { color: var(--muted); font-size: var(--font-size-xs); }
.theme-active-item.is-current { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
.theme-active-item.is-selected { background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.settings-preview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: start; margin-top: 6px; }
.settings-preview__card,
.settings-preview__summary { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.settings-preview__card span { color: var(--accent-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; }
.settings-preview__card strong { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.settings-preview__card p { margin: 0; color: var(--muted); line-height: 1.45; }
.custom-theme-panel { display: grid; gap: 14px; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.custom-theme-panel__header { display: grid; grid-template-columns: 2.625rem 1fr; gap: var(--space-3); align-items: center; }
.custom-theme-panel__header > span { display: inline-grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: var(--radius-md); color: var(--accent-2); background: transparent; }
.custom-theme-panel__header svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; }
.custom-theme-panel__header strong { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-weight: 600; }
.custom-theme-panel__header p { margin: 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.4; }
.custom-theme-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.custom-theme-form label { grid-column: span 2; min-width: 0; }
.custom-theme-form .custom-theme-field--half { grid-column: span 3; }
/* Titulo de grupo dentro do formulario de tema: ocupa a linha inteira e separa
   os campos por finalidade (estrutura, textos, botoes, valores, graficos). */
.custom-theme-group { grid-column: 1 / -1; margin-top: var(--space-1); color: var(--muted); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.04rem; }
.custom-theme-group:first-of-type { margin-top: 0; }
.native-color-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.color-control { position: relative; min-width: 0; }
.color-control__trigger { width: 100%; min-height: var(--control-lg); display: grid; grid-template-columns: var(--control-sm) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); text-align: left; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.color-control__trigger:hover,
.color-control__trigger:focus-visible { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent); outline: 0; }
.color-control__trigger strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.color-control__swatch,
.color-picker__swatch { display: inline-block; width: var(--icon-xl); height: var(--icon-xl); border: var(--border-width) solid color-mix(in srgb, var(--line) 70%, var(--ink)); border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 58%, transparent); }
/* Ancorado acima do campo que esta sendo editado (o JS calcula top/left a
   partir do gatilho e vira para baixo quando nao ha espaco em cima). */
.color-picker { position: fixed; top: 0; left: 0; z-index: var(--layer-popover); width: min(26.25rem, calc(100vw - 2rem)); display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px rgba(0, 0, 0, .32); user-select: none; }
.color-picker[hidden] { display: none; }
.color-picker__area { position: relative; height: 11.875rem; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--picker-hue, 180), 100%, 50%); cursor: crosshair; touch-action: none; }
.color-picker__area:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-2) 24%, transparent); outline-offset: 2px; }
.color-picker__thumb { position: absolute; width: var(--icon-sm); height: var(--icon-sm); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .22); transform: translate(-50%, -50%); pointer-events: none; }
.color-picker__hue { width: 100%; min-height: var(--icon-md); padding: 0; border: 0; border-radius: var(--radius-pill); background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 65%, transparent); cursor: pointer; appearance: none; }
.color-picker__hue::-webkit-slider-thumb { width: var(--icon-md); height: var(--icon-md); border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .22); appearance: none; }
.color-picker__hue::-moz-range-thumb { width: var(--icon-sm); height: var(--icon-sm); border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .22); }
.color-picker__footer { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(6.625rem, auto); gap: 10px; align-items: center; }
.color-picker__value { min-height: var(--control-sm); padding: 0 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface-muted); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; user-select: text; }
.color-picker__format { min-height: var(--control-sm); padding: 0 var(--space-2); }
.color-picker__cancel,
.color-picker__confirm { min-height: var(--control-sm); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: transparent; font-family: var(--font-sans); font-weight: 600; }
.color-picker__cancel { grid-column: 2; justify-self: end; width: 6.625rem; max-width: 100%; }
.color-picker__confirm { grid-column: 3; width: 6.625rem; max-width: 100%; }
.color-picker__cancel:hover,
.color-picker__confirm:hover { border-color: var(--accent-2); background: var(--surface-muted); }
.settings-message { min-height: 1.25rem; margin: 0; color: var(--success); font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-md); }
.settings-message.is-error { color: var(--danger); }
.my-themes-list { display: grid; gap: var(--space-3); }
.theme-history-card { display: grid; gap: var(--space-3); padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.theme-history-card:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent-2) 4%, var(--surface-muted)); }
.theme-history-card.is-visible-in-presets { border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
.theme-history-card__header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-2); align-items: center; }
.theme-history-card__header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; }
.theme-history-card .icon-button.is-active { border-color: var(--accent-2); color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)); }
.theme-history-card__colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.theme-color-chip { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 7px; align-items: center; min-height: 1.875rem; color: var(--muted); font-size: var(--font-size-sm); }
.theme-color-chip i { width: var(--icon-md); height: var(--icon-md); border: var(--border-width) solid var(--line); border-radius: 50%; }
.theme-color-chip strong { display: block; color: var(--ink); font-size: var(--font-size-sm); }
.theme-empty { margin: 0; padding: 14px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); }
.unsaved-theme-modal { width: min(26.875rem, 92vw); display: grid; gap: var(--space-4); padding: 26px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); }
.unsaved-theme-modal h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.unsaved-theme-modal p { margin: 0; color: var(--muted); line-height: 1.45; }
.settings-auth-modal { display: grid; gap: var(--space-4); }
.is-color-picking { overflow: hidden; }

@media (max-width: 47.5rem) {
    .settings-backdrop { padding: 10px; }
    .settings-modal { width: min(100%, calc(100vw - 1.25rem)); height: min(88vh, 38.75rem); max-height: min(88vh, 38.75rem); }
    .settings-modal__header { min-height: 3.125rem; height: 3.125rem; padding: 0 10px 0 14px; }
    .settings-menu-button { display: inline-grid; }
    .settings-modal__header h2 { font-size: var(--font-size-base); }
    .settings-modal__header .icon-button { width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; display: inline-grid; place-items: center; }
    .settings-modal__header .icon-button svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: auto; }
    .settings-modal__body { display: grid; grid-template-columns: 1fr; grid-template-rows: 2.375rem minmax(0, 1fr); height: calc(100% - 3.125rem); max-height: none; overflow: hidden; }
    .settings-tabs { position: absolute; top: 50px; left: 10px; right: 10px; z-index: 6; height: auto; min-height: 0; max-height: min(54vh, 22.5rem); display: none; flex-direction: column; overflow: auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
    .settings-backdrop.is-menu-open .settings-tabs,
    .settings-modal.is-menu-open .settings-tabs { display: flex !important; }
    .settings-tabs button { flex: 0 0 auto; min-height: var(--control-sm); height: auto; padding: 0 14px; font-size: var(--font-size-sm); line-height: 1; }
    .settings-tabs .settings-subtab { padding-left: 28px; }
    .settings-tabs button.is-active { box-shadow: inset 3px 0 0 var(--accent-2); }
    .settings-content { grid-row: 1 / -1; min-height: 0; height: auto; padding: 14px; overflow: auto; font-size: var(--font-size-sm); }
    .settings-pane.is-active { gap: var(--space-3); }
    .settings-pane h3 { font-size: var(--font-size-base); }
    .settings-muted,
    .settings-highlight { font-size: var(--font-size-sm); line-height: 1.35; }
    .settings-option { grid-template-columns: 1fr; gap: 10px; padding: 13px; }
    .settings-option > span { justify-self: start; }
    .theme-choice-grid { grid-template-columns: 1fr; }
    .theme-active-list { grid-template-columns: 1fr; }
    .theme-cycle-box { padding: var(--space-3); }
    .color-picker__footer { grid-template-columns: auto minmax(0, 1fr); }
    .color-picker__format { grid-column: 1 / -1; }
    .color-picker__cancel,
    .color-picker__confirm { grid-column: auto; width: 100%; }
    .settings-preview { grid-template-columns: 1fr; }
    .custom-theme-form { grid-template-columns: 1fr; }
    .custom-theme-form label,
    .custom-theme-form .custom-theme-field--half { grid-column: auto; }
    .custom-theme-group { grid-column: 1 / -1; }
    .custom-theme-panel { padding: 13px; }
    .color-picker__area { height: 13.75rem; }
    .theme-history-card__colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(70vh, 27.5rem); overflow: auto; }
    .feedback-backdrop { padding: 10px; align-items: center; overflow: auto; }
    .feedback-modal { width: min(100%, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); padding: 14px; overflow: auto; }
    .auth-modal .auth-modal__close { width: var(--control-sm); min-width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; display: inline-grid; place-items: center; }
    .auth-modal .auth-modal__close svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: 0; }
    /* Itens 6, 7 e 8: no mobile o fechar fica sozinho na primeira linha e o
       cabecalho desce para baixo dele, ocupando a mesma largura dos textos e
       botoes seguintes em vez de dividir a linha com o botao. */
    .auth-modal:not(.feedback-modal) { padding-top: calc(var(--space-3) + var(--control-sm) + var(--space-3)); }
    .auth-modal:not(.feedback-modal) .auth-modal__close { top: var(--space-3); right: var(--space-3); }
    .auth-modal:not(.feedback-modal) .auth-modal__header { padding-right: 0; }
    /* Acesso restrito: o botao acompanha a largura do texto acima dele. */
    .settings-auth-modal .form-actions .primary-button { flex: 1 0 100%; min-height: var(--control-lg); }
    /* Codigo de confirmacao: oito caixas em uma linha so viravam alvos de toque
       estreitos demais. Duas linhas de quatro cabem com largura confortavel. */
    .auth-code-grid { grid-template-columns: repeat(4, 2.5rem); justify-content: center; }
    .auth-code-grid input { width: 2.5rem; height: var(--control-lg); }
    .auth-form[data-auth-form="register-code"] .form-actions .primary-button,
    .auth-form[data-auth-form="reset-code"] .form-actions .primary-button { flex: 1 0 100%; min-height: var(--control-lg); }
    .feedback-modal .auth-modal__close { display: flex; align-items: center; justify-content: center; line-height: 0; }
    .feedback-modal .auth-modal__close [data-icon],
    .feedback-modal .auth-modal__close svg { display: block; flex: 0 0 auto; }
    .feedback-modal .auth-modal__header { gap: 10px; padding-right: 38px; margin-bottom: var(--space-3); }
    .feedback-modal .auth-modal__logo { width: 2.125rem; height: 2.125rem; flex-basis: 2.125rem; }
    .feedback-modal h2 { font-size: var(--font-size-base); }
    .feedback-modal .auth-modal__header p { font-size: var(--font-size-sm); line-height: 1.25; }
    .feedback-form { gap: 9px; font-size: var(--font-size-sm); }
    .feedback-form .form-grid { gap: 9px; }
    .feedback-form input,
    .feedback-form select { min-height: var(--control-sm); font-size: var(--font-size-sm); }
    .feedback-form textarea { height: 5.75rem; min-height: 5.75rem; max-height: 5.75rem; font-size: var(--font-size-sm); }
    .feedback-note { font-size: var(--font-size-xs); line-height: 1.25; }
    .feedback-message { min-height: 1.125rem; font-size: var(--font-size-xs); }
    .feedback-form .form-actions { justify-content: center; }
    .feedback-form .primary-button { min-width: 9.375rem; min-height: var(--control-md); justify-content: center; font-size: var(--font-size-sm); }
    .feedback-success-modal { width: min(100%, calc(100vw - 1.25rem)); padding: var(--space-6) 1.25rem; }
}

/* Entrada do painel depois do deslize, continuando o sentido do dedo. Fica em
   animacao, e nao em transicao dirigida por relogio: o ultimo quadro e o estado
   de repouso e o fill forwards o mantem, entao a chegada correta nao depende de
   nenhum temporizador. Uma aba que va para segundo plano no meio da troca pausa
   a animacao onde ela estava e a retoma ao voltar - e a pausa acontece
   justamente enquanto ninguem esta olhando. */
@keyframes swipeEnterRight {
    from { opacity: 0; transform: translateX(25%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes swipeEnterLeft {
    from { opacity: 0; transform: translateX(-25%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes modalEnter {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes accountMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mobileNavBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes settingsPaneIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes settingsItemIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes feedbackSuccess {
    from { opacity: 0.4; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes authFormIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes validationFieldPulse {
    0% { transform: translateX(0); }
    30% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

@keyframes validationMessageIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes checkedDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes checkedFill {
    to { fill: currentColor; }
}

@keyframes buttonSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .settings-modal,
    .settings-pane.is-active,
    .settings-pane.is-active > *,
    .settings-tabs button,
    .settings-tab-parent::after,
    .settings-option,
    .theme-choice-grid button,
    .theme-active-item,
    .theme-history-card,
    .account-menu,
    .platform-toast,
    .auth-form.is-active,
    .auth-message:not(:empty),
    .is-validation-feedback input,
    .is-validation-feedback select,
    .is-validation-feedback textarea,
    .is-validation-feedback .password-field,
    .is-validation-feedback.checkbox-field,
    .is-validation-feedback .field-error:not(:empty),
    body.is-mobile-nav-open .app-main::before {
        animation: none !important;
        transition: none !important;
    }

    .settings-tabs button:hover,
    .settings-option:hover,
    .theme-choice-grid button:hover,
    .theme-active-item:hover,
    .theme-history-card:hover {
        transform: none;
    }
}
.locked-panel { display: grid; gap: var(--space-2); padding: 18px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface-muted); }

.construction-panel { overflow: hidden; }
.construction-panel__body { display: grid; grid-template-columns: minmax(11.25rem, 20rem) minmax(0, 1fr); gap: clamp(18px, 4vw, 42px); align-items: center; min-height: 22.5rem; }
.construction-panel__gif { width: min(20rem, 100%); justify-self: center; }
html.theme-dark .construction-panel__gif,
body.theme-dark .construction-panel__gif { filter: brightness(1.08); }
.construction-panel__content { display: grid; gap: var(--space-3); max-width: 35rem; }
.construction-panel__content h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-display)); line-height: 1.05; }
.construction-panel__content p { margin: 0; color: var(--muted); font-size: var(--font-size-base); line-height: 1.55; }

/* Breakpoint intermediario: mantem sidebar no fluxo da pagina, reduz conteudo
   e reorganiza cards para evitar sobreposicao entre menu e calculadoras. */
@media (min-width: 47.5625rem) and (max-width: 82.5rem) {
    .sidebar { max-height: 100vh; gap: var(--space-4); padding: var(--space-4) var(--space-3); box-shadow: none; }
    .sidebar__brand { grid-template-columns: var(--control-md) minmax(0, 1fr) var(--control-md); gap: var(--space-2); min-height: var(--control-md); }
    .sidebar .sidebar__toggle { width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); }
    .sidebar__mark { width: var(--icon-xl); height: var(--icon-xl); }
    .sidebar__name { font-size: var(--font-size-lg); }
    .sidebar__nav { gap: var(--space-5); }
    .nav-group { gap: var(--space-1); }
    .nav-group__title { min-height: var(--control-md); padding: 0 var(--space-2); font-size: var(--font-size-sm); }
    .nav-group__icon { flex-basis: var(--icon-md); width: var(--icon-md); height: var(--icon-md); min-width: var(--icon-md); }
    .nav-group__icon svg { width: var(--icon-sm); height: var(--icon-sm); }
    .nav-item { min-height: var(--control-md); padding: var(--space-2); font-size: var(--font-size-md); }
    .nav-item--child { min-height: var(--control-md); padding-left: var(--space-4); font-size: var(--font-size-md); }
    .sidebar__site { padding: var(--space-2); font-size: var(--font-size-md); }
    .mobile-bar { display: none; }
    .topbar { padding: var(--space-4) var(--space-5); flex-wrap: nowrap; }
    .search-area { flex: 1; width: auto; min-width: 0; }
    .topbar__actions { display: flex; margin-left: auto; }
    .topbar__actions .theme-button,
    .topbar__actions .account-menu-wrap { display: none; }
    .topbar__actions .ghost-button[data-feedback-open] { display: inline-flex; align-items: center; justify-content: center; min-width: 6.5rem; margin-right: 10px; padding: 0 18px; line-height: 1; }
    .sidebar__mobile-actions { display: flex; gap: 10px; align-items: center; padding: 10px var(--space-2) 0; border-top: var(--border-width) solid var(--line); }
    .sidebar__mobile-actions .ghost-button[data-feedback-open] { display: none; }
    .sidebar__mobile-actions .theme-button { flex: 0 0 var(--control-md); width: var(--control-md); }
    .sidebar__mobile-actions .account-button { height: var(--control-md); min-height: var(--control-md); }
    .sidebar__mobile-actions .primary-button { flex: 1; min-width: 0; }
    .sidebar__mobile-actions .account-menu { position: fixed; left: calc(var(--sidebar-width) - 32px); right: auto; bottom: 64px; top: auto; width: min(17.5rem, calc(100vw - var(--sidebar-width) - 1.5rem)); max-height: min(70vh, 27.5rem); overflow: auto; z-index: var(--layer-modal); }
    .content { padding-inline: var(--space-5); font-size: var(--font-size-md); }
    .page-header h1 { font-size: clamp(var(--font-size-3xl), 4.2vw, var(--font-size-display)); }
    .page-header p { font-size: var(--font-size-md); }
    .tool-section h2 { font-size: var(--font-size-md); }
    .tool-card { flex: 1 1 calc((100% - 2.25rem) / 3); max-width: calc((100% - 2.25rem) / 3); }
    .tool-card h3 { font-size: var(--font-size-xl); letter-spacing: 0.025rem;}
    .tool-card p { font-size: var(--font-size-md); line-height: 1.38; }
    .tool-card__button { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--font-size-md); }
    .summary-card h2,
    .summary-card__header h2 { font-size: var(--font-size-lg); }
    label { font-size: var(--font-size-md); }
    input,
    select,
    textarea { min-height: var(--control-md); font-size: var(--font-size-base); }
    .money-field { min-height: var(--control-md); }
    .money-field span { font-size: var(--font-size-sm); }
    .primary-button,
    .ghost-button,
    .icon-button,
    .theme-button { min-height: var(--control-md); font-size: var(--font-size-sm); }
    .calculator-layout .form-actions .primary-button { min-width: calc(var(--control-lg) * 4); justify-content: center; }
    .result-row { min-height: var(--control-md); font-size: var(--font-size-sm); }
    .result-row.is-total { min-height: var(--control-lg); font-size: var(--font-size-base); }
    .chart-table th,
    .chart-table td { font-size: var(--font-size-sm); }
    .chart-metric span,
    .chart-legend__item span { font-size: var(--font-size-sm); }
    .calculator-layout { grid-template-columns: 1fr; }
    .calculator-layout--wide { grid-template-columns: 1fr; }
    .calculator-layout--split { grid-template-columns: 1fr; }
    .calculator-layout--comparison { grid-template-columns: 1fr; max-width: none; }
    .split-payment-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "form" "summary" "scenarios" "guidance" "history"; }
    .sales-conditions-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "form" "summary" "table" "alerts" "history"; }
    .split-payment-summary-panel .metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
    .split-payment-applied-card { grid-column: auto; }
    .comparison-summary { max-width: none; justify-self: stretch; }
}

@media (min-width: 47.5625rem) and (max-width: 61.25rem) {
    .panel__body,
    .summary-card { padding: var(--space-4); }
    .calculator-form { gap: var(--space-4); }
    .calculator-form > .form-subsection { gap: var(--space-3); margin-top: 0; padding-top: 0; }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .form-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-form > .form-actions { margin-top: 0; }
    .summary-card__header { gap: var(--space-3); margin-bottom: var(--space-3); }
    .result-list { gap: var(--space-2); }
    .result-row { min-height: var(--control-sm); padding-inline: var(--space-3); font-size: var(--font-size-md); }
    .result-row.is-total { min-height: var(--control-md); font-size: var(--font-size-base); }
    .calculator-layout:has(#salarioBruto) > .summary-card .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-layout:has(#salarioBruto) > .summary-card .result-detail,
    .calculator-layout:has(#salarioBruto) > .summary-card .result-row:has(#v-salLiq),
    .calculator-layout:has(#salarioBruto) > .summary-card .result-row.is-total { grid-column: 1 / -1; }
    .dynamic-row { grid-template-columns: 1fr; }
    .dynamic-row button { justify-self: end; }
    .split-payment-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "scenarios" "guidance" "history"; }
    .sales-conditions-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "table" "alerts" "history"; }
    .chart-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); justify-items: stretch; }
    .chart-details { width: 100%; }
    .history-item { grid-template-columns: 1fr; }
    .tool-card { flex-basis: calc((100% - 1.125rem) / 2); max-width: calc((100% - 1.125rem) / 2); }
}

/* Notebook: maior densidade e uso horizontal quando a sidebar esta recolhida. */
@media (min-width: 61.3125rem) and (max-width: 82.5rem) {
    .content { font-size: var(--font-size-base); }
    .page-header p,
    label { font-size: var(--font-size-base); }
    .panel__body,
    .summary-card { padding: var(--space-4); }
    .calculator-form { gap: var(--space-4); }
    .calculator-form > .form-subsection { gap: var(--space-3); margin-top: 0; padding-top: 0; }
    .form-grid,
    .form-grid--three { gap: var(--space-4); }
    .calculator-form > .form-actions { margin-top: 0; }
    .summary-card__header { gap: var(--space-3); margin-bottom: var(--space-3); }
    .primary-button,
    .ghost-button,
    .icon-button,
    .theme-button { font-size: var(--font-size-md); }
    .result-list { gap: var(--space-2); }
    .result-row { min-height: var(--control-sm); padding-inline: var(--space-3); font-size: var(--font-size-base); }
    .result-row.is-total { min-height: var(--control-md); font-size: var(--font-size-lg); }
    .chart-panel,
    .history-panel { margin-top: var(--space-4); }
    .chart-stack { gap: var(--space-4); }
    .calculator-layout:has(#salarioBruto) > .summary-card .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-layout:has(#salarioBruto) > .summary-card .result-detail,
    .calculator-layout:has(#salarioBruto) > .summary-card .result-row:has(#v-salLiq),
    .calculator-layout:has(#salarioBruto) > .summary-card .result-row.is-total { grid-column: 1 / -1; }
    .app-shell:has(.sidebar.is-collapsed) .calculator-layout:not(.calculator-layout--wide):not(.calculator-layout--split):not(.calculator-layout--comparison):not(.split-payment-layout):not(.sales-conditions-layout):has(> .summary-card:not([hidden])) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .app-shell:has(.sidebar.is-collapsed) .calculator-layout:has(#salarioBruto) > .summary-card .result-list { grid-template-columns: 1fr; }
}

/* Mobile e tablet estreito: sidebar vira drawer off-canvas. */
@media (max-width: 61.25rem) {
    /* align-content padrao (normal) distribui a sobra de 100vh entre as linhas
       do grid. Em paginas de conteudo curto isso inflava a barra mobile, que
       chegava ao dobro da altura. Com start as linhas ficam do tamanho do
       conteudo e o fundo do proprio shell cobre o resto da tela. */
    .app-shell { grid-template-columns: 1fr; align-content: start; }
    .app-shell:has(.sidebar.is-collapsed) { grid-template-columns: 1fr; }
    body.is-mobile-nav-open .app-main::before { content: ""; position: fixed; inset: 0; z-index: var(--layer-sidebar); background: color-mix(in srgb, var(--bg) 32%, rgba(13, 20, 36, .34)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: mobileNavBackdropIn var(--motion-fast) ease both; }
    .sidebar { position: fixed; z-index: var(--layer-dropdown); width: var(--sidebar-width); max-width: 100vw; transform: translateX(-100%); transition: transform var(--motion-normal) ease; box-shadow: var(--shadow-lg); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar.is-collapsed { align-items: stretch; padding-inline: var(--space-4); }
    .sidebar__brand,
    .sidebar.is-collapsed .sidebar__brand { grid-template-columns: var(--control-lg) minmax(0, 1fr) var(--control-md); justify-items: stretch; }
    .sidebar .sidebar__toggle,
    .sidebar.is-collapsed .sidebar__toggle { display: none; }
    button.sidebar__close { display: inline-grid; width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); padding: 0; }
    .sidebar.is-collapsed .sidebar__name,
    .sidebar.is-collapsed .nav-group__title,
    .sidebar.is-collapsed .nav-item__label,
    .sidebar.is-collapsed .sidebar__footer { display: grid; }
    .sidebar.is-collapsed .nav-group { height: auto; background: transparent; }
    .sidebar.is-collapsed .nav-item { display: flex; }
    .sidebar.is-collapsed .sidebar__logo::after { display: none; }
    .mobile-bar { position: sticky; top: 0; z-index: var(--layer-mobile-bar); display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--line); background: var(--surface); }
    [data-mobile-menu] { display: inline-grid; place-items: center; width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); padding: 0; }
    [data-mobile-menu] svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: auto; }
    .topbar { padding: var(--space-4); flex-wrap: nowrap; }
    .topbar__actions { display: none; }
    .sidebar__mobile-actions { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-2) 0; border-top: var(--border-width) solid var(--line); }
    .sidebar__mobile-actions > button,
    .sidebar__mobile-actions .account-button { display: inline-grid; place-items: center; align-items: center; justify-content: center; min-height: var(--control-md); line-height: 1; }
    .sidebar__mobile-actions [data-icon] { display: inline-grid; place-items: center; }
    .sidebar__mobile-actions svg { display: block; margin: auto; }
    .sidebar__mobile-actions .ghost-button[data-feedback-open] { display: inline-flex; }
    .sidebar__mobile-actions .theme-button { flex: 0 0 var(--control-md); width: var(--control-md); }
    .sidebar__mobile-actions .primary-button { flex: 1; min-width: 0; }
    .sidebar__mobile-actions .account-menu { position: fixed; left: 12px; right: 12px; bottom: 74px; top: auto; width: auto; max-height: min(62vh, 26.25rem); overflow: auto; z-index: var(--layer-modal); }
    /* [avatar] [nome/e-mail] [fechar], com o fechar centralizado na altura
       da faixa inteira e sem fundo, para nao competir com o avatar. */
    .account-menu__header { grid-template-columns: 3rem minmax(0, 1fr) var(--icon-lg); }
    .account-menu .account-menu__close { display: inline-grid; place-items: center; align-self: center; width: var(--icon-lg); min-width: var(--icon-lg); height: var(--icon-lg); min-height: var(--icon-lg); padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; }
    .account-menu .account-menu__close:hover { color: var(--ink); background: transparent; }
    .account-menu .account-menu__close svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
    .search-box input { font-size: var(--font-size-base); }
    .calculator-layout { grid-template-columns: 1fr; }
    .calculator-layout--wide { grid-template-columns: 1fr; }
    .calculator-layout--split { grid-template-columns: 1fr; }
    .calculator-layout--comparison { grid-template-columns: 1fr; max-width: none; }
    .split-payment-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "scenarios" "guidance" "history"; }
    .sales-conditions-layout { grid-template-columns: 1fr !important; grid-template-areas: "form" "summary" "table" "alerts" "history"; }
    .comparison-summary { max-width: none; justify-self: stretch; }
}

@media (max-width: 47.5rem) {
    .content { width: 100%; padding: var(--space-5) var(--space-3) var(--space-7); overflow-x: hidden; }
    .page-header { margin-bottom: var(--space-4); }
    .page-header h1 { font-size: var(--font-size-2xl); line-height: 1.08; }
    .page-header p { font-size: var(--font-size-md); line-height: 1.45; }
    .panel__body, .summary-card { padding: var(--space-4); }
    .calculator-form { gap: var(--space-4); }
    .form-grid, .form-grid--three { gap: var(--space-4); }
    label { gap: var(--space-2); font-size: var(--font-size-md); }
    .field-description { font-size: var(--font-size-sm); }
    input, select, textarea { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--font-size-base); }
    .money-field { min-height: var(--control-md); }
    .money-field span { padding-inline: var(--space-3); font-size: var(--font-size-sm); }
    .form-hint { font-size: var(--font-size-sm); line-height: 1.34; }
    .estimate-note { padding: var(--space-2) 10px; font-size: var(--font-size-xs); line-height: 1.32; }
    .form-actions { gap: var(--space-3); }
    .calculator-form > .form-actions .primary-button,
    .calculator-layout .form-actions .primary-button { width: 100%; min-height: var(--control-lg); }
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) { min-height: var(--control-md); align-content: center; }
    .break-even-page { gap: 20px; }
    .break-even-page .calculator-form { gap: 20px; }
    .break-even-page .form-subsection + .form-subsection { padding-top: 18px; }
    .break-even-page input,
    .break-even-page select,
    .break-even-page .money-field { height: var(--control-md); min-height: var(--control-md); }
    .break-even-cta-panel__content { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
    .break-even-cta-panel__content .form-actions { justify-content: flex-end; }
    .break-even-cta-panel__content .ghost-button { justify-content: center; text-align: center; }
    .primary-button, .ghost-button, .icon-button, .theme-button { min-height: var(--control-md); padding-inline: var(--space-3); font-size: var(--font-size-md); }
    .summary-card h2, .summary-card__header h2 { font-size: var(--font-size-lg); }
    .result-list { gap: var(--space-2); }
    .result-row { min-height: var(--control-md); gap: var(--space-2); padding-inline: var(--space-2); font-size: var(--font-size-sm); }
    .result-row.is-total { min-height: var(--control-lg); font-size: var(--font-size-md); }
    .history-panel, .chart-panel { margin-top: 20px; }
    .business-tabs { padding-inline: var(--space-1); }
    .business-tabs :is(button, a) { min-height: var(--control-lg); padding-inline: var(--space-3); font-size: var(--font-size-sm); }
    .business-workspace__body { padding: var(--space-4); }
    .history-item, .empty-state { font-size: var(--font-size-sm); }
    .dynamic-section { gap: 10px; }
    .dynamic-row { gap: 9px; padding: 10px; }
    .dynamic-row label { font-size: var(--font-size-sm); }
    .dynamic-row input,
    .dynamic-row .money-field,
    .dynamic-row button { min-height: var(--control-md); }
    .chart-table th,
    .chart-table td { padding: 10px 11px; font-size: var(--font-size-sm); }
    .chart-legend__item,
    .chart-metric { padding: 9px; }
    .chart-legend__item span,
    .chart-metric span { font-size: var(--font-size-sm); }
    .line-axis { font-size: var(--font-size-xs); }
    .comparison-group__header { padding: 11px; }
    .comparison-group__header h3 { font-size: var(--font-size-base); }
    .comparison-subgroup { margin: 10px; }
    .comparison-subgroup summary { padding: 9px 10px; }
    .comparison-subgroup h4 { font-size: var(--font-size-xs); }
    .comparison-subgroup .result-row,
    .comparison-group > .result-list .result-row { min-height: 2.125rem; font-size: var(--font-size-sm); }
    .disclosure-item summary { padding: 11px var(--space-3); font-size: var(--font-size-sm); }
    .disclosure-item p { padding: 0 var(--space-3) var(--space-3); font-size: var(--font-size-sm); }
    .construction-panel__body { min-height: 18.75rem; }
    .construction-panel__content h2 { font-size: var(--font-size-3xl); }
    .construction-panel__content p { font-size: var(--font-size-md); }
    .home-title-full,
    .tool-card__desc-full { display: none; }
    .home-title-mobile,
    .tool-card__desc-mobile { display: inline; }
    .tool-groups { gap: var(--space-5); }
    .tool-section h2 { margin: 0 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--line); color: var(--muted); font-size: var(--font-size-sm); letter-spacing: .08em; }
    .tool-section__header { margin-bottom: 10px; }
    .tool-scroll-controls { display: none; }
    .tool-section { min-width: 0; overflow: visible; }
    .tool-grid { display: grid; width: 100%; min-height: 0; gap: 0; padding: 0; overflow: visible; touch-action: auto; }
    .tool-card { position: relative; grid-template-columns: 1.5rem minmax(0, 1fr) 1.125rem; grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 2px; align-items: center; width: 100%; max-width: none; min-height: 4.25rem; padding: 11px 0; border: 0; border-bottom: var(--border-width) solid var(--line); border-radius: 0; background: transparent; }
    .tool-card__icon { display: inline-grid; grid-column: 1; grid-row: 1 / span 2; place-items: center; width: var(--icon-lg); height: var(--icon-lg); color: var(--ink); }
    .tool-card__forward { display: inline-grid; grid-column: 3; grid-row: 1 / span 2; place-items: center; justify-self: end; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
    .tool-card h3 { grid-column: 2; grid-row: 1; padding: 0; border: 0; font-size: var(--font-size-md); line-height: 1.16; }
    .tool-card p { grid-column: 2; grid-row: 2; display: block; min-height: 0; padding: 0; border: 0; overflow: hidden; color: var(--muted); font-size: var(--font-size-sm); white-space: nowrap; text-overflow: ellipsis; }
    .tool-card__button { position: absolute; inset: 0; min-height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; text-indent: -999px; }
    .tool-card.is-locked { opacity: 1; }
    .mobile-bar { padding: var(--space-3); }
    .mobile-brand { font-size: var(--font-size-base); }
    [data-mobile-menu] { display: inline-grid; place-items: center; width: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); padding: 0; }
    [data-mobile-menu] svg { display: block; width: var(--icon-md); height: var(--icon-md); margin: auto; }
    .sidebar { gap: var(--space-4); padding: var(--space-4) var(--space-3); }
    .sidebar__brand { grid-template-columns: var(--control-lg) minmax(0, 1fr) var(--control-md); min-height: var(--control-md); gap: var(--space-2); }
    .sidebar__mark { width: var(--icon-xl); height: var(--icon-xl); }
    .sidebar__name { font-size: var(--font-size-base); }
    .sidebar__nav { gap: var(--space-2); }
    .nav-group { gap: var(--space-1); }
    .nav-group__title { min-height: var(--control-md); padding-inline: var(--space-2); font-size: var(--font-size-sm); }
    .nav-item { min-height: var(--control-md); padding: var(--space-2); font-size: var(--font-size-sm); }
    .nav-item--child { min-height: var(--control-md); padding-left: var(--space-4); font-size: var(--font-size-sm); }
    .sidebar__site { min-height: var(--control-md); padding: var(--space-2); font-size: var(--font-size-sm); }
    .search-area, .search-box { width: 100%; }
    .search-box { min-height: var(--control-md); gap: var(--space-2); padding-inline: var(--space-3); }
    .search-box input { font-size: var(--font-size-base); }
    .search-box > span[data-icon] { width: var(--icon-md); height: var(--icon-md); flex-basis: var(--icon-md); }
    .search-box > span[data-icon] svg { width: var(--icon-md); height: var(--icon-md); }
    .form-grid, .form-grid--three { grid-template-columns: 1fr; }
    .modal-backdrop[data-auth-active="register"] .auth-modal { width: 100%; max-height: min(92vh, 51.25rem); overflow: auto; }
    .auth-form[data-auth-form="register"] .form-grid { grid-template-columns: 1fr; }
    .password-rules { grid-template-columns: 1fr; }
    .dynamic-row { grid-template-columns: 1fr; }
    .history-item { grid-template-columns: 1fr; }
    .chart-layout { grid-template-columns: 1fr; justify-items: center; }
    .chart-layout,
    .chart-stack,
    .line-chart { width: 100%; }
    .donut-chart { width: min(15.625rem, 78vw); min-width: 13.125rem; }
    .donut-chart__center strong { font-size: var(--font-size-md); }
    .line-chart svg,
    #fgtsLineChart svg { height: 18.75rem; min-height: 18.75rem; }
    .chart-table-wrap { margin-top: var(--space-5); border-radius: var(--radius-sm); scrollbar-width: thin; overscroll-behavior-inline: contain; }
    .chart-table { table-layout: auto; }
    .chart-table th,
    .chart-table td { padding: var(--space-2); font-size: var(--font-size-sm); }
    .chart-table th { font-size: var(--font-size-sm); letter-spacing: 0; }
    .chart-table td:nth-child(2),
    .chart-table td:nth-child(3) { white-space: normal; }
    .comparison-donut { grid-template-columns: 1fr; }
    .field-tip::after { left: auto; right: 0; max-width: min(15.625rem, calc(100vw - 3.75rem)); transform: none; }
    .goal-option { padding: var(--space-3); }
    .goal-option__field { max-width: none; }
    .cost-change { padding: var(--space-3); }
    .payroll-discount { padding: var(--space-3); }
    .contribution-plan { padding: var(--space-3); }
    /* Empilhado: com duas colunas o campo de valor esmagava o de meses. */
    .contribution-row { grid-template-columns: 1fr; }
    .contribution-row__info { align-self: start; padding-bottom: 0; white-space: normal; }
    .contribution-row__actions { align-self: start; justify-content: flex-end; padding-bottom: 0; }
    .cost-change__field { max-width: none; }
    .price-highlight { padding: 13px; }
    .metric-card strong { font-size: var(--font-size-lg); }
    .scenario-table td:nth-child(4) { white-space: normal; }
    .chart-details { width: 100%; }
    .result-row { grid-template-columns: 1fr auto; }
    .comparison-subgroup .result-row,
    .comparison-group > .result-list .result-row { grid-template-columns: 1fr auto; }
    .comparison-group__header,
    .comparison-subgroup summary { grid-template-columns: 1fr; align-items: stretch; }
    .comparison-group__header::after,
    .comparison-subgroup summary::after { justify-self: start; }
    .result-row span:nth-child(2) { display: none; }
    .construction-panel__body { grid-template-columns: 1fr; text-align: center; }
}

/* =============================================================================
   CONTA E SEGURANCA (achados A1 e B10)

   As abas Conta e Seguranca eram placeholders "em construcao". Estes estilos
   sustentam os formularios que passaram a existir: dados cadastrais, troca de
   senha, encerramento de outras sessoes e exclusao de conta.
   ============================================================================= */
.account-form { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); }
.account-form h4 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.account-form label { display: grid; gap: 6px; }
.account-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: var(--space-3); }
.account-form .field-error { min-height: 1.125rem; color: var(--danger); font-size: var(--font-size-sm); line-height: 1.3; }
.account-form .password-rules { margin: 0; }

/* A zona de exclusao fica visualmente separada do resto: a acao e irreversivel
   e nao deve parecer mais um ajuste de preferencia. */
.settings-danger-zone { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: var(--border-width) solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.settings-danger-zone h4 { margin: 0; color: var(--danger); font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.ghost-button.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.ghost-button.is-danger:hover:not(:disabled) { color: var(--conclusion-ink); background: var(--danger); border-color: var(--danger); }

/* =============================================================================
   PAGINAS LEGAIS (achado B5)

   O cadastro pedia aceite de documentos que nao existiam. Estas sao as paginas
   de termos de uso e politica de privacidade.
   ============================================================================= */
.legal-page { max-width: 48rem; margin: 0 auto; padding: var(--space-5) 0 var(--space-6); }
.legal-page__header { padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink); }
.legal-page__eyebrow { margin: 0 0 var(--space-2); color: var(--muted); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.legal-page__header h1 { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.legal-page__summary { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--font-size-lg); line-height: 1.5; }
.legal-page__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
.legal-page__meta > div { display: grid; gap: 2px; }
.legal-page__meta dt { color: var(--muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .06em; }
.legal-page__meta dd { margin: 0; font-family: var(--font-sans); font-weight: 600; }
.legal-page__toc { margin: var(--space-5) 0; padding: var(--space-4); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface-muted); }
.legal-page__toc ol { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); }
.legal-page__body { display: grid; gap: var(--space-5); }
.legal-page__body section { display: grid; gap: var(--space-3); scroll-margin-top: calc(var(--legal-header-height, var(--topbar-height)) + var(--space-5)); }
.legal-page__body h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); line-height: 1.25; scroll-margin-top: var(--space-5); }
.legal-page__body p { margin: 0; line-height: 1.7; }
.legal-page__body ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); line-height: 1.6; }
.legal-page__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--line); color: var(--muted); }
.legal-page__footer p { margin: 0 0 var(--space-2); }
.legal-page__crosslink { font-family: var(--font-sans); font-weight: 600; }

/* Convite ao produto correspondente ao perfil da calculadora aberta. Usa os
   mesmos tokens dos cartoes de ferramenta para nao introduzir uma linguagem
   visual nova em 17 paginas de uma vez. */
.next-step { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-top: var(--space-5); padding: 20px; border: var(--border-width) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.next-step__body { display: grid; gap: 6px; flex: 1 1 20rem; }
.next-step__title { margin: 0; font-size: 1.05rem; }
.next-step__text { margin: 0; color: var(--muted); line-height: 1.6; }
.next-step__action { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 14px; border-radius: var(--radius-md); color: var(--conclusion-ink); background: var(--conclusion-bg); font-family: var(--font-sans); font-weight: 600; transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.next-step__action:hover { transform: translateY(-1px); }