/* ═══════════════════════════════════════════════════
   CareerCraft AI — Dashboard Mobile Redesign v4
   Uses !important to override inline <style> rules
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ═══ PAGE ═══ */
  #dashboard.container { padding: 60px 0 40px !important; max-width: 100% !important; }
  #dashboard > h1 { font-size: 18px !important; padding: 14px 20px 0 !important; margin-bottom: 0 !important; }
  #dashboard > h1::after { display: none !important; }
  #dashboard > .subtitle { font-size: 12px !important; padding: 2px 20px 0 !important; margin-bottom: 20px !important; opacity: 0.5; }

  /* ═══ PLAN BANNER ═══ */
  .plan-banner { margin: 0 16px 14px !important; padding: 14px 16px !important; border-radius: 16px !important; gap: 10px !important; }
  .plan-info h3 { font-size: 14px !important; }
  .plan-info p { font-size: 11px !important; }
  .plan-badge { font-size: 10px !important; padding: 2px 8px !important; }

  /* ═══ UNSAVED CV ═══ */
  #unsavedCvSection { margin: 0 8px 6px !important; padding: 14px !important; border-radius: 14px !important; }
  #unsavedCvContent > div { flex-direction: column !important; gap: 10px !important; }
  #unsavedCvContent > div > div:last-child { width: 100%; display: flex !important; gap: 6px !important; }
  #unsavedCvContent > div > div:last-child .btn,
  #unsavedCvContent > div > div:last-child .ai-btn-final { flex: 1; justify-content: center !important; font-size: 12px !important; }

  /* ═══ STATS — Horizontal scroll pills ═══ */
  .stats {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 6px 16px 6px !important;margin-top:16px !important;
    margin-bottom: 20px !important;
    scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat {
    min-width: 100px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    text-align: center;
    background: linear-gradient(160deg, rgba(124,106,255,0.08), rgba(0,212,170,0.04)) !important;
    border: 1px solid rgba(124,106,255,0.15) !important;
    box-shadow: 0 2px 12px rgba(124,106,255,0.06) !important;
  }
  .stat-label { font-size: 8px !important; margin-bottom: 2px !important; letter-spacing: 0.8px; }
  .stat-value { font-size: 18px !important; }
  .stats::after { content: '' !important; flex-shrink: 0 !important; width: 8px !important; display: block !important; }

  /* ═══ ALL SECTIONS ═══ */
  .section {
    margin: 0 8px 6px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }
  .section-header { margin-bottom: 12px !important; gap: 6px !important; align-items: center !important; }
  .section h2 { font-size: 14px !important; white-space: nowrap; flex: 1; }
  .section-header .ai-btn-final span { font-size: 11px !important; padding: 5px 10px !important; }
  .section-scroll { overflow: visible !important; max-height: none !important; padding-right: 0 !important; }

  /* ═══ CV CARDS — Swipeable ═══ */
  .cv-list {
    display: flex !important;
    overflow-x: auto !important;overflow-y: clip !important;padding-top:6px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 0 0 8px !important;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scrollbar-width: none;
  }
  .cv-list::-webkit-scrollbar { display: none; }

  .cv-item {
    min-width: 260px !important;
    max-width: 280px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }
  .cv-item-left { width: 100% !important; }
  .cv-icon { width: 34px !important; height: 34px !important; font-size: 15px !important; border-radius: 8px !important; }
  .cv-name { font-size: 13px !important; }
  .cv-meta { font-size: 10px !important; }

  /* ═══ CV ACTION BUTTONS — auto-wrap ═══ */
  .cv-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .cv-actions button,
  .cv-actions .act-btn,
  .act-btn {
    padding: 6px 8px !important;
    font-size: 10px !important;
    min-height: 32px !important;
    justify-content: center !important;
    border-radius: 8px !important;
    gap: 3px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ═══ COVER LETTERS ═══ */
  #coverLetterList {
    display: flex !important;
    overflow-x: auto !important;overflow-y: clip !important;padding-top:6px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    margin: 0 -16px !important;
    padding: 0 16px 8px 16px !important;
    scrollbar-width: none;
  }
  #coverLetterList::-webkit-scrollbar { display: none; }
  #coverLetterList .cv-item {
    min-width: 250px !important;
    max-width: 270px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }

  /* ═══ VISITING CARD ═══ */
  #visitingCardSection .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #visitingCardSection .section-header > div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  #visitingCardSection .section-header > div .btn,
  #visitingCardSection .section-header > div a {
    padding: 8px 2px !important;
    font-size: 11px !important;
    min-height: 38px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #visitingCardSection > div:last-child { display: none !important; }

  /* ═══ VIDEO CV ═══ */
  #videoCvSection .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #videoCvSection .section-header > div {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
  }
  #videoCvSection .section-header > div .btn,
  #videoCvSection .section-header > div a {
    flex: 1 !important;
    min-height: 38px !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  #videoStatus { font-size: 12px !important; padding: 8px 0 !important; }

  /* ═══ QUICK ACTIONS — Icon grid ═══ */
  .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .quick-actions .btn {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 6px !important;
    font-size: 11px !important;
    text-align: center !important;
    min-height: 65px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    background: linear-gradient(160deg, rgba(124,106,255,0.06), rgba(0,212,170,0.03)) !important;
    border: 1px solid rgba(124,106,255,0.12) !important;
  }
  .quick-actions .btn i { font-size: 20px !important; }
  .quick-actions .btn:nth-child(1) i { color: #7C6AFF !important; }
  .quick-actions .btn:nth-child(2) i { color: #FFA500 !important; }
  .quick-actions .btn:nth-child(3) i { color: #00D4AA !important; }
  .quick-actions .btn:nth-child(4) i { color: #7C6AFF !important; }
  .quick-actions .btn:nth-child(5) i { color: #FF6AC2 !important; }

  /* ═══ MODALS ═══ */
  .share-modal, .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .share-modal > div, .modal-box {
    max-width: 100% !important; width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    animation: mSlideUp 0.3s cubic-bezier(0.22,1,0.36,1) !important;
  }
  .share-modal > div::before, .modal-box::before {
    content: '' !important; display: block !important;
    width: 36px !important; height: 4px !important; border-radius: 2px !important;
    background: rgba(255,255,255,0.15) !important;
    margin: 10px auto 4px !important;
  }
  @keyframes mSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  .profile-table-overlay { padding: 0 !important; }
  .profile-table-box { max-width: 100% !important; max-height: 95vh !important; border-radius: 20px 20px 0 0 !important; }
  .plan-chooser { flex-direction: column !important; gap: 8px !important; }
  .pc-card { min-width: 0 !important; width: 100% !important; padding: 14px !important; }

  /* ═══ EMPTY STATES ═══ */
  .empty { padding: 20px 12px !important; }
  .empty i { font-size: 32px !important; }
  .empty p { font-size: 12px !important; }

  /* ═══ LOADING / NO AUTH ═══ */
  #loading, #noAuth { padding: 80px 24px !important; text-align: center; }
}

/* Remove My CVs section box on mobile */
@media (max-width: 768px) {
  #cvSection.section {
    margin: 0 8px 6px !important;
    padding: 16px !important;
  }
}

/* Fix horizontal scroll leaking to page */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  
  .cv-list, #coverLetterList, .stats, .quick-actions {
    overflow-x: auto !important;overflow-y: clip !important;padding-top:6px !important;
    overflow-y: hidden !important;
  }
}

/* ═══ Cover Letters — Compact like CV cards ═══ */
@media (max-width: 768px) {
  #coverLetterSection.section {
    margin: 0 8px 6px !important;
    padding: 16px !important;
  }
  #coverLetterList {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-x: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #coverLetterList .cv-item {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 0 !important;
    border: 1px solid rgba(124,106,255,0.15) !important;
    cursor: pointer;
  }
  #coverLetterList .cv-item-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #coverLetterList .cv-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
  #coverLetterList .cv-name {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #coverLetterList .cv-meta {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Hide buttons by default, show on tap */
  #coverLetterList .cv-actions {
    display: none !important;
  }
  #coverLetterList .cv-item.cl-expanded .cv-actions {
    display: flex !important;
    gap: 4px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    overflow-x: auto !important;overflow-y: clip !important;padding-top:6px !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  #coverLetterList .cv-item.cl-expanded .cv-actions::-webkit-scrollbar { display: none; }
  #coverLetterList .cv-item.cl-expanded .act-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ═══ Compact section header buttons ═══ */
@media (max-width: 768px) {
  .section-header .ai-btn-final span {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  .section-header .ai-btn-final {
    font-size: 11px !important;
  }
}

/* ═══ Cover Letter arrow + hover fix ═══ */
@media (max-width: 768px) {
  /* Arrow toggle */
  .cl-toggle {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-muted);
    padding: 2px;
    z-index: 5;
    transition: 0.3s;
    border: none;
    background: none;
  }
  .cv-item.cl-expanded .cl-toggle {
    transform: rotate(180deg);
  }
  /* CL card needs relative position for arrow */
  #coverLetterList .cv-item {
    position: relative !important;
    overflow: visible !important;
    padding-right: 32px !important;
  }
  /* Fix hover glow on CL cards */
  #coverLetterList .cv-item:hover,
  #coverLetterList .cv-item.cl-expanded {
    border-color: rgba(124,106,255,0.3) !important;
    box-shadow: 0 0 15px rgba(124,106,255,0.15),0 0 30px rgba(0,212,170,0.08) !important;
  }
  /* ai-hover-box glow fix */
  #coverLetterList .ai-hover-box::before {
    background: linear-gradient(135deg, rgba(124,106,255,0.12), rgba(0,212,170,0.06)) !important;
  }
}

/* ═══ Compact Create buttons ═══ */
@media (max-width: 768px) {
  #createCvBtn span,
  #createClBtn span {
    padding: 4px 10px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }
  .section-header .ai-btn-final {
    max-width: fit-content !important;
    flex-shrink: 0 !important;
  }
}

/* ═══ Force compact create buttons ═══ */
@media (max-width: 768px) {
  .ai-btn-final {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .ai-btn-final::before,
  .ai-btn-final::after {
    inset: -1px !important;
    padding: 1px !important;
    filter: none !important;
  }
}



/* ═══ Remove section box border/glow, keep inside effects ═══ */
@media (max-width: 768px) {
  .section.ai-hover-box {
    border: 1px solid rgba(124,106,255,0.45) !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ═══ Stronger borders on mobile ═══ */
@media (max-width: 768px) {
  .cv-item, .stat, .plan-banner, .act-btn,
  .cv-actions button, .btn-outline, .btn-theme,
  .hamburger-btn, .quick-actions .btn,
  #coverLetterList .cv-item,
  #visitingCardSection .btn,
  #videoCvSection .btn,
  .toggle, .cv-public-toggle {
    border-color: rgba(124,106,255,0.45) !important;
  }
  [data-theme="light"] .cv-item,
  [data-theme="light"] .stat,
  [data-theme="light"] .plan-banner,
  [data-theme="light"] .act-btn,
  [data-theme="light"] .cv-actions button,
  [data-theme="light"] .btn-outline,
  [data-theme="light"] .btn-theme,
  [data-theme="light"] .hamburger-btn,
  [data-theme="light"] .quick-actions .btn,
  [data-theme="light"] #coverLetterList .cv-item,
  [data-theme="light"] #visitingCardSection .btn,
  [data-theme="light"] #videoCvSection .btn,
  [data-theme="light"] .toggle,
  [data-theme="light"] .cv-public-toggle {
    border-color: rgba(0,0,0,0.25) !important;
  }
}

/* ═══ CL card border fix ═══ */
@media (max-width: 768px) {
  #coverLetterList .cv-item {
    border: 1px solid rgba(124,106,255,0.15) !important;
  }
  [data-theme="light"] #coverLetterList .cv-item {
    border: 1px solid rgba(124,106,255,0.30) !important;
  }



  /* Space for button hover lift */
    
  
  
  
  

  /* Uniform padding for all scrollable/interactive sections */
  .cv-list,#coverLetterList,.quick-actions,.section-scroll{padding-top:6px!important;padding-bottom:6px!important}
  .stat,.cv-item,.act-btn,.ai-hover-box{overflow:visible!important}

  /* Stats: keep hover glow but no translateY (overflow-x:auto clips Y) */
  .stats .stat.ai-hover-box:hover{transform:translateY(0)!important}
  

  body::before,body::after{display:none!important}
}

/* ═══ CV Card Mobile — Compact ═══ */
@media (max-width: 768px) {
  .cv-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 10px !important;
    gap: 4px !important;
  }
  .cv-item-left { flex: 1 !important; min-width: 0 !important; }
  .cv-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; border-radius: 8px !important; }
  .cv-name { font-size: 12px !important; max-width: 150px !important; }
  .cv-meta { font-size: 8px !important; gap: 3px !important; }

  /* Right group compact */
  .cv-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .ats-badge { flex-direction: column !important; gap: 0 !important; margin: 0 !important;  }
  .ats-badge-label { font-size: 7px !important; }
  
  

  .cv-toggle-wrap {
    position: static !important;
    transform: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    width: auto !important;
  }
  .cv-toggle-label { font-size: 7px !important; }
  .cv-public-toggle { width: 24px !important; height: 13px !important; }
  .cv-toggle-dot { width: 9px !important; height: 9px !important; }

  /* Arrow inline after toggle */
  .cv-toggle {
    position: static !important;
    transform: none !important;
    font-size: 13px !important;
    filter: none !important;
    padding: 0 2px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    display: inline !important;
    color: #7C6AFF !important;
  }

  /* Buttons row - tight */
  .cv-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 2px !important;
  }
  .act-btn { padding: 4px 6px !important; font-size: 9px !important; gap: 2px !important; min-height: 26px !important; border-radius: 6px !important; }

  /* Expand compact */
  .cv-expand { width: 100% !important; gap: 4px !important; padding: 4px 0 2px !important; }
  .cv-expand-btn { padding: 4px 6px !important; font-size: 9px !important; gap: 2px !important; border-radius: 6px !important; }

  /* History compact */
  .hist-header { padding: 3px !important; }
  .hist-header span { font-size: 10px !important; }
  .hist-row { font-size: 9px !important; padding: 2px 4px !important; }

  /* CV list vertical no wasted space */
  .cv-list {
    flex-direction: column !important;
    overflow-x: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
  }

  #newUserPopupCard { width: 95% !important; max-width: 95% !important; padding: 20px 14px !important; }
}

/* ═══ CV/Edit count badges — stack on mobile ═══ */
@media (max-width: 768px) {
  .section-header h2 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
  }
  #cvLimitBadge, #cvEditsBadge {
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin-left: 0 !important;
  }
  /* Put edits badge on new line */
  #cvEditsBadge {
    flex-basis: auto !important;
    width: auto !important;
    margin-top: 0 !important;
    display: inline !important;
  }
}

/* ═══ Expand button tap feedback on mobile ═══ */
@media (max-width: 768px) {
  .cv-expand-btn:active {
    background: linear-gradient(135deg,rgba(124,106,255,0.35),rgba(0,212,170,0.25),rgba(255,106,194,0.2)) !important;
    border-color: rgba(124,106,255,0.5) !important;
    color: #fff !important;
    transform: scale(0.95) !important;
    transition: all 0.1s !important;
  }
  .act-btn:active {
    background: linear-gradient(135deg,rgba(124,106,255,0.25),rgba(0,212,170,0.15)) !important;
    border-color: rgba(124,106,255,0.4) !important;
    color: #fff !important;
    transform: scale(0.95) !important;
    transition: all 0.1s !important;
  }
}

/* ═══ Active CV card glow on mobile ═══ */
@media (max-width: 768px) {
  .cv-item.ai-active {
    background: linear-gradient(135deg,rgba(124,106,255,0.15),rgba(0,212,170,0.10),rgba(255,106,194,0.12)) !important;
    border-color: rgba(124,106,255,0.35) !important;
    box-shadow: 0 0 15px rgba(124,106,255,0.15), 0 0 30px rgba(255,106,194,0.08) !important;
  }
}

/* ═══ Mobile FAB — floating action buttons ═══ */
@media (max-width: 768px) {
  /* Hide inline action buttons on mobile */
  .cv-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }

  /* FAB trigger button */
  .cv-fab {
    position: fixed;
    bottom: 70px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C6AFF, #FF6AC2);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(124,106,255,0.4), 0 0 30px rgba(255,106,194,0.15);
    z-index: 90;
    transition: all 0.2s;
  }
  .cv-fab:active {
    transform: scale(0.9);
  }
  .cv-fab.visible {
    display: flex;
  }

  /* FAB menu */
  .cv-fab-menu {
    position: fixed;
    bottom: 130px;
    right: 16px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 90;
    align-items: flex-end;
  }
  .cv-fab-menu.open {
    display: flex;
    animation: fabSlideUp 0.2s ease;
  }
  @keyframes fabSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .cv-fab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid rgba(124,106,255,0.25);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: all 0.15s;
  }
  .cv-fab-item:active {
    background: linear-gradient(135deg, #7C6AFF, #FF6AC2);
    color: #fff;
    transform: scale(0.95);
  }
  .cv-fab-item i {
    font-size: 16px;
    color: #7C6AFF;
  }
  .cv-fab-item:active i {
    color: #fff;
  }

  /* FAB backdrop */
  .cv-fab-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 85;
    display: none;
  }
  .cv-fab-backdrop.open {
    display: block;
  }
}



/* ═══ CV Preview modal — hide buttons, show FAB on mobile ═══ */
@media (max-width: 768px) {
  .cv-preview-actions {
    display: none !important;
  }
  .cv-preview-close {
    width: 32px !important;
    height: 32px !important;
  }
  .cv-preview-close:hover, .cv-preview-close:active {
    background: rgba(255,106,194,0.15) !important;
    border-color: rgba(255,106,194,0.3) !important;
    color: #FF6AC2 !important;
  }
  .cv-preview-fab {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C6AFF, #FF6AC2);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(124,106,255,0.4), 0 0 30px rgba(255,106,194,0.15);
    z-index: 10002;
    transition: all 0.2s;
  }
  .cv-preview-fab:active {
    transform: scale(0.9);
  }
  .cv-preview-fab-menu {
    position: fixed;
    bottom: 82px;
    right: 20px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 10002;
    align-items: flex-end;
  }
  .cv-preview-fab-menu.open {
    display: flex;
    animation: fabSlideUp 0.2s ease;
  }
  .cv-preview-fab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 24px;
    background: #1a1a2e;
    border: 1.5px solid rgba(124,106,255,0.4);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 10px rgba(124,106,255,0.15);
    transition: all 0.15s;
    backdrop-filter: blur(12px);
  }

  [data-theme="light"] .cv-preview-fab-item {
    background: #fff !important;
    color: #1a1a2e !important;
    border-color: rgba(124,106,255,0.3) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  }
  .cv-preview-fab-item:active {
    background: linear-gradient(135deg, #7C6AFF, #FF6AC2) !important;
    color: #fff !important;
    transform: scale(0.95);
  }
  .cv-preview-fab-item i {
    font-size: 16px;
    color: #7C6AFF;
  }
  .cv-preview-fab-item:active i {
    color: #fff;
  }
}
@media (min-width: 769px) {
  .cv-preview-fab, .cv-preview-fab-menu { display: none !important; }
}

/* ═══ CV Preview — full width on mobile ═══ */
@media (max-width: 768px) {
  .cv-preview-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .cv-preview-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .cv-preview-toolbar {
    padding: 10px 14px !important;
    gap: 6px !important;
  }
  .cv-preview-title {
    font-size: 13px !important;
  }
  .cv-preview-frame {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
  }
}