/* ═══════════════════════════════════════════════════════════════════════════
   REZDER — App Theme Patch
   DROP THIS AFTER shell-v4.css on every app page.
   Fixes:
     • Blue → Violet color alignment across all pages
     • Dark mode for every page-specific component
     • job_search, cover_letter, resume_optimizer, jobs, company_optimizer
     • builder dark mode (editor, panels, preview area)
     • Consistent glass panels in light + dark
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────── */
/* 1. OVERRIDE LOCAL BLUE → VIOLET                                              */
/*    Some pages hardcode --primary: #2563eb locally. We force violet back.   */
/* ─────────────────────────────────────────────────────────────────────────── */

/* These pages define :root { --primary: #2563eb } inside <style>.
   We override with higher-specificity rules on html/body. */
html body {
  --primary: var(--brand, #534AB7);
  --primary-hover: var(--brand-dark, #3d3690);
  --primary-bg: rgba(83,74,183,0.10);
}

body.dark-mode,
.dark,
.dark-mode {
  --primary: #7F77DD !important;
  --primary-hover: #9d97e8 !important;
  --primary-bg: rgba(127,119,221,0.15) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 2. CINEMATIC GLASS SYSTEM — builder-style ultra-transparent glass           */
/*    All panels get: subtle white fill, 24px blur, thin glass border,        */
/*    inner edge highlight. Inspired by the builder sidebar (.glass-panel).    */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Master glass token — ResumeElite Bento Glass-Card Specification */
.glass-panel,
.jm-input-panel, .jm-results-panel,
.co-left, .co-right,
.cl-input, .cl-output,
.job-filters, .job-results,
.glass-card,
.login-box,
.login-card,
.auth-modal,
.modal-content,
.modal-box,
.modal-box2,
.ttn-card,
.tmpl-card,
.resume-card,
.resume-card-new {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border-radius: 2rem !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 
    inset 1px 1px 0px rgba(255, 255, 255, 0.30), 
    inset -1px -1px 0px rgba(0, 0, 0, 0.10), 
    0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

/* Light mode — translucent white (visible on light backgrounds) */
/* Scoped to non-builder pages — builder uses ultra-transparent glass */
body:not(.cinematic-builder) .glass-panel,
.jm-input-panel, .co-left, .cl-input, .job-filters {
  background: rgba(255,255,255,0.50) !important;
}
.jm-results-panel, .co-right, .cl-output, .job-results {
  background: rgba(255,255,255,0.35) !important;
}

/* Dark mode — ultra-transparent, same as builder sidebar */
body.dark-mode .glass-panel,
body.dark-mode .jm-input-panel,
body.dark-mode .co-left,
body.dark-mode .cl-input,
body.dark-mode .job-filters,
body.dark-mode .jm-results-panel,
body.dark-mode .co-right,
body.dark-mode .cl-output,
body.dark-mode .job-results {
  background: rgba(255,255,255,0.03) !important;
}

/* Scrollbar thumbs in dark glass panels */
body.dark-mode .jm-input-panel::-webkit-scrollbar-thumb,
body.dark-mode .co-left::-webkit-scrollbar-thumb,
body.dark-mode .cl-input::-webkit-scrollbar-thumb,
body.dark-mode .jm-results-panel::-webkit-scrollbar-thumb,
body.dark-mode .co-right::-webkit-scrollbar-thumb {
  background: rgba(83,74,183,0.35) !important;
}

/* Scroll Edge Blur / Fade Mask for ATS Optimizer */
.jm-input-panel,
.jm-results-panel {
  mask-image: linear-gradient(to bottom, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 3. PANEL CARDS (.panel used by company_optimizer, resume_optimizer)         */
/* ─────────────────────────────────────────────────────────────────────────── */

.panel {
  background: var(--bg-2, #fff);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dark-mode .panel {
  background: rgba(15,14,28,0.80) !important;
  border-color: rgba(83,74,183,0.20) !important;
  color: var(--text) !important;
}
body.dark-mode .panel-title { color: var(--text) !important; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 4. INPUT TABS (resume_optimizer, jobs)                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

.input-tabs {
  display: flex;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.input-tab {
  flex: 1;
  padding: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-2);
  transition: all 150ms;
  background: transparent;
}
.input-tab:hover { color: var(--text); background: var(--brand-subtle); }
.input-tab.active { background: var(--brand); color: #fff; }

body.dark-mode .input-tabs {
  border-color: rgba(83,74,183,0.25) !important;
}
body.dark-mode .input-tab { color: var(--text-2) !important; }
body.dark-mode .input-tab:hover {
  background: rgba(83,74,183,0.18) !important;
  color: var(--text) !important;
}
body.dark-mode .input-tab.active {
  background: rgba(83,74,183,0.85) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 5. ATS / SCORE RINGS & HERO CARDS                                           */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ATS ring card — replace hardcoded blue */
.ats-ring-card {
  background: var(--brand-subtle) !important;
  border: 0.5px solid var(--brand-subtle-border) !important;
  color: var(--text);
}
body.dark-mode .ats-ring-card {
  background: rgba(83,74,183,0.12) !important;
  border-color: rgba(127,119,221,0.30) !important;
}
.ats-ring-num { color: var(--primary) !important; }

/* Score Hero — keep gradient but shift to violet brand */
.score-hero {
  background: linear-gradient(135deg, #1e1b4b 0%, var(--brand-dark, #3d3690) 50%, var(--brand, #534AB7) 100%) !important;
}

/* Section score bars */
.score-stat {
  background: rgba(255,255,255,0.10) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 6. KEYWORD / MATCH CHIPS                                                     */
/* ─────────────────────────────────────────────────────────────────────────── */

.kw-matched, .keyword-matched, [class*="matched"] {
  background: rgba(29,158,117,0.15);
  color: #5DCAA5;
  border: 0.5px solid rgba(93,202,165,0.35);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
}
.kw-missing, .keyword-missing, [class*="missing-kw"] {
  background: rgba(239,68,68,0.10);
  color: #f87171;
  border: 0.5px solid rgba(239,68,68,0.25);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 7. JOB SEARCH PAGE SPECIFIC                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Job filter sidebar */
body.dark-mode .job-filters {
  background: rgba(7,7,14,0.88) !important;
  border-right-color: rgba(83,74,183,0.22) !important;
}
body.dark-mode .filter-label { color: var(--text-2) !important; }
body.dark-mode .filter-section { color: var(--text) !important; }

/* Search box */
body.dark-mode .search-box input {
  background: rgba(15,14,28,0.90) !important;
  border-color: rgba(83,74,183,0.28) !important;
  color: var(--text) !important;
}
body.dark-mode .search-box input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(83,74,183,0.18) !important;
}

/* Active filter tags — replace hardcoded blue */
.active-filter-tag {
  background: var(--brand-subtle) !important;
  color: var(--primary) !important;
  border-color: var(--brand-subtle-border) !important;
}
body.dark-mode .active-filter-tag {
  background: rgba(83,74,183,0.18) !important;
  color: var(--brand-light) !important;
  border-color: rgba(127,119,221,0.35) !important;
}

/* Clear all btn */
.clear-all-btn {
  background: rgba(239,68,68,0.10) !important;
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.25) !important;
}

/* Job cards */
.job-card {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  transition: all 150ms;
}
.job-card:hover {
  border-color: var(--brand-subtle-border);
  box-shadow: 0 4px 16px rgba(83,74,183,0.12);
}

body.dark-mode .job-card {
  background: rgba(15,14,28,0.80) !important;
  border-color: rgba(83,74,183,0.20) !important;
}
body.dark-mode .job-card:hover {
  border-color: rgba(127,119,221,0.40) !important;
}
body.dark-mode .job-card h3,
body.dark-mode .job-card .job-title { color: var(--text) !important; }
body.dark-mode .job-card .job-company,
body.dark-mode .job-card .job-location,
body.dark-mode .job-card .job-meta { color: var(--text-2) !important; }

/* Toast overrides for job search page */
body.dark-mode .rz-toast {
  background: rgba(15,14,28,0.97) !important;
  border: 0.5px solid rgba(83,74,183,0.40) !important;
  color: var(--text) !important;
}
body.dark-mode .rz-toast.success { background: rgba(29,158,117,0.25) !important; border-color: rgba(93,202,165,0.40) !important; color: var(--text) !important; }
body.dark-mode .rz-toast.error   { background: rgba(239,68,68,0.20) !important; border-color: rgba(239,68,68,0.40) !important; color: var(--text) !important; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 8. COMPANY OPTIMIZER PAGE                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Company chips */
.co-chip {
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  transition: all 150ms;
}
.co-chip:hover {
  border-color: var(--brand-subtle-border);
  background: var(--brand-subtle);
}
.co-chip.selected {
  border-color: var(--brand);
  background: var(--brand-subtle);
  box-shadow: 0 0 0 2px rgba(83,74,183,0.20);
}
.co-chip-name { color: var(--text); }

body.dark-mode .co-chip {
  background: rgba(15,14,28,0.70) !important;
  border-color: rgba(83,74,183,0.20) !important;
}
body.dark-mode .co-chip:hover {
  border-color: rgba(127,119,221,0.45) !important;
  background: rgba(83,74,183,0.15) !important;
}
body.dark-mode .co-chip.selected {
  border-color: var(--brand) !important;
  background: rgba(83,74,183,0.20) !important;
  box-shadow: 0 0 0 2px rgba(83,74,183,0.25) !important;
}
body.dark-mode .co-chip-name { color: var(--text) !important; }
body.dark-mode .co-chip-tone { color: var(--text-3) !important; }

/* Auto-detect badge */
.auto-badge {
  background: rgba(29,158,117,0.12) !important;
  border-color: rgba(93,202,165,0.35) !important;
  color: #5DCAA5 !important;
}

/* Optimize btn */
.optimize-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
  border: none;
}
.optimize-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-light), var(--brand)) !important;
  box-shadow: 0 4px 20px rgba(83,74,183,0.35) !important;
}

/* Result cards */
body.dark-mode .result-hero,
body.dark-mode .result-card {
  background: rgba(15,14,28,0.80) !important;
  border-color: rgba(83,74,183,0.20) !important;
  color: var(--text) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 9. COVER LETTER PAGE                                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Tone buttons */
.tone-btn {
  padding: 7px 4px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  transition: all 150ms;
  background: var(--bg-2);
}
.tone-btn:hover {
  border-color: var(--brand-subtle-border);
  color: var(--primary);
  background: var(--brand-subtle);
}
.tone-btn.active {
  border-color: var(--brand);
  background: var(--brand-subtle);
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(83,74,183,0.15);
}

body.dark-mode .tone-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(83,74,183,0.22) !important;
  color: var(--text-2) !important;
}
body.dark-mode .tone-btn:hover {
  border-color: rgba(127,119,221,0.40) !important;
  background: rgba(83,74,183,0.15) !important;
  color: var(--text) !important;
}
body.dark-mode .tone-btn.active {
  border-color: var(--brand) !important;
  background: rgba(83,74,183,0.22) !important;
  color: var(--brand-light) !important;
}

/* Cover letter output result box */
body.dark-mode #coverLetterResult {
  background: rgba(29,158,117,0.08) !important;
  border-color: rgba(93,202,165,0.25) !important;
  color: var(--text) !important;
}
body.dark-mode #coverLetterContent {
  color: var(--text) !important;
}

/* Cover letter list item styling (Saved Letters list) */
.cover-letter-item {
  background: var(--bg-2, #fff) !important;
  border: 0.5px solid var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .cover-letter-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(83, 74, 183, 0.22) !important;
  color: var(--text) !important;
}
body.dark-mode .cover-letter-item:hover {
  border-color: rgba(127, 119, 221, 0.45) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 10. BUILDER PAGE DARK MODE                                                   */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Preview area background */
body.dark-mode .builder-preview {
  background: rgba(7,7,14,0.70) !important;
}

/* Preview page (the A4 white paper) — keep white always */
.preview-page {
  background: #fff !important;
  color: #000 !important;
}

/* Preview wrapper dark bg */
body.dark-mode .preview-wrapper,
body.dark-mode #previewWrapper,
body.dark-mode .builder-preview > div:first-child {
  background: #14131f !important;
}

/* Template preview box */
body.dark-mode #templatePreview {
  background: rgba(15,14,28,0.80) !important;
  border-color: rgba(83,74,183,0.25) !important;
  color: var(--text-2) !important;
}

/* Layout options dark mode */
body.dark-mode .layout-option {
  background: rgba(15,14,28,0.70) !important;
  border-color: rgba(83,74,183,0.22) !important;
  color: var(--text) !important;
}
body.dark-mode .layout-option:hover {
  border-color: var(--brand-light) !important;
  background: rgba(83,74,183,0.15) !important;
}
body.dark-mode .layout-option.selected {
  border-color: var(--brand) !important;
  background: var(--brand-subtle) !important;
}

/* Section resize handle */
body.dark-mode .section-resize-handle {
  background: #14131f !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important;
}

/* AI tool cards */
body.dark-mode .ai-tool-card,
body.dark-mode .ai-feature-card {
  background: rgba(15,14,28,0.80) !important;
  border-color: rgba(83,74,183,0.20) !important;
  color: var(--text) !important;
}

/* Experience / education / skills cards in editor */
body.dark-mode .exp-card,
body.dark-mode .edu-card,
body.dark-mode .skill-tag,
body.dark-mode .cert-card,
body.dark-mode .proj-card {
  background: rgba(15,14,28,0.70) !important;
  border-color: rgba(83,74,183,0.20) !important;
  color: var(--text) !important;
}
body.dark-mode .exp-card:hover,
body.dark-mode .edu-card:hover,
body.dark-mode .proj-card:hover {
  border-color: rgba(127,119,221,0.40) !important;
}

/* ATS score panel in builder sidebar */
body.dark-mode .ats-score-panel,
body.dark-mode .ats-mini {
  background: rgba(15,14,28,0.80) !important;
  border-color: rgba(83,74,183,0.20) !important;
}

/* One-page indicator */
body.dark-mode .onepage-status.ok     { background: rgba(29,158,117,0.10) !important; border-color: rgba(93,202,165,0.25) !important; }
body.dark-mode .onepage-status.light  { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.22) !important; }
body.dark-mode .onepage-status.heavy  { background: rgba(239,68,68,0.09) !important; border-color: rgba(239,68,68,0.25) !important; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 11. DARK MODE TOGGLE BUTTON (builder uses id="darkModeBtn")                 */
/* ─────────────────────────────────────────────────────────────────────────── */

#darkModeBtn {
  font-size: 14px;
  min-width: 34px;
}
body.dark-mode #darkModeBtn {
  background: rgba(83,74,183,0.20) !important;
  border-color: rgba(127,119,221,0.40) !important;
  color: var(--brand-light) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 12. SHARED DARK MODE — TEXT, BORDERS, MISC                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Any hardcoded white bg that bleeds through */
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: white"] {
  /* Can't override inline styles with CSS — handled per-component above */
}

/* Section headings */
body.dark-mode .section-title:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode .page-title:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode .card-title:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) { color: var(--text) !important; }

/* Muted / secondary text */
body.dark-mode .text-muted:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode .text-secondary:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode .text-sm:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) { color: var(--text-2) !important; }

/* Generic card dark override — catch-all */
body.dark-mode .card:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode [class$="-card"]:not(.resume-thumb-render):not(.cin-ignore):not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) {
  background: rgba(15,14,28,0.80) !important;
  border: 0.5px solid rgba(83,74,183,0.20) !important;
  color: var(--text) !important;
}

/* Tabs */
body.dark-mode .tab:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode .nav-tab:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) {
  color: var(--text-2) !important;
  border-color: rgba(83,74,183,0.22) !important;
}
body.dark-mode .tab.active:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *),
body.dark-mode .nav-tab.active:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Tables */
body.dark-mode table:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) { color: var(--text); }
body.dark-mode th:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) { background: rgba(15,14,28,0.90) !important; color: var(--text-2) !important; border-color: rgba(83,74,183,0.20) !important; }
body.dark-mode td:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) { border-color: rgba(255,255,255,0.07) !important; color: var(--text) !important; }
body.dark-mode tr:hover td:not(#resumePreviewPage *):not(.page-canvas *):not(.preview-page *):not(.resume-thumb-render *):not(.ev-thumb-render *) { background: rgba(83,74,183,0.06) !important; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* 9. LIGHT MODE — Tailwind color variables                                       */
/*    Each template's tailwind.config references these so light mode works.    */
/* ─────────────────────────────────────────────────────────────────────────── */
:root {
  --rz-bg:     #f7f8fc;
  --rz-bg-2:   #ffffff;
  --rz-text:   #0f172a;
  --rz-text-2: #475569;
  --rz-text-3: #94a3b8;
  --rz-border: rgba(0,0,0,0.08);
  --rz-surface-variant: #eef0f8;
}
body.dark-mode {
  --rz-bg:     #131313;
  --rz-bg-2:   #131313;
  --rz-text:   #e5e2e1;
  --rz-text-2: #c8c4d5;
  --rz-text-3: rgba(255,255,255,0.40);
  --rz-border: rgba(255,255,255,0.10);
  --rz-surface-variant: #353534;
}

/* Force all elements inside the resume preview to remain in light mode, even if parent page is in dark mode */
#resumePreviewPage,
.page-canvas,
.preview-page,
.resume-thumb-render,
.ev-thumb-render {
  --rz-bg: #f7f8fc !important;
  --rz-bg-2: #ffffff !important;
  --rz-text: #0f172a !important;
  --rz-text-2: #475569 !important;
  --rz-text-3: #94a3b8 !important;
  --rz-border: rgba(0,0,0,0.08) !important;
  --rz-surface-variant: #eef0f8 !important;
  
  --bg: #f8fafc !important;
  --bg-2: #ffffff !important;
  --text: #0f172a !important;
  --text-2: #475569 !important;
  --text-3: #94a3b8 !important;
  --border: rgba(0,0,0,0.08) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 7. DASHBOARD MODAL GLASS (modal-ov / modal-box2)                             */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Overlay */
.modal-ov {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000 !important;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.modal-ov.open {
  display: flex !important;
}
body.dark-mode .modal-ov {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* Modal box — glass in both modes */
.modal-box2 {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.80), 0 24px 48px rgba(0,0,0,0.12) !important;
  border-radius: 20px !important;
}
body.dark-mode .modal-box2 {
  background: rgba(15,14,28,0.88) !important;
  border: 1px solid rgba(83,74,183,0.25) !important;
  box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.04), 0 24px 80px rgba(0,0,0,0.45) !important;
}

/* Modal head — sticky glass bar */
.modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
body.dark-mode .modal-head,
html.dark .modal-head,
.dark-mode .modal-head,
.dark .modal-head {
  background: rgba(15,14,28,0.80) !important;
  border-bottom: 1px solid rgba(83,74,183,0.20) !important;
}

/* ── Template card theming (dark mode overrides for hardcoded light styles) ── */
body.dark-mode .tmpl-grid::-webkit-scrollbar-thumb {
  background: var(--cin-primary-dim, #9b96e8) !important;
  border-radius: 10px !important;
}
body.dark-mode .tmpl-card-thumb {
  background: linear-gradient(135deg, var(--cin-bg-elevated, #1a1a22), var(--cin-bg-surface, #131318)) !important;
}
body.dark-mode .tmpl-card-name {
  background: rgba(255,255,255,0.04) !important;
  border-top: 1px solid var(--cin-glass-stroke, rgba(255,255,255,0.10)) !important;
  color: var(--cin-text-dim, #a09da8) !important;
}
body.dark-mode .domain-tab {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--cin-glass-stroke, rgba(255,255,255,0.10)) !important;
  color: var(--cin-text-dim, #a09da8) !important;
}
body.dark-mode .domain-tab:hover {
  border-color: var(--cin-primary, #c5c0ff) !important;
  color: var(--cin-primary, #c5c0ff) !important;
}
body.dark-mode .domain-tab.active {
  background: var(--cin-primary, #c5c0ff) !important;
  border-color: var(--cin-primary, #c5c0ff) !important;
  color: #fff !important;
}

/* ── Live Tailoring Overlay Theme & Readability ── */
.tbo-card {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  pointer-events: auto;
}

html.dark .tbo-card,
body.dark-mode .tbo-card,
.dark .tbo-card,
.dark-mode .tbo-card {
  background: rgba(15, 14, 28, 0.90) !important;
  backdrop-filter: blur(35px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(35px) saturate(220%) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 30px rgba(139, 92, 246, 0.15) !important;
}

.tbo-title {
  background: linear-gradient(135deg, #1e293b 60%, #4f46e5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.dark-mode .tbo-title,
html.dark .tbo-title,
.dark-mode .tbo-title,
.dark .tbo-title {
  background: linear-gradient(135deg, #ffffff 60%, #c5c0ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) !important;
}

#tboSubtitle {
  color: #475569 !important;
}
body.dark-mode #tboSubtitle,
html.dark #tboSubtitle,
.dark-mode #tboSubtitle,
.dark #tboSubtitle {
  color: #cbd5e1 !important;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.95) !important;
}

.tbo-step {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: #475569 !important;
}
body.dark-mode .tbo-step,
html.dark .tbo-step,
.dark-mode .tbo-step,
.dark .tbo-step {
  background: rgba(15, 14, 28, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.tbo-step.active {
  color: #6d28d9 !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}
body.dark-mode .tbo-step.active,
html.dark .tbo-step.active,
.dark-mode .tbo-step.active,
.dark .tbo-step.active {
  color: #ffffff !important;
  background: rgba(168, 85, 247, 0.3) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.tbo-step.done {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}
body.dark-mode .tbo-step.done,
html.dark .tbo-step.done,
.dark-mode .tbo-step.done,
.dark .tbo-step.done {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

#tboCancelBtn {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
  color: #dc2626 !important;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.dark-mode #tboCancelBtn,
html.dark #tboCancelBtn,
.dark-mode #tboCancelBtn,
.dark #tboCancelBtn {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

#tboCancelBtn:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #b91c1c !important;
}
body.dark-mode #tboCancelBtn:hover,
html.dark #tboCancelBtn:hover,
.dark-mode #tboCancelBtn:hover,
.dark #tboCancelBtn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
  color: #fca5a5 !important;
}

/* Modal dialog subcomponents */
.mclose {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-3, #64748b);
  cursor: pointer;
  background: rgba(148, 163, 184, 0.1);
  border: none;
  transition: all .15s;
}
.mclose:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}
.modal-body2 {
  padding: 24px;
}
.modal-head h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.4px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 15. DASHBOARD LIST VIEW & COLLAPSED AI CHAT BUBBLE UPGRADES                */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Dashboard List View Stretch Overrides */
.resume-grid.list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.resume-grid.list-view .resume-list-row {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.resume-grid.list-view .resume-list-row > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.resume-grid.list-view .resume-list-row > div:first-child > div:last-child {
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.resume-grid.list-view .resume-list-row .list-row-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

@keyframes morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes morph-3d {
  0%, 100% {
    border-radius: 70% 40% 45% 55% / 65% 45% 40% 60%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 55% 70% 40% 45% / 60% 65% 45% 40%;
    transform: rotate(2deg) scale(1.02);
  }
  50% {
    border-radius: 45% 55% 70% 40% / 40% 60% 65% 45%;
    transform: rotate(-2deg) scale(0.98);
  }
  75% {
    border-radius: 40% 45% 55% 70% / 45% 40% 60% 65%;
    transform: rotate(2deg) scale(1.01);
  }
}

@keyframes face-color-cycle {
  0%, 100% { color: #534ab7 !important; }
  25% { color: #0284c7 !important; }
  50% { color: #db2777 !important; }
  75% { color: #7c3aed !important; }
}

@keyframes face-color-cycle-dark {
  0%, 100% { color: #a78bfa !important; }
  25% { color: #38bdf8 !important; }
  50% { color: #f472b6 !important; }
  75% { color: #8b5cf6 !important; }
}

@keyframes bubble-glow-3d {
  0%, 100% {
    box-shadow: 
      0 0 15px rgba(167, 139, 250, 0.45),
      0 0 30px rgba(56, 189, 248, 0.25),
      inset 0 0 18px rgba(255, 255, 255, 0.55),
      inset -8px -8px 24px rgba(15, 14, 28, 0.35) !important;
  }
  50% {
    box-shadow: 
      0 0 28px rgba(244, 114, 182, 0.65),
      0 0 45px rgba(56, 189, 248, 0.45),
      inset 0 0 22px rgba(255, 255, 255, 0.75),
      inset -12px -12px 32px rgba(15, 14, 28, 0.5) !important;
  }
}

@keyframes bubble-glow-3d-dark {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(139, 92, 246, 0.5),
      0 0 35px rgba(56, 189, 248, 0.3),
      inset 0 0 20px rgba(255, 255, 255, 0.25),
      inset -8px -8px 25px rgba(0, 0, 0, 0.75) !important;
  }
  50% {
    box-shadow: 
      0 0 35px rgba(244, 114, 182, 0.75),
      0 0 55px rgba(56, 189, 248, 0.5),
      inset 0 0 26px rgba(255, 255, 255, 0.35),
      inset -12px -12px 35px rgba(0, 0, 0, 0.9) !important;
  }
}

#chat-squiggly-svg {
  display: none !important;
}
#dashboardAIChat[data-open="false"] #chat-squiggly-svg {
  display: block !important;
}
.glass-fill-path {
  fill: rgba(255, 255, 255, 0.45) !important;
  transition: fill 0.5s ease !important;
}
body.dark-mode .glass-fill-path {
  fill: rgba(15, 14, 28, 0.72) !important;
}
.squiggly-stroke-path {
  stroke: url(#border-glow-grad) !important;
  filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.45)) !important;
  transition: filter 0.5s ease !important;
}
body.dark-mode .squiggly-stroke-path {
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.65)) !important;
}

html body #dashboardAIChat[data-open="false"] {
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  overflow: visible !important;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              height 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              background-color 0.5s ease, 
              box-shadow 0.5s ease,
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.4s ease !important;
}

html body #dashboardAIChat[data-open="false"]::after {
  display: none !important;
  content: none !important;
}

html body.dark-mode #dashboardAIChat[data-open="false"] {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}

html body #dashboardAIChat[data-open="false"] .border-glow-wrapper {
  display: none !important;
}

html body #dashboardAIChat[data-open="false"]:hover {
  transform: scale(1.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.dark-mode #dashboardAIChat[data-open="false"]:hover {
  transform: scale(1.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Increase drop-shadow glow on the squiggly path itself when hovered */
#dashboardAIChat[data-open="false"]:hover .squiggly-stroke-path {
  filter: drop-shadow(0 0 7px rgba(167, 139, 250, 0.85)) !important;
}
body.dark-mode #dashboardAIChat[data-open="false"]:hover .squiggly-stroke-path {
  filter: drop-shadow(0 0 9px rgba(139, 92, 246, 0.95)) !important;
}

.chat-tiny-bubble {
  position: absolute !important;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(167, 139, 250, 0.6) 50%, rgba(56, 189, 248, 0) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.5) !important;
  opacity: 0;
}

body.dark-mode .chat-tiny-bubble {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(139, 92, 246, 0.7) 50%, rgba(56, 189, 248, 0) 100%) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6) !important;
}

html body #dashboardAIChat[data-open="false"] > div.h-12 {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  border-bottom-width: 0px !important;
  z-index: 10 !important;
}

html body #dashboardAIChat[data-open="false"] > div.h-12 > .material-symbols-outlined {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  animation: face-color-cycle 8s linear infinite !important;
}

html body.dark-mode #dashboardAIChat[data-open="false"] > div.h-12 > .material-symbols-outlined {
  animation: face-color-cycle-dark 8s linear infinite !important;
}

/* Brighter and thicker borderlines for the chat bubble */
#dashboardAIChat .border-glow-wrapper,
body #dashboardAIChat[data-open="false"] > div:first-child.border-glow-wrapper {
  padding: 3.5px !important;
}

#dashboardAIChat .border-glow-wrapper {
  animation: border-pulse 8s ease-in-out infinite !important;
}
#dashboardAIChat[data-open="false"] .border-glow-wrapper {
  display: none !important;
}

/* Slow Box-Shadow Breathing Pulse for Collapsed Chat Bubble */
@keyframes bubble-shadow-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2), 0 8px 32px rgba(15, 14, 28, 0.15) !important;
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.55), 0 8px 32px rgba(15, 14, 28, 0.25) !important;
  }
}
@keyframes bubble-shadow-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.25), 0 16px 48px rgba(0, 0, 0, 0.4) !important;
  }
  50% {
    box-shadow: 0 0 35px rgba(167, 139, 250, 0.6), 0 16px 48px rgba(0, 0, 0, 0.6) !important;
  }
}