/**
 * CV Maker Pro - Minimal Header, Dropdown Template Menu & Clean A4 Styles
 * File: assets/css/header-minimal.css
 *
 * Implements:
 * 1. Minimalist Header Typography (11px-12px, font-weight: 500, uppercase/capitalize, compact padding).
 * 2. Permanent removal of Undo/Redo and "Taslak Modu (3 Gün Erişim)" badges.
 * 3. "🎨 ŞABLONLAR (9)" dropdown menu positioned beside "✨ AI & ATS" with smooth opening animation.
 * 4. Compact horizontal Photo Uploader card & 3 Shape Controller pill toggles.
 * 5. Precise A4 210mm x 297mm proportions (aspect-ratio: 1 / 1.4142) and removal of the 1. Page Break warning.
 * 6. "✨ AI & ATS Analiz" interactive PopUp modal styling.
 */

/* ==========================================================================
   1. MINIMAL HEADER TYPOGRAPHY & BUTTON STYLING
   ========================================================================== */
.cvm-master-top-bar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

/* Brand & Dynamic Title */
.cvm-brand-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cvm-brand-logo {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.cvm-brand-logo-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Dynamic Subscription Header (Replaced "Yeni Profesyonel CV" input) */
.cvm-dynamic-header-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cvm-dynamic-package-heading {
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
    text-transform: capitalize !important;
}

.cvm-auto-save-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    background: transparent !important;
    padding: 0 4px !important;
}

.cvm-auto-save-pill .dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #94a3b8 !important;
}

.cvm-auto-save-pill.saved .dot {
    background: #10b981 !important;
}

.cvm-auto-save-pill.saving .dot {
    background: #f59e0b !important;
    animation: cvm-pulse 1.2s infinite ease-in-out !important;
}

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

/* Header Action Buttons Minimal Typography */
.cvm-header-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cvm-header-right-actions button,
.cvm-btn-master-save,
.cvm-btn-load-dummy-data,
.cvm-btn-tpl-manager-trigger {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 5px 10px !important;
    height: 30px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.cvm-btn-load-dummy-data {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.cvm-btn-load-dummy-data:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.cvm-btn-master-save {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
    font-weight: 600 !important;
}

.cvm-btn-master-save:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25) !important;
}

/* ❌ PERMANENTLY REMOVED BUTTONS FROM HEADER */
.cvm-undo-redo-group,
#cvm-btn-undo,
#cvm-btn-redo,
.badge-trial,
.cvm-quota-badge,
[title*="Geri Al"],
[title*="Taslak Modu"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   2. TOOLBAR: "✨ AI & ATS" & "🎨 ŞABLONLAR (9)" SIDE-BY-SIDE DROPDOWN
   ========================================================================== */
.cvm-preview-toolbar-row {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 30 !important;
}

.cvm-toolbar-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
}

/* AI & ATS Button Minimalist Accent (#0072DD palette) */
.cvm-btn-ai-accent,
#cvm-btn-toolbar-ai {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 5px 12px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(0, 114, 221, 0.06) !important;
    color: #0072DD !important;
    border: 1px solid #0072DD !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cvm-btn-ai-accent:hover,
#cvm-btn-toolbar-ai:hover {
    background: #0072DD !important;
    border-color: #005bb5 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 114, 221, 0.2) !important;
}

/* Şablonlar (9) Dropdown Container */
.cvm-tpl-dropdown-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.cvm-btn-tpl-dropdown-trigger {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 5px 12px !important;
    height: 30px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cvm-btn-tpl-dropdown-trigger:hover,
.cvm-tpl-dropdown-wrapper.open .cvm-btn-tpl-dropdown-trigger {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.cvm-dropdown-caret {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
    color: #64748b !important;
}

.cvm-tpl-dropdown-wrapper.open .cvm-dropdown-caret {
    transform: rotate(180deg) !important;
}

/* Dropdown Menu Window with Soft Downward Animation */
.cvm-tpl-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 480px !important;
    max-width: 95vw !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15), 0 4px 10px rgba(15, 23, 42, 0.05) !important;
    padding: 12px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    
    /* Soft Downward Animation */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(0.98) !important;
    pointer-events: none !important;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.18s !important;
}

.cvm-tpl-dropdown-wrapper.open .cvm-tpl-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.cvm-tpl-dropdown-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 2px 4px 8px 4px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 3x3 Structured Grid Layout */
.cvm-tpl-dropdown-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 480px) {
    .cvm-tpl-dropdown-menu {
        width: 320px !important;
    }
    .cvm-tpl-dropdown-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.cvm-tpl-dropdown-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    transition: all 0.14s ease-in-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.cvm-tpl-dropdown-item:hover {
    background: #f8fafc !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important;
}

.cvm-tpl-dropdown-item.active {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
}

.cvm-tpl-dropdown-thumb-box {
    width: 100% !important;
    height: 40px !important;
    background: #f8fafc !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.cvm-tpl-dropdown-icon {
    font-size: 19px !important;
    line-height: 1 !important;
}

.cvm-tpl-dropdown-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 15px !important;
    height: 15px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

.cvm-tpl-dropdown-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

.cvm-tpl-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.cvm-tpl-item-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cvm-tpl-item-desc {
    font-size: 10px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 1px !important;
}

.cvm-tpl-active-check {
    font-size: 11px !important;
    color: #2563eb !important;
    font-weight: 700 !important;
}

/* Right Zoom Controls Minimal Style */
.cvm-toolbar-zoom-group {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 2px 4px !important;
}

.cvm-btn-zoom {
    font-size: 11px !important;
    font-weight: 600 !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

.cvm-btn-zoom:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.cvm-zoom-label {
    font-size: 11px !important;
    font-family: monospace !important;
    font-weight: 600 !important;
    padding: 0 4px !important;
    color: #334155 !important;
}

/* ==========================================================================
   3. MINIMAL PROFILE PHOTO UPLOADER & SHAPE SELECTOR
   ========================================================================== */
.cvm-photo-uploader-box {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

.cvm-photo-avatar-wrap {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid #2563eb !important;
    border-radius: 50% !important; /* default circle, controlled dynamically */
    transition: border-radius 0.2s ease !important;
    flex-shrink: 0 !important;
}

.cvm-photo-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
}

.cvm-photo-meta-controls {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cvm-photo-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cvm-btn-dark-select {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 4px 10px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: background 0.15s ease !important;
}

.cvm-btn-dark-select:hover {
    background: #1e293b !important;
}

.cvm-btn-photo-remove {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    background: transparent !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cvm-btn-photo-remove:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}

/* Shape Controller: Yuvarlak (50%) / Yumuşak Köşe (12px) / Kare (0px) */
.cvm-photo-shape-selector {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
}

.cvm-photo-shape-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.cvm-shape-pill-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: #e2e8f0 !important;
    padding: 2px !important;
    border-radius: 6px !important;
}

.cvm-shape-pill-btn {
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 2px 7px !important;
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.12s ease !important;
    white-space: nowrap !important;
}

.cvm-shape-pill-btn:hover {
    color: #0f172a !important;
}

.cvm-shape-pill-btn.active {
    background: #ffffff !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* ==========================================================================
   4. EXACT A4 PREVIEW (210mm x 297mm) & REMOVAL OF 1. SAYFA SONU WARNING
   ========================================================================== */
.cvm-a4-sheet-container {
    width: 210mm !important;
    min-height: 297mm !important;
    aspect-ratio: 1 / 1.4142 !important;
    position: relative !important;
    background: #ffffff !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    transition: transform 0.15s ease-out !important;
}

/* ❌ COMPLETELY REMOVE 1. SAYFA SONU WARNING & RED DASHED LINES */
.cvm-page-break-line,
.cvm-page-break-pill,
.cvm-page-break-dashed,
[id*="page-break"],
.cvm-guide-margin-border {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure preview photo reacts instantly to shape controls */
.cvm-preview-stage-content img.photo,
.cvm-preview-stage-content img.oxford-photo-img,
.cvm-preview-stage-content img.cvm-photo-avatar-img,
.cvm-preview-stage-content img[src*="photo"],
.cvm-preview-stage-content img[alt*="Avatar"],
#cv-printable-sheet img[src*="photo"],
#cv-printable-sheet img[alt*="Profil"] {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    transition: border-radius 0.2s ease !important;
}

/* ==========================================================================
   5. "✨ AI & ATS ANALİZ" MODAL / POPUP
   ========================================================================== */
.cvm-ai-ats-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.cvm-ai-ats-modal-backdrop.open,
.cvm-ai-ats-modal-backdrop.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.cvm-ai-ats-modal-dialog {
    background: #ffffff !important;
    width: 600px !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: scale(0.96) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cvm-ai-ats-modal-backdrop.open .cvm-ai-ats-modal-dialog {
    transform: scale(1) !important;
}

.cvm-ai-ats-modal-header {
    padding: 14px 18px !important;
    background: linear-gradient(135deg, #7e22ce, #4f46e5) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cvm-ai-ats-modal-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
}

.cvm-ai-ats-modal-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #ffffff !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background 0.15s ease !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.cvm-ai-ats-modal-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

.cvm-ai-ats-modal-body {
    padding: 18px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* ATS Score Gauge Card */
.cvm-ats-score-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.cvm-ats-gauge-circle {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    position: relative !important;
}

.cvm-ats-gauge-svg {
    transform: rotate(-90deg) !important;
    width: 72px !important;
    height: 72px !important;
}

.cvm-ats-gauge-bg {
    fill: none !important;
    stroke: #e2e8f0 !important;
    stroke-width: 6 !important;
}

.cvm-ats-gauge-progress {
    fill: none !important;
    stroke: #10b981 !important;
    stroke-width: 6 !important;
    stroke-linecap: round !important;
    transition: stroke-dashoffset 0.8s ease !important;
}

.cvm-ats-gauge-value {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.cvm-ats-score-text h4 {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.cvm-ats-score-text p {
    margin: 0 !important;
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

/* Recommendations Section */
.cvm-ats-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #334155 !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cvm-ats-tips-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cvm-ats-tip-item {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.cvm-ats-tip-item.warning {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}

.cvm-ats-tip-item.success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
}

/* Keywords Chips */
.cvm-ats-keywords-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.cvm-ats-keyword-chip {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #dbeafe !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.cvm-ai-ats-modal-footer {
    padding: 12px 18px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.cvm-btn-apply-advice {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.cvm-btn-apply-advice:hover {
    background: #4338ca !important;
}

/* ==========================================================================
   7. ACCORDION DYNAMIC REPEATER CARDS (EXPERIENCE, EDUCATION, PROJECTS, REFS)
   ========================================================================== */
.cvm-accordion-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.cvm-accordion-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
}

.cvm-accordion-card.expanded {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.cvm-accordion-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid transparent !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.cvm-accordion-card.expanded .cvm-accordion-header {
    border-bottom-color: #e2e8f0 !important;
    background: #eff6ff !important;
}

.cvm-accordion-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.cvm-accordion-drag-handle {
    color: #94a3b8 !important;
    font-size: 14px !important;
    cursor: grab !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    user-select: none !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
}

.cvm-accordion-drag-handle:hover {
    color: #475569 !important;
    background: #e2e8f0 !important;
}

.cvm-accordion-icon {
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

.cvm-accordion-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cvm-accordion-card.expanded .cvm-accordion-title {
    color: #1d4ed8 !important;
}

.cvm-accordion-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.cvm-accordion-btn-edit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.cvm-accordion-btn-edit:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.cvm-accordion-chevron {
    font-size: 10px !important;
    color: #64748b !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.cvm-accordion-card.expanded .cvm-accordion-chevron {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.cvm-accordion-header:hover .cvm-accordion-chevron {
    background: #cbd5e1 !important;
    color: #0f172a !important;
}

.cvm-accordion-card .cvm-btn-remove-repeater {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    opacity: 0.65 !important;
    transition: all 0.15s ease !important;
}

.cvm-accordion-card .cvm-btn-remove-repeater:hover {
    opacity: 1 !important;
    background: #fee2e2 !important;
}

.cvm-accordion-body {
    padding: 18px 16px !important;
    background: #ffffff !important;
}

/* ==========================================================================
   8. GEMINI AI & ATS POPUP / MODAL
   ========================================================================== */
.cvm-gemini-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.cvm-gemini-modal-backdrop.active,
.cvm-gemini-modal-backdrop.open {
    display: flex !important;
}

.cvm-gemini-modal-dialog {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 680px !important;
    max-height: 90vh !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: cvmGeminiFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cvmGeminiFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cvm-gemini-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
}

.cvm-gemini-header-icon {
    width: 38px !important;
    height: 38px !important;
    background: #f3e8ff !important;
    color: #7e22ce !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.cvm-gemini-modal-title {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.cvm-gemini-modal-sub {
    margin: 2px 0 0 0 !important;
    font-size: 12px !important;
    color: #64748b !important;
}

.cvm-gemini-close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

.cvm-gemini-close-btn:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

.cvm-gemini-modal-body {
    padding: 20px !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

.cvm-gemini-input-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}

.cvm-gemini-field-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important;
}

.cvm-gemini-text-input {
    flex: 1 !important;
    min-width: 220px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
}

.cvm-gemini-text-input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.cvm-gemini-btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 0 18px !important;
    height: 38px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cvm-gemini-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px) !important;
}

.cvm-gemini-hint {
    margin: 8px 0 0 0 !important;
    font-size: 11.5px !important;
    color: #64748b !important;
}

/* Loading Animation */
.cvm-gemini-loading-wrap {
    text-align: center !important;
    padding: 30px 20px !important;
}

.cvm-gemini-spinner {
    width: 36px !important;
    height: 36px !important;
    border: 3.5px solid #e9d5ff !important;
    border-top-color: #7c3aed !important;
    border-radius: 50% !important;
    margin: 0 auto 12px auto !important;
    animation: cvmGeminiSpin 0.75s linear infinite !important;
}

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

/* Score Banner */
.cvm-gemini-score-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.cvm-gemini-gauge-box {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.cvm-gemini-score-circle {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 4px solid #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #059669 !important;
}

.cvm-gemini-score-circle small {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.cvm-gemini-badge-tier {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.cvm-gemini-verdict {
    margin: 4px 0 0 0 !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

.cvm-gemini-model-pill {
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #f3e8ff !important;
    color: #7e22ce !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

/* Two-column Strengths & Improvements */
.cvm-gemini-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 640px) {
    .cvm-gemini-two-col {
        grid-template-columns: 1fr !important;
    }
}

.cvm-gemini-col-card {
    border-radius: 8px !important;
    padding: 14px !important;
}

.cvm-gemini-col-card.strengths {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}

.cvm-gemini-col-card.improvements {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
}

.cvm-gemini-col-card h5 {
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cvm-gemini-bullet-list {
    margin: 0 !important;
    padding-left: 18px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #334155 !important;
}

.cvm-gemini-bullet-list li {
    margin-bottom: 6px !important;
}

/* Keywords Chips */
.cvm-gemini-keywords-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    font-size: 12.5px !important;
}

.cvm-gemini-tags-flow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.cvm-gemini-tag {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

.cvm-gemini-tag.missing {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.cvm-gemini-tag.found {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

.cvm-gemini-modal-footer {
    padding: 12px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    display: flex !important;
    justify-content: flex-end !important;
}