/*
 * tariffSimulator.css
 * ===================
 * Estilos propios del Tariff Simulator integrado en el diseño Vector.
 * Se apoya en colorPalette.css, index.css y tablerIcons.css del proyecto
 * padre (inyectados por el base template index.html).
 *
 * Variables de color de los layers (compatibles con app.js existente)
 */

/* ── Layer color tokens (re-mapeados a la paleta Vector) ─────────────────── */
:root {
    --c-base: var(--primary-200);
    --c-301: var(--primary-100);
    --c-232: var(--secondary-400);
    --c-auto: var(--secondary-500);
    --c-122: var(--secondary-200);
    --c-fee: var(--secondary-700);
    --muted: var(--text-200);
}

/* ── Reset / layout base ────────────────────────────────────────────────── */
/* .ts-root now comes from vector-app-shell; keep for color/font inheritance */
.ts-root,
.ts-shell {
    color: var(--text-100);
    font-family: var(--font-body);
}

/* ── Shell + workspace layout ───────────────────────────────────────────── */
/* Extend the base vector-app-shell so the workspace scrolls and background matches */
.ts-shell {
    background: color-mix(in srgb, var(--secondary-900) 42%, var(--bg-100));
}

.ts-shell~.vector-cloud-footer {
    margin-top: 0;
}

.ts-workspace {
    min-width: 0;
    overflow-x: hidden;
}

.ts-page {
    margin: 0 auto;
    max-width: var(--content-max-width);
    padding: 1rem 1.75rem var(--space-12);
    width: 100%;
}

.ts-sidebar-header {
    justify-content: center;
    text-align: center;
}

.ts-sidebar-header h3 {
    flex: initial;
    justify-content: center;
    text-align: center;
}

.ts-page-header {
    margin-bottom: 0;
    padding: 1.5rem 1.75rem .25rem;
}

/* Keep the h1 in the page-header visually matching the ts-page content width */
.ts-page-header h1 {
    color: var(--primary-200);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

/* USITC status pill — top-right of workspace */
.ts-status-bar {
    display: flex;
    justify-content: flex-end;
    padding: .75rem 1.75rem 0;
}

/* Sidebar buttons — reset browser default button styles */
.vector-sidebar-nav .vector-sidebar-link {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

.vector-sidebar-nav .vector-sidebar-link:hover {
    background: color-mix(in srgb, var(--sidebar-active-bg) 25%, transparent);
}

.vector-sidebar-nav .vector-sidebar-link.active {
    background: var(--sidebar-active-bg);
}

/* Pilot badge inside sidebar */
.ts-pilot-link .tab-mark {
    background: var(--secondary-200);
    border-radius: 999px;
    color: var(--primary-200);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 0;
    padding: 1px 6px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ── Sub-header / tabs nav (kept for legacy; hidden in sidebar layout) ── */
.ts-subnav {
    display: none;
}

.tabs {
    display: flex;
    gap: 0;
    margin: 0 auto;
    max-width: var(--content-max-width);
    overflow-x: auto;
    padding: 0 var(--content-padding-x);
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgb(var(--bg-100-rgb) / .65);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: .75rem 1rem;
    transition: var(--transition-interactive);
    white-space: nowrap;
}

.tab:hover {
    color: var(--bg-100);
    border-bottom-color: rgb(var(--secondary-200-rgb) / .5);
}

.tab.active {
    border-bottom-color: var(--secondary-200);
    color: var(--secondary-200);
}

.tab-pilot {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.tab-mark {
    background: var(--secondary-200);
    border-radius: var(--radius-pill);
    color: var(--primary-200);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 0;
    padding: .1em .45em;
    text-transform: uppercase;
}

/* ── Tab panels ─────────────────────────────────────────────────────────── */
.tab-panel {
    display: none;
}

.tab-panel.active-panel {
    display: block;
    animation: ts-fadein .22s ease;
}

@keyframes ts-fadein {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alias used by app.js: show/hide via .hidden class */
.hidden {
    display: none !important;
}

/* ── Page intro ─────────────────────────────────────────────────────────── */
.page-intro {
    margin-bottom: var(--space-5);
}

.page-intro h1 {
    color: var(--primary-200);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin: 0 0 .5rem;
    line-height: 1.2;
}

.page-intro p {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: 100%;
}

/* ── Panel (card) ───────────────────────────────────────────────────────── */
.panel {
    background: var(--color-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding) calc(var(--card-padding) * 1.4);
    margin-bottom: var(--space-6);
}

.panel-title {
    border-bottom: var(--border-subtle);
    color: var(--primary-200);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-3);
}

/* ── Layout grid (simulator: input + result side by side) ───────────────── */
.layout {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
}

.field:last-child {
    margin-bottom: 0;
}

.field label {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
    background: var(--color-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-input);
    color: var(--text-100);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    height: var(--control-height-md);
    outline: none;
    padding: 0 var(--control-padding-x-md);
    transition: var(--transition-interactive);
    width: 100%;
}

.field textarea {
    height: auto;
    padding: var(--control-padding-y-md) var(--control-padding-x-md);
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-focus);
}

.field-hint {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    margin: var(--space-1) 0 0;
    opacity: var(--opacity-muted);
}

.field-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-5);
}

@media (max-width: 540px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

.opt {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-style: italic;
    opacity: var(--opacity-muted);
}

/* ── HTS search ─────────────────────────────────────────────────────────── */
.search-wrap {
    position: relative;
}

.search-spinner {
    border: 2px solid var(--secondary-800);
    border-top-color: var(--primary-200);
    border-radius: 50%;
    height: 1rem;
    pointer-events: none;
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.dropdown {
    background: var(--color-surface);
    border: var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    position: absolute;
    top: calc(100% + 4px);
    width: 100%;
    z-index: var(--z-dropdown);
}

.dropdown-item {
    border-bottom: var(--border-subtle);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .75rem;
    transition: background var(--transition-fast);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item.focused {
    background: var(--color-surface-muted);
}

.dropdown-item .di-code {
    color: var(--primary-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0;
}

.dropdown-item .di-desc {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.dropdown-item .di-rate {
    color: var(--text-200);
    font-size: var(--font-size-xs);
}

.hts-selected {
    background: color-mix(in srgb, var(--primary-200) 8%, var(--bg-100));
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    padding: .55rem .75rem;
}

.hts-selected .hts-sel-code {
    color: var(--primary-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.hts-selected .hts-sel-desc {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    margin-top: .15rem;
}

/* ── Quick examples ─────────────────────────────────────────────────────── */
.examples {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.examples-label {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 600;
    opacity: var(--opacity-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}

.example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip {
    background: var(--color-surface-muted);
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--primary-200);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: .2rem .7rem;
    transition: var(--transition-interactive);
}

.chip:hover {
    background: color-mix(in srgb, var(--primary-200) 10%, var(--bg-100));
    border-color: var(--primary-200);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    align-items: center;
    background: var(--primary-200);
    border: 2px solid var(--primary-200);
    border-radius: var(--radius-button);
    color: var(--bg-100);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    gap: .4rem;
    justify-content: center;
    padding: .6rem 1.35rem;
    transition: var(--transition-interactive);
    width: 100%;
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary-200);
}

.btn-primary:disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

.btn-ghost {
    align-items: center;
    background: transparent;
    border: var(--border-strong);
    border-radius: var(--radius-button);
    color: var(--text-200);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    gap: .4rem;
    justify-content: center;
    padding: .55rem 1.1rem;
    transition: var(--transition-interactive);
}

.btn-ghost:hover {
    background: var(--color-surface-muted);
    border-color: var(--primary-200);
    color: var(--primary-200);
}

/* ── Form error ─────────────────────────────────────────────────────────── */
.form-error {
    background: var(--color-danger-soft);
    border: 1px solid var(--status-red);
    border-radius: var(--radius-md);
    color: var(--status-red);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--space-3);
    padding: .55rem .85rem;
}

/* ── Forward scenario inputs ─────────────────────────────────────────────── */
.forward-toggle {
    margin-bottom: var(--space-5);
}

.checkbox {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .55rem;
}

.checkbox input[type="checkbox"] {
    accent-color: var(--primary-200);
    height: 1rem;
    width: 1rem;
}

.forward-probs {
    background: var(--color-surface-muted);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    padding: var(--space-4);
}

.probs-label {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0;
}

.prob-row {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.prob-label {
    font-size: var(--font-size-sm);
    flex: 1;
}

.prob-row input[type="number"] {
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    padding: .2rem .4rem;
    text-align: right;
    width: 4rem;
}

.prob-sum {
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-top: var(--space-2);
    text-align: right;
}

.prob-sum.ok {
    color: var(--status-green);
}

.prob-sum.bad {
    color: var(--status-red);
}

/* ── Advanced details ─────────────────────────────────────────────────────── */
.advanced {
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.advanced summary {
    color: var(--primary-200);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: .55rem .75rem;
    user-select: none;
}

.advanced-body {
    border-top: var(--border-subtle);
    padding: var(--space-4) .75rem var(--space-3);
}

/* ── Result panel states ─────────────────────────────────────────────────── */
.result-panel {
    display: flex;
    flex-direction: column;
}

.result-empty {
    align-items: center;
    color: var(--text-200);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-3);
    justify-content: center;
    min-height: 18rem;
    opacity: var(--opacity-muted);
    text-align: center;
}

.result-empty-mark {
    color: var(--primary-200);
    font-size: 2.5rem;
    opacity: .35;
}

.result-empty h3 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.result-empty p {
    font-size: var(--font-size-sm);
    margin: 0;
}

.result-loading {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: center;
    min-height: 18rem;
    text-align: center;
}

.big-spinner {
    animation: spin .8s linear infinite;
    border: 3px solid var(--secondary-800);
    border-top-color: var(--primary-200);
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
}

.result-content {
    flex: 1;
}

/* ── HTS result header ────────────────────────────────────────────────────── */
.hts-header {
    background: color-mix(in srgb, var(--primary-200) 6%, var(--bg-100));
    border: 1px solid color-mix(in srgb, var(--primary-200) 20%, var(--bg-100));
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

.hts-code-badge {
    background: var(--primary-200);
    border-radius: var(--radius-sm);
    color: var(--bg-100);
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: var(--space-2);
    padding: .15rem .6rem;
}

.hts-desc {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-2);
}

.hts-rates-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-200);
}

.hts-rates-row span {
    display: flex;
    gap: .3rem;
}

.hts-rates-row b {
    color: var(--text-100);
}

.source-pill {
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    color: var(--text-200);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    padding: .15rem .55rem;
}

/* ── Duty layers ─────────────────────────────────────────────────────────── */
.layers-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.layer-row {
    border-left: 4px solid var(--layer-color, var(--primary-200));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface);
    border-top: var(--border-subtle);
    border-right: var(--border-subtle);
    border-bottom: var(--border-subtle);
    padding: .55rem .75rem;
}

.layer-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.layer-label {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.layer-amount {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.layer-rate-text {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    margin-top: .1rem;
}

.layer-note {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    margin-top: .25rem;
    opacity: var(--opacity-muted);
}

/* ── Excluded layers ─────────────────────────────────────────────────────── */
.excluded-section {
    margin-bottom: var(--space-5);
}

.excluded-title {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: var(--space-2);
    opacity: var(--opacity-muted);
    text-transform: uppercase;
}

.excluded-row {
    align-items: flex-start;
    border-bottom: var(--border-subtle);
    color: var(--text-200);
    display: flex;
    font-size: var(--font-size-xs);
    gap: var(--space-2);
    line-height: var(--line-height-relaxed);
    opacity: var(--opacity-muted);
    padding: .3rem 0;
}

.excluded-row::before {
    color: var(--bg-300);
    content: '—';
    flex-shrink: 0;
}

/* ── Fees section ─────────────────────────────────────────────────────────── */
.fees-row {
    align-items: center;
    border-bottom: var(--border-subtle);
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
}

.fees-row-label {
    font-size: var(--font-size-sm);
    color: var(--text-200);
}

.fees-row-amount {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ── Summary box ─────────────────────────────────────────────────────────── */
.summary-box {
    background: var(--primary-200);
    border-radius: var(--radius-md);
    color: var(--bg-100);
    padding: var(--space-5);
}

.summary-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0;
    opacity: .7;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.summary-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    font-size: var(--font-size-sm);
}

.summary-row.total {
    border-top: 1px solid rgb(var(--bg-100-rgb) / .25);
    font-size: var(--font-size-lg);
    font-weight: 800;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
}

.summary-row .rate-badge {
    background: rgb(var(--secondary-200-rgb) / .2);
    border-radius: var(--radius-pill);
    color: var(--secondary-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: .1rem .5rem;
}

/* ── Status pills ────────────────────────────────────────────────────────── */
.status-pill {
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: .2rem .75rem;
    letter-spacing: 0;
}

.status-wait {
    background: var(--color-warning-soft);
    color: var(--status-yellow);
}

.status-ok {
    background: var(--color-success-soft);
    color: var(--status-green);
}

.status-error {
    background: var(--color-danger-soft);
    color: var(--status-red);
}

/* ── Forward scenarios ───────────────────────────────────────────────────── */
.scenarios-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: var(--space-5);
}

@media (max-width: 720px) {
    .scenarios-grid {
        grid-template-columns: 1fr;
    }
}

.scenario-card {
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.scenario-card.best {
    border-color: var(--status-green);
}

.scenario-card.worst {
    border-color: var(--status-red);
}

.scenario-label {
    color: var(--primary-200);
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.scenario-prob {
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    color: var(--text-200);
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: var(--space-3);
    padding: .15rem .55rem;
}

.scenario-landed {
    color: var(--text-100);
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.expected-callout {
    background: color-mix(in srgb, var(--secondary-200) 12%, var(--bg-100));
    border: 1px solid var(--secondary-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

.expected-label {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.expected-value {
    color: var(--primary-200);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin: .2rem 0;
}

.recommendation-box {
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    color: var(--text-200);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    padding: var(--space-4);
}

/* ── Bulk landed cost ─────────────────────────────────────────────────────── */
.bulk-lead {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.dropzone {
    border: 2px dashed var(--secondary-700);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    transition: var(--transition-interactive);
    position: relative;
}

.dropzone:hover,
.dropzone.drag-over {
    border-color: var(--primary-200);
    background: color-mix(in srgb, var(--primary-200) 5%, var(--bg-100));
}

.dropzone input[type="file"] {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.dropzone-inner {
    pointer-events: none;
}

.dropzone-icon {
    color: var(--primary-200);
    font-size: 2rem;
    margin-bottom: .5rem;
}

.dropzone-text {
    color: var(--text-200);
    font-size: var(--font-size-sm);
}

.dropzone-file {
    color: var(--primary-200);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: .35rem;
}

/* ── Bulk table ──────────────────────────────────────────────────────────── */
.bulk-table-wrap {
    overflow-x: auto;
}

.bulk-table {
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    min-width: 800px;
    width: 100%;
}

.bulk-table th {
    background: var(--table-header-bg);
    border: var(--border-subtle);
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: .55rem .65rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
}

.bulk-table td {
    border: var(--border-subtle);
    padding: .45rem .65rem;
    vertical-align: middle;
}

.bulk-table td input,
.bulk-table td select {
    border: var(--border-subtle);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    padding: .25rem .4rem;
    width: 100%;
}

.bulk-table .row-error {
    background: var(--color-danger-soft);
}

.bulk-table .row-ok {
    background: var(--color-success-soft);
}

.bulk-table .row-fallback {
    background: var(--color-warning-soft);
}

.bulk-actions {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.bulk-actions .btn-primary {
    width: auto;
}

.bulk-actions .btn-ghost {
    width: auto;
}

/* ── Bulk results summary ───────────────────────────────────────────────── */
.bulk-summary-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: var(--space-6);
}

@media (max-width: 860px) {
    .bulk-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bulk-kpi {
    background: var(--color-surface);
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.bulk-kpi-value {
    color: var(--primary-200);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: .2rem;
}

.bulk-kpi-label {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 600;
    opacity: var(--opacity-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}

/* ── Classifier grid ─────────────────────────────────────────────────────── */
.classifier-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
    .classifier-grid {
        grid-template-columns: 1fr;
    }
}

.candidate-card {
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    transition: var(--transition-interactive);
}

.candidate-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.candidate-code {
    color: var(--primary-200);
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: .2rem;
}

.candidate-desc {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.confidence-bar-wrap {
    background: var(--secondary-900);
    border-radius: var(--radius-pill);
    height: 6px;
    margin-bottom: var(--space-2);
    overflow: hidden;
    width: 100%;
}

.confidence-bar {
    background: var(--primary-200);
    border-radius: var(--radius-pill);
    height: 100%;
    transition: width .4s var(--ease-out);
}

.confidence-label {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* AD/CVD risk badge */
.adcvd-badge {
    border-radius: var(--radius-pill);
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-top: var(--space-2);
    padding: .15rem .65rem;
}

.adcvd-very_high {
    background: var(--color-danger-soft);
    color: var(--status-red);
}

.adcvd-moderate {
    background: var(--color-warning-soft);
    color: color-mix(in srgb, var(--status-yellow) 80%, var(--primary-300));
}

.adcvd-low_moderate,
.adcvd-low {
    background: var(--color-success-soft);
    color: var(--status-green);
}

/* ── Recovery panels ─────────────────────────────────────────────────────── */
.mode-selector {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.mode-btn {
    background: var(--color-surface-muted);
    border: var(--border-subtle);
    border-radius: var(--radius-button);
    color: var(--text-200);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: .5rem 1.25rem;
    transition: var(--transition-interactive);
}

.mode-btn.active,
.mode-btn:hover {
    background: var(--primary-200);
    border-color: var(--primary-200);
    color: var(--bg-100);
}

.refunds-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 860px) {
    .refunds-grid {
        grid-template-columns: 1fr;
    }
}

.audit-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr 1.6fr;
}

@media (max-width: 860px) {
    .audit-grid {
        grid-template-columns: 1fr;
    }
}

/* Pathway card */
.pathway-card {
    border-left: 4px solid var(--pathway-color, var(--secondary-700));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-top: var(--border-subtle);
    border-right: var(--border-subtle);
    border-bottom: var(--border-subtle);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
}

.pathway-card.eligible {
    --pathway-color: var(--status-green);
}

.pathway-card.maybe {
    --pathway-color: var(--status-yellow);
}

.pathway-card.not-elig {
    --pathway-color: var(--secondary-800);
}

.pathway-name {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: .2rem;
}

.pathway-elig {
    border-radius: var(--radius-pill);
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-bottom: var(--space-2);
    padding: .15rem .6rem;
}

.elig-eligible {
    background: var(--color-success-soft);
    color: var(--status-green);
}

.elig-maybe {
    background: var(--color-warning-soft);
    color: color-mix(in srgb, var(--status-yellow) 80%, var(--primary-300));
}

.elig-not {
    background: var(--color-surface-muted);
    color: var(--text-200);
    opacity: var(--opacity-muted);
}

.pathway-estimate {
    color: var(--primary-200);
    font-size: var(--font-size-sm);
    font-weight: 800;
    margin-bottom: .25rem;
}

.pathway-reason,
.pathway-note {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
}

/* ── Recovery summary totals ─────────────────────────────────────────────── */
.recovery-total-bar {
    background: color-mix(in srgb, var(--status-green) 10%, var(--bg-100));
    border: 1px solid var(--status-green);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

.recovery-total-label {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.recovery-total-value {
    color: var(--status-green);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

/* ── CTA / Vector services panel ─────────────────────────────────────────── */
.refunds-vector {
    background: color-mix(in srgb, var(--primary-200) 5%, var(--bg-100));
    border: 1px solid color-mix(in srgb, var(--primary-200) 25%, var(--bg-100));
}

.rv-intro {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

.rv-services {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-6);
    color: var(--text-200);
}

.rv-services li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.rv-services li .ti {
    color: var(--color-success);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .rv-services {
        grid-template-columns: 1fr;
    }
}

.rv-cta {
    max-width: 22rem;
}

/* ── Catalog ─────────────────────────────────────────────────────────────── */

/* HTS code lookup panel */
.catalog-hts-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.catalog-hts-hint {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.catalog-hts-hint code {
    background: var(--color-surface-muted);
    border-radius: var(--radius-xs);
    font-size: .85em;
    padding: .1rem .35rem;
}

.catalog-hts-row {
    display: flex;
    gap: var(--space-3);
}

.catalog-hts-row input {
    border: var(--border-subtle);
    border-radius: var(--radius-input);
    flex: 1;
    font-size: var(--font-size-sm);
    height: var(--control-height-md);
    outline: none;
    padding: 0 var(--control-padding-x-md);
    transition: var(--transition-interactive);
}

.catalog-hts-row input:focus {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-focus);
}

.catalog-toolbar {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.catalog-toolbar input {
    border: var(--border-subtle);
    border-radius: var(--radius-input);
    flex: 1;
    font-size: var(--font-size-sm);
    height: var(--control-height-md);
    padding: 0 var(--control-padding-x-md);
    outline: none;
    transition: var(--transition-interactive);
}

.catalog-toolbar input:focus {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-focus);
}

.catalog-count {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.catalog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Section header (generated by renderCatalog) ── */
.catalog-section {
    margin-bottom: var(--space-5);
}

.catalog-section-head {
    align-items: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: .55rem .75rem;
}

.css-roman {
    background: var(--primary-200);
    border-radius: var(--radius-xs);
    color: var(--bg-100);
    font-size: var(--font-size-xs);
    font-weight: 800;
    padding: .1rem .45rem;
    white-space: nowrap;
}

.css-title {
    color: var(--primary-200);
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: 700;
    flex: 1;
}

.css-range {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* ── Chapter grid (generated by chapterCard) ── */
.catalog-chapters {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 0 .25rem;
}

.chapter-card {
    align-items: flex-start;
    background: none;
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    gap: var(--space-3);
    padding: .55rem .75rem;
    text-align: left;
    transition: var(--transition-interactive);
    width: 100%;
}

.chapter-card:hover {
    background: var(--color-surface-muted);
    border-color: var(--primary-200);
}

.chapter-code {
    background: var(--primary-200);
    border-radius: var(--radius-xs);
    color: var(--bg-100);
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 800;
    min-width: 2rem;
    padding: .15rem .4rem;
    text-align: center;
}

.chapter-main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.chapter-title {
    color: var(--text-100);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: var(--line-height-snug);
}

.chapter-sub {
    color: var(--text-200);
    font-size: .7rem;
    line-height: var(--line-height-snug);
}

.chapter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .2rem;
}

.chapter-tag {
    border-radius: var(--radius-pill);
    font-size: .6rem;
    font-weight: 800;
    padding: .1rem .4rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* tag colours by tagClass() */
.t-steel {
    background: var(--color-info-soft);
    color: var(--secondary-400);
}

.t-aluminum {
    background: var(--color-info-soft);
    color: var(--secondary-400);
}

.t-copper {
    background: var(--color-warning-soft);
    color: color-mix(in srgb, var(--status-yellow) 80%, var(--primary-300));
}

.t-auto {
    background: var(--color-warning-soft);
    color: color-mix(in srgb, var(--status-yellow) 80%, var(--primary-300));
}

.t-special {
    background: var(--color-danger-soft);
    color: var(--status-red);
}

/* legacy badge classes (kept for compat) */
.ch-badge {
    border-radius: var(--radius-pill);
    font-size: .6rem;
    font-weight: 800;
    margin-left: auto;
    padding: .1rem .4rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.ch-badge-232 {
    background: var(--color-info-soft);
    color: var(--secondary-400);
}

.ch-badge-auto {
    background: var(--color-warning-soft);
    color: color-mix(in srgb, var(--status-yellow) 80%, var(--primary-300));
}

.ch-badge-99 {
    background: var(--color-danger-soft);
    color: var(--status-red);
}

.catalog-empty {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    padding: var(--space-4);
    text-align: center;
}

.catalog-disclaimer {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    margin-top: var(--space-4);
    opacity: var(--opacity-muted);
}

/* ── Chapter tree (drilldown) ─────────────────────────────────────────────── */
.chapter-back-btn {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--primary-200);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-sm);
    font-weight: 600;
    gap: .4rem;
    margin-bottom: var(--space-4);
    padding: 0;
}

.chapter-tree {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.tree-row {
    border-bottom: var(--border-subtle);
    display: grid;
    font-size: var(--font-size-xs);
    gap: .5rem;
    grid-template-columns: 8rem 1fr 5rem 5rem;
    padding: .35rem .25rem;
}

.tree-row.tree-header {
    background: var(--table-header-bg);
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-200);
}

.tree-row.indent-2 .tree-code {
    padding-left: 1rem;
}

.tree-row.indent-3 .tree-code {
    padding-left: 2rem;
}

.tree-row.indent-4 .tree-code {
    padding-left: 3rem;
}

.tree-code {
    color: var(--primary-200);
    font-weight: 700;
}

.tree-rate {
    color: var(--text-200);
    text-align: right;
}

.tree-sim-btn {
    background: var(--primary-200);
    border: none;
    border-radius: var(--radius-xs);
    color: var(--bg-100);
    cursor: pointer;
    font-size: .58rem;
    font-weight: 700;
    padding: .1rem .35rem;
    transition: var(--transition-fast);
}

.tree-sim-btn:hover {
    background: var(--secondary-400);
}

/* ── CROSS Rulings ───────────────────────────────────────────────────────── */
.cross-search-panel .btn-primary {
    width: auto;
}

.ruling-card {
    border: var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    transition: var(--transition-interactive);
}

.ruling-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.ruling-header {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.ruling-number {
    color: var(--primary-200);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.ruling-hts {
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    color: var(--text-200);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: .1rem .5rem;
}

.ruling-date {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    margin-left: auto;
}

.ruling-subject {
    color: var(--text-100);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: .25rem;
}

.ruling-abstract {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-3);
}

.ruling-footer {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.ai-score-badge {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: 700;
    gap: .25rem;
    padding: .15rem .6rem;
}

.ai-score-high {
    background: var(--color-success-soft);
    color: var(--status-green);
}

.ai-score-mid {
    background: var(--color-warning-soft);
    color: color-mix(in srgb, var(--status-yellow) 80%, var(--primary-300));
}

.ai-score-low {
    background: var(--color-surface-muted);
    color: var(--text-200);
}

.ruling-link {
    color: var(--primary-200);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none;
}

.ruling-link:hover {
    text-decoration: underline;
}

/* ── Feedback panel ──────────────────────────────────────────────────────── */
.feedback-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.feedback-actions .btn-primary,
.feedback-actions .btn-ghost {
    width: auto;
}

.feedback-honeypot {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

#fbStatus {
    min-height: 1.25rem;
}

/* ── Legal banner ────────────────────────────────────────────────────────── */
.ts-footer-legal-banner {
    border-bottom: 1px solid color-mix(in srgb, var(--bg-100) 15%, transparent);
    color: color-mix(in srgb, var(--bg-100) 80%, transparent);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    text-align: center;
}

.ts-footer-legal-banner strong {
    color: var(--bg-100);
}

.ts-footer-legal-banner a {
    color: var(--secondary-200);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.ts-footer-legal-banner a:hover {
    text-decoration: underline;
}

.rf-disclaimer,
.catalog-disclaimer,
.cross-disclaimer {
    color: var(--text-200);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    opacity: var(--opacity-muted);
}

/* ── Terms modal ────────────────────────────────────────────────────────── */
.terms-modal-backdrop {
    align-items: center;
    backdrop-filter: blur(var(--blur-md));
    background: var(--backdrop-modal);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: var(--content-padding-x);
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--z-modal);
}

.terms-modal {
    background: var(--color-surface);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-modal);
    max-height: 85vh;
    max-width: 56rem;
    overflow-y: auto;
    padding: var(--space-8) var(--space-8) var(--space-6);
    width: 100%;
}

.terms-modal h2 {
    color: var(--primary-200);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-5);
}

.terms-modal h3 {
    color: var(--text-100);
    font-size: var(--font-size-base);
    font-weight: 700;
    margin: var(--space-6) 0 var(--space-2);
}

.terms-modal p {
    color: var(--text-200);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-3);
}

.terms-modal a {
    color: var(--primary-200);
}

.terms-friendly {
    background: var(--color-surface-muted);
    border-left: 4px solid var(--primary-200);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-4);
}

.terms-close {
    background: var(--primary-200);
    border: none;
    border-radius: var(--radius-button);
    color: var(--bg-100);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-top: var(--space-6);
    padding: .65rem 1.5rem;
    transition: var(--transition-interactive);
}

.terms-close:hover {
    background: var(--secondary-400);
}

/* ── Tariff footer extras ────────────────────────────────────────────────── */
.ts-footer-extra {
    border-bottom: 1px solid color-mix(in srgb, var(--bg-100) 15%, transparent);
    color: color-mix(in srgb, var(--bg-100) 70%, transparent);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
}

.ts-footer-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .ts-footer-grid {
        grid-template-columns: 1fr;
    }
}

.ts-footer-grid strong {
    color: var(--bg-100);
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.ts-footer-grid p {
    margin: 0;
}

.ts-footer-grid a {
    color: var(--secondary-200);
    text-decoration: none;
}

.ts-footer-grid a:hover {
    text-decoration: underline;
}

.ts-footer-bar {
    border-top: 1px solid rgb(var(--bg-100-rgb) / .15);
    color: rgb(var(--bg-100-rgb) / .5);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-2xs);
    gap: var(--space-4);
    justify-content: space-between;
    padding-top: var(--space-4);
}

/* ── IEEPA Callout (refund opportunity banner) ───────────────────────────── */
.ieepa-callout {
    margin: 20px 22px;
    padding: 22px 26px;
    background: var(--color-warning-soft);
    border: var(--border-width-thin) solid var(--color-warning);
    border-left: 6px solid var(--secondary-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ieepa-callout.ieepa-neutral {
    background: var(--color-info-soft);
    border-color: var(--primary-200);
    border-left-color: var(--primary-200);
    box-shadow: none;
}

.ieepa-headline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ieepa-emoji {
    font-size: 2rem;
    line-height: 1;
}

.ieepa-title {
    flex: 1;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-100);
}

.ieepa-callout.ieepa-neutral .ieepa-title {
    color: var(--primary-200);
    font-size: 1rem;
}

.ieepa-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-100);
    letter-spacing: var(--letter-spacing-normal);
    background: var(--color-surface);
    padding: 6px 14px;
    border-radius: 5px;
    border: var(--border-width-hairline) solid var(--color-warning);
}

.ieepa-msg {
    color: var(--text-100);
    line-height: 1.55;
    margin: 8px 0;
    font-size: .95rem;
}

.ieepa-callout.ieepa-neutral .ieepa-msg {
    color: var(--text-100);
}

.ieepa-note {
    color: var(--text-200);
    font-size: .85rem;
    line-height: 1.5;
    margin: 6px 0;
    font-style: italic;
}

.ieepa-guidance {
    color: var(--text-100);
    line-height: 1.55;
    margin: 10px 0 14px;
    font-size: .92rem;
}

.ieepa-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ieepa-cta {
    display: inline-block;
    padding: 12px 22px;
    background: var(--primary-200);
    color: var(--color-text-inverse);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: .92rem;
    transition: background .15s;
}

.ieepa-cta:hover {
    background: var(--primary-100);
    color: var(--color-text-inverse);
}

/* ── Recovery mode selector ─────────────────────────────────────────────── */
.recovery-mode.hidden,
.recovery-mode~.recovery-mode:not(.hidden)~.recovery-mode {
    display: none;
}

/* Generic utility used by app.js to show/hide elements */
.hidden {
    display: none !important;
}

.mode-selector {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.mode-btn {
    flex: 1;
    max-width: 280px;
    padding: 10px var(--space-4);
    border: var(--border-subtle);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-200);
    cursor: pointer;
    border-radius: var(--radius-input);
    transition: var(--transition-interactive);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mode-btn:hover {
    border-color: var(--primary-200);
    color: var(--primary-200);
}

.mode-btn.active {
    background: var(--primary-200);
    color: var(--color-text-inverse);
    border-color: var(--primary-200);
}

/* ── Recovery bulk: audit grid ──────────────────────────────────────────── */
.audit-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.audit-upload {
    width: 100%;
    max-width: 700px;
}

.audit-lead {
    font-size: var(--font-size-sm);
    color: var(--text-200);
    margin-bottom: var(--space-4);
}

.audit-lead a {
    color: var(--primary-200);
    font-weight: 600;
    text-decoration: none;
}

.audit-lead a:hover {
    text-decoration: underline;
}

.audit-output {
    min-height: 320px;
}

/* ── Dropzone ────────────────────────────────────────────────────────────── */
.dropzone {
    position: relative;
    border: var(--border-width-thin) dashed var(--color-border-strong);
    border-radius: var(--radius-input);
    background: color-mix(in srgb, var(--primary-200) 4%, var(--bg-100));
    transition: border-color .15s, background .15s;
    cursor: pointer;
}

.dropzone:hover,
.dropzone.drag {
    border-color: var(--primary-200);
    background: color-mix(in srgb, var(--primary-200) 8%, var(--bg-100));
}

.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-inner {
    padding: 28px 20px;
    text-align: center;
    pointer-events: none;
}

.dropzone-icon {
    font-size: 1.8rem;
    color: var(--primary-200);
    line-height: 1;
}

.dropzone-text {
    font-size: var(--font-size-sm);
    color: var(--text-200);
    margin-top: var(--space-2);
}

.dropzone-text b {
    color: var(--text-100);
}

.dropzone-file {
    font-size: .84rem;
    color: var(--color-success);
    font-weight: 600;
    margin-top: var(--space-2);
    font-family: var(--font-mono, monospace);
}

/* ── Responsive fixes ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tabs {
        padding: 0 .75rem;
    }

    .ts-page {
        padding: var(--space-5) .75rem 2rem;
    }

    .panel {
        padding: var(--space-5) var(--space-4);
    }

    .terms-modal {
        padding: var(--space-6) var(--space-5) var(--space-4);
    }

    .mode-btn {
        max-width: 100%;
    }

    .audit-upload {
        max-width: 100%;
    }
}