:root {
    font-family: var(--letra, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    color: var(--cor-texto, #17312b);
    background: var(--cor-fundo, #f4f1ea);
    font-synthesis: none;
    /* 16px → rem do Next (--t-m = 0.9375rem = 15px) */
    font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { font-size: 16px; }
body {
    font-family: var(--letra, Inter, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--t-m, 0.9375rem);
    font-weight: var(--peso-normal, 400);
    line-height: var(--altura-normal, 1.55);
    color: var(--cor-texto);
    background: radial-gradient(circle at 92% 5%, #e8dcc9 0, transparent 28%), var(--cor-fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select { font: inherit; }
h1, h2, p { margin-top: 0; }
/* Só páginas Next “nuas” (.auth-card / .ui-page); não rebentar títulos do Blazor/EP. */
.auth-card h1, .ui-page > h1 {
    max-width: 850px;
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}
.auth-card h2, .ui-page > h2 { margin-bottom: 8px; letter-spacing: -.02em; }
/* Sem cor própria: um `p { color }` global vence a cor que um painel ou um aviso
   definem para o seu conteúdo, e foi isso que pôs o texto de todos os avisos a
   4.4:1 sobre o próprio fundo tingido. A cor herda-se; quem a quer diferente
   pede-a por classe. */
p { line-height: var(--altura-normal); }
a { color: inherit; }

.eyebrow { display: block; margin-bottom: var(--e-2); color: var(--cor-destaque); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; }
.panel, .auth-card { border: 1px solid var(--cor-linha); border-radius: var(--raio-l); background: var(--cor-superficie); box-shadow: var(--sombra-assente); }
.panel { padding: 26px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 10px 17px; border: 1px solid #173d35; border-radius: 10px; color: #fff; background: #173d35; font-weight: 750; text-decoration: none; cursor: pointer; }
.button:hover { background: #235347; }
.button:disabled { opacity: .55; cursor: wait; }
.button.secondary { color: #173d35; border-color: #c9c7bf; background: transparent; }
.auth-card { display: grid; gap: var(--e-4); width: min(520px, 100%); margin: 7vh auto; padding: var(--e-6); }
.auth-card form { display: grid; gap: var(--e-4); }
.auth-card .ui-title { font-size: var(--t-xl); }
.auth-card label { display: grid; gap: 7px; color: #344941; font-size: .82rem; font-weight: 750; }
/* Nunca estilizar input/select globais: o ElInput interno herdava caixa+fundo azul/branco aninhado. */
.auth-card input:not([type=checkbox]):not([type=radio]),
.auth-card select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cfd3cf;
    border-radius: 9px;
    color: #17312b;
    background: #fff;
    outline: none;
}
.auth-card input:not([type=checkbox]):not([type=radio]):focus,
.auth-card select:focus { border-color: #397968; box-shadow: 0 0 0 3px rgba(57,121,104,.13); }
.auth-card label.checkbox { display: flex; align-items: center; gap: 10px; }
.auth-card label.checkbox input { width: auto; }
.alert { padding: 12px 14px; border-radius: 9px; }
.alert.error { color: #842029; border: 1px solid #f1aeb5; background: #f8d7da; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; border-bottom: 1px solid #e7e1d7; text-align: left; }
th { color: #4d5b55; background: #f7f5f0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.empty-state { padding: 42px; color: var(--cor-texto-fraco); text-align: center; }
.icon-button { display: inline-grid; place-items: center; min-width: var(--alvo-compacto); min-height: var(--alvo-compacto); border: 0; border-radius: var(--raio-s); color: var(--cor-texto-suave); background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.warning-copy { color: #8a6239; }
.two-column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.valid.modified:not([type=checkbox]) { border-color: #23834d; }
.invalid { border-color: #b42318; }
.validation-message { color: #b42318; }
h1:focus { outline: none; }

.text-action { display: inline-flex; align-items: center; min-height: var(--alvo-compacto); padding: 0 var(--e-2); border: 0; border-radius: var(--raio-s); color: var(--cor-marca-clara); background: transparent; font-size: var(--t-s); font-weight: var(--peso-medio); cursor: pointer; }
.text-action:hover { text-decoration: underline; }
.text-action.danger { color: #a1382f; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.button.small { min-height: 34px; padding: 6px 13px; width: max-content; font-size: .82rem; }
.hint { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-s); }

@media (max-width: 820px) {
    .two-column-grid, .form-grid, .form-grid.three { grid-template-columns: 1fr; }
    .main-content { padding: 24px; }
}