/*
  LogAI — Base Structural Stylesheet
  All colors come from CSS variables defined in the active theme file.
  Default (dark) variables are declared here as fallback.
  2026 — Inter / JetBrains Mono — Glassmorphism
*/

/* ── DEFAULT THEME FALLBACK (Dark) ─────────────────────────────────────────── */
:root {
    --bg-primary:       #0f172a;
    --bg-secondary:     #1e293b;
    --bg-card:          rgba(30, 41, 59, 0.72);
    --bg-input:         rgba(15, 23, 42, 0.65);
    --bg-input-hover:   rgba(15, 23, 42, 0.8);
    --bg-hover:         rgba(59, 130, 246, 0.08);
    --bg-sidebar:       rgba(15, 23, 42, 0.97);
    --bg-topbar:        rgba(15, 23, 42, 0.55);
    --bg-dropdown:      rgba(10, 15, 30, 0.97);
    --bg-loader:        #0f172a;
    --bg-modal:         rgba(15, 23, 42, 0.98);
    --bg-tag:           rgba(148, 163, 184, 0.07);
    --bg-stat-card:     rgba(30, 41, 59, 0.7);
    --bg-login-card:    rgba(17, 25, 45, 0.88);
    --bg-gradient-1:    rgba(59, 130, 246, 0.15);
    --bg-gradient-2:    rgba(16, 185, 129, 0.10);
    --bg-glow-start:    #1e293b;
    --bg-glow-end:      #3b82f6;
    --border:           rgba(148, 163, 184, 0.10);
    --border-subtle:    rgba(148, 163, 184, 0.07);
    --border-focus:     rgba(59, 130, 246, 0.60);
    --border-card:      rgba(148, 163, 184, 0.10);
    --border-input:     rgba(148, 163, 184, 0.14);
    --text-primary:     #f8fafc;
    --text-secondary:   #e2e8f0;
    --text-body:        #cbd5e1;
    --text-muted:       #94a3b8;
    --text-subtle:      #64748b;
    --text-placeholder: rgba(148, 163, 184, 0.38);
    --accent:           #3b82f6;
    --accent-hover:     #2563eb;
    --accent-glow:      rgba(59, 130, 246, 0.32);
    --accent-soft:      rgba(59, 130, 246, 0.10);
    --accent-soft-border: rgba(59, 130, 246, 0.22);
    --accent-gradient:  linear-gradient(135deg, #3b82f6, #6366f1);
    --accent-text:      #60a5fa;
    --success:          #10b981;
    --success-soft:     rgba(16, 185, 129, 0.12);
    --success-text:     #34d399;
    --warning:          #eab308;
    --warning-soft:     rgba(234, 179, 8, 0.12);
    --error:            #ef4444;
    --error-soft:       rgba(239, 68, 68, 0.12);
    --error-text:       #f87171;
    --critical:         #ef4444;
    --code-bg:          #0d1117;
    --code-text:        #abb2bf;
    --code-inline-bg:   rgba(0, 0, 0, 0.32);
    --shimmer-a:        rgba(30, 41, 59, 0.6);
    --shimmer-b:        rgba(51, 65, 85, 0.6);
    --history-item-bg:  rgba(30, 41, 59, 0.50);
    --history-item-hover-bg: rgba(30, 41, 59, 0.78);
    --history-item-hover-border: rgba(59, 130, 246, 0.38);
    --detail-meta-bg:   rgba(15, 23, 42, 0.60);
    --detail-report-bg: rgba(15, 23, 42, 0.50);
    --logo-bg:          rgba(59, 130, 246, 0.10);
    --shadow-card:      0 8px 32px rgba(0, 0, 0, 0.40);
    --shadow-login:     0 32px 64px rgba(0, 0, 0, 0.60), 0 0 80px rgba(59, 130, 246, 0.10);
    --backdrop-blur:    blur(14px);
    --backdrop-blur-heavy: blur(24px);
    --scrollbar-thumb:  rgba(148, 163, 184, 0.18);
    --scrollbar-track:  transparent;

    /* Non-theme tokens */
    --sidebar-width:    260px;
    --font-main:        'Inter', sans-serif;
    --font-mono:        'JetBrains Mono', monospace;
    --radius-card:      16px;
    --radius-btn:       10px;
    --radius-input:     10px;
    --radius-sm:        8px;
    --transition-fast:  0.15s ease;
    --transition-base:  0.2s ease;
    --transition-slow:  0.3s ease;
}

/* ── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family:    var(--font-main);
    background:     var(--bg-primary);
    color:          var(--text-primary);
    min-height:     100vh;
    overflow:       hidden;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition-slow), color var(--transition-slow);
}

/* ── SCROLLBAR ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb      { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-subtle); }

/* ── BACKGROUND EFFECTS ─────────────────────────────────────────────────────── */
.bg-gradient {
    position: fixed;
    inset:    0;
    z-index:  -2;
    background:
        radial-gradient(circle at top right,    var(--bg-gradient-1), transparent 40%),
        radial-gradient(circle at bottom left,  var(--bg-gradient-2), transparent 40%);
    transition: background var(--transition-slow);
}

.bg-glow {
    position:   fixed;
    top:        -20%;
    left:       50%;
    transform:  translateX(-50%);
    width:      60%;
    height:     60%;
    background: conic-gradient(
        from 180deg at 50% 50%,
        var(--bg-glow-start) 0deg,
        var(--bg-glow-end)   180deg,
        var(--bg-glow-start) 360deg
    );
    opacity:    0.10;
    filter:     blur(100px);
    z-index:    -1;
    transition: background var(--transition-slow);
}

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.app-container {
    display: flex;
    height:  100vh;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────────── */
.sidebar {
    width:            var(--sidebar-width);
    background:       var(--bg-sidebar);
    border-right:     1px solid var(--border);
    padding:          24px;
    display:          flex;
    flex-direction:   column;
    z-index:          10;
    flex-shrink:      0;
    transition:       background var(--transition-slow), border-color var(--transition-slow);
}

.brand {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 40px;
}

.logo-icon {
    width:            36px;
    height:           36px;
    background:       var(--logo-bg);
    border-radius:    9px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--accent-text);
    flex-shrink:      0;
    border:           1px solid var(--accent-soft-border);
    transition:       background var(--transition-slow);
}

.brand h1 {
    font-size:      20px;
    font-weight:    700;
    letter-spacing: -0.5px;
    color:          var(--text-primary);
    transition:     color var(--transition-slow);
}

.sidebar nav {
    display:         flex;
    flex-direction:  column;
    gap:             4px;
    flex:            1;
}

.sidebar nav a {
    text-decoration: none;
    color:           var(--text-muted);
    padding:         11px 14px;
    border-radius:   var(--radius-sm);
    font-size:       14px;
    font-weight:     500;
    transition:      all var(--transition-base);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    letter-spacing:  0.01em;
}

.sidebar nav a:hover {
    background: var(--bg-hover);
    color:      var(--accent-text);
}

.sidebar nav a.active {
    background: var(--accent-soft);
    color:      var(--accent-text);
    font-weight: 600;
    border-left: 2px solid var(--accent);
    padding-left: 12px;
}

.badge {
    font-size:    10px;
    background:   var(--accent);
    color:        #fff;
    padding:      2px 6px;
    border-radius: 4px;
    font-weight:  700;
}

.status-indicator {
    margin-top:  auto;
    font-size:   12px;
    color:       var(--text-muted);
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 4px;
}

.dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    flex-shrink:  0;
}

.dot.online {
    background: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
    animation:  online-pulse 2s ease-in-out infinite;
}

@keyframes online-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
    50%       { box-shadow: 0 0 12px rgba(16, 185, 129, 0.7); }
}

/* ── MAIN CONTENT ───────────────────────────────────────────────────────────── */
.main-content {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    min-width:       0;
}

/* ── TOP BAR ────────────────────────────────────────────────────────────────── */
.top-bar {
    height:          70px;
    border-bottom:   1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 28px;
    background:      var(--bg-topbar);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    flex-shrink:     0;
    transition:      background var(--transition-slow), border-color var(--transition-slow);
}

.top-bar h2 {
    font-size:   16px;
    font-weight: 600;
    color:       var(--text-primary);
    letter-spacing: -0.2px;
}

/* ── USER PROFILE ───────────────────────────────────────────────────────────── */
.user-profile {
    display:     flex;
    align-items: center;
    gap:         10px;
    position:    relative;
}

.user-email-text {
    font-size:     13px;
    color:         var(--text-muted);
    max-width:     160px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.avatar {
    width:            32px;
    height:           32px;
    background:       var(--accent-gradient);
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        12px;
    font-weight:      700;
    color:            #fff;
    cursor:           pointer;
    user-select:      none;
    flex-shrink:      0;
    border:           2px solid var(--accent-soft-border);
    transition:       transform var(--transition-fast), box-shadow var(--transition-fast);
}

.avatar:hover {
    transform:  scale(1.06);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── DROPDOWN ───────────────────────────────────────────────────────────────── */
.user-dropdown {
    position:   absolute;
    top:        calc(100% + 10px);
    right:      0;
    background: var(--bg-dropdown);
    border:     1px solid var(--border);
    border-radius: var(--radius-sm);
    backdrop-filter: var(--backdrop-blur);
    min-width:  160px;
    padding:    6px;
    opacity:    0;
    pointer-events: none;
    transform:  translateY(-8px) scale(0.97);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index:    300;
    box-shadow: var(--shadow-card);
}

.user-dropdown.open {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0) scale(1);
}

.dropdown-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    width:       100%;
    padding:     9px 12px;
    border-radius: 7px;
    border:      none;
    background:  transparent;
    font-family: var(--font-main);
    font-size:   13px;
    font-weight: 500;
    color:       var(--text-muted);
    cursor:      pointer;
    transition:  all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--error-soft);
    color:      var(--error-text);
}

/* ── CONTENT WRAPPER ────────────────────────────────────────────────────────── */
.content-wrapper {
    flex:           1;
    overflow-y:     auto;
    padding:        28px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

/* ── CARDS ──────────────────────────────────────────────────────────────────── */
.card {
    background:      var(--bg-card);
    border:          1px solid var(--border-card);
    border-radius:   var(--radius-card);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    box-shadow:      var(--shadow-card);
    transition:      background var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.card-header {
    padding:         18px 24px;
    border-bottom:   1px solid var(--border);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-shrink:     0;
}

.card-header h3 {
    font-size:      15px;
    font-weight:    600;
    color:          var(--text-primary);
    letter-spacing: -0.2px;
}

.card-body {
    flex:        1;
    padding:     22px 24px;
    overflow-y:  auto;
    font-size:   14.5px;
    line-height: 1.65;
    color:       var(--text-body);
}

/* ── ICON BUTTON ────────────────────────────────────────────────────────────── */
.icon-btn {
    background:    transparent;
    border:        1px solid var(--border);
    color:         var(--text-muted);
    width:         32px;
    height:        32px;
    border-radius: 7px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    transition:    all var(--transition-base);
    flex-shrink:   0;
}

.icon-btn:hover {
    color:        var(--text-primary);
    border-color: var(--text-muted);
    background:   var(--bg-hover);
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn {
    border:          none;
    border-radius:   var(--radius-btn);
    padding:         12px 24px;
    font-weight:     600;
    font-size:       14px;
    font-family:     var(--font-main);
    cursor:          pointer;
    transition:      all var(--transition-base);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    letter-spacing:  0.01em;
}

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

.btn-primary {
    background: var(--accent-gradient);
    color:      #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
    position:   relative;
    overflow:   hidden;
}

.btn-primary::before {
    content:   '';
    position:  absolute;
    inset:     0;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent);
    pointer-events: none;
}

.btn-primary:not(:disabled):hover {
    opacity:    0.90;
    transform:  translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-primary:not(:disabled):active {
    transform: translateY(0);
}

.btn-secondary {
    background:  transparent;
    border:      1px solid var(--border-input);
    color:       var(--text-muted);
    font-size:   14px;
    font-family: var(--font-main);
    border-radius: var(--radius-btn);
    padding:     12px 24px;
    cursor:      pointer;
    transition:  all var(--transition-base);
    font-weight: 500;
}

.btn-secondary:hover {
    border-color: var(--text-muted);
    color:        var(--text-primary);
    background:   var(--bg-hover);
}

.btn-full { width: 100%; }

/* ── FORM INPUTS ────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"] {
    background:  var(--bg-input);
    border:      1px solid var(--border-input);
    border-radius: var(--radius-input);
    padding:     12px 16px;
    font-family: var(--font-main);
    font-size:   14px;
    color:       var(--text-primary);
    outline:     none;
    width:       100%;
    transition:  border-color var(--transition-base), box-shadow var(--transition-base);
}

input::placeholder { color: var(--text-placeholder); }

input:focus {
    border-color: var(--border-focus);
    box-shadow:   0 0 0 3px var(--accent-soft);
}

/* ── SPINNER ────────────────────────────────────────────────────────────────── */
.spinner {
    width:         18px;
    height:        18px;
    border:        2.5px solid rgba(255,255,255,0.25);
    border-top:    2.5px solid #fff;
    border-radius: 50%;
    animation:     spin 0.8s linear infinite;
    display:       none;
    flex-shrink:   0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── APP LOADER ─────────────────────────────────────────────────────────────── */
#appLoader {
    position:   fixed;
    inset:      0;
    background: var(--bg-loader);
    display:    flex;
    align-items:     center;
    justify-content: center;
    z-index:    9999;
    transition: opacity 0.5s ease;
}

.loader-content {
    text-align: center;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        16px;
}

.loader-content h2 {
    font-size:   16px;
    font-weight: 600;
    color:       var(--text-muted);
    letter-spacing: 0.02em;
}

.loader-logo-ring {
    width:        48px;
    height:       48px;
    border:       3px solid var(--accent-soft);
    border-top:   3px solid var(--accent);
    border-radius: 50%;
    animation:    spin 1s linear infinite;
}

/* ── HIDDEN / VISIBLE UTILITIES ─────────────────────────────────────────────── */
.hidden  { display: none !important; }

/* ── UPLOAD SECTION ─────────────────────────────────────────────────────────── */
.upload-card {
    padding:      32px;
    text-align:   center;
    transition:   border-color var(--transition-slow), background var(--transition-slow);
    cursor:       pointer;
}

.upload-card.drag-over {
    border-color: var(--accent);
    background:   var(--accent-soft);
}

.icon-upload {
    color:         var(--accent-text);
    margin-bottom: 20px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    animation:     float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

.upload-content h3 {
    margin-bottom: 8px;
    font-size:     18px;
    font-weight:   600;
    color:         var(--text-primary);
}

.upload-content p {
    color:         var(--text-muted);
    font-size:     14px;
    margin-bottom: 20px;
    line-height:   1.5;
}

.highlight-text {
    color:              var(--accent-text);
    cursor:             pointer;
    text-decoration:    underline;
    text-underline-offset: 3px;
}

.file-status {
    margin-top:  16px;
    font-size:   13px;
    font-family: var(--font-mono);
    color:       var(--text-muted);
    min-height:  20px;
}

.upload-actions { margin-top: 20px; }

/* ── FILE PREVIEW ───────────────────────────────────────────────────────────── */
.file-preview {
    display:    none;
    gap:        10px;
    margin-top: 8px;
    font-family: var(--font-main);
    font-size:  12px;
    color:      var(--text-muted);
    justify-content: center;
    flex-wrap: wrap;
}
.file-preview.visible { display: flex; }
.file-preview span {
    background:    var(--bg-tag);
    padding:       3px 10px;
    border-radius: 6px;
    border:        1px solid var(--border-subtle);
}

/* ── PROGRESS SECTION ───────────────────────────────────────────────────────── */
.progress-card { padding: 24px; }

.progress-stages {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-bottom:   20px;
}

.stage {
    display:     flex;
    align-items: center;
    gap:         6px;
    opacity:     0.38;
    transition:  all var(--transition-slow);
}

.stage.active  { opacity: 1; }
.stage.complete{ opacity: 0.75; }

.stage-dot {
    width:        9px;
    height:       9px;
    border-radius: 50%;
    background:   var(--text-muted);
    transition:   all var(--transition-slow);
    flex-shrink:  0;
}

.stage.active .stage-dot {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    animation:  pulse-dot 1.4s ease-in-out infinite;
}

.stage.complete .stage-dot { background: var(--success); }

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.3); }
}

.stage-label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--text-muted);
    transition:  color var(--transition-slow);
}

.stage.active .stage-label   { color: var(--accent); }
.stage.complete .stage-label  { color: var(--success); }

.stage-line {
    width:      40px;
    height:     2px;
    background: var(--border);
    border-radius: 1px;
}

.progress-bar-container {
    width:         100%;
    height:        6px;
    background:    var(--accent-soft);
    border-radius: 3px;
    overflow:      hidden;
    margin-bottom: 12px;
}

.progress-bar {
    height:     100%;
    width:      0%;
    background: var(--accent-gradient);
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation:  gradient-shift 2.5s linear infinite;
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.progress-message {
    font-size:   12.5px;
    color:       var(--text-muted);
    text-align:  center;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

/* ── STATS GRID ─────────────────────────────────────────────────────────────── */
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
}

.stat-card {
    background:     var(--bg-stat-card);
    border:         1px solid var(--border-card);
    border-radius:  12px;
    padding:        16px;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    transition:     background var(--transition-slow), transform var(--transition-fast);
}

.stat-card:hover { transform: translateY(-2px); }

.stat-value {
    font-size:   24px;
    font-weight: 700;
    font-family: var(--font-mono);
    color:       var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    font-size:      10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color:          var(--text-muted);
    font-weight:    600;
}

.stat-card.stat-critical .stat-value { color: var(--critical); }
.stat-card.stat-error    .stat-value { color: var(--warning); }
.stat-card.stat-warning  .stat-value { color: var(--warning); }

/* ── RESULTS / EMPTY STATE ──────────────────────────────────────────────────── */
.results-card {
    min-height: 480px;
    display:    flex;
    flex-direction: column;
}

.empty-state {
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-subtle);
    font-style:      italic;
    font-size:       14px;
    padding:         40px;
    text-align:      center;
}

/* ── CHUNK ACCORDION ────────────────────────────────────────────────────────── */
.chunk-section {
    border:         1px solid var(--border-subtle);
    border-radius:  10px;
    margin-bottom:  8px;
    overflow:       hidden;
}

.chunk-toggle {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    cursor:          pointer;
    padding:         10px 14px;
    user-select:     none;
    transition:      background var(--transition-fast);
}

.chunk-toggle:hover { background: var(--bg-hover); }

.chunk-chevron { transition: transform var(--transition-base); }
.chunk-chevron.collapsed { transform: rotate(-90deg); }

.chunk-collapsible {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.35s ease;
}

.chunk-collapsible.open { max-height: 6000px; }

.chunk-header {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color:          var(--accent-text);
    padding:        16px 0 8px;
    border-top:     1px solid var(--border);
    margin-top:     8px;
}

.chunk-header:first-child {
    border-top:  none;
    margin-top:  0;
    padding-top: 0;
}

.chunk-body { margin-bottom: 8px; }

/* ── NEW ANALYSIS BUTTON ────────────────────────────────────────────────────── */
.new-analysis-btn {
    display:         none;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         13px 20px;
    margin-top:      12px;
    background:      var(--accent-soft);
    border:          1px solid var(--accent-soft-border);
    border-radius:   var(--radius-btn);
    font-family:     var(--font-main);
    font-size:       14px;
    font-weight:     600;
    color:           var(--accent-text);
    cursor:          pointer;
    transition:      background var(--transition-base), border-color var(--transition-base);
}

.new-analysis-btn:hover {
    background:    var(--bg-hover);
    border-color:  var(--accent);
}

/* ── MARKDOWN BODY ──────────────────────────────────────────────────────────── */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    color:      var(--text-primary);
    margin-top: 22px;
    margin-bottom: 12px;
    font-weight: 600;
}

.markdown-body h1 {
    font-size:      1.5em;
    border-bottom:  1px solid var(--border);
    padding-bottom: 8px;
}

.markdown-body h2  { font-size: 1.25em; }
.markdown-body h3  { font-size: 1.08em; color: var(--accent-text); }
.markdown-body p   { margin-bottom: 14px; color: var(--text-body); }

.markdown-body ul,
.markdown-body ol  { padding-left: 22px; margin-bottom: 14px; }

.markdown-body li  { margin-bottom: 5px; color: var(--text-body); }

.markdown-body strong { color: var(--text-primary); font-weight: 700; }

.markdown-body code {
    font-family:   var(--font-mono);
    background:    var(--code-inline-bg);
    padding:       2px 6px;
    border-radius: 4px;
    font-size:     0.87em;
    color:         var(--accent-text);
}

.markdown-body pre code {
    display:      block;
    padding:      16px;
    background:   var(--code-bg);
    border-radius: 8px;
    overflow-x:   auto;
    color:        var(--code-text);
    font-size:    0.87em;
}

.markdown-body blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    color:       var(--text-muted);
    font-style:  italic;
    margin:      0 0 14px;
}

/* ── NUDGE BANNER ───────────────────────────────────────────────────────────── */
.nudge-banner {
    display:     none;
    align-items: center;
    gap:         8px;
    padding:     9px 16px;
    background:  var(--accent-soft);
    border:      1px solid var(--accent-soft-border);
    border-radius: 10px;
    font-family: var(--font-main);
    font-size:   12.5px;
    color:       var(--text-muted);
}

.nudge-banner.visible { display: flex; }
.nudge-banner a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.nudge-banner a:hover { text-decoration: underline; }
.nudge-banner .nudge-close {
    margin-left: auto;
    background:  none;
    border:      none;
    color:       var(--text-subtle);
    cursor:      pointer;
    font-size:   18px;
    line-height: 1;
    padding:     0 2px;
    transition:  color var(--transition-fast);
}
.nudge-banner .nudge-close:hover { color: var(--text-muted); }

/* ── GUEST CHIP ─────────────────────────────────────────────────────────────── */
.guest-chip {
    display:     none;
    align-items: center;
    gap:         6px;
    padding:     5px 11px;
    background:  var(--bg-tag);
    border:      1px solid var(--border);
    border-radius: 20px;
    font-family: var(--font-main);
    font-size:   12px;
    font-weight: 500;
    color:       var(--text-subtle);
    pointer-events: none;
}
.guest-chip .guest-dot              { width:6px;height:6px;border-radius:50%;background:var(--text-subtle); }
.guest-chip.visible                 { display: flex; }

/* ── USAGE COUNTER ──────────────────────────────────────────────────────────── */
.usage-counter {
    display:     none;
    align-items: center;
    gap:         5px;
    padding:     5px 11px;
    background:  var(--bg-tag);
    border:      1px solid var(--border);
    border-radius: 20px;
    font-family: var(--font-main);
    font-size:   11.5px;
    color:       var(--text-muted);
}
.usage-counter.visible { display: flex; }
.usage-counter .usage-dot { width:6px;height:6px;border-radius:50%;background:var(--accent); }

/* ── LOGIN CTA ──────────────────────────────────────────────────────────────── */
.login-cta {
    display:         none;
    align-items:     center;
    gap:             6px;
    padding:         7px 16px;
    background:      var(--accent-gradient);
    border:          none;
    border-radius:   var(--radius-btn);
    font-family:     var(--font-main);
    font-size:       13px;
    font-weight:     600;
    color:           #fff;
    cursor:          pointer;
    text-decoration: none;
    box-shadow:      0 2px 10px var(--accent-glow);
    transition:      opacity var(--transition-base), transform var(--transition-fast);
}
.login-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.login-cta.visible { display: flex; }

/* ── DASHBOARD FADE IN ──────────────────────────────────────────────────────── */
#dashboardView {
    opacity:    0;
    height:     100vh;
    transition: opacity 0.4s ease;
}
#dashboardView.visible { opacity: 1; }

/* ── MOBILE HAMBURGER ───────────────────────────────────────────────────────── */
.hamburger-btn {
    display:    none;
    background: none;
    border:     none;
    color:      var(--text-muted);
    cursor:     pointer;
    padding:    6px;
    border-radius: 7px;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.hamburger-btn:hover {
    background: var(--bg-hover);
    color:      var(--text-primary);
}

.sidebar-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 10, 0.60);
    z-index:    199;
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 768px) {
    .hamburger-btn { display: flex; }

    .sidebar {
        position:   fixed;
        left:       -268px;
        top:        0;
        bottom:     0;
        z-index:    200;
        transition: left 0.25s ease;
        width:      240px;
        padding-top: 20px;
    }
    .sidebar.open { left: 0; }

    .app-container { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .top-bar { padding: 0 16px; }
    .content-wrapper { padding: 16px; }
}

/* ── HISTORY PAGE ───────────────────────────────────────────────────────────── */
.history-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.history-card {
    flex:           1;
    display:        flex;
    flex-direction: column;
}
.history-body {
    overflow-y: auto;
    flex:       1;
    padding:    14px 22px 22px;
}
.history-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

/* History items */
.history-item {
    background:    var(--history-item-bg);
    border:        1px solid var(--border-card);
    border-radius: 12px;
    padding:       16px 20px;
    cursor:        pointer;
    transition:    border-color var(--transition-base), background var(--transition-base);
}
.history-item:hover {
    border-color: var(--history-item-hover-border);
    background:   var(--history-item-hover-bg);
}

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

.history-filename {
    font-size:   14px;
    font-weight: 600;
    color:       var(--text-primary);
    font-family: var(--font-mono);
}
.history-date {
    font-size: 12px;
    color:     var(--text-muted);
}
.history-stats-row {
    display:   flex;
    gap:       20px;
    flex-wrap: wrap;
}
.history-stat {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.history-stat-value {
    font-size:   16px;
    font-weight: 700;
    font-family: var(--font-mono);
    color:       var(--text-primary);
}
.history-stat-value.is-critical { color: var(--critical); }
.history-stat-value.is-error    { color: var(--warning); }
.history-stat-value.is-warning  { color: var(--warning); }
.history-stat-label {
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color:          var(--text-muted);
    font-weight:    600;
}

/* Skeleton shimmer */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.history-skeleton-item {
    height:         80px;
    border-radius:  12px;
    background:     linear-gradient(90deg,
        var(--shimmer-a) 25%,
        var(--shimmer-b) 50%,
        var(--shimmer-a) 75%
    );
    background-size: 600px 100%;
    animation:      shimmer 1.4s infinite linear;
    margin-bottom:  10px;
}

/* Empty state */
.history-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         60px 0;
    color:           var(--text-muted);
    text-align:      center;
}
.history-empty.hidden  { display: none !important; }
.history-empty svg     { opacity: 0.32; margin-bottom: 4px; }
.history-empty p       { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.history-empty span    { font-size: 13px; color: var(--text-subtle); }

/* Count badge */
.history-count {
    font-size:     12px;
    color:         var(--text-muted);
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       2px 10px;
}

/* History item toggle */
.history-item-toggle {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 600;
    color:       var(--accent-text);
    margin-top:  10px;
    cursor:      pointer;
    user-select: none;
    width:       fit-content;
    transition:  opacity var(--transition-fast);
}
.history-item-toggle:hover { opacity: 0.75; }
.history-item-toggle svg   { transition: transform var(--transition-base); }
.history-item-toggle.open svg { transform: rotate(180deg); }

/* Detail panel */
.history-detail {
    display:    none;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    animation:  fadeInDetail 0.2s ease;
}
.history-detail.open { display: block; }

@keyframes fadeInDetail {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.detail-meta-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    margin-bottom:         14px;
}

@media (max-width: 600px) {
    .detail-meta-grid { grid-template-columns: repeat(2, 1fr); }
}

.detail-meta-card {
    background:    var(--detail-meta-bg);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       12px 14px;
    text-align:    center;
}

.detail-meta-value {
    font-size:   20px;
    font-weight: 700;
    font-family: var(--font-mono);
    color:       var(--text-primary);
    line-height: 1.2;
}
.detail-meta-value.is-critical { color: var(--critical); }
.detail-meta-value.is-error    { color: var(--warning); }
.detail-meta-value.is-warning  { color: var(--warning); }

.detail-meta-label {
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--text-muted);
    font-weight:    600;
    margin-top:     4px;
}

.detail-report-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color:          var(--accent-text);
    margin-bottom:  10px;
}

.detail-report-body {
    background:    var(--detail-report-bg);
    border:        1px solid var(--border);
    border-radius: 10px;
    padding:       16px 20px;
    font-size:     14px;
    line-height:   1.65;
    color:         var(--text-body);
    max-height:    500px;
    overflow-y:    auto;
}

.detail-actions {
    display:         flex;
    gap:             8px;
    margin-bottom:   10px;
    justify-content: flex-end;
}

/* History search */
.history-search {
    width:         100%;
    padding:       10px 14px;
    background:    var(--bg-input);
    border:        1px solid var(--border-input);
    border-radius: var(--radius-sm);
    font-family:   var(--font-main);
    font-size:     13px;
    color:         var(--text-primary);
    outline:       none;
    margin-bottom: 12px;
    box-sizing:    border-box;
    transition:    border-color var(--transition-base), box-shadow var(--transition-base);
}
.history-search::placeholder { color: var(--text-placeholder); }
.history-search:focus {
    border-color: var(--border-focus);
    box-shadow:   0 0 0 3px var(--accent-soft);
}

/* ── LOGIN CARD (standalone page) ───────────────────────────────────────────── */
.lc {
    width:           100%;
    max-width:       400px;
    background:      var(--bg-login-card);
    border:          1px solid var(--border-card);
    border-radius:   22px;
    padding:         44px 40px 40px;
    display:         flex;
    flex-direction:  column;
    box-shadow:      var(--shadow-login);
    backdrop-filter: var(--backdrop-blur-heavy);
    -webkit-backdrop-filter: var(--backdrop-blur-heavy);
    transition:      background var(--transition-slow), box-shadow var(--transition-slow);
}

.lc-brand {
    display:         flex;
    align-items:     center;
    gap:             10px;
    margin-bottom:   6px;
    text-decoration: none;
}
.lc-logo {
    width:           36px;
    height:          36px;
    background:      var(--logo-bg);
    border:          1px solid var(--accent-soft-border);
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent-text);
    flex-shrink:     0;
}
.lc-brand-name {
    font-family:    var(--font-main);
    font-size:      20px;
    font-weight:    700;
    color:          var(--text-primary);
    letter-spacing: -0.5px;
}
.lc-back {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    font-family:     var(--font-main);
    font-size:       12.5px;
    color:           var(--text-subtle);
    text-decoration: none;
    margin-bottom:   28px;
    transition:      color var(--transition-base);
}
.lc-back:hover { color: var(--text-muted); }

.lc-title {
    font-family:    var(--font-main);
    font-size:      22px;
    font-weight:    700;
    color:          var(--text-primary);
    letter-spacing: -0.5px;
    margin-bottom:  6px;
}
.lc-sub {
    font-family:   var(--font-main);
    font-size:     13.5px;
    color:         var(--text-muted);
    margin-bottom: 28px;
    line-height:   1.5;
}
.lc-alert {
    border-radius: 10px;
    padding:       11px 14px;
    font-family:   var(--font-main);
    font-size:     13px;
    line-height:   1.5;
    margin-bottom: 14px;
    display:       none;
}
.lc-alert.visible { display: block; }
.lc-alert.error {
    background: var(--error-soft);
    border:     1px solid rgba(239, 68, 68, 0.30);
    color:      var(--error-text);
}
.lc-alert.success {
    background: var(--success-soft);
    border:     1px solid rgba(16, 185, 129, 0.28);
    color:      var(--success-text);
}
.lc-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  14px;
}
.lc-field label {
    font-family:    var(--font-main);
    font-size:      12px;
    font-weight:    600;
    color:          var(--text-muted);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.lc-btn-primary {
    margin-top:      8px;
    width:           100%;
    padding:         13px 20px;
    background:      var(--accent-gradient);
    border:          none;
    border-radius:   var(--radius-btn);
    font-family:     var(--font-main);
    font-size:       14.5px;
    font-weight:     600;
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    box-shadow:      0 4px 16px var(--accent-glow);
    transition:      opacity var(--transition-base), transform var(--transition-fast);
    position:        relative;
    overflow:        hidden;
}
.lc-btn-primary::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
    pointer-events: none;
}
.lc-btn-primary:hover:not(:disabled) { opacity: 0.90; transform: translateY(-1px); }
.lc-btn-primary:disabled { opacity: 0.52; cursor: not-allowed; }

.lc-btn-secondary {
    margin-top:   10px;
    width:        100%;
    padding:      12px 20px;
    background:   transparent;
    border:       1px solid var(--border-input);
    border-radius: var(--radius-btn);
    font-family:  var(--font-main);
    font-size:    14px;
    font-weight:  500;
    color:        var(--text-muted);
    cursor:       pointer;
    transition:   border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.lc-btn-secondary:hover:not(:disabled) {
    border-color: var(--text-muted);
    color:        var(--text-primary);
    background:   var(--bg-hover);
}
.lc-btn-secondary:disabled { opacity: 0.48; cursor: not-allowed; }

.lc-spinner {
    width:        16px;
    height:       16px;
    border:       2.5px solid rgba(255,255,255,0.25);
    border-top:   2.5px solid #fff;
    border-radius: 50%;
    animation:    spin 0.75s linear infinite;
    display:      none;
    flex-shrink:  0;
}
.lc-spinner.visible { display: block; }

.lc-divider {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      18px 0 0;
    color:       var(--text-subtle);
    font-size:   12px;
    font-family: var(--font-main);
}
.lc-divider::before,
.lc-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border);
}

/* ── SETTINGS PAGE ──────────────────────────────────────────────────────────── */
.settings-card     { max-width: 560px; margin: 0 auto; }

.settings-section-title {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color:          var(--accent-text);
    margin-bottom:  12px;
    padding:        0 2px;
}

.settings-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         16px 0;
    border-bottom:   1px solid var(--border-subtle);
    gap:             16px;
}
.settings-item:last-child { border-bottom: none; }

.settings-label {
    font-size:   14px;
    color:       var(--text-primary);
    font-weight: 500;
    line-height: 1.3;
}
.settings-desc {
    font-size:  12px;
    color:      var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}
.settings-badge {
    padding:       5px 12px;
    background:    var(--bg-tag);
    border:        1px solid var(--border);
    border-radius: 8px;
    font-size:     12px;
    color:         var(--text-muted);
    font-weight:   500;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* Theme grid in settings */
.theme-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   10px;
    width:                 100%;
    margin-top:            8px;
}

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

.theme-card {
    position:       relative;
    border:         2px solid var(--border);
    border-radius:  12px;
    padding:        14px 16px;
    cursor:         pointer;
    transition:     all var(--transition-base);
    display:        flex;
    align-items:    center;
    gap:            12px;
    background:     var(--bg-tag);
    overflow:       hidden;
}

.theme-card:hover {
    border-color: var(--accent);
    background:   var(--accent-soft);
    transform:    translateY(-1px);
    box-shadow:   0 4px 14px var(--accent-glow);
}

.theme-card.active {
    border-color: var(--accent);
    background:   var(--accent-soft);
    box-shadow:   0 0 0 1px var(--accent), 0 4px 14px var(--accent-glow);
}

.theme-card-swatch {
    width:         38px;
    height:        38px;
    border-radius: 9px;
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     18px;
}

.theme-card-label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--text-primary);
    line-height: 1.2;
}
.theme-card-sub {
    font-size:  11px;
    color:      var(--text-muted);
    margin-top: 2px;
}

.theme-card-check {
    position:   absolute;
    top:        8px;
    right:      8px;
    width:      18px;
    height:     18px;
    background: var(--accent);
    border-radius: 50%;
    display:    none;
    align-items:     center;
    justify-content: center;
}
.theme-card.active .theme-card-check { display: flex; }

/* ── RESPONSIVE SETTINGS ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .settings-card { max-width: 100%; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   THEMES  — [data-theme] attribute selectors override the :root defaults above.
   The inline script in each HTML page sets html[data-theme] instantly (anti-FOUC).
   settings.js updates it on switch. No file-loading, no specificity fights.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT ──────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-primary:       #f1f5f9;
    --bg-secondary:     #ffffff;
    --bg-card:          rgba(255, 255, 255, 0.90);
    --bg-input:         rgba(248, 250, 252, 0.90);
    --bg-input-hover:   #ffffff;
    --bg-hover:         rgba(59, 130, 246, 0.06);
    --bg-sidebar:       rgba(255, 255, 255, 0.97);
    --bg-topbar:        rgba(255, 255, 255, 0.80);
    --bg-dropdown:      rgba(255, 255, 255, 0.98);
    --bg-loader:        #f1f5f9;
    --bg-modal:         rgba(255, 255, 255, 0.98);
    --bg-tag:           rgba(100, 116, 139, 0.08);
    --bg-stat-card:     rgba(255, 255, 255, 0.90);
    --bg-login-card:    rgba(255, 255, 255, 0.95);
    --bg-gradient-1:    rgba(59, 130, 246, 0.08);
    --bg-gradient-2:    rgba(16, 185, 129, 0.05);
    --bg-glow-start:    #e2e8f0;
    --bg-glow-end:      #93c5fd;
    --border:           rgba(148, 163, 184, 0.25);
    --border-subtle:    rgba(148, 163, 184, 0.15);
    --border-focus:     rgba(59, 130, 246, 0.55);
    --border-card:      rgba(148, 163, 184, 0.22);
    --border-input:     rgba(148, 163, 184, 0.32);
    --text-primary:     #0f172a;
    --text-secondary:   #1e293b;
    --text-body:        #334155;
    --text-muted:       #64748b;
    --text-subtle:      #94a3b8;
    --text-placeholder: rgba(100, 116, 139, 0.50);
    --accent:           #2563eb;
    --accent-hover:     #1d4ed8;
    --accent-glow:      rgba(37, 99, 235, 0.22);
    --accent-soft:      rgba(37, 99, 235, 0.08);
    --accent-soft-border: rgba(37, 99, 235, 0.20);
    --accent-gradient:  linear-gradient(135deg, #2563eb, #6366f1);
    --accent-text:      #2563eb;
    --success:          #059669;
    --success-soft:     rgba(5, 150, 105, 0.10);
    --success-text:     #047857;
    --warning:          #d97706;
    --warning-soft:     rgba(217, 119, 6, 0.10);
    --error:            #dc2626;
    --error-soft:       rgba(220, 38, 38, 0.10);
    --error-text:       #dc2626;
    --critical:         #dc2626;
    --code-bg:          #f8fafc;
    --code-text:        #1e293b;
    --code-inline-bg:   rgba(100, 116, 139, 0.10);
    --shimmer-a:        rgba(241, 245, 249, 0.80);
    --shimmer-b:        rgba(226, 232, 240, 0.80);
    --history-item-bg:  rgba(255, 255, 255, 0.85);
    --history-item-hover-bg: rgba(255, 255, 255, 1);
    --history-item-hover-border: rgba(37, 99, 235, 0.30);
    --detail-meta-bg:   rgba(248, 250, 252, 0.90);
    --detail-report-bg: rgba(248, 250, 252, 0.80);
    --logo-bg:          rgba(37, 99, 235, 0.10);
    --shadow-card:      0 4px 20px rgba(15, 23, 42, 0.08);
    --shadow-login:     0 16px 48px rgba(15, 23, 42, 0.12), 0 0 40px rgba(37, 99, 235, 0.05);
    --backdrop-blur:    blur(10px);
    --backdrop-blur-heavy: blur(20px);
    --scrollbar-thumb:  rgba(100, 116, 139, 0.25);
}

/* ── GITHUB (Primer Dark) ───────────────────────────────────────────────────── */
[data-theme="github"] {
    --bg-primary:       #0d1117;
    --bg-secondary:     #161b22;
    --bg-card:          rgba(22, 27, 34, 0.90);
    --bg-input:         rgba(13, 17, 23, 0.80);
    --bg-input-hover:   rgba(22, 27, 34, 0.95);
    --bg-hover:         rgba(48, 54, 61, 0.50);
    --bg-sidebar:       rgba(13, 17, 23, 0.98);
    --bg-topbar:        rgba(13, 17, 23, 0.70);
    --bg-dropdown:      rgba(22, 27, 34, 0.99);
    --bg-loader:        #0d1117;
    --bg-modal:         rgba(22, 27, 34, 0.99);
    --bg-tag:           rgba(48, 54, 61, 0.60);
    --bg-stat-card:     rgba(22, 27, 34, 0.85);
    --bg-login-card:    rgba(22, 27, 34, 0.95);
    --bg-gradient-1:    rgba(35, 197, 94, 0.10);
    --bg-gradient-2:    rgba(31, 111, 235, 0.10);
    --bg-glow-start:    #161b22;
    --bg-glow-end:      #3fb950;
    --border:           rgba(48, 54, 61, 0.95);
    --border-subtle:    rgba(48, 54, 61, 0.70);
    --border-focus:     #1f6feb;
    --border-card:      rgba(48, 54, 61, 0.90);
    --border-input:     rgba(48, 54, 61, 0.90);
    --text-primary:     #e6edf3;
    --text-secondary:   #c9d1d9;
    --text-body:        #8b949e;
    --text-muted:       #6e7681;
    --text-subtle:      #484f58;
    --text-placeholder: rgba(110, 118, 129, 0.60);
    --accent:           #1f6feb;
    --accent-hover:     #388bfd;
    --accent-glow:      rgba(31, 111, 235, 0.28);
    --accent-soft:      rgba(31, 111, 235, 0.12);
    --accent-soft-border: rgba(31, 111, 235, 0.25);
    --accent-gradient:  linear-gradient(135deg, #1f6feb, #388bfd);
    --accent-text:      #58a6ff;
    --success:          #3fb950;
    --success-soft:     rgba(63, 185, 80, 0.12);
    --success-text:     #3fb950;
    --warning:          #d29922;
    --warning-soft:     rgba(210, 153, 34, 0.12);
    --error:            #f85149;
    --error-soft:       rgba(248, 81, 73, 0.12);
    --error-text:       #f85149;
    --critical:         #f85149;
    --code-bg:          #161b22;
    --code-text:        #c9d1d9;
    --code-inline-bg:   rgba(110, 118, 129, 0.14);
    --shimmer-a:        rgba(22, 27, 34, 0.70);
    --shimmer-b:        rgba(33, 38, 45, 0.90);
    --history-item-bg:  rgba(22, 27, 34, 0.75);
    --history-item-hover-bg: rgba(22, 27, 34, 0.98);
    --history-item-hover-border: rgba(31, 111, 235, 0.40);
    --detail-meta-bg:   rgba(13, 17, 23, 0.70);
    --detail-report-bg: rgba(13, 17, 23, 0.55);
    --logo-bg:          rgba(63, 185, 80, 0.10);
    --shadow-card:      0 8px 32px rgba(1, 4, 9, 0.60);
    --shadow-login:     0 24px 56px rgba(1, 4, 9, 0.70), 0 0 60px rgba(31, 111, 235, 0.08);
    --backdrop-blur:    blur(10px);
    --backdrop-blur-heavy: blur(18px);
    --scrollbar-thumb:  rgba(48, 54, 61, 0.80);
}

/* ── JETBRAINS (Darcula) ────────────────────────────────────────────────────── */
[data-theme="jetbrains"] {
    --bg-primary:       #1e1f22;
    --bg-secondary:     #2b2d30;
    --bg-card:          rgba(43, 45, 48, 0.92);
    --bg-input:         rgba(30, 31, 34, 0.80);
    --bg-input-hover:   rgba(43, 45, 48, 0.96);
    --bg-hover:         rgba(77, 80, 84, 0.30);
    --bg-sidebar:       rgba(30, 31, 34, 0.99);
    --bg-topbar:        rgba(30, 31, 34, 0.75);
    --bg-dropdown:      rgba(43, 45, 48, 0.99);
    --bg-loader:        #1e1f22;
    --bg-modal:         rgba(43, 45, 48, 0.99);
    --bg-tag:           rgba(77, 80, 84, 0.35);
    --bg-stat-card:     rgba(43, 45, 48, 0.88);
    --bg-login-card:    rgba(43, 45, 48, 0.96);
    --bg-gradient-1:    rgba(255, 140, 0, 0.08);
    --bg-gradient-2:    rgba(152, 118, 170, 0.08);
    --bg-glow-start:    #2b2d30;
    --bg-glow-end:      #cc7832;
    --border:           rgba(77, 80, 84, 0.80);
    --border-subtle:    rgba(77, 80, 84, 0.50);
    --border-focus:     #cc7832;
    --border-card:      rgba(77, 80, 84, 0.75);
    --border-input:     rgba(77, 80, 84, 0.70);
    --text-primary:     #bcbec4;
    --text-secondary:   #a8acb3;
    --text-body:        #9da0a8;
    --text-muted:       #7a7e85;
    --text-subtle:      #5a5d63;
    --text-placeholder: rgba(122, 126, 133, 0.55);
    --accent:           #cc7832;
    --accent-hover:     #e0903c;
    --accent-glow:      rgba(204, 120, 50, 0.28);
    --accent-soft:      rgba(204, 120, 50, 0.12);
    --accent-soft-border: rgba(204, 120, 50, 0.28);
    --accent-gradient:  linear-gradient(135deg, #cc7832, #9876aa);
    --accent-text:      #cc7832;
    --success:          #6a8759;
    --success-soft:     rgba(106, 135, 89, 0.14);
    --success-text:     #6a8759;
    --warning:          #cca009;
    --warning-soft:     rgba(204, 160, 9, 0.12);
    --error:            #ff6b68;
    --error-soft:       rgba(255, 107, 104, 0.12);
    --error-text:       #ff6b68;
    --critical:         #ff6b68;
    --code-bg:          #1e1f22;
    --code-text:        #a9b7c6;
    --code-inline-bg:   rgba(77, 80, 84, 0.30);
    --shimmer-a:        rgba(43, 45, 48, 0.70);
    --shimmer-b:        rgba(60, 63, 65, 0.90);
    --history-item-bg:  rgba(43, 45, 48, 0.70);
    --history-item-hover-bg: rgba(43, 45, 48, 0.96);
    --history-item-hover-border: rgba(204, 120, 50, 0.38);
    --detail-meta-bg:   rgba(30, 31, 34, 0.70);
    --detail-report-bg: rgba(30, 31, 34, 0.55);
    --logo-bg:          rgba(204, 120, 50, 0.12);
    --shadow-card:      0 8px 32px rgba(0, 0, 0, 0.50);
    --shadow-login:     0 24px 56px rgba(0, 0, 0, 0.65), 0 0 60px rgba(204, 120, 50, 0.08);
    --backdrop-blur:    blur(10px);
    --backdrop-blur-heavy: blur(18px);
    --scrollbar-thumb:  rgba(77, 80, 84, 0.60);
}