/* ==========================================================================
   AskAway — Design System (matching RegenInsite dashboard style)
   ========================================================================== */

/* A. CSS Custom Properties
   ========================================================================== */
:root {
    --lob-bg: #f5f7fa;
    --lob-panel: #ffffff;
    --lob-accent: #667eea;
    --lob-accent-hover: #5a6fd6;
    --lob-accent-subtle: #eef1fd;
    --lob-accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --lob-border: #e5e7eb;
    --lob-border-light: #f0f0f0;
    --lob-text: #333;
    --lob-text-muted: #666;
    --lob-text-light: #999;
    --lob-sidebar-bg: #1a1a2e;
    --lob-sidebar-width: 260px;
    --lob-toolbar-height: 56px;
    --lob-statusbar-height: 32px;
    --lob-success: #10b981;
    --lob-danger: #ef4444;
    --lob-warning: #f59e0b;
    --lob-radius: 12px;
    --lob-radius-sm: 8px;
    --lob-radius-xs: 6px;
    --lob-shadow: 0 1px 3px rgba(0,0,0,0.05);
    --lob-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --lob-shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
    --lob-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lob-font-mono: 'Cascadia Code', 'Consolas', monospace;
    --lob-transition: 0.2s ease;
}

/* B. Global Resets
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    font-family: var(--lob-font);
    font-size: 15px;
    color: var(--lob-text);
    background: var(--lob-bg);
    margin: 0;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* C. Shell Layout (sidebar + main)
   ========================================================================== */
.lob-shell {
    display: flex;
    min-height: 100vh;
}

.lob-sidebar {
    width: var(--lob-sidebar-width);
    min-width: var(--lob-sidebar-width);
    background: var(--lob-sidebar-bg);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}

.lob-sidebar-brand {
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.lob-sidebar-section {
    padding: 15px 20px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
}

.lob-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all var(--lob-transition);
}
.lob-sidebar-link i {
    width: 20px;
    text-align: center;
    opacity: 0.7;
    font-size: 14px;
}
.lob-sidebar-link:hover {
    background: rgba(255,255,255,0.05);
    color: white;
    text-decoration: none;
}
.lob-sidebar-link.active i {
    opacity: 1;
}
.lob-sidebar-link.active {
    background: rgba(102, 126, 234, 0.3);
    color: white;
    border-right: 3px solid var(--lob-accent);
    font-weight: 500;
}

.lob-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--lob-sidebar-width);
}

/* D. Toolbar
   ========================================================================== */
.lob-toolbar {
    height: var(--lob-toolbar-height);
    min-height: var(--lob-toolbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid var(--lob-border);
    background: var(--lob-panel);
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.lob-toolbar-title {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--lob-text);
}

.lob-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* E. Content Area
   ========================================================================== */
.lob-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

.lob-content-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* F. Status Bar
   ========================================================================== */
.lob-statusbar {
    height: var(--lob-statusbar-height);
    min-height: var(--lob-statusbar-height);
    display: flex;
    align-items: center;
    padding: 0 30px;
    font-size: 12px;
    color: var(--lob-text-muted);
    background: var(--lob-panel);
    border-top: 1px solid var(--lob-border);
    gap: 20px;
}

/* G. Focused Layout (no sidebar — interviews)
   ========================================================================== */
.lob-focused-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.lob-focused-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

.lob-focused-inner {
    width: 100%;
    max-width: 900px;
}

/* H. Panels (replace Bootstrap cards)
   ========================================================================== */
.lob-panel {
    background: var(--lob-panel);
    border-radius: var(--lob-radius);
    margin-bottom: 24px;
    box-shadow: var(--lob-shadow);
    transition: box-shadow var(--lob-transition);
}

.lob-panel-header {
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lob-text);
    border-bottom: 1px solid var(--lob-border-light);
    background: #e8ecf2;
    border-radius: var(--lob-radius) var(--lob-radius) 0 0;
}

.lob-panel-body {
    padding: 24px;
}

/* I. Data Grids (replace Bootstrap tables)
   ========================================================================== */
.lob-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lob-grid thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lob-text-muted);
    padding: 12px 20px;
    border-bottom: 1px solid var(--lob-border);
    background: #fafafa;
    white-space: nowrap;
}

.lob-grid tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--lob-border-light);
    vertical-align: middle;
}

.lob-grid tbody tr:hover {
    background: #f8fafc;
}

/* J. Bootstrap Overrides
   ========================================================================== */

/* Rounded corners everywhere */
.btn,
.form-control,
.form-select,
.input-group-text,
.badge,
.alert,
.progress,
.nav-tabs .nav-link,
.card {
    border-radius: var(--lob-radius-sm) !important;
}

/* Focus ring */
.btn:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    border-color: var(--lob-accent) !important;
}

/* Buttons */
.btn {
    font-size: 14px;
    padding: 8px 18px;
    font-weight: 500;
    border: 1px solid var(--lob-border);
    transition: all var(--lob-transition);
    border-radius: var(--lob-radius-sm) !important;
}

.btn-sm {
    font-size: 13px;
    padding: 6px 14px;
}

.btn-lg {
    font-size: 15px;
    padding: 10px 28px;
}

.btn-primary {
    background: var(--lob-accent);
    border-color: var(--lob-accent);
    color: #fff;
    box-shadow: var(--lob-shadow);
}
.btn-primary:hover,
.btn-primary:active {
    background: var(--lob-accent-hover);
    border-color: var(--lob-accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--lob-shadow-md);
}

.btn-outline-primary {
    color: var(--lob-accent);
    border-color: var(--lob-accent);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--lob-accent);
    border-color: var(--lob-accent);
    color: #fff;
}

.btn-danger {
    background: var(--lob-danger);
    border-color: var(--lob-danger);
    color: #fff;
}
.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.btn-warning {
    background: var(--lob-warning);
    border-color: var(--lob-warning);
    color: #fff;
}

/* Forms */
.form-control,
.form-select {
    font-size: 14px;
    padding: 10px 14px;
    border: 1px solid var(--lob-border);
    background: var(--lob-panel);
    border-radius: var(--lob-radius-sm) !important;
    transition: border-color var(--lob-transition), box-shadow var(--lob-transition);
}

.form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--lob-text);
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--lob-border);
}

.nav-tabs .nav-link {
    color: var(--lob-text-muted);
    font-size: 14px;
    padding: 12px 20px;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    border-radius: 0 !important;
    transition: color var(--lob-transition), border-color var(--lob-transition);
}

.nav-tabs .nav-link:hover {
    color: var(--lob-text);
    border-bottom-color: var(--lob-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--lob-accent) !important;
    font-weight: 600;
    border-bottom-color: var(--lob-accent) !important;
    background: none !important;
}

/* Badges */
.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px !important;
}

/* Progress bars */
.progress {
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px !important;
    overflow: hidden;
}
.progress-bar {
    border-radius: 4px !important;
}
.progress-bar.bg-success { background: var(--lob-success) !important; }
.progress-bar.bg-warning { background: var(--lob-warning) !important; }
.progress-bar.bg-danger { background: var(--lob-danger) !important; }

/* Alerts */
.alert {
    font-size: 14px;
    padding: 16px 20px;
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius) !important;
    box-shadow: var(--lob-shadow);
}

/* K. Transcript Styles
   ========================================================================== */
.lob-transcript-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius);
    background: var(--lob-panel);
    padding: 20px;
}

.lob-transcript-turn {
    margin-bottom: 16px;
    padding: 14px 18px;
    border-left: 3px solid transparent;
    border-radius: 0 var(--lob-radius-sm) var(--lob-radius-sm) 0;
    transition: background var(--lob-transition);
}

.lob-transcript-assistant {
    border-left-color: var(--lob-accent);
    background: var(--lob-accent-subtle);
}

.lob-transcript-user {
    border-left-color: var(--lob-success);
    background: #ecfdf5;
}

.lob-transcript-speaker {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.lob-transcript-assistant .lob-transcript-speaker {
    color: var(--lob-accent);
}

.lob-transcript-user .lob-transcript-speaker {
    color: var(--lob-success);
}

/* L. Audio Visualizer
   ========================================================================== */
.lob-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 48px;
    margin: 16px 0;
}

.lob-audio-bar {
    width: 4px;
    border-radius: 2px;
    background: var(--lob-accent);
    transition: height 0.1s;
}

@keyframes lobPulse {
    0%, 100% { height: 16px; }
    50% { height: 40px; }
}

/* M. Status Indicator
   ========================================================================== */
.lob-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.lob-status-connecting { background: var(--lob-warning); animation: lobStatusPulse 1s infinite; }
.lob-status-connected  { background: var(--lob-success); }
.lob-status-speaking   { background: var(--lob-accent); animation: lobStatusPulse 0.5s infinite; }
.lob-status-listening  { background: var(--lob-success); animation: lobStatusPulse 1s infinite; }
.lob-status-error      { background: var(--lob-danger); }

@keyframes lobStatusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* N. Components
   ========================================================================== */

/* Competency / context tags */
.lob-tag {
    display: inline-block;
    background: var(--lob-accent-subtle);
    color: var(--lob-accent);
    padding: 6px 14px;
    font-size: 13px;
    margin: 4px;
    border-radius: var(--lob-radius-xs);
    font-weight: 500;
}

.lob-tag .remove {
    cursor: pointer;
    margin-left: 8px;
    color: var(--lob-danger);
    font-weight: 700;
}

/* Stat counters */
.lob-stat {
    text-align: center;
    padding: 20px 16px;
}

.lob-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--lob-accent);
    line-height: 1;
}

.lob-stat-label {
    font-size: 12px;
    color: var(--lob-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* Score bars */
.lob-score-bar {
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.lob-score-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.lob-score-bar-fill.high  { background: var(--lob-success); }
.lob-score-bar-fill.mid   { background: var(--lob-warning); }
.lob-score-bar-fill.low   { background: var(--lob-danger); }

/* Rubric items */
.lob-gate-item {
    padding: 14px 18px;
    border-left: 3px solid var(--lob-danger);
    margin-bottom: 12px;
    background: #fef2f2;
    border-radius: 0 var(--lob-radius-sm) var(--lob-radius-sm) 0;
}

.lob-criterion-item {
    padding: 14px 18px;
    border-left: 3px solid var(--lob-accent);
    margin-bottom: 12px;
    background: var(--lob-accent-subtle);
    border-radius: 0 var(--lob-radius-sm) var(--lob-radius-sm) 0;
}

/* Evidence blocks */
.lob-evidence {
    background: #fafafa;
    border-left: 3px solid var(--lob-accent);
    padding: 14px 18px;
    margin-bottom: 14px;
    border-radius: 0 var(--lob-radius-sm) var(--lob-radius-sm) 0;
}

/* Meta items (key-value rows) */
.lob-meta-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--lob-border-light);
    font-size: 14px;
}
.lob-meta-item:last-child { border-bottom: none; }

/* Voice picker */
.lob-voice-option {
    cursor: pointer;
    padding: 14px 18px;
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius-sm);
    text-align: center;
    transition: all var(--lob-transition);
}
.lob-voice-option:hover {
    border-color: var(--lob-accent);
    box-shadow: var(--lob-shadow);
}
.lob-voice-option.selected {
    border-color: var(--lob-accent);
    background: var(--lob-accent-subtle);
    box-shadow: 0 0 0 2px var(--lob-accent);
}
.lob-voice-option .voice-name {
    font-weight: 600;
    font-size: 14px;
}

/* Skill tags */
.lob-skill {
    display: inline-block;
    background: var(--lob-accent-subtle);
    color: var(--lob-accent);
    padding: 6px 14px;
    font-size: 13px;
    margin: 4px;
    border-radius: var(--lob-radius-xs);
    font-weight: 500;
}
.lob-skill.soft {
    background: #f3f4f6;
    color: var(--lob-text-muted);
}

/* Summary text */
.lob-summary-text {
    background: #fafafa;
    padding: 24px;
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 15px;
    border-radius: var(--lob-radius-sm);
}

/* Score large */
.lob-score-large {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
}
.lob-score-large.high { color: var(--lob-success); }
.lob-score-large.mid  { color: var(--lob-warning); }
.lob-score-large.low  { color: var(--lob-danger); }

/* Gate pass/fail text */
.lob-gate-pass { color: var(--lob-success); font-weight: 600; }
.lob-gate-fail { color: var(--lob-danger); font-weight: 600; }

/* End interview / defence button */
.btn-end {
    background: var(--lob-danger);
    border-color: var(--lob-danger);
    color: #fff;
}
.btn-end:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

/* Subscore row */
.lob-subscore-row td {
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lob-border);
}

/* Criterion card */
.lob-criterion-card {
    background: var(--lob-panel);
    border-radius: var(--lob-radius);
    padding: 20px 24px;
    margin-bottom: 14px;
    box-shadow: var(--lob-shadow);
    transition: box-shadow var(--lob-transition);
}
.lob-criterion-card:hover {
    box-shadow: var(--lob-shadow-md);
}

/* Stacked panel layout */
.lob-stacked-panels {
    max-width: 700px;
}

/* JD text */
.lob-jd-text {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 15px;
}

/* Action status area */
#actionStatus,
#runStatus {
    margin-top: 10px;
}

/* O. Auth Card
   ========================================================================== */
.lob-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--lob-panel);
    border-radius: var(--lob-radius);
    padding: 40px;
    box-shadow: var(--lob-shadow-lg);
}

/* P. Template Picker Cards
   ========================================================================== */
.template-pick {
    cursor: pointer;
    padding: 14px 20px;
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius-sm);
    min-width: 180px;
    transition: all var(--lob-transition);
    background: var(--lob-panel);
}
.template-pick:hover {
    border-color: var(--lob-accent);
    box-shadow: var(--lob-shadow);
}
.template-pick.selected {
    border-color: var(--lob-accent);
    background: var(--lob-accent-subtle);
    box-shadow: 0 0 0 2px var(--lob-accent);
}
.template-pick-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--lob-text);
}
.template-pick-dept {
    font-size: 12px;
    color: var(--lob-text-muted);
    margin-top: 2px;
}

/* Q. Scope Badges
   ========================================================================== */
.lob-scope-shared {
    background: var(--lob-accent) !important;
    color: #fff !important;
}
.lob-scope-local {
    background: #6b7280 !important;
    color: #fff !important;
}

/* R. Job Status Badges
   ========================================================================== */
.lob-job-status-active {
    background: var(--lob-success) !important;
    color: #fff !important;
}
.lob-job-status-draft {
    background: #6b7280 !important;
    color: #fff !important;
}
.lob-job-status-closed {
    background: var(--lob-danger) !important;
    color: #fff !important;
}

/* R2. Filter Selects
   ========================================================================== */
.lob-filter-select {
    width: auto !important;
    min-width: 140px;
    font-size: 12px !important;
    padding: 4px 10px !important;
    height: auto !important;
    border-radius: var(--lob-radius-xs) !important;
}

/* R3. Rubric Editor
   ========================================================================== */
.rubric-editor {
    font-family: var(--lob-font-mono) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    tab-size: 2;
    white-space: pre;
}

/* S. Sidebar User Panel
   ========================================================================== */
.lob-sidebar-user {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.lob-sidebar-user-name {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lob-sidebar-user-name i {
    font-size: 16px;
    opacity: 0.7;
    flex-shrink: 0;
}
.lob-sidebar-user-logout {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    flex-shrink: 0;
}
.lob-sidebar-user-logout:hover {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}

/* T. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .lob-sidebar {
        transform: translateX(-100%);
    }
    .lob-main {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .lob-sidebar {
        transform: translateX(-100%);
    }
    .lob-main {
        margin-left: 0;
    }
    .lob-content {
        padding: 20px;
    }
}

/* U. Scrollbar styling
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

/* V. Sensitivity Analysis
   ========================================================================== */
.lob-rank-up {
    color: var(--lob-success);
    font-weight: 600;
    font-size: 13px;
}
.lob-rank-up i { margin-right: 4px; }

.lob-rank-down {
    color: var(--lob-danger);
    font-weight: 600;
    font-size: 13px;
}
.lob-rank-down i { margin-right: 4px; }

.lob-rank-same {
    color: var(--lob-text-light);
    font-size: 13px;
}

.lob-weight-change {
    display: inline-block;
    background: #f3f2f1;
    color: var(--lob-text);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    margin: 3px 4px 3px 0;
    border-radius: 10px;
}

/* V2. Bulk Action Toolbar
   ========================================================================== */
.lob-bulk-toolbar {
    background: var(--lob-accent-subtle);
    border: 1px solid var(--lob-accent);
    border-radius: var(--lob-radius-sm);
    padding: 12px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: var(--lob-toolbar-height);
    z-index: 40;
}

.lob-bulk-toolbar .bulk-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--lob-accent);
    white-space: nowrap;
}

/* V3. Interview Status Badges
   ========================================================================== */
.lob-interview-status-completed {
    background: var(--lob-success) !important;
    color: #fff !important;
}
.lob-interview-status-active {
    background: var(--lob-warning) !important;
    color: #fff !important;
}
.lob-interview-status-pending {
    background: #6b7280 !important;
    color: #fff !important;
}

/* V4. Typeahead Dropdown
   ========================================================================== */
.lob-typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--lob-panel);
    border: 1px solid var(--lob-border);
    border-top: none;
    border-radius: 0 0 var(--lob-radius-sm) var(--lob-radius-sm);
    box-shadow: var(--lob-shadow-md);
    max-height: 240px;
    overflow-y: auto;
    z-index: 60;
}

.lob-typeahead-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--lob-transition);
}
.lob-typeahead-item:hover {
    background: var(--lob-accent-subtle);
}

/* V5. Consent Panel (AI Safeguarding)
   ========================================================================== */
.lob-consent-panel {
    background: #f8f9fa;
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius);
    padding: 24px;
    margin-bottom: 16px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.lob-consent-bullets {
    text-align: left;
    font-size: 13px;
    color: var(--lob-text-muted);
    line-height: 1.7;
    padding-left: 20px;
    margin: 12px 0 16px;
}

.lob-consent-bullets li {
    margin-bottom: 4px;
}

/* V6. Review Request Badges (Human Review Safeguarding)
   ========================================================================== */
.lob-review-pending {
    background: var(--lob-warning) !important;
    color: #fff !important;
}
.lob-review-upheld {
    background: #6b7280 !important;
    color: #fff !important;
}
.lob-review-overturned {
    background: var(--lob-success) !important;
    color: #fff !important;
}

/* W. Sift Review (two-stage scoring)
   ========================================================================== */
.sift-row-failed { background: rgba(239, 68, 68, 0.04); }
.sift-override { border-left: 3px solid var(--lob-warning); }

/* Selection highlight */
::selection {
    background: var(--lob-accent-subtle);
    color: var(--lob-text);
}

/* ==========================================================================
   X. Public Pages (pub- namespace)
   ========================================================================== */

/* X1. Body override for public pages */
.pub-body {
    background: #fff;
}

/* X2. Navbar
   ========================================================================== */
.pub-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lob-border);
    z-index: 1000;
}

.pub-navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.pub-navbar-brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--lob-text);
    text-decoration: none;
    flex-shrink: 0;
}
.pub-navbar-brand:hover {
    color: var(--lob-text);
    text-decoration: none;
}

.pub-navbar-links {
    display: flex;
    gap: 24px;
    flex: 1;
}

.pub-navbar-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--lob-text-muted);
    text-decoration: none;
    transition: color var(--lob-transition);
}
.pub-navbar-link:hover {
    color: var(--lob-text);
    text-decoration: none;
}

.pub-navbar-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* X3. Hero
   ========================================================================== */
.pub-hero {
    background: var(--lob-accent-gradient);
    padding: 160px 32px 100px;
    text-align: center;
    color: #fff;
}

.pub-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.pub-hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
}

.pub-hero-subtitle {
    font-size: 20px;
    line-height: 1.6;
    margin: 0 0 40px;
    opacity: 0.9;
}

.pub-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.pub-btn-hero-primary {
    background: #fff;
    color: var(--lob-accent);
    border-color: #fff;
    font-weight: 600;
    padding: 12px 32px;
}
.pub-btn-hero-primary:hover {
    background: #f0f0f0;
    color: var(--lob-accent-hover);
    border-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: var(--lob-shadow-lg);
}

.pub-btn-hero-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    font-weight: 600;
    padding: 12px 32px;
}
.pub-btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}

/* X4. Sections
   ========================================================================== */
.pub-section {
    padding: 80px 32px;
}

.pub-section-alt {
    background: var(--lob-bg);
}

.pub-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.pub-section-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 12px;
    color: var(--lob-text);
}

.pub-section-subtitle {
    font-size: 17px;
    color: var(--lob-text-muted);
    text-align: center;
    max-width: 650px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

/* X5. Features Grid
   ========================================================================== */
.pub-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pub-feature-card {
    background: var(--lob-panel);
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius);
    padding: 32px 28px;
    transition: transform var(--lob-transition), box-shadow var(--lob-transition);
}
.pub-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lob-shadow-lg);
}

.pub-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--lob-accent-subtle);
    color: var(--lob-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.pub-feature-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--lob-text);
}

.pub-feature-desc {
    font-size: 14px;
    color: var(--lob-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* X6. Benefits
   ========================================================================== */
.pub-benefits-list {
    max-width: 700px;
    margin: 0 auto;
}

.pub-benefit-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 32px;
}

.pub-benefit-number {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--lob-accent-gradient);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pub-benefit-content {
    flex: 1;
}

.pub-benefit-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--lob-text);
}

.pub-benefit-desc {
    font-size: 15px;
    color: var(--lob-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* X6b. Trust Strip
   ========================================================================== */
.pub-trust {
    padding: 48px 32px;
    background: var(--lob-panel);
    border-top: 1px solid var(--lob-border);
    border-bottom: 1px solid var(--lob-border);
}

.pub-trust-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.pub-trust-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pub-trust-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: #e8f5e9;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.pub-trust-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--lob-text);
}

.pub-trust-desc {
    font-size: 14px;
    color: var(--lob-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* X7. CTA Section
   ========================================================================== */
.pub-cta {
    background: var(--lob-sidebar-bg);
    padding: 80px 32px;
    text-align: center;
}

.pub-cta-inner {
    max-width: 700px;
    margin: 0 auto;
}

.pub-cta-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}

.pub-cta-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 36px;
    line-height: 1.6;
}

.pub-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.pub-btn-cta-primary {
    background: var(--lob-accent);
    color: #fff;
    border-color: var(--lob-accent);
    font-weight: 600;
    padding: 12px 32px;
}
.pub-btn-cta-primary:hover {
    background: var(--lob-accent-hover);
    border-color: var(--lob-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--lob-shadow-lg);
}

.pub-btn-cta-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    padding: 12px 32px;
}
.pub-btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* X8. Footer
   ========================================================================== */
.pub-footer {
    background: #111827;
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 32px 0;
}

.pub-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.pub-footer-brand {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.pub-footer-tagline {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
}

.pub-footer-heading {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.pub-footer-link {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color var(--lob-transition);
}
.pub-footer-link:hover {
    color: #fff;
    text-decoration: none;
}

.pub-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    max-width: 1100px;
    margin: 0 auto;
}

/* X9. Legal Pages
   ========================================================================== */
.pub-legal {
    padding: 120px 32px 80px;
}

.pub-legal-inner {
    max-width: 800px;
    margin: 0 auto;
}

.pub-legal-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--lob-text);
    margin: 0 0 8px;
}

.pub-legal-updated {
    font-size: 14px;
    color: var(--lob-text-light);
    margin: 0 0 40px;
}

.pub-legal-inner h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--lob-text);
    margin: 36px 0 12px;
}

.pub-legal-inner h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--lob-text);
    margin: 24px 0 8px;
}

.pub-legal-inner p {
    font-size: 15px;
    color: var(--lob-text-muted);
    line-height: 1.7;
    margin: 0 0 12px;
}

.pub-legal-inner ul,
.pub-legal-inner ol {
    font-size: 15px;
    color: var(--lob-text-muted);
    line-height: 1.7;
    padding-left: 24px;
    margin: 0 0 16px;
}

.pub-legal-inner li {
    margin-bottom: 6px;
}

.pub-legal-inner a {
    color: var(--lob-accent);
    text-decoration: none;
}
.pub-legal-inner a:hover {
    text-decoration: underline;
}

/* X10. FAQ Accordion
   ========================================================================== */
.pub-faq-item {
    border: 1px solid var(--lob-border);
    border-radius: var(--lob-radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
}

.pub-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--lob-text);
    background: var(--lob-panel);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--lob-transition);
}
.pub-faq-question:hover {
    background: #fafafa;
}

.pub-faq-chevron {
    font-size: 12px;
    color: var(--lob-text-light);
    transition: transform var(--lob-transition);
    flex-shrink: 0;
    margin-left: 16px;
}

.pub-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.pub-faq-answer p,
.pub-faq-answer ul {
    padding: 0 20px;
}
.pub-faq-answer p:first-child {
    padding-top: 4px;
}
.pub-faq-answer p:last-child {
    padding-bottom: 16px;
}

.pub-faq-item.open .pub-faq-chevron {
    transform: rotate(180deg);
}
.pub-faq-item.open .pub-faq-answer {
    max-height: 500px;
}
.pub-faq-item.open .pub-faq-question {
    border-bottom: 1px solid var(--lob-border-light);
}

/* X11. User Guide (authenticated)
   ========================================================================== */
.lob-guide {
    max-width: 900px;
}

.lob-guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lob-guide-toc a {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lob-accent);
    background: var(--lob-accent-subtle);
    border-radius: var(--lob-radius-xs);
    text-decoration: none;
    transition: all var(--lob-transition);
}
.lob-guide-toc a:hover {
    background: var(--lob-accent);
    color: #fff;
    text-decoration: none;
}

.lob-guide-section {
    margin-bottom: 32px;
}

.lob-guide-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--lob-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lob-guide-step {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--lob-accent-gradient);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lob-guide-section .lob-panel-body h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--lob-text);
    margin: 24px 0 8px;
}
.lob-guide-section .lob-panel-body h3:first-child {
    margin-top: 0;
}

.lob-guide-section .lob-panel-body p {
    font-size: 14px;
    color: var(--lob-text-muted);
    line-height: 1.7;
    margin: 0 0 12px;
}

.lob-guide-section .lob-panel-body ul,
.lob-guide-section .lob-panel-body ol {
    font-size: 14px;
    color: var(--lob-text-muted);
    line-height: 1.7;
    padding-left: 22px;
    margin: 0 0 12px;
}

.lob-guide-section .lob-panel-body li {
    margin-bottom: 4px;
}

.lob-guide-section .lob-panel-body a {
    color: var(--lob-accent);
    text-decoration: none;
}
.lob-guide-section .lob-panel-body a:hover {
    text-decoration: underline;
}

.lob-guide-section .lob-panel-body code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--lob-font-mono);
    color: var(--lob-accent);
}

/* X12. Responsive — Public Pages
   ========================================================================== */
@media (max-width: 1024px) {
    .pub-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pub-navbar-links {
        display: none;
    }

    .pub-hero {
        padding: 130px 20px 70px;
    }

    .pub-hero-title {
        font-size: 34px;
    }

    .pub-hero-subtitle {
        font-size: 17px;
    }

    .pub-section {
        padding: 50px 20px;
    }

    .pub-section-title {
        font-size: 28px;
    }

    .pub-features-grid {
        grid-template-columns: 1fr;
    }

    .pub-trust {
        padding: 32px 20px;
    }

    .pub-trust-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pub-cta {
        padding: 50px 20px;
    }

    .pub-cta-title {
        font-size: 28px;
    }

    .pub-footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pub-legal {
        padding: 100px 20px 60px;
    }

    .pub-legal-title {
        font-size: 28px;
    }
}