/* =================================================================
   Classificador Tributário — Avantec Sistemas
   Tema claro: marinho Avantec na estrutura, papel claro no conteúdo,
   códigos fiscais (NCM, CEST, cClassTrib) com algarismos tabulares
   e zero cortado, como num documento fiscal.
   ================================================================= */

@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/inter-display-600.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
    --navy: #0E2350;
    --navy-2: #172E63;
    --navy-3: #22407F;
    --navy-ink: #B9C5DF;
    --ink: #172033;
    --muted: #5B6578;
    --paper: #F3F5F8;
    --surface: #FFFFFF;
    --surface-2: #F7F8FA;
    --line: #DCE1E9;
    --line-strong: #C3CBD8;
    --action: #1F4FBF;
    --action-hover: #173E98;
    --focus: rgba(31, 79, 191, .28);

    --ok: #137044;      --ok-bg: #E5F3EB;
    --info: #1F4FBF;    --info-bg: #E9EFFC;
    --warn: #8F5200;    --warn-bg: #FDF0D9;
    --wait: #55607A;    --wait-bg: #ECEFF4;
    --bad: #A8261B;     --bad-bg: #FBE8E6;

    --r-panel: 10px;
    --r-control: 8px;
    --r-chip: 6px;

    --sidebar-w: 252px;

    /* Bootstrap */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--muted);
    --bs-link-color: var(--action);
    --bs-link-color-rgb: 31, 79, 191;
    --bs-link-hover-color: var(--action-hover);
    --bs-link-hover-color-rgb: 23, 62, 152;
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: var(--navy);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--bs-body-font-family);
    font-size: .9375rem;
    line-height: 1.5;
    font-feature-settings: "calt", "kern";
    -webkit-font-smoothing: antialiased;
}

a { color: var(--action); }
a:hover { color: var(--action-hover); }

.text-secondary { color: var(--muted) !important; }
.text-light { color: var(--ink) !important; }
.text-body { color: var(--ink) !important; }
.text-info { color: var(--info) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-danger { color: var(--bad) !important; }

/* ---------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
    color: var(--navy);
    font-weight: 600;
    letter-spacing: -.01em;
}

h1, .h1 {
    font-family: "Inter Display", var(--bs-body-font-family);
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
}

h2, .h2 { font-family: "Inter Display", var(--bs-body-font-family); font-size: 1.375rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: .9375rem; }

.page-head p, h1 + p { color: var(--muted); max-width: 70ch; }

.tabular, .table td { font-feature-settings: "tnum", "calt"; }

/* Códigos fiscais: NCM, CEST, cClassTrib, código de barras */
.code {
    display: inline-block;
    padding: .0625rem .4375rem;
    border: 1px solid var(--line);
    border-radius: var(--r-chip);
    background: var(--surface-2);
    color: var(--ink);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    font-feature-settings: "tnum", "zero";
}

.code-empty { border-style: dashed; color: var(--muted); background: transparent; }
.code-diff { text-decoration: line-through; color: var(--muted); background: transparent; }

.gtin { color: var(--muted); font-size: .8125rem; font-feature-settings: "tnum", "zero"; }

/* ---------------------------------------------------------------
   Estrutura
   --------------------------------------------------------------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--navy);
    color: var(--navy-ink);
}

.brand {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: 1.375rem 1.375rem 1.125rem;
    color: #fff;
    text-decoration: none;
}

.brand:hover { color: #fff; }

.brand-name {
    font-family: "Inter Display", var(--bs-body-font-family);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.brand-product { font-size: .8125rem; color: var(--navy-ink); }

.sidebar nav { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; }

.nav-group { margin-top: 1rem; }

.nav-group-label {
    padding: 0 .75rem .375rem;
    font-size: .75rem;
    font-weight: 500;
    color: #8C9BBD;
}

.sidebar nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1px 0;
    padding: .5rem .75rem;
    border-radius: var(--r-control);
    color: var(--navy-ink);
    font-size: .9063rem;
    text-decoration: none;
}

.sidebar nav a .bi { font-size: 1rem; opacity: .85; }

.sidebar nav a:hover { background: var(--navy-2); color: #fff; }

.sidebar nav a.active { background: var(--navy-3); color: #fff; font-weight: 500; }

.sidebar nav a.active::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: .5rem;
    bottom: .5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #8FB0FF;
}

.nav-count {
    margin-left: auto;
    min-width: 1.5rem;
    padding: 0 .4375rem;
    border-radius: 999px;
    background: #F5B547;
    color: #3A2500;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    font-feature-settings: "tnum";
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.375rem 1.125rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .8438rem;
}

.sidebar-user .who { min-width: 0; flex: 1; }
.sidebar-user .who strong { display: block; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who span { color: #8C9BBD; }
.sidebar-user a { color: var(--navy-ink); text-decoration: none; padding: .25rem; border-radius: 6px; }
.sidebar-user a:hover { color: #fff; background: var(--navy-2); }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); }

.topbar { display: none; }

.content { max-width: 1480px; margin: 0 auto; padding: 2rem 2.25rem 3rem; }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-head p { margin: 0; }

/* ---------------------------------------------------------------
   Painéis
   --------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: none;
    color: var(--ink);
}

.card.p-4 { padding: 1.5rem !important; }

.panel-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-title h2, .panel-title h5 { margin: 0; font-family: var(--bs-body-font-family); font-size: 1rem; font-weight: 600; letter-spacing: 0; }

.panel-title a { font-size: .875rem; text-decoration: none; }

.bg-dark, .bg-black { background: var(--surface-2) !important; color: var(--ink) !important; }
.bg-opacity-25 { --bs-bg-opacity: 1; }
.border-secondary { border-color: var(--line) !important; }
.border-primary { border-color: var(--action) !important; }

/* ---------------------------------------------------------------
   Tabelas (as telas usam .table-dark: aqui elas ficam claras)
   --------------------------------------------------------------- */

.table-responsive.card { overflow: auto; padding: 0; }

.table, .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-hover-bg: #F1F4F9;
    --bs-table-hover-color: var(--ink);
    --bs-table-active-bg: #EBF0F8;
    color: var(--ink);
    margin: 0;
    font-size: .875rem;
}

.table > :not(caption) > * > * {
    padding: .6875rem .875rem;
    border-bottom-color: var(--line);
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    vertical-align: middle;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.table tbody tr:last-child > * { border-bottom: 0; }

.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-table-hover-bg); }

.cell-product { min-width: 260px; }
.cell-product .name { display: block; font-weight: 500; }
.imports .name { display: block; white-space: nowrap; font-weight: 500; }
.cell-actions { white-space: nowrap; text-align: right; }
.cell-num { text-align: right; white-space: nowrap; font-feature-settings: "tnum"; }

.empty-state { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .25rem; }

/* Confiança: número + barra fina */
.conf { display: inline-flex; align-items: center; gap: .5rem; font-feature-settings: "tnum"; }
.conf-bar { width: 44px; height: 4px; border-radius: 4px; background: var(--wait-bg); overflow: hidden; }
.conf-bar > span { display: block; height: 100%; background: var(--ok); }
.conf.mid .conf-bar > span { background: #C98A1A; }
.conf.low .conf-bar > span { background: var(--bad); }

/* ---------------------------------------------------------------
   Situação (status)
   --------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5625rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.badge[class*="status-"]::before {
    content: "";
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: currentColor;
}

.status-aprovado { background: var(--ok-bg) !important; color: var(--ok) !important; }
.status-classificado { background: var(--info-bg) !important; color: var(--info) !important; }
.status-revisar { background: var(--warn-bg) !important; color: var(--warn) !important; }
.status-pendente { background: var(--wait-bg) !important; color: var(--wait) !important; }
.status-sem_classificacao { background: var(--bad-bg) !important; color: var(--bad) !important; }

/* ---------------------------------------------------------------
   Formulários
   --------------------------------------------------------------- */

label, .form-label { font-size: .8438rem; font-weight: 500; color: var(--ink); margin-bottom: .3125rem; }

.form-text { color: var(--muted); }

.form-control, .form-select {
    min-height: 2.5rem;
    padding: .4375rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background-color: var(--surface);
    color: var(--ink);
    font-size: .9063rem;
    box-shadow: none;
}

.form-control::placeholder { color: #8A93A5; }

.form-control:focus, .form-select:focus {
    border-color: var(--action);
    background-color: var(--surface);
    color: var(--ink);
    box-shadow: 0 0 0 3px var(--focus);
}

.form-control[type="file"] { padding: .3125rem; }
.form-control[type="file"]::file-selector-button { border-radius: 6px; margin-right: .75rem; }

/* ---------------------------------------------------------------
   Botões
   --------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-font-size: .9063rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: var(--r-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    background-image: none;
    text-shadow: none;
}

.btn-sm {
    --bs-btn-font-size: .8125rem;
    --bs-btn-padding-y: .3125rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-border-radius: 7px;
}

.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-y: .6875rem; --bs-btn-padding-x: 1.375rem; }

.btn-primary {
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--navy-3);
    --bs-btn-hover-border-color: var(--navy-3);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--navy-2);
    --bs-btn-active-border-color: var(--navy-2);
    --bs-btn-disabled-bg: #6E7C9C;
    --bs-btn-disabled-border-color: #6E7C9C;
    --bs-btn-focus-shadow-rgb: 31, 79, 191;
}

.btn-success {
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0F5C38;
    --bs-btn-hover-border-color: #0F5C38;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0F5C38;
    --bs-btn-active-border-color: #0F5C38;
}

.btn-outline-light, .btn-outline-secondary {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: #AEB8C8;
    --bs-btn-active-bg: #EDF0F5;
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-border-color: #AEB8C8;
}

.btn-outline-info, .btn-outline-primary {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--action);
    --bs-btn-border-color: #B6C7EE;
    --bs-btn-hover-bg: var(--info-bg);
    --bs-btn-hover-color: var(--action-hover);
    --bs-btn-hover-border-color: #8FA9E6;
    --bs-btn-active-bg: #DCE6FA;
    --bs-btn-active-color: var(--action-hover);
    --bs-btn-active-border-color: #8FA9E6;
}

.btn-outline-success {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--ok);
    --bs-btn-border-color: #A9D3BC;
    --bs-btn-hover-bg: var(--ok-bg);
    --bs-btn-hover-color: var(--ok);
    --bs-btn-hover-border-color: #7FBF9C;
}

.btn-outline-warning {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--warn);
    --bs-btn-border-color: #E8C98F;
    --bs-btn-hover-bg: var(--warn-bg);
    --bs-btn-hover-color: var(--warn);
    --bs-btn-hover-border-color: #D9AE5E;
}

.btn:focus-visible, a:focus-visible, .form-check-input:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* Filtros da fila (Todos, Revisar...) */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.segmented a {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .375rem .75rem;
    border-radius: 7px;
    color: var(--muted);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.segmented a:hover { color: var(--ink); background: var(--surface-2); }
.segmented a.active { background: var(--navy); color: #fff; }
.segmented .n { font-size: .78rem; font-feature-settings: "tnum"; opacity: .8; }

/* ---------------------------------------------------------------
   Avisos, progresso
   --------------------------------------------------------------- */

.alert {
    --bs-alert-border-radius: var(--r-panel);
    border-width: 1px;
    font-size: .9063rem;
}

.alert-info { --bs-alert-bg: var(--info-bg); --bs-alert-color: #173A8A; --bs-alert-border-color: #C9D7F6; }
.alert-success { --bs-alert-bg: var(--ok-bg); --bs-alert-color: #0E5434; --bs-alert-border-color: #BCDDC9; }
.alert-warning { --bs-alert-bg: var(--warn-bg); --bs-alert-color: #6B3D00; --bs-alert-border-color: #F0D39C; }
.alert-danger { --bs-alert-bg: var(--bad-bg); --bs-alert-color: #7D1C13; --bs-alert-border-color: #F1C3BE; }

.notice {
    padding: .875rem 1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy);
    border-radius: 0 var(--r-control) var(--r-control) 0;
    background: var(--surface);
    color: var(--muted);
    font-size: .875rem;
    max-width: 110ch;
}

.progress { height: .625rem; border-radius: 999px; background: #E4E8EF; }
.progress[style*="height"] { border-radius: var(--r-control); }
.progress-bar { background-color: var(--navy); font-weight: 500; font-size: .8125rem; }

.stat { padding: .875rem 1rem; }
.stat .label { color: var(--muted); font-size: .8125rem; }
.stat .value { color: var(--ink); font-size: 1.375rem; font-weight: 600; font-feature-settings: "tnum"; }

.spinner-border-sm { --bs-spinner-width: .875rem; --bs-spinner-height: .875rem; }

/* Modal de revisão com IA (estilos inline escuros nas telas) */
#aiReviewModal { background: rgba(14, 35, 80, .45) !important; }
#aiReviewModal > div { background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 24px 64px rgba(14, 35, 80, .28) !important; }

/* ---------------------------------------------------------------
   Painel (dashboard)
   --------------------------------------------------------------- */

.overview { padding: 1.5rem; }

.overview-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.overview-total strong {
    font-family: "Inter Display", var(--bs-body-font-family);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--navy);
    font-feature-settings: "tnum";
}

.overview-total span { color: var(--muted); }

.stack {
    display: flex;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wait-bg);
    gap: 2px;
}

.stack > a { display: block; min-width: 4px; }
.s-aprovado { background: var(--ok); }
.s-classificado { background: #4C78DB; }
.s-revisar { background: #E19A22; }
.s-pendente { background: #9AA5BA; }
.s-sem_classificacao { background: #D0453A; }

.legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .25rem 1.5rem;
    margin-top: 1.125rem;
}

.legend a {
    display: grid;
    grid-template-columns: .625rem 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    margin: 0 -.5rem;
    border-radius: 7px;
    color: var(--ink);
    text-decoration: none;
    font-size: .875rem;
}

.legend a:hover { background: var(--surface-2); }
.legend i { width: .625rem; height: .625rem; border-radius: 3px; }
.legend b { font-weight: 600; font-feature-settings: "tnum"; }

.fact-list { margin: 0; }
.fact-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5625rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .875rem;
}
.fact-list > div:last-child { border-bottom: 0; }
.fact-list dt { font-weight: 400; color: var(--muted); }
.fact-list dd { margin: 0; text-align: right; font-weight: 500; font-feature-settings: "tnum"; }

.ai-on { color: var(--ok); }
.ai-off { color: var(--muted); }

/* ---------------------------------------------------------------
   Login
   --------------------------------------------------------------- */

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 44%) 1fr;
    background: var(--surface);
}

.login-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.75rem 3rem;
    background: var(--navy);
    color: var(--navy-ink);
}

.login-side .brand { padding: 0; }
.login-side .brand-name { font-size: 1.75rem; }

.login-side blockquote {
    margin: 0;
    max-width: 30ch;
    font-family: "Inter Display", var(--bs-body-font-family);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #fff;
}

.login-side small { color: #8C9BBD; }

.login-main { display: grid; place-items: center; padding: 2rem; }

.login-card { width: min(380px, 100%); }
.login-card h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.login-card p { color: var(--muted); margin-bottom: 1.75rem; }

/* ---------------------------------------------------------------
   Celular e tablet
   --------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(14, 35, 80, .35); }
    .main { margin-left: 0; }
    .topbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        display: flex;
        align-items: center;
        gap: .75rem;
        height: 56px;
        padding: 0 1rem;
        background: var(--navy);
        color: #fff;
    }
    .topbar .btn { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.25); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--navy-2); --bs-btn-hover-color: #fff; }
    .topbar .brand-name { font-size: 1.0625rem; }
    .content { padding: 1.25rem 1rem 2rem; }
    .login-page { grid-template-columns: 1fr; }
    .login-side { padding: 1.75rem 1.5rem; gap: 1.5rem; }
    .login-side blockquote { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .progress-bar-animated { animation: none; }
}

/* Listas de dados (tela do produto) */
dl.row dt { font-weight: 500; color: var(--muted); }
dl.row dd { margin-bottom: .5rem; font-feature-settings: "tnum", "zero"; }

code { color: var(--navy); background: var(--surface-2); padding: .0625rem .3125rem; border-radius: 4px; font-size: .85em; }

/* ---------------------------------------------------------------
   Revalidação com Claude
   --------------------------------------------------------------- */

.scope-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.scope-option {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.125rem;
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.scope-option:hover { border-color: var(--line-strong); }
.scope-option input { position: absolute; opacity: 0; pointer-events: none; }
.scope-option:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.scope-option:has(input:focus-visible) { box-shadow: 0 0 0 .25rem var(--focus); }
.scope-option .t { font-weight: 600; color: var(--ink); }
.scope-option .d { color: var(--muted); font-size: .8125rem; margin: .25rem 0 .75rem; flex: 1; }
.scope-option .n {
    font-family: "Inter Display", var(--bs-body-font-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--navy);
    font-feature-settings: "tnum";
}
.scope-option .u { color: var(--muted); font-size: .8125rem; }

.estimate {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    padding: .75rem 1rem;
    border-radius: var(--r-control);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .875rem;
}
.estimate strong { color: var(--ink); font-weight: 600; font-feature-settings: "tnum"; }

.stack > span { display: block; }
.legend-static > span {
    display: grid;
    grid-template-columns: .625rem 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .375rem 0;
    font-size: .875rem;
}

.toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.toolbar .form-label { margin-bottom: .25rem; color: var(--muted); }

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--surface);
    font-size: .875rem;
}
.bulk-bar > span:first-child { margin-right: auto; color: var(--muted); }
.bulk-bar strong { color: var(--ink); font-feature-settings: "tnum"; }

.change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; }
.change .bi { color: var(--muted); font-size: .75rem; }
.code-new { border-color: #F0D39C; background: var(--warn-bg); color: #6B3D00; }

.reval .sub {
    display: block;
    max-width: 30ch;
    margin-top: .25rem;
    overflow: hidden;
    color: var(--muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reval .reason { min-width: 200px; max-width: 38ch; color: var(--muted); }

.samples { margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.samples li { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.samples .more { color: var(--muted); }

details.card > summary { cursor: pointer; }
.change { flex-wrap: nowrap; white-space: nowrap; }
.toolbar .form-select { min-width: 9.5rem; }
.reval .samples li { max-width: 30ch; }

.changes {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    gap: .375rem .5rem;
    margin: 0;
}
.changes > div { display: contents; }
.changes dt {
    padding-top: .2rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 500;
}
.changes dd { margin: 0; min-width: 0; }
.reval .cell-product { min-width: 220px; max-width: 360px; }
.reval .cell-product .reason {
    display: block;
    margin-top: .375rem;
    color: var(--muted);
    font-size: .8125rem;
    line-height: 1.35;
}
.reval .sub { max-width: 40ch; }