:root {
    --brand: #0f52ff;
    --brand-strong: #0039bf;
    --accent: #18a0a8;
    --ink: #10233d;
    --muted: #5a6f89;
    --surface: #ffffff;
    --surface-soft: rgba(255, 255, 255, 0.88);
    --border: #d6e0ee;
    --success: #0d8c60;
    --danger: #d4454b;
    --warning: #e0a100;
    --shadow-soft: 0 12px 28px rgba(21, 48, 110, 0.08);
    --shadow-card: 0 18px 46px rgba(17, 44, 102, 0.13);
    --radius-lg: 20px;
    --radius-md: 14px;
}

body.premium-body {
    min-height: 100vh;
    color: var(--ink);
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    background:
        radial-gradient(1200px 560px at 10% -10%, rgba(15, 82, 255, 0.17), transparent 58%),
        radial-gradient(900px 460px at 92% -5%, rgba(24, 160, 168, 0.16), transparent 52%),
        linear-gradient(180deg, #f6f9ff 0%, #edf3fb 55%, #f8fbff 100%);
}

.page-wrap {
    max-width: 1180px;
}

.hero-panel,
.panel {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(4px);
}

.hero-panel {
    padding: 1.4rem 1.5rem;
}

.panel {
    padding: 1rem;
}

.ocr-actions .btn {
    min-width: 140px;
}

.ocr-actions #referenceLabel {
    margin-left: 0.25rem;
}

.eyebrow {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
}

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

.btn-premium {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, #2f7bff 100%);
    box-shadow: 0 12px 24px rgba(15, 82, 255, 0.26);
}

.btn-premium:hover,
.btn-premium:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-strong) 0%, #2368df 100%);
}

.btn-premium-soft {
    border: 1px solid #b8d6ff;
    color: #0e4499;
    background: #e9f2ff;
}

.btn-premium-soft:hover,
.btn-premium-soft:focus {
    color: #073577;
    border-color: #9bc0f8;
    background: #dcecff;
}

.btn-premium-outline {
    border: 1px solid #a9c8ee;
    color: #1f4a78;
    background: #f8fbff;
}

.btn-premium-outline:hover,
.btn-premium-outline:focus {
    color: #0b355f;
    border-color: #89b2e6;
    background: #edf5ff;
}

.status-badge {
    min-width: 90px;
}

.table {
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
    vertical-align: middle;
}

.table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: #3f5776;
    border-bottom-width: 1px;
}

.table tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.table tbody tr:hover {
    background-color: #f2f8ff;
}

.table-warning {
    --bs-table-bg: #fff5db !important;
}

.table-success {
    --bs-table-bg: #e8f8f1 !important;
}

.ai-mobile {
    background-color: #e8fbff !important;
}

.ocr-preview-text {
    white-space: pre-wrap;
    max-height: 60vh;
    overflow: auto;
    font-family: "JetBrains Mono", Consolas, monospace;
}

.progress {
    border-radius: 999px;
    background: #e5edf8;
}

.progress-bar {
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand) 0%, #1c9fd0 100%);
}

.loader-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.status-pill.success {
    background: #d9f5e9;
    color: #0d7d56;
}

.status-pill.failed {
    background: #ffe2e5;
    color: #b4333d;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.form-select,
.form-control {
    border-radius: 10px;
    border-color: #cbd9eb;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus,
.form-select:focus,
.form-control:focus {
    border-color: #8cb4ef;
    box-shadow: 0 0 0 0.2rem rgba(15, 82, 255, 0.13);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
}

.toast {
    border-radius: 12px;
}

@media (max-width: 767.98px) {
    .hero-panel,
    .panel {
        border-radius: 14px;
    }

    .hero-panel {
        padding: 1rem;
    }

    .ocr-actions {
        align-items: stretch !important;
    }

    .ocr-actions .btn {
        width: 100%;
    }

    .ocr-actions #referenceLabel {
        width: 100%;
        margin-left: 0;
        margin-top: 0.1rem;
    }

    .modal-footer .btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}