.user-card strong {
    font-size: 0.875rem;
}

.user-card span {
    color: var(--muted);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Cabecalho de pagina (compacto: titulo, uma linha, acoes)
   -------------------------------------------------------------------------- */

.content {
    display: grid;
    gap: 1rem;
}

.panel.page-header,
.page-header {
    padding: 0 0 0.25rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.page-header-row {
    align-items: flex-end;
}

.page-header-copy {
    display: grid;
    gap: 0.2rem;
    min-width: min(100%, 22rem);
    flex: 1 1 22rem;
}

.page-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page-description {
    max-width: 78ch;
    color: var(--muted);
    font-size: 0.875rem;
}

.page-header-actions {
    align-self: flex-end;
}

.eyebrow {
    color: var(--muted);
}

.section-tag,
.badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--sheet-3);
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Folhas (paineis) e grades
   -------------------------------------------------------------------------- */

.grid,
.hero {
    display: grid;
    gap: 1rem;
}

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

.grid-dashboard {
    grid-template-columns: 1.3fr 1fr;
}

.hero {
    grid-template-columns: 1.4fr 1fr;
}

.metric-stack,
.status-list,
.feature-list,
.auth-form {
    display: grid;
    gap: 0.9rem;
}

.hero-copy,
.hero-panel,
.panel,
.auth-card {
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
    box-shadow: var(--shadow);
}

.hero-panel {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.panel h2,
.panel h3,
.panel h4,
.hero h2,
.auth-card h2,
.topbar h1 {
    margin: 0;
}

.panel h2 {
    font-size: 1.25rem;
}

.panel h3 {
    font-size: 1rem;
    font-weight: 650;
}

.panel h4 {
    font-size: 0.875rem;
    font-weight: 650;
}

.panel p,
.hero p,
.auth-card p,
.status-list p,
.metric-card p {
    color: var(--muted);
}

.panel > * + * {
    margin-top: 0.9rem;
}

/* Folhas que ja sao grid usam o gap; sem margem somada. */
.admin-card > * + *,
.artifact-card > * + *,
.hero-panel > * + *,
.tools-panel > * + * {
    margin-top: 0;
}

.admin-card h3 + p {
    margin-top: -0.5rem;
}

.panel-intro {
    margin: 0 0 0.9rem;
}

.section-row,
.inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 0.75rem;
    flex-wrap: wrap;
}

.inline-actions {
    justify-content: flex-start;
}

.page-header-actions.inline-actions {
    justify-content: flex-end;
}

.table-summary,
.stack-sm {
    display: grid;
    gap: 0.15rem;
}

.table-summary p {
    font-size: 0.8125rem;
}

.soft-note {
    color: var(--muted);
    font-size: 0.8125rem;
}

.feature-list,
.status-list {
    margin: 0;
    padding-left: 1.1rem;
}

.status-line {
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--sheet-2);
}

.status-line span {
    display: block;
    color: var(--muted);
    font-size: 0.8125rem;
}

.status-line strong {
    display: block;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Contadores em linha de livro-razao: uma regua por grupo, colunas separadas por
   fio fino (o gap de 1px deixa o fio aparecer em qualquer quebra de linha).
   -------------------------------------------------------------------------- */

.status-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--rule);
}

.metric-card {
    --figure: var(--ink);
    display: grid;
    align-content: start;
    gap: 0.1rem;
    min-width: 0;
}

.status-card-grid .metric-card {
    padding: 0.75rem 1rem 0.85rem;
    background: var(--sheet);
}

.metric-card span {
    display: block;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.metric-card strong {
    display: block;
    color: var(--figure);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.metric-card p {
    font-size: 0.78rem;
    line-height: 1.4;
}

.metric-card-danger { --figure: var(--fail-ink); }

/* Estacoes do fluxo: uma linha na ordem Omie -> NF -> FTD -> Concluido, falha por ultimo.
   O vao mais grosso antes da FTD marca o ponto sem volta (envio sem retry automatico). */
.grid-stations {
    grid-template-columns: minmax(0, 1fr);
}

.station-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--rule);
}

.station {
    --tab: var(--rule-strong);
    --figure: var(--ink);
    display: grid;
    align-content: start;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.8rem 1.1rem 0.9rem;
    border-top: 4px solid var(--tab);
    background: var(--sheet);
    color: inherit;
    transition: background-color 0.15s ease;
}

a.station:hover {
    background: var(--sheet-2);
}

.station-label {
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.station-count {
    color: var(--figure);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.station-omie { --tab: var(--omie); }
.station-nf { --tab: var(--nf); }