/* ============================================================
   QCV Shared Components — Dark/Light Mode
   Brand: Deep Indigo #0003c9 + Cyan #27ffed
   ============================================================ */

/* ===== DEFAULT LIGHT MODE ===== */
:root {
    --bg: #f0f4ff;
    --bg2: #e8edf9;
    --card: #ffffff;
    --card-border: #e0e7f7;
    --border: #e0e7f7;
    --text: #0f172a;
    --muted: #64748b;
    --light: #94a3b8;
    --input: #f0f4ff;
    --sidebar: #ffffff;
    --accent: #0003c9;
    --accent-glow: rgba(0,3,201,0.08);
    --accent-soft: #eef2ff;
    --green: #059669;
    --red: #ef4444;
    --shadow: 0 2px 16px rgba(0,3,201,0.06);
    --shadow-lg: 0 8px 32px rgba(0,3,201,0.10);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
}

body {
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s, color 0.3s;
}

/* ===== DARK MODE — Premium Theme ===== */
body.dark-mode {
    --bg: #06080f;
    --bg2: #0d1020;
    --card: #111528;
    --card-border: #1a2040;
    --border: #1a2040;
    --text: #e8ecf4;
    --muted: #8892b0;
    --light: #5a6380;
    --input: #0a0e1c;
    --sidebar: #0b0f1e;
    --accent: #4f5fff;
    --accent-glow: rgba(79,95,255,0.12);
    --accent-soft: rgba(79,95,255,0.10);
    --green: #34d399;
    --red: #f87171;
    --shadow: 0 2px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    background: #06080f;
    color: #e8ecf4;
}

/* ===== NAVBAR / TOPBAR / HEADER ===== */
body.dark-mode .topbar,
body.dark-mode .navbar,
body.dark-mode .page-header,
body.dark-mode .portfolio-header {
    background: rgba(10,14,26,0.95);
    border-color: #1e293b;
    backdrop-filter: blur(20px);
}

body.dark-mode .navbar { background: rgba(10,14,26,0.97); }

/* ===== SIDEBAR ===== */
body.dark-mode .sidebar-nav,
body.dark-mode .sidebar {
    background: #111827;
    border-color: #1e293b;
}

/* ===== CARDS ===== */
body.dark-mode .form-card,
body.dark-mode .feature-card,
body.dark-mode .price-card,
body.dark-mode .test-card,
body.dark-mode .test-card-new,
body.dark-mode .faq-item,
body.dark-mode .login-box,
body.dark-mode .auth-card,
body.dark-mode .box {
    background: #141b2d;
    border-color: #1e293b;
    color: #f1f5f9;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ===== FORM INPUTS ===== */
body.dark-mode .field input,
body.dark-mode .field textarea,
body.dark-mode .field select,
body.dark-mode .input-group input,
body.dark-mode .job-match-input,
body.dark-mode .portfolio-url input,
body.dark-mode .panel-field input,
body.dark-mode .panel-field textarea {
    background: #0f172a;
    border-color: #2d3748;
    color: #f1f5f9;
}

body.dark-mode .field input:focus,
body.dark-mode .field textarea:focus,
body.dark-mode .field select:focus,
body.dark-mode .input-group input:focus {
    border-color: #27ffed;
    box-shadow: 0 0 0 3px rgba(39,255,237,0.1);
}

body.dark-mode .field input::placeholder,
body.dark-mode .field textarea::placeholder {
    color: #475569;
}

body.dark-mode .field label {
    color: #94a3b8;
}

body.dark-mode .form-card-header h3 {
    color: #f1f5f9;
}

body.dark-mode .form-card-header .icon {
    background: rgba(39,255,237,0.1);
    color: #27ffed;
}

/* ===== NAV TABS (Editor Sidebar) ===== */
body.dark-mode .nav-tab {
    color: #64748b;
}

body.dark-mode .nav-tab:hover {
    background: rgba(0,3,201,0.1);
    color: #e2e8f0;
}

body.dark-mode .nav-tab.active {
    background: rgba(0,3,201,0.15);
    color: #f1f5f9;
}

body.dark-mode .nav-tab .icon {
    background: rgba(255,255,255,0.04);
    color: #64748b;
}

body.dark-mode .nav-tab.active .icon {
    background: rgba(39,255,237,0.12);
    color: #27ffed;
}

body.dark-mode .nav-tab .tab-dots:hover {
    background: rgba(255,255,255,0.06);
}

body.dark-mode .nav-tab-menu {
    background: #141b2d;
    border-color: #1e293b;
}

body.dark-mode .nav-tab-menu button {
    color: #f1f5f9;
}

body.dark-mode .nav-tab-menu button:hover {
    background: rgba(0,3,201,0.1);
}

/* ===== PREVIEW ZONE ===== */
body.dark-mode .preview-zone {
    background: #060a14;
}

/* ===== DROPDOWN ITEMS ===== */
body.dark-mode .dd-item:hover,
body.dark-mode .sidebar-feature:hover {
    background: rgba(39,255,237,0.05);
}

body.dark-mode .dd-item {
    color: #94a3b8;
}

body.dark-mode .dd-item:hover {
    color: #f1f5f9;
}

/* ===== REPEATER BLOCKS ===== */
body.dark-mode .repeater-block {
    background: rgba(0,3,201,0.03);
    border-color: #1e293b;
}

/* ===== BUTTONS ===== */
body.dark-mode .btn-add {
    color: #27ffed;
    border-color: rgba(39,255,237,0.25);
}

body.dark-mode .btn-add:hover {
    background: rgba(39,255,237,0.08);
    border-color: #27ffed;
}

body.dark-mode .add-section-btn {
    border-color: #1e293b;
    color: #94a3b8;
}

body.dark-mode .add-section-btn:hover {
    border-color: #27ffed;
    color: #27ffed;
    background: rgba(39,255,237,0.05);
}

/* ===== MODALS / PANELS ===== */
body.dark-mode .section-modal,
body.dark-mode .panel {
    background: #141b2d;
    border-color: #1e293b;
}

body.dark-mode .section-modal-header,
body.dark-mode .panel-header {
    border-color: #1e293b;
}

body.dark-mode .section-modal-header h2,
body.dark-mode .panel-header h2,
body.dark-mode .tpl-panel-header h2 {
    color: #f1f5f9;
}

body.dark-mode .section-option {
    border-color: #1e293b;
    color: #f1f5f9;
}

body.dark-mode .section-option:hover {
    border-color: #27ffed;
    background: rgba(39,255,237,0.05);
}

body.dark-mode .panel-close,
body.dark-mode .tpl-close,
body.dark-mode .section-modal-close {
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
}

body.dark-mode .panel-close:hover,
body.dark-mode .tpl-close:hover,
body.dark-mode .section-modal-close:hover {
    background: rgba(248,113,113,0.12);
    color: #f87171;
}

body.dark-mode .panel-overlay,
body.dark-mode .section-modal-overlay {
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}

/* ===== ZOOM CONTROLS ===== */
body.dark-mode .zoom-controls {
    background: #111827;
    border-color: #1e293b;
}

body.dark-mode .zoom-btn {
    background: #141b2d;
    border-color: #1e293b;
    color: #94a3b8;
}

body.dark-mode .zoom-btn:hover {
    border-color: #27ffed;
    color: #27ffed;
}

/* ===== TEMPLATE PANEL ===== */
body.dark-mode .template-panel {
    background: #0a0e1a;
    border-color: #1e293b;
}

body.dark-mode .tpl-filter {
    border-color: #1e293b;
    color: #94a3b8;
}

body.dark-mode .tpl-filter:hover {
    color: #e2e8f0;
}

body.dark-mode .tpl-filter.active {
    background: #0003c9;
    color: #fff;
}

body.dark-mode .tpl-card {
    background: #141b2d;
    border-color: #1e293b;
}

body.dark-mode .tpl-card:hover {
    border-color: #27ffed;
    box-shadow: 0 4px 16px rgba(39,255,237,0.1);
}

body.dark-mode .tpl-card-name {
    color: #f1f5f9;
}

body.dark-mode .tpl-card-desc {
    color: #94a3b8;
}

/* ===== TOPBAR ELEMENTS ===== */
body.dark-mode .topbar-logo {
    color: #f1f5f9;
}

body.dark-mode .topbar-nav a {
    color: #64748b;
}

body.dark-mode .topbar-nav a:hover {
    color: #e2e8f0;
    background: rgba(0,3,201,0.08);
}

body.dark-mode .topbar-nav a.active {
    color: #27ffed;
    background: rgba(39,255,237,0.08);
}

body.dark-mode .ctrl-group select {
    background: #141b2d;
    border-color: #1e293b;
    color: #f1f5f9;
}

body.dark-mode .btn-save {
    background: #141b2d;
    color: #f1f5f9;
    border-color: #1e293b;
}

body.dark-mode .btn-save:hover {
    border-color: #27ffed;
    color: #27ffed;
}

/* ===== PROFILE DROPDOWN ===== */
body.dark-mode .profile-name {
    color: #f1f5f9;
}

body.dark-mode .profile-dropdown {
    background: #141b2d;
    border-color: #1e293b;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

body.dark-mode .dd-header {
    background: linear-gradient(135deg,rgba(0,3,201,0.1),rgba(39,255,237,0.05));
}

body.dark-mode .dd-plan {
    background: rgba(0,3,201,0.1);
    border-color: rgba(39,255,237,0.12);
}

body.dark-mode .dd-upgrade-btn {
    color: #fff;
}

body.dark-mode .dd-subscription {
    background: rgba(39,255,237,0.04);
    border-color: rgba(39,255,237,0.1);
}

/* ===== UPGRADE BUTTONS ===== */
body.dark-mode .btn-upgrade {
    border-color: #27ffed;
    color: #27ffed;
}

body.dark-mode .btn-upgrade:hover {
    background: #0003c9;
    color: #fff;
}

/* ===== SIDEBAR FEATURES ===== */
body.dark-mode .sidebar-feature {
    color: #94a3b8;
}

body.dark-mode .sidebar-feature:hover {
    color: #f1f5f9;
}

body.dark-mode .sidebar-feature .pro-badge {
    background: #0003c9;
    color: #fff;
}

/* ===== MATCH SCORE ===== */
body.dark-mode .match-score-big {
    background: #141b2d;
    border-color: #1e293b;
}

/* ===== PORTFOLIO LINK BOX ===== */
body.dark-mode .portfolio-link-box {
    background: rgba(0,3,201,0.06);
    border-color: rgba(39,255,237,0.1);
}

/* ===== AI SCORE ===== */
body.dark-mode .ai-score-summary {
    background: rgba(0,3,201,0.06);
    border-color: rgba(39,255,237,0.1);
}

body.dark-mode .ai-rec {
    border-color: #1e293b;
    color: #f1f5f9;
}

body.dark-mode .ai-rec:hover {
    background: rgba(0,3,201,0.04);
}

/* ===== CV LIST ===== */
body.dark-mode .cv-list-item {
    border-color: #1e293b;
}

body.dark-mode .cv-list-item:hover {
    background: rgba(0,3,201,0.04);
}

body.dark-mode .cv-list-item .cv-icon {
    background: rgba(39,255,237,0.08);
}

/* ===== AUTH ===== */
body.dark-mode .auth-toggle {
    color: #94a3b8;
    border-color: #1e293b;
}

body.dark-mode .card-title {
    color: #f1f5f9;
}

body.dark-mode .card-subtitle {
    color: #94a3b8;
}

body.dark-mode .ig label {
    color: #94a3b8;
}

body.dark-mode .pw-reqs {
    background: #0f172a;
    border-color: #1e293b;
}

body.dark-mode .pw-req {
    color: #94a3b8;
}

body.dark-mode .forgot {
    color: #27ffed;
}

body.dark-mode .pw-toggle {
    color: #94a3b8;
}

/* ===== SUCCESS OVERLAY ===== */
body.dark-mode .success-overlay {
    background: rgba(10,14,26,0.96);
}

body.dark-mode .success-t,
body.dark-mode .success-s {
    color: #f1f5f9;
}

/* ===== FOOTER ===== */
body.dark-mode .footer {
    background: #0a0e1a;
    border-color: #1e293b;
}

body.dark-mode .footer-brand p,
body.dark-mode .footer-bottom {
    color: #475569;
}

body.dark-mode .footer-col h4 {
    color: #f1f5f9;
}

body.dark-mode .footer-col a {
    color: #94a3b8;
}

body.dark-mode .footer-col a:hover {
    color: #27ffed;
}

/* ===== NOTIFICATION PANEL (Editor) ===== */
body.dark-mode .notif-panel {
    background: #141b2d;
    border-color: #1e293b;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

body.dark-mode .notif-header {
    border-color: #1e293b;
}

body.dark-mode .notif-header h4 { color: #f1f5f9; }

body.dark-mode .notif-item {
    border-color: #1e293b;
}

body.dark-mode .notif-item:hover {
    background: rgba(0,3,201,0.04);
}

body.dark-mode .notif-item.unread {
    background: rgba(39,255,237,0.04);
}

body.dark-mode .notif-item .notif-text {
    color: #f1f5f9;
}

body.dark-mode .notif-empty {
    color: #475569;
}

/* ===== AI ASSISTANT BUTTON & PANEL ===== */
body.dark-mode .ai-assist-btn {
    background: linear-gradient(135deg,#0003c9,#27ffed);
    color: #fff;
    box-shadow: 0 4px 20px rgba(39,255,237,0.3);
}

body.dark-mode .ai-menu {
    background: #141b2d;
    border-color: #1e293b;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

body.dark-mode .ai-menu-item {
    color: #f1f5f9;
}

body.dark-mode .ai-menu-item:hover {
    background: rgba(0,3,201,0.1);
}

body.dark-mode .ai-result-panel {
    background: #141b2d;
    border-color: #1e293b;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

body.dark-mode .ai-result-header {
    border-color: #1e293b;
}

body.dark-mode .ai-result-header h4 { color: #f1f5f9; }

body.dark-mode .ai-result-body {
    color: #f1f5f9;
}

body.dark-mode .ai-result-close {
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
}

/* ===== CV SCORE WIDGET ===== */
body.dark-mode .ai-score-header { color: #f1f5f9; }
body.dark-mode .ai-detail-row { border-color: #1e293b; }
body.dark-mode .ai-detail-header .label { color: #94a3b8; }

body.dark-mode .cat-issues { }
body.dark-mode .cat-issue {
    background: rgba(0,3,201,0.03);
    border-color: #1e293b;
    color: #94a3b8;
}
body.dark-mode .cat-issue:hover {
    background: rgba(39,255,237,0.06);
    color: #f1f5f9;
    border-color: #27ffed;
}

/* ===== TOAST ===== */
body.dark-mode .toast {
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    background: #141b2d;
    border-color: #1e293b;
    color: #f1f5f9;
}

/* ===== SCROLLBAR ===== */
body.dark-mode ::-webkit-scrollbar { width: 6px; }
body.dark-mode ::-webkit-scrollbar-track { background: transparent; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ===== MISCELLANEOUS ===== */
body.dark-mode hr { border-color: #1e293b; }

body.dark-mode a { color: #27ffed; }
body.dark-mode a:hover { color: #5effe8; }

body.dark-mode strong { color: #f1f5f9; }

body.dark-mode .badge { background: rgba(39,255,237,0.1); color: #27ffed; }

body.dark-mode .divider { border-color: #1e293b; }

/* ===== PRICING PAGE ===== */
body.dark-mode .price-card.popular {
    border-color: #27ffed;
    box-shadow: 0 0 30px rgba(39,255,237,0.1);
}

body.dark-mode .price-amount { color: #f1f5f9; }
body.dark-mode .price-period { color: #94a3b8; }

/* ===== HELP PAGE ===== */
body.dark-mode .faq-question { color: #f1f5f9; }
body.dark-mode .faq-answer { color: #94a3b8; }

/* ===== CAREERS PAGE ===== */
body.dark-mode .job-card {
    background: #141b2d;
    border-color: #1e293b;
}
body.dark-mode .job-card:hover {
    border-color: #27ffed;
}
body.dark-mode .job-title { color: #f1f5f9; }
body.dark-mode .job-company { color: #94a3b8; }
body.dark-mode .job-salary { color: #34d399; }

/* ===== TEMPLATES PAGE ===== */
body.dark-mode .template-card {
    background: #141b2d;
    border-color: #1e293b;
}
body.dark-mode .template-card:hover {
    border-color: #27ffed;
    box-shadow: 0 4px 16px rgba(39,255,237,0.1);
}
body.dark-mode .template-name { color: #f1f5f9; }
body.dark-mode .template-desc { color: #94a3b8; }

/* ===== PORTFOLIO PAGE ===== */
body.dark-mode .portfolio-name { color: #f1f5f9; }
body.dark-mode .portfolio-title { color: #94a3b8; }
body.dark-mode .portfolio-section-title { color: #f1f5f9; border-color: #1e293b; }

/* ===== 404 PAGE ===== */
body.dark-mode .error-code { color: #27ffed; }
body.dark-mode .error-text { color: #f1f5f9; }

/* ===== CHIPS / TAGS ===== */
body.dark-mode .chip { background: rgba(0,3,201,0.1); color: #27ffed; border-color: rgba(39,255,237,0.15); }
body.dark-mode .skill-tag { background: rgba(0,3,201,0.1); color: #27ffed; border-color: rgba(39,255,237,0.15); }

/* ===== WHATSAPP BUTTON ===== */
body.dark-mode .whatsapp-float { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

/* ===== LANGUAGE TOGGLE ===== */
body.dark-mode .lang-toggle { background: #141b2d; border-color: #1e293b; color: #94a3b8; }
body.dark-mode .lang-toggle:hover { border-color: #27ffed; color: #27ffed; }

/* ===== BACK TO TOP ===== */
body.dark-mode .back-to-top { background: #141b2d; border-color: #1e293b; color: #27ffed; }

/* ===== UPLOAD MODAL ===== */
body.dark-mode .upload-modal { background: #141b2d; border-color: #1e293b; }
body.dark-mode .upload-dropzone { background: #0f172a; border-color: #2d3748; color: #94a3b8; }
body.dark-mode .upload-dropzone:hover { border-color: #27ffed; color: #27ffed; }
body.dark-mode .upload-formats span { background: #0f172a; border-color: #1e293b; color: #94a3b8; }

/* ===== SHARE & EARN SECTION ===== */
body.dark-mode .dd-affiliate { border-color: #1e293b; }
body.dark-mode .dd-aff-apply-header { color: #f1f5f9; }
body.dark-mode .dd-aff-apply-desc { color: #94a3b8; }
body.dark-mode .dd-aff-link-box { background: #0f172a; border-color: #1e293b; }
body.dark-mode .dd-aff-link-box input { background: #0f172a; border-color: #1e293b; color: #f1f5f9; }

/* ===== PRO UPSELL CARD ===== */
body.dark-mode .pro-upsell-card { background: linear-gradient(135deg, rgba(0,3,201,0.12), rgba(39,255,237,0.06)); border-color: rgba(39,255,237,0.15); }

/* ===== UPGRADE MODAL ===== */
body.dark-mode .upgrade-overlay { background: rgba(0,0,0,0.75); }
body.dark-mode .upgrade-card { background: #141b2d; border-color: #1e293b; }
body.dark-mode .upgrade-card-top { color: #f1f5f9; }

/* ===== PARTNERS SECTION ===== */
body.dark-mode .partner-card { background: #141b2d; border-color: #1e293b; }
body.dark-mode .partner-name { color: #f1f5f9; }
body.dark-mode .partner-type { color: #94a3b8; }

/* ===== PAGE LOADER ===== */
.page-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.dark-mode .page-loader {
    background: rgba(10, 14, 26, 0.96);
}
.loader-spinner {
    width: 54px;
    height: 54px;
    border: 4px solid rgba(15, 23, 42, 0.08);
    border-top-color: var(--accent, #0003c9);
    border-right-color: rgba(39, 255, 237, 0.7);
    border-radius: 50%;
    animation: loadSpin 0.9s linear infinite;
    box-shadow: 0 0 0 6px rgba(0, 3, 201, 0.04);
}
@keyframes loadSpin { to { transform: rotate(360deg); } }
.loader-text {
    color: var(--muted, #64748b);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}