/* ==========================================================================
   Universal Transformation Engine — Ultra-Premium Dark Glassmorphic Design System
   ========================================================================== */

:root {
    --bg-dark: #070a12;
    --bg-card: rgba(22, 30, 48, 0.75);
    --bg-card-hover: rgba(30, 41, 64, 0.85);
    --bg-input: #0f172a;
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-bright: rgba(255, 255, 255, 0.18);
    --border-cyan: rgba(56, 189, 248, 0.4);
    
    --primary: #38bdf8;
    --primary-glow: rgba(56, 189, 248, 0.35);
    --accent-purple: #c084fc;
    --accent-purple-glow: rgba(192, 132, 252, 0.35);
    --accent-success: #4ade80;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;

    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'Fira Code', monospace;

    /* panel shades (previously hardcoded dark rgba) */
    --panel-faint: rgba(15, 23, 42, 0.4);
    --panel-mid: rgba(15, 23, 42, 0.5);
    --panel-soft: rgba(15, 23, 42, 0.6);
    --panel-firm: rgba(15, 23, 42, 0.7);
    --panel-deep: rgba(15, 23, 42, 0.8);
    --panel-deeper: rgba(15, 23, 42, 0.85);
    --panel-strong: rgba(15, 23, 42, 0.9);
    --panel-heavy: rgba(15, 23, 42, 0.95);
    --panel-solid: rgba(15, 23, 42, 0.98);
    --bg-node-soft: rgba(11, 17, 32, 0.9);
    --bg-node: #0b1120;
    --text-soft: #cbd5e1;
    --text-bright: #e2e8f0;
    --heading-grad-start: #ffffff;
    --heading-grad-end: #cbd5e1;
    --table-head: rgba(30, 41, 59, 0.9);
    --bg-shell: #070a13;
    --bg-reading: rgba(9, 13, 22, 0.9);
    --ok: #34d399;
    --ok-soft: #a7f3d0;
    --overlay-bg: rgba(7, 10, 18, 0.88);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-glass: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 45%),
        radial-gradient(at 100% 0%, rgba(192, 132, 252, 0.15) 0px, transparent 45%),
        radial-gradient(at 50% 100%, var(--panel-heavy) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

.app-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
}

/* Glassmorphism Panels */
.glass {
    background: var(--bg-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
}

/* Top Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    margin-bottom: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-icon {
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, var(--heading-grad-start) 0%, var(--heading-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.system-status {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--panel-deep);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-glass);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-success);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-main);
    border: 1px solid var(--border-glass);
}

.badge-accent {
    background: rgba(56, 189, 248, 0.15);
    color: var(--primary);
    border-color: var(--border-cyan);
}

/* Main Layout Grid */
.main-content {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.workspace-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.tab-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Left Sidebar & Stepper Navigation */
.sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 20;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.25) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.25);
    border-radius: 4px;
}

.sidebar-heading {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-glass);
}

.stepper-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--panel-soft);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    color: var(--text-muted);
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
    outline: none;
}

.step-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glass-bright);
    color: var(--text-main);
    transform: translateX(3px);
}

.step-btn.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(192, 132, 252, 0.12));
    border-color: var(--primary);
    color: var(--text-main);
    box-shadow: 0 0 24px var(--primary-glow);
}

.step-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-strong);
    border: 1.5px solid var(--border-glass);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.25s ease;
}

.step-btn.active .step-num {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(56, 189, 248, 0.15);
    box-shadow: 0 0 10px var(--primary-glow);
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
}

.step-desc {
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* Sidebar Drivers List */
.sidebar-footer .info-card {
    padding: 16px;
    background: var(--panel-soft);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
}

.sidebar-footer h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 12px;
}

.sidebar-footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-footer li {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Workspace Area */
.workspace-area {
    width: 100%;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-header {
    margin-bottom: 24px;
}

.panel-header h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--heading-grad-start) 0%, var(--heading-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.panel-header p {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.card {
    padding: 24px;
    margin-bottom: 20px;
}

.card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

/* Grid Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Form Controls */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-glass-bright);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
}

/* The popup list is painted by the platform, so it needs its own colours — otherwise the
   light text set on the <select> lands on the browser's default white background. */
select option,
select optgroup {
    background-color: var(--bg-input);
    color: var(--text-main);
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2338bdf8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 16px var(--primary-glow);
}

.read-only-box {
    padding: 12px 16px;
    background: var(--panel-deep);
    border: 1px dashed var(--border-glass-bright);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    outline: none;
}

.btn-primary {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.45);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #38bdf8, #3b82f6);
    box-shadow: 0 6px 24px rgba(56, 189, 248, 0.55);
    transform: translateY(-2px);
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent-purple), #7c3aed);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(192, 132, 252, 0.4);
}

.btn-accent:hover {
    background: linear-gradient(135deg, #d8b4fe, #8b5cf6);
    transform: translateY(-2px);
}

.btn-success {
    background: linear-gradient(135deg, #16a34a, #059669);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.btn-success:hover {
    background: linear-gradient(135deg, #4ade80, #10b981);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-main);
    border-color: var(--border-glass-bright);
}

.btn-secondary:hover {
    background: rgba(148, 163, 184, 0.25);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 0.82rem;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-glass-bright);
    color: var(--text-muted);
}

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

/* Upload Card Drop Zone */
.upload-card {
    border: 2px dashed var(--border-cyan);
    text-align: center;
    padding: 48px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-card:hover, .upload-card.drag-active {
    background: rgba(56, 189, 248, 0.08);
    border-color: var(--primary);
    box-shadow: 0 0 30px var(--primary-glow);
}

.upload-card.drag-active {
    background: rgba(14, 165, 233, 0.18) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.45) !important;
    transform: scale(1.01);
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.upload-card h3 {
    color: var(--text-main);
    font-size: 1.2rem;
}

.upload-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Data Table */
.table-wrapper {
    width: 100%;
    overflow-x: hidden;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    border: 1px solid var(--border-glass-bright);
    margin-top: 16px;
}

.data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.data-table th, .data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-glass);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table th {
    background: var(--panel-heavy);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.data-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.06);
}

.data-table code {
    font-family: var(--font-code);
    color: var(--primary);
    background: rgba(56, 189, 248, 0.12);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Pagination Bar */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--panel-deeper);
    border: 1px solid var(--border-glass-bright);
    border-top: none;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-glass-bright);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
    background: var(--primary);
    color: #0b0f19;
    border-color: var(--primary);
}

.page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-btn.active {
    background: var(--primary);
    color: #0b0f19;
    border-color: var(--primary);
}

/* Dual Editor Grid */
.dual-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    min-height: 550px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.editor-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-glass);
}

.editor-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0;
}

/* BRD Formatted Container & Rendered HTML Table Styling */
.brd-formatted-container {
    padding: 16px;
    color: var(--text-bright);
    line-height: 1.6;
    font-family: var(--font-body);
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.brd-formatted-container h1, .brd-formatted-container h2 {
    font-family: var(--font-heading);
    color: #38bdf8;
    margin-top: 24px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    padding-bottom: 6px;
}

.brd-formatted-container h3 {
    font-family: var(--font-heading);
    color: #c084fc;
    margin-top: 18px;
    margin-bottom: 8px;
}

.brd-formatted-container table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 14px 0 24px 0;
    background: var(--panel-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.brd-formatted-container th {
    background: var(--table-head);
    color: #38bdf8;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.brd-formatted-container td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.88rem;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.brd-formatted-container tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.brd-formatted-container tr:hover {
    background: rgba(56, 189, 248, 0.08);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.brd-html-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    background: var(--bg-reading);
    border-radius: var(--radius-sm);
    padding: 20px;
    border: 1px solid var(--border-glass);
    box-sizing: border-box;
}

.code-block {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-code);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #e2e8f0;
    background: #070a13;
    padding: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass);
    white-space: pre;
    word-break: normal;
    tab-size: 2;
}

.code-block.wrap-enabled {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Synthesized Target Code IDE Component */
.target-files-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.2) transparent;
}

.target-files-tabs::-webkit-scrollbar {
    height: 4px;
}

.target-files-tabs::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.2);
    border-radius: 2px;
}

.target-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--panel-soft);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.target-tab:hover {
    background: rgba(56, 189, 248, 0.12);
    color: var(--text-main);
    border-color: rgba(56, 189, 248, 0.35);
}

.target-tab.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(192, 132, 252, 0.16));
    color: #38bdf8;
    border-color: var(--primary);
    font-weight: 600;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

.target-tab .tab-icon {
    font-size: 0.85rem;
}

.target-tab .tab-badge {
    font-size: 0.68rem;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.target-tab.active .tab-badge {
    background: rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
}

.code-editor-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 520px;
    height: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: #070a13;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.code-stats-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--panel-heavy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.74rem;
    color: var(--text-muted);
    font-family: var(--font-code);
    user-select: none;
}

.code-viewer-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: #070a13;
    padding: 12px 0;
    font-family: var(--font-code);
    line-height: 1.6;
    font-size: 0.84rem;
    tab-size: 2;
    scrollbar-width: thin;
    scrollbar-color: rgba(56, 189, 248, 0.25) transparent;
}

.code-viewer-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.code-viewer-container::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.25);
    border-radius: 3px;
}

.code-line-row {
    display: flex;
    align-items: flex-start;
    min-height: 22px;
    padding: 0 14px 0 0;
    transition: background 0.1s ease;
}

.code-line-row:hover {
    background: rgba(56, 189, 248, 0.07);
}

.code-line-row .line-number {
    width: 44px;
    min-width: 44px;
    padding-right: 12px;
    text-align: right;
    color: #475569;
    user-select: none;
    font-size: 0.75rem;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    margin-right: 14px;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-code);
}

.code-line-row .line-code {
    flex: 1;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    color: #e2e8f0;
    font-family: var(--font-code);
}

.code-viewer-container.wrap-enabled .code-line-row .line-code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Syntax Highlighting Tokens (VS Code Dark+ & Modern IDE Theme) */
.tok-tag { color: #38bdf8; font-weight: 500; }
.tok-attr { color: #c084fc; }
.tok-str { color: #4ade80; }
.tok-comment { color: #64748b; font-style: italic; }
.tok-meta { color: #94a3b8; font-style: italic; }
.tok-kw { color: #f43f5e; font-weight: 600; }
.tok-type { color: #67e8f9; font-weight: 500; }
.tok-annotation { color: #fbbf24; font-weight: 600; }
.tok-num { color: #f59e0b; }
.tok-key { color: #38bdf8; font-weight: 500; }
.tok-bool { color: #fbbf24; font-weight: 600; }
.tok-component { color: #38bdf8; font-weight: 600; }

/* Section Filter Chips */
.brd-section-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.nav-chip {
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid var(--border-glass-bright);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.nav-chip:hover {
    background: rgba(56, 189, 248, 0.15);
    color: var(--primary);
}

.nav-chip.active {
    background: var(--primary);
    color: #070a12;
    font-weight: 700;
    border-color: var(--primary);
}

/* Audit Banner */
.audit-banner {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(56, 189, 248, 0.05));
    border: 1px solid rgba(74, 222, 128, 0.35);
    margin-bottom: 20px;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Compact top row: badge | title | tags */
.audit-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.audit-score-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.18);
    border: 2px solid var(--accent-success);
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.4);
}

.score-num {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-success);
    line-height: 1;
}

.score-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.audit-title-text {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
}

.audit-tags {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Scrollable audit details panel */
.audit-details-scroll {
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    width: 100%;
}

.audit-details-scroll p {
    margin: 0 0 8px 0;
}

.audit-details-scroll ul,
.audit-details-scroll ol {
    margin: 4px 0;
    padding-left: 20px;
}

.audit-details-scroll li {
    margin-bottom: 4px;
}

.audit-details-scroll strong {
    color: var(--text-main);
}

/* Terminal Container */
.terminal-container {
    background: #060911;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass-bright);
    overflow: hidden;
}

.terminal-header {
    background: var(--panel-heavy);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-glass);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-dot.red { background: #f87171; }
.terminal-dot.yellow { background: #fbbf24; }
.terminal-dot.green { background: #4ade80; }

.terminal-title {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-left: 8px;
    font-family: var(--font-heading);
}

.terminal-body {
    padding: 24px;
    font-family: var(--font-code);
    font-size: 0.88rem;
    color: #4ade80;
    min-height: 280px;
    max-height: 450px;
    overflow-y: auto;
    line-height: 1.6;
}

/* Action Bar */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--panel-heavy);
    border: 1px solid var(--border-glass-bright);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Realtime Async Overlay Modal */
.async-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--overlay-bg);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.async-modal {
    width: 500px;
    padding: 36px;
    text-align: center;
}

.spinner-ring {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(56, 189, 248, 0.2);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Universal Table & Code Text Wrapping Overrides */
.brd-formatted-container table,
.brd-formatted-container table *,
.brd-html-container table,
.brd-html-container table * {
    max-width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.brd-formatted-container table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* =========================================================================
   BR FEEDBACK LOOP — Action Buttons, Panel, Diff View, Impact Badges
   ========================================================================= */

/* Individual BR Card Container */
.br-card-container {
    background: var(--panel-deep);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
    box-sizing: border-box;
    width: 100%;
}

.br-card-container:hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 6px 24px rgba(56, 189, 248, 0.1);
}

.br-card-container h3 {
    margin-top: 0;
    color: var(--text-main);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.br-card-container h4 {
    color: var(--primary);
    font-size: 0.88rem;
    margin: 14px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Action buttons injected into each BR section */
.br-action-bar {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    flex-wrap: wrap;
    align-items: center;
}

.br-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.06);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.br-action-btn:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.br-action-btn.re-extract {
    border-color: rgba(251, 191, 36, 0.3);
}
.br-action-btn.re-extract:hover {
    background: rgba(251, 191, 36, 0.12);
    border-color: var(--accent-warning);
    color: var(--accent-warning);
}

.br-action-btn.update {
    border-color: rgba(56, 189, 248, 0.3);
}
.br-action-btn.update:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: var(--primary);
    color: var(--primary);
}

.br-action-btn.accepted {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.1);
    color: var(--accent-success);
}

.br-status-tag {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    margin-left: auto;
}

.br-status-tag.status-pending {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted);
}

.br-status-tag.status-reviewed {
    background: rgba(74, 222, 128, 0.15);
    color: var(--accent-success);
}

.br-status-tag.status-modified {
    background: rgba(56, 189, 248, 0.15);
    color: var(--primary);
}

.br-status-tag.status-impacted {
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-warning);
    animation: pulse-warn 2s infinite;
}

@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Review Progress Bar */
.br-review-progress {
    margin-bottom: 16px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: var(--panel-mid);
    border: 1px solid var(--border-glass);
}

.br-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.br-review-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
}

.br-review-count {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 600;
}

.br-review-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.12);
    overflow: hidden;
}

.br-review-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent-success));
    transition: width 0.5s ease;
}

/* Feedback Overlay & Panel */
.br-feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
    overflow-y: auto;
}

.br-feedback-panel {
    width: 720px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-glass-bright);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.br-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-glass);
}

.br-feedback-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.br-feedback-title-row h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.br-feedback-mode-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.br-feedback-mode-badge.mode-reextract {
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-warning);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.br-feedback-mode-badge.mode-update {
    background: rgba(56, 189, 248, 0.15);
    color: var(--primary);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.br-feedback-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-glass);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.br-feedback-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.br-feedback-section {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.br-feedback-section h4 {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    color: var(--text-main);
    margin: 0 0 10px 0;
}

.br-current-preview {
    background: var(--panel-faint);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-height: 200px;
    overflow-y: auto;
    word-break: break-word;
}

.br-current-preview strong {
    color: var(--text-main);
}

.br-feedback-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
    background: var(--panel-mid);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.br-feedback-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.br-feedback-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    align-items: center;
}

.br-feedback-submit {
    flex: 1;
}

/* Diff View */
.br-diff-container {
    margin: 0 24px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
    overflow: hidden;
}

.br-diff-header {
    display: flex;
    gap: 0;
}

.br-diff-label {
    flex: 1;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.br-diff-label.label-before {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-right: 1px solid var(--border-glass);
}

.br-diff-label.label-after {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}

.br-diff-body {
    display: flex;
}

.br-diff-side {
    flex: 1;
    padding: 14px 16px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-muted);
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

.br-diff-side.side-before {
    background: rgba(239, 68, 68, 0.03);
    border-right: 1px solid var(--border-glass);
}

.br-diff-side.side-after {
    background: rgba(74, 222, 128, 0.03);
}

.br-diff-side strong {
    color: var(--text-main);
}

/* Cascade Impact */
.br-cascade-impact {
    padding: 16px 24px;
}

.br-cascade-impact h4 {
    font-family: var(--font-heading);
    color: var(--accent-warning);
    margin: 0 0 8px 0;
}

.cascade-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.cascade-item {
    background: rgba(251, 191, 36, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.cascade-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cascade-item-id {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--accent-warning);
    font-size: 0.88rem;
}

.cascade-item-reason {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}

.cascade-item-actions {
    display: flex;
    gap: 8px;
}

.cascade-accept-btn,
.cascade-dismiss-btn {
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
}

.cascade-accept-btn {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--accent-success);
}
.cascade-accept-btn:hover {
    background: rgba(74, 222, 128, 0.2);
}

.cascade-dismiss-btn {
    background: transparent;
    border-color: var(--border-glass);
    color: var(--text-muted);
}
.cascade-dismiss-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* BR Feedback Result area */
.br-feedback-result {
    border-top: 2px solid var(--primary);
    padding-top: 16px;
}

.br-feedback-result > h4 {
    padding: 0 24px;
    font-family: var(--font-heading);
    color: var(--primary);
    margin: 0 0 12px 0;
}

/* =========================================================================
   Source Application Relationship Graph Styles
   ========================================================================= */
.active-filter {
    background: linear-gradient(135deg, var(--primary), var(--accent-purple)) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px var(--primary-glow);
}

g.node-card {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

g.node-card:hover {
    filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.4));
}

g.node-card:hover rect:first-child {
    fill: #1e293b;
    stroke-width: 2.2;
}

.graph-edge {
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

/* =========================================================================
   Static Left Panel BR Review Widget & Reconciliation Matrix Styles
   ========================================================================= */
.sidebar-review-card {
    transition: all 0.3s ease;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.sidebar-review-card:hover {
    border-color: var(--accent-success);
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.15);
}

.reconciliation-container {
    margin-bottom: 28px;
}

.reconciliation-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 14px 0 20px 0;
}

.reconciliation-kpi-card {
    background: var(--panel-firm);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.reconciliation-kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.reconciliation-kpi-val {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent-success);
    letter-spacing: -0.01em;
}

.reconciliation-kpi-lbl {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.br-clickable-badge {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(56, 189, 248, 0.15);
    color: var(--primary);
    border: 1px solid rgba(56, 189, 248, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.br-clickable-badge:hover {
    background: var(--primary);
    color: #0b0f19;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4);
}

@keyframes brHighlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.9); border-color: var(--primary); transform: scale(1.01); }
    40% { box-shadow: 0 0 25px 8px rgba(56, 189, 248, 0.55); border-color: var(--accent-success); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); border-color: var(--border-glass); transform: scale(1); }
}

.br-card-highlight {
    animation: brHighlightPulse 2.2s ease-out;
}



/* ────────────────────────────────────────────────────────────
   Light theme (html[data-theme="light"]) — toggle in the navbar
   ──────────────────────────────────────────────────────────── */
html[data-theme="light"] {
    --bg-dark: #eef2f7;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: #ffffff;
    --bg-input: #ffffff;
    --border-glass: rgba(15, 23, 42, 0.12);
    --border-glass-bright: rgba(15, 23, 42, 0.24);
    --border-cyan: rgba(2, 132, 199, 0.45);

    --primary: #0284c7;
    --primary-glow: rgba(2, 132, 199, 0.2);
    --accent-purple: #7c3aed;
    --accent-purple-glow: rgba(124, 58, 237, 0.2);
    --accent-success: #16a34a;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;

    --text-main: #0f172a;
    --text-muted: #475569;
    --text-dim: #64748b;
    --shadow-glass: 0 10px 30px 0 rgba(15, 23, 42, 0.12);

    --panel-faint: rgba(226, 232, 240, 0.5);
    --panel-mid: rgba(226, 232, 240, 0.6);
    --panel-soft: rgba(226, 232, 240, 0.7);
    --panel-firm: rgba(226, 232, 240, 0.8);
    --panel-deep: rgba(241, 245, 249, 0.9);
    --panel-deeper: rgba(241, 245, 249, 0.95);
    --panel-strong: rgba(248, 250, 252, 0.96);
    --panel-heavy: rgba(248, 250, 252, 0.98);
    --panel-solid: #f8fafc;
    --bg-node-soft: rgba(241, 245, 249, 0.95);
    --bg-node: #e2e8f0;
    --text-soft: #334155;
    --text-bright: #1e293b;
    --heading-grad-start: #0f172a;
    --heading-grad-end: #475569;
    --table-head: #e2e8f0;
    --bg-shell: #f8fafc;
    --bg-reading: #ffffff;
    --ok: #047857;
    --ok-soft: #065f46;
    --overlay-bg: rgba(51, 65, 85, 0.45);
}
html[data-theme="light"] body {
    background-image:
        radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.08) 0px, transparent 45%),
        radial-gradient(at 100% 0%, rgba(124, 58, 237, 0.06) 0px, transparent 45%);
}
html[data-theme="light"] .brand-subtitle,
html[data-theme="light"] .step-desc { color: var(--text-muted); }

/* theme toggle button */
.theme-toggle {
    border: 1px solid var(--border-glass-bright);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s ease;
}
.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

.e2e-row:hover td { background: var(--panel-mid); }

/* ────────────────────────────────────────────────────────────
   Missing button variants (added 2026-10-05)
   .btn-ghost, .btn-xs and .btn-group were used in app.js and index.html but never
   defined, so secondary row actions fell back to native browser chrome: Archive and
   Delete rendered as light system buttons on the dark theme and Export, an <a>, kept
   the link colour and was effectively invisible. Defined from the theme tokens so both
   themes follow. Secondary actions are quiet until hovered, which is what takes the
   visual noise out of the project list without removing anything.
   ──────────────────────────────────────────────────────────── */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-glass);
    font-weight: 600;
}

.btn-ghost:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
    border-color: var(--border-glass-bright);
}

a.btn-ghost,
a.btn-ghost:link,
a.btn-ghost:visited {
    color: var(--text-muted);
    text-decoration: none;
}

a.btn-ghost:hover { color: var(--text-main); }

/* a destructive action stays quiet until the pointer is on it */
.btn-ghost.btn-danger,
.btn-ghost[data-danger] { color: var(--text-dim); }

.btn-ghost.btn-danger:hover,
.btn-ghost[data-danger]:hover {
    color: var(--accent-danger);
    border-color: var(--accent-danger);
    background: transparent;
}

.btn-xs {
    padding: 5px 10px;
    font-size: 0.74rem;
    gap: 6px;
    border-radius: 6px;
}

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.btn-group .btn:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

/* Project list: one primary action, the rest recede until needed. */
/* One row of the projects table carried four buttons, so fifteen projects showed sixty of them
   (feedback, internal demo 2026-10-06). Resume is the only one used often: it stays a button, the
   rest moved into the same overflow menu the Review screen uses. */
.project-actions { display: inline-flex; gap: 6px; align-items: center; }
.project-actions .icon-btn { opacity: 0.5; transition: opacity 0.18s ease; }
tr:hover .project-actions .icon-btn,
.project-actions .icon-btn:focus-visible,
.project-actions .icon-btn[aria-expanded="true"] { opacity: 1; }

/* placed by placeFixedMenu(): the table clips an absolutely positioned panel */
.menu-panel.menu-fixed { position: fixed; top: 0; left: 0; right: auto; }

/* ════════════════════════════════════════════════════════════
   Review screen, product layout (2026-10-05)
   The Review pane carried 48 buttons, two rows of pills that looked identical but
   did different things (one navigates the sign-off, one filters the document), and
   five accent colours at full saturation. This section gives the screen a spine:
   a progress stepper for the four gates, a collapsible rail, a focus mode, and
   overflow menus so one filled action shows per region. Everything is token-based
   so the light theme follows without a second set of rules.
   ════════════════════════════════════════════════════════════ */

/* -- 1. Collapsible workflow rail --------------------------------- */
.main-content { transition: grid-template-columns 0.22s ease; }
body.rail-collapsed .main-content { grid-template-columns: 72px minmax(0, 1fr); }
body.rail-collapsed .sidebar { padding: 14px 10px; align-items: center; }
body.rail-collapsed .rail-head-text,
body.rail-collapsed .sidebar-footer,
body.rail-collapsed .step-info,
body.rail-collapsed #sidebarBrReviewCard { display: none; }
body.rail-collapsed .step-btn { justify-content: center; padding: 12px 0; width: 100%; }
body.rail-collapsed .step-num { margin: 0; }

.rail-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-glass);
    transition: all 0.18s ease; font-size: 0.9rem; line-height: 1;
}
.rail-toggle:hover { color: var(--text-main); border-color: var(--border-glass-bright); background: var(--bg-card-hover); }

/* -- 2. Focus mode: the document and nothing else ------------------ */
/* focus mode hides the chrome, never the content: the audit banner IS the content
   while the audit stage is selected, so hiding it left an empty page. */
body.focus-mode .navbar,
body.focus-mode .sidebar,
body.focus-mode .panel-header .reader-tools { display: none; }
body.focus-mode .main-content { grid-template-columns: minmax(0, 1fr); }
body.focus-mode .workspace-panel { max-width: 1120px; margin: 0 auto; }

.focus-exit {
    position: fixed; top: 14px; right: 18px; z-index: 300;
    display: none; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: var(--bg-card); color: var(--text-main);
    border: 1px solid var(--border-glass-bright);
    backdrop-filter: blur(10px); font-size: 0.8rem; font-weight: 600;
}
body.focus-mode .focus-exit { display: inline-flex; }

/* -- 3. Sign-off progress stepper ---------------------------------- */
.signoff {
    display: flex; align-items: stretch; gap: 0;
    background: var(--bg-card); border: 1px solid var(--border-glass);
    border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.signoff-step {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px;
    padding: 13px 16px; cursor: pointer; background: transparent;
    border: 0; border-right: 1px solid var(--border-glass);
    text-align: left; transition: background 0.18s ease; font-family: inherit;
}
.signoff-step:last-child { border-right: 0; }
.signoff-step:hover { background: var(--bg-card-hover); }
.signoff-step.active { background: var(--bg-card-hover); box-shadow: inset 0 -2px 0 var(--primary); }

.signoff-mark {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
    background: rgba(148, 163, 184, 0.16); color: var(--text-muted);
    border: 1px solid var(--border-glass-bright);
}
.signoff-step.is-done .signoff-mark {
    background: color-mix(in srgb, var(--accent-success) 18%, transparent);
    color: var(--accent-success);
    border-color: color-mix(in srgb, var(--accent-success) 45%, transparent);
}
.signoff-step.is-attention .signoff-mark {
    background: color-mix(in srgb, var(--accent-warning) 18%, transparent);
    color: var(--accent-warning);
    border-color: color-mix(in srgb, var(--accent-warning) 45%, transparent);
}
.signoff-step.active .signoff-mark {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

.signoff-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.signoff-name { font-size: 0.84rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signoff-meta { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signoff-step.is-attention .signoff-meta { color: var(--accent-warning); }
.signoff-step.is-done .signoff-meta { color: var(--accent-success); }

/* -- 4. Overflow menu ---------------------------------------------- */
.menu-wrap { position: relative; display: inline-flex; }
.menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 250;
    min-width: 216px; padding: 6px;
    background: var(--bg-card); border: 1px solid var(--border-glass-bright);
    border-radius: 10px; box-shadow: var(--shadow-glass);
    backdrop-filter: blur(14px);
}
.menu-panel[hidden] { display: none; }
.menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 11px; border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--text-main);
    font-size: 0.82rem; font-weight: 500; text-align: left; text-decoration: none;
    font-family: inherit;
}
.menu-item:hover { background: var(--bg-card-hover); }
a.menu-item, a.menu-item:link, a.menu-item:visited { color: var(--text-main); }
/* must come after .menu-item and be more specific than it: equal specificity earlier in the file
   lost on source order, and Delete rendered in the ordinary text colour (caught 2026-10-06) */
.menu-panel .menu-item-danger { color: var(--accent-danger); }
.menu-panel .menu-item-danger:hover { background: rgba(248, 113, 113, 0.12); }
.menu-sep { height: 1px; margin: 5px 4px; background: var(--border-glass); }

/* -- 5. Reader toolbar: one prominent control, the rest quiet ------ */
.reader-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-glass); font-size: 0.82rem; line-height: 1;
    transition: all 0.16s ease; font-family: inherit;
}
.icon-btn:hover { color: var(--text-main); border-color: var(--border-glass-bright); background: var(--bg-card-hover); }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--panel-deep); border: 1px solid var(--border-glass); }
.seg > .btn { border-radius: 6px; box-shadow: none; }
/* the selected segment is a state, so it takes the one interactive accent. It was the
   only purple left on the screen once the other controls were grouped. */
.seg > .btn-accent {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-dark);
}
.seg > .btn-accent:hover { background: var(--primary); filter: brightness(1.06); }

/* -- 6. Section jump: ten chips become one control ----------------- */
.jump-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.jump-label { font-size: 0.78rem; color: var(--text-muted); }
.jump-select {
    appearance: none; cursor: pointer;
    padding: 8px 34px 8px 14px; border-radius: 20px;
    background-color: var(--bg-card); color: var(--text-main);
    border: 1px solid var(--border-glass-bright);
    font-size: 0.82rem; font-weight: 500; font-family: inherit;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 54%, calc(100% - 12px) 54%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.jump-select:hover { border-color: var(--primary); }

/* -- 7. Visible keyboard focus across this screen ------------------ */
.signoff-step:focus-visible, .menu-item:focus-visible, .icon-btn:focus-visible,
.rail-toggle:focus-visible, .focus-exit:focus-visible, .jump-select:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}

@media (max-width: 1100px) {
    .signoff { flex-wrap: wrap; }
    .signoff-step { flex: 1 1 46%; border-bottom: 1px solid var(--border-glass); }
}

/* the rail heading is a row: title on the left, collapse control on the right.
   Set in CSS, not data-style: csp.js writes data-style as an inline style, which
   would beat the collapsed-state rules. */
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.rail-collapsed .rail-head { justify-content: center; }
body.rail-collapsed .sidebar { gap: 12px; }