/* ============================================================
   DCH Tool — Premium UI Styles (Light/Dark Mode, Glassmorphism)
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

   *, *::before, *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   /* ── Light Theme Variables ── */
   :root {
       --brand:       #4f46e5;
       --brand-hover: #4338ca;
       --brand-glow:  rgba(79, 70, 229, 0.25);
       --danger:      #ef4444;
       --success:     #10b981;
       --warning:     #f59e0b;
       
       --bg-base:     #f8fafc;
       --bg-surface:  rgba(255, 255, 255, 0.85);
       --bg-card:     #ffffff;
       --bg-input:    #f1f5f9;
       
       --border:      #e2e8f0;
       --border-glow: rgba(79, 70, 229, 0.3);
       
       --text-title:  #0f172a;
       --text-1:      #334155;
       --text-2:      #475569;
       --text-3:      #64748b;
       
       --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
       --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
       
       --sidebar-w:   260px;
       --topbar-h:    72px;
   }
   
   /* ── Dark Theme Variables ── */
   html.dark {
       --brand:       #6366f1;
       --brand-hover: #818cf8;
       --brand-glow:  rgba(99, 102, 241, 0.4);
       --danger:      #f87171;
       --success:     #10b981; /* adjusted slightly for dark */
       --warning:     #fbbf24;
       
       --bg-base:     #09090b;       /* Very deep zinc */
       --bg-surface:  rgba(24, 24, 27, 0.7); /* Translucent zinc-900 */
       --bg-card:     rgba(39, 39, 42, 0.6);   /* Zinc-800 glass */
       --bg-input:    rgba(63, 63, 70, 0.5);   /* Zinc-700 */
       
       --border:      rgba(255,255,255,0.08); /* subtle white border */
       --border-glow: rgba(99, 102, 241, 0.5);
       
       --text-title:  #fafafa;
       --text-1:      #f4f4f5;
       --text-2:      #a1a1aa;
       --text-3:      #71717a;
       
       --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
       --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
       --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
       --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   }
   
   html, body {
       font-family: 'Inter', sans-serif;
       background-color: var(--bg-base);
       background-image: radial-gradient(circle at top right, rgba(99,102,241,0.08) 0%, transparent 40%),
                         radial-gradient(circle at bottom left, rgba(236,72,153,0.05) 0%, transparent 40%);
       background-attachment: fixed;
       color: var(--text-1);
       min-height: 100vh;
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       transition: background-color 0.4s ease, color 0.4s ease;
   }
   
   h1, h2, h3, h4, h5, h6, .brand-font {
       font-family: 'Outfit', sans-serif;
   }
   
   /* ── Scrollbar ───────────────────────────────── */
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); border-radius: 3px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--brand); }
   
   /* ── Layout ──────────────────────────────────── */
   #app {
       display: flex;
       width: 100vw;
       height: 100vh;
       overflow: hidden;
   }
   
   .sidebar {
       width: var(--sidebar-w);
       height: 100vh;
       background: var(--bg-surface);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border-right: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       transition: transform 0.3s ease, background-color 0.4s ease, border-color 0.4s ease;
       overflow-y: auto;
       box-shadow: 2px 0 20px rgba(0,0,0,0.02);
       flex-shrink: 0;
   }
   html.dark .sidebar { box-shadow: 2px 0 20px rgba(0,0,0,0.2); }
   
   .sidebar-logo {
       padding: 28px 24px 20px;
       display: flex;
       align-items: center;
       gap: 14px;
   }
   
   .sidebar-logo .logo-icon {
       width: 44px;
       height: 44px;
       background: linear-gradient(135deg, var(--brand), #8b5cf6);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       box-shadow: 0 6px 16px var(--brand-glow), inset 0 2px 4px rgba(255,255,255,0.3);
       flex-shrink: 0;
   }
   
   .sidebar-logo .logo-text {
       display: flex;
       flex-direction: column;
   }
   .sidebar-logo .logo-text strong {
       font-size: 19px;
       font-family: 'Outfit', sans-serif;
       font-weight: 800;
       letter-spacing: -0.01em;
       color: var(--text-title);
   }
   .sidebar-logo .logo-text span {
       font-size: 12px;
       color: var(--text-3);
       font-weight: 500;
       letter-spacing: 0.02em;
   }
   
   .sidebar-nav {
       padding: 12px 12px;
       flex: 1;
   }
   
   .nav-section-title {
       padding: 18px 16px 8px;
       font-size: 11px;
       font-family: 'Outfit', sans-serif;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-3);
   }
   
   .nav-item {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 12px 16px;
       margin-bottom: 4px;
       border-radius: 10px;
       cursor: pointer;
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       font-size: 14px;
       font-weight: 600;
       color: var(--text-2);
       border: 1px solid transparent;
       background: transparent;
       width: 100%;
       text-align: left;
       position: relative;
       overflow: hidden;
   }
   
   .nav-item:hover {
       background: var(--bg-card);
       color: var(--text-title);
       border-color: var(--border);
       transform: translateX(4px);
   }
   
   .nav-item.active {
       background: var(--brand);
       color: white;
       box-shadow: 0 4px 12px var(--brand-glow);
       border-color: transparent;
   }
   .nav-item.active .nav-icon { color: white; }
   
   .nav-item .nav-icon {
       font-size: 18px;
       width: 22px;
       text-align: center;
       flex-shrink: 0;
       transition: transform 0.2s;
   }
   .nav-item:hover .nav-icon { transform: scale(1.1); }
   
   /* ── Main Content Area ───────────────────────── */
   .main {
       flex: 1;
       display: flex;
       flex-direction: column;
       height: 100vh;
       overflow-y: auto;
   }
   
   .topbar {
       height: var(--topbar-h);
       background: var(--bg-surface);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
       display: flex;
       align-items: center;
       padding: 0 32px;
       gap: 16px;
       position: sticky;
       top: 0;
       z-index: 50;
       transition: background-color 0.4s ease, border-color 0.4s ease;
   }
   
   .topbar-title {
       font-size: 18px;
       font-family: 'Outfit', sans-serif;
       font-weight: 700;
       color: var(--text-title);
   }
   
   .topbar-spacer { flex: 1; }
   
   .theme-toggle-btn {
       background: none;
       border: 1px solid var(--border);
       color: var(--text-2);
       width: 38px;
       height: 38px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       background-color: var(--bg-card);
       transition: all 0.2s ease;
       font-size: 16px;
   }
   .theme-toggle-btn:hover {
       color: var(--text-title);
       border-color: var(--brand);
       transform: translateY(-1px);
       box-shadow: var(--shadow-sm);
   }
   
   .status-dot {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       font-weight: 500;
       color: var(--text-2);
       background: var(--bg-card);
       padding: 6px 14px;
       border-radius: 99px;
       border: 1px solid var(--border);
   }
   
   .status-dot::before {
       content: '';
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--success);
       animation: pulse-green 2s infinite;
   }
   
   @keyframes pulse-green {
       0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
       50%       { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
   }
   
   .page-content {
       padding: 32px;
       flex: 1;
       max-width: 1400px;
       margin: 0 auto;
       width: 100%;
       animation: fadeIn 0.4s ease-out;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(10px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   /* ── Cards ───────────────────────────────────── */
   .card {
       background: var(--bg-card);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 28px;
       box-shadow: var(--shadow-glass);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .card:hover { 
       border-color: var(--border-glow); 
       box-shadow: var(--shadow-lg), 0 0 20px var(--brand-glow);
   }
   
   .card-title {
       font-family: 'Outfit', sans-serif;
       font-size: 18px;
       font-weight: 700;
       color: var(--text-title);
       margin-bottom: 6px;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .card-subtitle {
       font-size: 14px;
       color: var(--text-3);
       margin-bottom: 24px;
   }
   
   .stat-card {
       background: var(--bg-card);
       backdrop-filter: blur(12px);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 24px;
       display: flex;
       align-items: center;
       gap: 20px;
       box-shadow: var(--shadow-glass);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }
   
   .stat-card::before {
       content: "";
       position: absolute;
       top: 0; left: 0; right: 0; height: 3px;
       background: linear-gradient(90deg, var(--brand), transparent);
       opacity: 0;
       transition: opacity 0.3s;
   }
   
   .stat-card:hover {
       border-color: var(--border-glow);
       transform: translateY(-4px);
       box-shadow: var(--shadow-lg), 0 0 20px var(--brand-glow);
   }
   .stat-card:hover::before { opacity: 1; }
   
   .stat-icon {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 26px;
       flex-shrink: 0;
       background: var(--bg-input);
       box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
   }
   
   .stat-value {
       font-family: 'Outfit', sans-serif;
       font-size: 32px;
       font-weight: 800;
       color: var(--text-title);
       line-height: 1.1;
   }
   
   .stat-label {
       font-size: 14px;
       font-weight: 500;
       color: var(--text-3);
       margin-top: 4px;
   }
   
   /* ── Forms ───────────────────────────────────── */
   .form-group {
       margin-bottom: 20px;
   }
   
   .form-label {
       display: block;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-2);
       margin-bottom: 8px;
   }
   
   .form-input,
   .form-select,
   .form-textarea {
       width: 100%;
       background: var(--bg-input);
       border: 1px solid var(--border);
       border-radius: 10px;
       padding: 12px 16px;
       font-size: 14px;
       color: var(--text-1);
       font-family: 'Inter', sans-serif;
       transition: all 0.2s;
       outline: none;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
   }
   html.dark .form-input, html.dark .form-select, html.dark .form-textarea {
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
   }
   
   .form-input:focus,
   .form-select:focus,
   .form-textarea:focus {
       background: var(--bg-card);
       border-color: var(--brand);
       box-shadow: 0 0 0 4px var(--brand-glow), inset 0 1px 2px rgba(0,0,0,0.02);
   }
   
   .form-input::placeholder,
   .form-textarea::placeholder { color: var(--text-3); }
   
   .form-select { cursor: pointer; }
   .form-select option { background: var(--bg-card); color: var(--text-1); }
   
   .form-textarea {
       resize: vertical;
       min-height: 120px;
   }
   
   /* ── Buttons ─────────────────────────────────── */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       padding: 12px 24px;
       border-radius: 10px;
       font-size: 14px;
       font-weight: 600;
       border: 1px solid transparent;
       cursor: pointer;
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       font-family: 'Inter', sans-serif;
       text-decoration: none;
       white-space: nowrap;
   }
   
   .btn:disabled {
       opacity: 0.6;
       cursor: not-allowed;
       filter: grayscale(0.5);
       transform: none !important;
       box-shadow: none !important;
   }
   
   .btn-primary {
       background: linear-gradient(135deg, var(--brand), #a855f7);
       color: white;
       box-shadow: 0 4px 14px var(--brand-glow);
       border: none;
   }
   
   .btn-primary:hover:not(:disabled) {
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
   }
   
   .btn-danger {
       background: linear-gradient(135deg, var(--danger), #dc2626);
       color: white;
       box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
       border: none;
   }
   
   .btn-danger:hover:not(:disabled) {
       transform: translateY(-2px);
   }
   
   .btn-success {
       background: linear-gradient(135deg, var(--success), #059669);
       color: white;
       box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
       border: none;
   }
   
   .btn-success:hover:not(:disabled) {
       transform: translateY(-2px);
   }
   
   .btn-ghost {
       background: var(--bg-input);
       color: var(--text-2);
       border: 1px solid var(--border);
   }
   .btn-ghost:hover:not(:disabled) {
       background: var(--bg-card);
       color: var(--text-title);
       border-color: var(--text-3);
       transform: translateY(-1px);
       box-shadow: var(--shadow-sm);
   }
   
   .btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
   .btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 12px; }
   
   /* ── Tabs ────────────────────────────────────── */
   .tabs {
       display: flex;
       gap: 6px;
       background: var(--bg-input);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 6px;
       width: fit-content;
       margin-bottom: 28px;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
   }
   html.dark .tabs { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
   
   .tab {
       padding: 10px 20px;
       border-radius: 8px;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-3);
       cursor: pointer;
       transition: all 0.2s ease;
       border: none;
       background: transparent;
       font-family: 'Inter', sans-serif;
   }
   
   .tab.active {
       background: var(--bg-card);
       color: var(--text-title);
       box-shadow: var(--shadow-md);
   }
   
   .tab:hover:not(.active) { color: var(--text-1); }
   
   /* ── Dropzone ────────────────────────────────── */
   .dropzone {
       border: 2px dashed var(--border);
       border-radius: 16px;
       padding: 48px 24px;
       text-align: center;
       cursor: pointer;
       transition: all 0.3s;
       background: var(--bg-input);
   }
   
   .dropzone:hover,
   .dropzone.drag-over {
       border-color: var(--brand);
       background: rgba(79, 70, 229, 0.05);
       transform: scale(1.01);
   }
   html.dark .dropzone:hover, html.dark .dropzone.drag-over {
       background: rgba(99, 102, 241, 0.08);
   }
   
   .dropzone-icon { font-size: 42px; margin-bottom: 16px; transition: transform 0.3s; }
   .dropzone:hover .dropzone-icon { transform: translateY(-4px); }
   
   .dropzone-text { color: var(--text-1); font-size: 15px; font-weight: 600; }
   .dropzone-hint { color: var(--text-3); font-size: 13px; margin-top: 8px; }
   
   .preview-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 12px;
       margin-top: 20px;
   }
   
   .preview-thumb {
       position: relative;
       border-radius: 10px;
       overflow: hidden;
       border: 1px solid var(--border);
       aspect-ratio: 16/9;
       background: var(--bg-input);
       box-shadow: var(--shadow-sm);
   }
   
   .preview-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.3s;
   }
   .preview-thumb:hover img { transform: scale(1.05); }
   
   .preview-thumb-remove {
       position: absolute;
       top: 6px;
       right: 6px;
       background: rgba(0,0,0,0.6);
       backdrop-filter: blur(4px);
       color: white;
       border: none;
       border-radius: 50%;
       width: 26px;
       height: 26px;
       font-size: 12px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background 0.2s, transform 0.2s;
   }
   .preview-thumb-remove:hover { background: var(--danger); transform: scale(1.1); }
   
   /* ── Split review panel ──────────────────────── */
   .split-panel {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 24px;
       align-items: start;
   }
   
   .email-preview-frame {
       background: white; /* Keep preview strictly white for accurate email representation */
       border-radius: 0 0 16px 16px;
       overflow: hidden;
       max-height: 600px;
       overflow-y: auto;
   }
   
   /* ── Issues list ─────────────────────────────── */
   .issue-item {
       display: flex;
       gap: 16px;
       padding: 16px 20px;
       background: rgba(239, 68, 68, 0.05);
       border: 1px solid rgba(239, 68, 68, 0.2);
       border-radius: 12px;
       margin-bottom: 12px;
       font-size: 14px;
       color: var(--text-1);
       line-height: 1.6;
       transition: all 0.2s;
   }
   
   .issue-item:hover { 
       background: rgba(239, 68, 68, 0.1); 
       transform: translateX(2px);
   }
   
   .issue-num {
       min-width: 28px;
       height: 28px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--danger), #b91c1c);
       color: white;
       font-size: 13px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       box-shadow: 0 2px 6px rgba(239,68,68,0.3);
   }
   
   /* ── Badges ──────────────────────────────────── */
   .badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 12px;
       border-radius: 99px;
       font-size: 12px;
       font-weight: 700;
       border: 1px solid transparent;
   }
   .badge-success { background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16,185,129,0.2); }
   .badge-danger  { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: rgba(239,68,68,0.2); }
   .badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); border-color: rgba(245,158,11,0.2); }
   .badge-info    { background: rgba(79, 70, 229, 0.1); color: var(--brand); border-color: rgba(79,70,229,0.2); }
   
   /* ── Toast ───────────────────────────────────── */
   .toast-container {
       position: fixed;
       bottom: 32px;
       right: 32px;
       z-index: 9999;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .toast {
       display: flex;
       align-items: center;
       gap: 16px;
       background: var(--bg-card);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 16px 20px;
       font-size: 14px;
       font-weight: 500;
       min-width: 320px;
       max-width: 460px;
       box-shadow: var(--shadow-lg), 0 10px 40px rgba(0,0,0,0.1);
       animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   
   .toast-success { border-left: 4px solid var(--success); }
   .toast-error   { border-left: 4px solid var(--danger); }
   .toast-info    { border-left: 4px solid var(--brand); }
   
   @keyframes slideIn {
       from { opacity: 0; transform: translateX(40px) scale(0.95); }
       to   { opacity: 1; transform: translateX(0) scale(1); }
   }
   
   /* ── Loader / Spinner ────────────────────────── */
   .spinner {
       width: 22px;
       height: 22px;
       border: 3px solid rgba(255,255,255,0.2);
       border-top-color: white;
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
       flex-shrink: 0;
   }
   
   .spinner-brand {
       border-color: var(--brand-glow);
       border-top-color: var(--brand);
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   .loading-overlay {
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, 0.6); /* Slate tint overlay */
       z-index: 9990;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 24px;
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
   }
   html.dark .loading-overlay { background: rgba(9, 9, 11, 0.8); }
   
   .loading-orb {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       border: 4px solid transparent;
       border-top-color: var(--brand);
       border-left-color: #a855f7;
       animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
       filter: drop-shadow(0 0 20px var(--brand-glow));
   }
   
   .loading-text {
       font-size: 18px;
       font-family: 'Outfit', sans-serif;
       font-weight: 700;
       color: #fff;
       text-align: center;
       text-shadow: 0 2px 4px rgba(0,0,0,0.5);
   }
   
   /* ── Table ───────────────────────────────────── */
   .data-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 14px;
   }
   
   .data-table th {
       text-align: left;
       padding: 16px 20px;
       background: var(--bg-input);
       color: var(--text-3);
       font-size: 11px;
       font-family: 'Outfit', sans-serif;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       border-bottom: 2px solid var(--border);
   }
   
   .data-table td {
       padding: 16px 20px;
       border-bottom: 1px solid var(--border);
       color: var(--text-1);
       vertical-align: middle;
   }
   
   .data-table tr:hover td { background: var(--bg-input); }
   .data-table tr:last-child td { border-bottom: none; }
   
   /* ── Empty State ─────────────────────────────── */
   .empty-state {
       text-align: center;
       padding: 80px 20px;
       color: var(--text-3);
       background: var(--bg-input);
       border-radius: 16px;
       border: 1px dashed var(--border);
   }
   
   .empty-state .empty-icon { font-size: 56px; margin-bottom: 20px; filter: grayscale(0.5); opacity: 0.7; }
   .empty-state h3 { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
   
   /* ── Section heading ─────────────────────────── */
   .section-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 32px;
   }
   
   .section-title {
       font-family: 'Outfit', sans-serif;
       font-size: 28px;
       font-weight: 800;
       letter-spacing: -0.02em;
       color: var(--text-title);
   }
   
   .section-desc {
       font-size: 15px;
       color: var(--text-3);
       margin-top: 4px;
   }
   
   /* ── Divider ─────────────────────────────────── */
   .divider {
       border: none;
       border-top: 1px solid var(--border);
       margin: 32px 0;
   }
   
   /* ── Utility ─────────────────────────────────── */
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
   .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
   
   @media (max-width: 1024px) {
       .grid-4 { grid-template-columns: repeat(2, 1fr); }
       .split-panel { grid-template-columns: 1fr; }
   }
   @media (max-width: 768px) {
       .grid-2, .grid-3 { grid-template-columns: 1fr; }
   }
   
   .mt-4  { margin-top: 4px; }
   .mt-8  { margin-top: 8px; }
   .mt-12 { margin-top: 12px; }
   .mt-16 { margin-top: 16px; }
   .mt-24 { margin-top: 24px; }
   .mb-8  { margin-bottom: 8px; }
   .mb-16 { margin-bottom: 16px; }
   .mb-24 { margin-bottom: 24px; }
   .text-muted { color: var(--text-3); }
   .text-sm    { font-size: 13px; }
   .text-xs    { font-size: 12px; }
   .font-bold  { font-weight: 700; }
   .flex       { display: flex; }
   .flex-col   { flex-direction: column; }
   .items-center { align-items: center; }
   .justify-between { justify-content: space-between; }
   .gap-8  { gap: 8px; }
   .gap-12 { gap: 12px; }
   .gap-16 { gap: 16px; }
   .w-full { width: 100%; }
   
   /* ── Glow border on focus group ──────────────── */
   .glow-section {
       border: 1px solid transparent;
       border-radius: 16px;
       padding: 24px;
       background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
                   linear-gradient(135deg, rgba(99,102,241,0.5), rgba(168,85,247,0.5)) border-box;
       margin-bottom: 24px;
       box-shadow: var(--shadow-sm);
   }
   
   /* ── Code / mono ─────────────────────────────── */
   .mono {
       font-family: 'Courier New', monospace;
       background: var(--bg-input);
       padding: 4px 8px;
       border-radius: 6px;
       font-size: 12px;
       color: var(--brand);
       font-weight: 600;
       border: 1px solid var(--border);
   }