/* ============================================================
   editor.css  —  Resume Editor Layout & Component Styles
   Structure:
     1.  CSS Custom Properties
     2.  Reset / Base
     3.  Editor Page Shell
     4.  Top Header Bar
     5.  Editor Container  (flex: sidebar | preview)
     6.  Left Sidebar
         6a. Sidebar Tabs
         6b. Sidebar Scroll Area
         6c. Tab Content Panes
     7.  Form Elements  (form-group, inputs, selects…)
     8.  Section Panels  (drag-handle, toggle, section-body)
     9.  Repeatable Cards  (rep-card, rep-card-row…)
    10.  Skills Rows
    11.  Photo Upload Area
    12.  AI Assistant Tab
    13.  Templates Grid
    14.  Right Preview Panel
         14a. Preview Toolbar / Zoom
         14b. A4 Page Wrapper
    15.  Buttons
    16.  Share Modal
    17.  Autosave Badge
    18.  Debug Bar
    19.  Responsive  (≤ 900 px)
   ============================================================ */


/* ============================================================
   1.  CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand */
  --accent:          #3b82f6;
  --accent-hover:    #2563eb;
  --accent-light:    #eff6ff;

  /* Neutrals */
  --bg-page:         #f1f5f9;
  --bg-sidebar:      #ffffff;
  --bg-card:         #f8fafc;
  --bg-card-hover:   #f1f5f9;
  --border:          #e2e8f0;
  --border-focus:    #3b82f6;

  /* Text */
  --text-primary:    #1e293b;
  --text-secondary:  #64748b;
  --text-muted:      #94a3b8;
  --text-label:      #475569;

  /* Header */
  --header-h:        56px;
  --header-bg:       #1e293b;
  --header-border:   #334155;

  /* Sidebar */
  --sidebar-w:       360px;
  --sidebar-tab-h:   44px;

  /* Misc */
  --radius:          8px;
  --radius-sm:       5px;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.08);
  --shadow-md:       0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:       0 8px 24px rgba(0,0,0,.14);
  --transition:      160ms ease;
}


/* ============================================================
   2.  RESET / BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body.editor-page {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  /* Full-height column layout so header + container share the viewport */
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* prevent body scroll; each panel scrolls independently */
}


/* ============================================================
   3.  EDITOR PAGE SHELL  (already handled by body above)
   ============================================================ */


/* ============================================================
   4.  TOP HEADER BAR
   ============================================================ */
.editor-header {
  height: var(--header-h);
  min-height: var(--header-h);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 100;
}

.editor-header-left,
.editor-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-header-left { flex: 1; min-width: 0; }
.editor-header-right { flex-shrink: 0; }

/* Back link */
.btn-back {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.btn-back:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* Editable resume title */
.resume-title-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 8px;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.resume-title-input:hover {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
}
.resume-title-input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.08);
}


/* ============================================================
   5.  EDITOR CONTAINER  (flex row: sidebar | preview)
   ============================================================ */
.editor-container {
    width:100%;
    display:flex;
    flex-direction:row;
    flex:1;
    min-height:0;             /* critical — lets children shrink & scroll */
    overflow:hidden;
}


/* ============================================================
   6.  LEFT SIDEBAR
   ============================================================ */
.editor-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:row;
  overflow:hidden;
  flex-shrink:0;
}

/* Sidebar internal split: icon nav + content */
.editor-sidebar {
  display: flex;
  flex-direction: row;
}




.editor-nav {
    width: 70px;
    min-width: 70px;
    background: #fff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 8px;
    flex-shrink: 0;
}

.nav-btn {
    width: 64px;
    min-height: 55px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;
    font-size: 20px;
    text-align: center;
    line-height: 1.1;
}


.nav-btn:hover {
    background:var(--bg-card);
}

.nav-btn.active {
    background:var(--accent-light);
}



.sidebar-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── 6a. Sidebar Tabs ── */
.sidebar-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.sidebar-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.tab-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}
.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── 6b. Sidebar Scroll Area ── */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;   /* CRITICAL FIX */
  overflow-x: hidden;
  padding: 0;
  /* Custom thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.sidebar-scroll::-webkit-scrollbar        { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-track  { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 3px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── 6c. Tab Content Panes ── */
.tab-content {
  display: none;
  padding: 14px 14px 20px;
}
.tab-content.active {
  display: block;
}

.tab-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}


/* ============================================================
   7.  FORM ELEMENTS
   ============================================================ */
.form-group {
  margin-bottom: 12px;
}
.form-group:last-child { margin-bottom: 0; }

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-label);
  margin-bottom: 4px;
}

/* Shared input/select/textarea styles */
.resume-field,
.section-heading-edit,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

/* =========================================================
   RICH TEXT EDITOR
   Shared styling for all RTE fields
   ========================================================= */

.rte-wrap.rte-textarea-adapter {
  width: 100%;
}

/* ============================================================
   MODERN RICH TEXT EDITOR TOOLBAR
   ============================================================ */

/* Toolbar container
   ------------------------------------------------------------ */
.rte-toolbar,
.rich-toolbar,
.rte-editor-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;

    padding: 7px 8px;

    background: #ffffff;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;

    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);

    position: relative;
    z-index: 2;
}


/* ------------------------------------------------------------
   Toolbar groups
   ------------------------------------------------------------ */

.rte-toolbar-group,
.rich-toolbar-group,
.rte-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    padding-right: 6px;
    margin-right: 2px;

    border-right: 1px solid #e2e8f0;
}

.rte-toolbar-group:last-child,
.rich-toolbar-group:last-child,
.rte-group:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}


/* ------------------------------------------------------------
   Toolbar buttons
   ------------------------------------------------------------ */

.rte-toolbar button,
.rich-toolbar button,
.rte-editor-toolbar button {

    appearance: none;
    -webkit-appearance: none;

    height: 30px;
    min-width: 30px;

    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 6px;

    background: transparent;
    color: #475569;

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    line-height: 1;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
}


/* Hover */

.rte-toolbar button:hover,
.rich-toolbar button:hover,
.rte-editor-toolbar button:hover {

    background: #f1f5f9;
    color: #1e293b;
    border-color: #e2e8f0;
}


/* Click */

.rte-toolbar button:active,
.rich-toolbar button:active,
.rte-editor-toolbar button:active {
    transform: translateY(1px);
}


/* Active formatting button */

.rte-toolbar button.active,
.rte-toolbar button[aria-pressed="true"],
.rich-toolbar button.active,
.rich-toolbar button[aria-pressed="true"],
.rte-editor-toolbar button.active,
.rte-editor-toolbar button[aria-pressed="true"] {

    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;

    box-shadow:
        inset 0 0 0 1px rgba(59, 130, 246, .05);
}


/* ------------------------------------------------------------
   Formatting buttons
   ------------------------------------------------------------ */

.rte-toolbar button strong,
.rich-toolbar button strong {
    font-weight: 700;
}

.rte-toolbar button em,
.rich-toolbar button em {
    font-style: italic;
}


/* Make common formatting symbols slightly larger */

.rte-toolbar button[data-command="bold"],
.rte-toolbar button[data-command="italic"],
.rte-toolbar button[data-command="underline"],
.rich-toolbar button[data-command="bold"],
.rich-toolbar button[data-command="italic"],
.rich-toolbar button[data-command="underline"] {

    font-size: 13px;
}


/* ------------------------------------------------------------
   Toolbar selects
   ------------------------------------------------------------ */

.rte-toolbar select,
.rich-toolbar select,
.rte-editor-toolbar select {

    height: 30px;

    padding: 0 28px 0 9px;

    border: 1px solid #e2e8f0;
    border-radius: 6px;

    background-color: #fff;

    color: #475569;

    font-family: inherit;
    font-size: 11px;
    font-weight: 500;

    cursor: pointer;
    outline: none;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2364748b' d='M2 3.5 5 6.5 8 3.5z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 9px center;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


.rte-toolbar select:hover,
.rich-toolbar select:hover,
.rte-editor-toolbar select:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}


.rte-toolbar select:focus,
.rich-toolbar select:focus,
.rte-editor-toolbar select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
}


/* ------------------------------------------------------------
   Font family / style dropdowns
   ------------------------------------------------------------ */

.rte-toolbar select.font-family,
.rte-toolbar select.font-size,
.rich-toolbar select.font-family,
.rich-toolbar select.font-size {
    min-width: 105px;
}


/* ------------------------------------------------------------
   Toolbar separators
   ------------------------------------------------------------ */

.rte-toolbar .toolbar-divider,
.rich-toolbar .toolbar-divider,
.rte-editor-toolbar .toolbar-divider {

    width: 1px;
    height: 22px;

    background: #e2e8f0;

    margin: 0 4px;

    flex-shrink: 0;
}


/* ------------------------------------------------------------
   Color button
   ------------------------------------------------------------ */

.rte-toolbar .rte-color-control,
.rich-toolbar .rte-color-control {

    width: 30px;
    height: 30px;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 6px;

    background: transparent;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.rte-toolbar .rte-color-control:hover,
.rich-toolbar .rte-color-control:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}


.rte-toolbar .rte-color-label,
.rich-toolbar .rte-color-label {
    font-size: 15px;
    color: #334155;
}


/* ------------------------------------------------------------
   Link / image / upload / table / media buttons
   ------------------------------------------------------------ */

.rte-toolbar button[data-command="createLink"],
.rte-toolbar button[data-command="link"],
.rich-toolbar button[data-command="createLink"],
.rich-toolbar button[data-command="link"] {
    color: #2563eb;
}


/* ------------------------------------------------------------
   Destructive / clear formatting
   ------------------------------------------------------------ */

.rte-toolbar button[data-command="removeFormat"],
.rte-toolbar button[data-command="clear"],
.rich-toolbar button[data-command="removeFormat"],
.rich-toolbar button[data-command="clear"] {
    color: #64748b;
}


/* ------------------------------------------------------------
   Disabled buttons
   ------------------------------------------------------------ */

.rte-toolbar button:disabled,
.rich-toolbar button:disabled,
.rte-editor-toolbar button:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
}


/* ------------------------------------------------------------
   Tooltip
   ------------------------------------------------------------ */

.rte-toolbar button[title],
.rich-toolbar button[title],
.rte-editor-toolbar button[title] {
    position: relative;
}


/* ------------------------------------------------------------
   Editor + toolbar connected appearance
   ------------------------------------------------------------ */

.rte-toolbar + .rich-editor,
.rich-toolbar + .rich-editor,
.rte-editor-toolbar + .rich-editor {

    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* If toolbar is inside rte-wrap */

.rte-wrap.rte-textarea-adapter {
    display: flex;
    flex-direction: column;
}


/* ------------------------------------------------------------
   Mobile toolbar
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .rte-toolbar,
    .rich-toolbar,
    .rte-editor-toolbar {
        gap: 3px;
        padding: 6px;

        overflow-x: auto;
        flex-wrap: nowrap;

        scrollbar-width: thin;
    }

    .rte-toolbar-group,
    .rich-toolbar-group,
    .rte-group {
        flex-shrink: 0;
    }

    .rte-toolbar button,
    .rich-toolbar button,
    .rte-editor-toolbar button {
        height: 29px;
        min-width: 29px;
        padding: 0 7px;
    }

    .rte-toolbar select,
    .rich-toolbar select,
    .rte-editor-toolbar select {
        height: 29px;
        flex-shrink: 0;
    }
}


.rte-wrap.rte-textarea-adapter .rich-editor {
    width: 100%;
    min-height: 120px;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);

    background: #fff;
    color: var(--text-primary);

    font-size: 13px;
    line-height: 1.5;

    cursor: text;
    outline: none;

    overflow-y: auto;
    overflow-x: hidden;

    white-space: normal;
    overflow-wrap: anywhere;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


.rte-wrap.rte-textarea-adapter .rich-editor:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.rte-wrap.rte-textarea-adapter .rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.rte-wrap.rte-textarea-adapter .rte-status {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 24px;
  padding: 4px 2px 0;

  font-size: 11px;
  color: var(--text-muted);
}

/* =========================================================
   RTE FONT COLOR CONTROL
   ========================================================= */

.rte-color-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border: 1px solid var(--border);
  border-radius: var(--radius-sm);

  background: #fff;
  cursor: pointer;

  position: relative;
}

.rte-color-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.rte-font-color {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  cursor: pointer;
}


.rte-wrap.rte-textarea-adapter.rte-empty .rich-editor {
  min-height: 120px;
}

.resume-field:focus,
.section-heading-edit:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.form-group input[type="file"] {
  padding: 5px 8px;
  cursor: pointer;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Inline checkbox + label */
.form-group input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ============================================================
   Resume Completion Card
============================================================ */

.resume-progress-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:14px;

    margin-bottom:12px;

    box-shadow:var(--shadow-sm);

}

.resume-progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.resume-progress-header span{

    font-size:13px;

    font-weight:600;

    color:var(--text-primary);

}

.resume-progress-header strong{

    color:var(--accent);

    font-size:14px;

}

.resume-progress-track{

    width:100%;

    height:8px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

}

.resume-progress-fill{

    width:0%;

    height:100%;

    background:#22c55e;

    transition:width .35s ease;

}

.resume-progress-message{

    margin-top:8px;

    font-size:12px;

    color:var(--text-secondary);

}

/* ============================================================
   8.  SECTION PANELS
   ============================================================ */
#sectionsContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.section-panel:hover {
  box-shadow: var(--shadow-md);
}

/* Drag-ghost style while sorting */
.section-panel.sortable-ghost {
  opacity: .4;
  border: 2px dashed var(--accent);
}
.section-panel.sortable-chosen {
  box-shadow: var(--shadow-lg);
}

/* Section header row */
.section-header{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    background:#f8fafc;

    border-bottom:1px solid var(--border);

    transition:background .25s ease;

}

.section-panel:hover .section-header{

    background:#f1f5f9;

}

/* Drag handle */
.drag-handle {
  color: var(--text-muted);
  font-size: 14px;
  cursor: grab;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color var(--transition), background var(--transition);
}
.drag-handle:hover {
  color: var(--text-secondary);
  background: var(--border);
}
.drag-handle:active { cursor: grabbing; }

/* Inline heading editor */
.section-heading-edit {
  flex: 1;
  min-width: 0;
  background: transparent;
  border-color: transparent !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 3px 6px;
}
.section-heading-edit:hover {
  border-color: var(--border) !important;
  background: #fff;
}
.section-heading-edit:focus {
  border-color: var(--border-focus) !important;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}

/* Toggle collapse button */
.toggle-section{

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#64748b;

    cursor:pointer;

    transition:.25s;

    display:flex;

    justify-content:center;

    align-items:center;

}

.toggle-section:hover{

    background:#e2e8f0;

    color:#111827;

}


/* Section body */
.section-body {
  padding: 12px 12px 14px;
}
/* Collapsed state — JS should add .collapsed to .section-panel */
.section-panel.collapsed .section-body { display: none; }
.section-panel.collapsed .toggle-section::before { content: '+'; }


/* ============================================================
   9.  REPEATABLE CARDS  (education, employment, refs…)
   ============================================================ */
.rep-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.rep-card:last-of-type { margin-bottom: 0; }

.rep-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.drag-handle-card {
  color: var(--text-muted);
  font-size: 13px;
  cursor: grab;
  flex-shrink: 0;
  transition: color var(--transition);
}
.drag-handle-card:hover { color: var(--text-secondary); }
.drag-handle-card:active { cursor: grabbing; }

.rep-card-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove card "×" button */
.remove-card {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  transition: color var(--transition), background var(--transition);
}
.remove-card:hover {
  color: #ef4444;
  background: #fee2e2;
}

/* Two-column row inside a card */
.rep-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Card inner padding */
.rep-card > .form-group,
.rep-card > .rep-card-row,
.rep-card-row + .form-group {
  padding: 10px 10px 0;
}
.rep-card > *:last-child {
  padding-bottom: 10px;
}
.more-sections-wrapper {
  position: relative;
  margin-bottom: 10px;
}

.more-btn {
  width: 100%;
  padding: 8px;
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
}

.more-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.more-menu button {
  padding: 8px;
  border: none;
  background: white;
  text-align: left;
  cursor: pointer;
}

.more-menu.hidden {
  display: none;
}

/* ============================================================
   10.  SKILLS ROWS
   ============================================================ */
#skillsList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Empty skills state */
.empty-skills-message {
    padding:15px;
    color:#777;
    background:#f8fafc;
    border-radius:8px;
    text-align:center;
    margin-bottom:10px;
}

.skill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

.skill-name {
  flex: 0 0 110px;
  min-width: 0;
  font-size: 12px;
}

.skill-range {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}

.skill-pct {
  flex-shrink: 0;
  width: 36px;
  text-align: right;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.remove-skill {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color var(--transition), background var(--transition);
}
.remove-skill:hover {
  color: #ef4444;
  background: #fee2e2;
}


/* ============================================================
   11.  PHOTO UPLOAD AREA
   ============================================================ */
.photo-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color var(--transition);
}
.photo-upload-area:hover {
  border-color: var(--accent);
}

.photo-preview-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.photo-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
object-fit:contain;
background:#fff;
  border: 2px solid var(--border);
  display: block;
}

.photo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.photo-icon { font-size: 24px; }

.photo-remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide native file input */
#photoFileInput { display: none; }

.photo-upload-btn {
  background: var(--accent-light);
  border: 1px solid #bfdbfe;
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--transition);
}
.photo-upload-btn:hover { background: #dbeafe; }

.photo-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}


/* ============================================================
   12.  AI ASSISTANT TAB
   ============================================================ */
.ai-assistant h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}


/* ============================================================
   13.  TEMPLATES GRID
   ============================================================ */
.templates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.template-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: #fff;
}
.template-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.template-card.active,
.template-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.template-preview {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--bg-card);
  overflow: hidden;
}
.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pro-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #f59e0b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.template-card h5 {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-card.pro-template { opacity: .7; }
.template-card.pro-template:hover { opacity: 1; }


/* ============================================================
   14. RIGHT PREVIEW PANEL (FIXED LAYOUT)
   ============================================================ */

.editor-preview {
  flex: 1 1 0%;
  min-width: 400px;     /* 🔥 critical fix */
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   14a. Preview Toolbar
   ───────────────────────────────────────────── */
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   14b. Scrollable Preview Area
   ───────────────────────────────────────────── */
.preview-pages {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;

  overflow: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 24px 20px 40px;
  gap: 24px;

  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.preview-pages::-webkit-scrollbar {
  width: 7px;
}
.preview-pages::-webkit-scrollbar-track {
  background: transparent;
}
.preview-pages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────
   Zoom Wrapper (A4 Container)
   ───────────────────────────────────────────── */
#previewZoomWrap {
  width: 794px;
  margin: 0 auto;
  transform-origin: top center;
  display: block;          /* FIX */
}

/* ─────────────────────────────────────────────
   A4 Page
   ───────────────────────────────────────────── */
.resume-page {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  user-select: none;
}


/* ============================================================
   15.  BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: rgba(255,255,255,.1);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.15);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
}

/* Small variant (used inside sidebar) */
.btn-sm {
  font-size: 12px;
  padding: 5px 11px;
  /* Override secondary colours for light background context */
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-sm:hover:not(:disabled) {
  background: var(--border);
  color: var(--text-primary);
}

/* "Add item" buttons sit below lists */
.add-item-btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}


/* ============================================================
   16.  SHARE MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: none;                /* JS sets display:flex to open */
  align-items: center;
  justify-content: center;
  z-index: 1000;
    -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  position: relative;
}
.modal-box h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.modal-close:hover { color: var(--text-primary); background: var(--border); }

#shareLinkInput {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-card);
  outline: none;
}


/* ============================================================
   17.  AUTOSAVE BADGE
   ============================================================ */
.autosave-status {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
.autosave-status.saving  { opacity: 1; background: #fef3c7; color: #92400e; }
.autosave-status.saved   { opacity: 1; background: #d1fae5; color: #065f46; }
.autosave-status.error   { opacity: 1; background: #fee2e2; color: #991b1b; }
.autosave-status.fade    { opacity: 0; }


/* ============================================================
   18.  DEBUG BAR  (DEBUG_MODE only)
   ============================================================ */
/* Inline styles on the element itself are sufficient;
   keep this rule for any overrides needed later */
#debugBar {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  background: #111;
  color: #0f0;
  font: 12px/1.5 monospace;
  padding: 10px;
  z-index: 9999;
}


/* ============================================================
   19.  RESPONSIVE  (≤ 900 px — stacked layout)
   ============================================================ */
@media (max-width: 900px) {

  body.editor-page { overflow: auto; }

  .editor-container {
    flex-direction: column;
    overflow: visible;
  }

  .editor-sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .editor-preview {
    min-height: 60vh;
    overflow: visible;
  }

  .preview-pages {
    overflow: visible;
    padding: 16px 8px 32px;
  }

  #previewZoomWrap {
    width: 100%;
  }

  .resume-page {
    width: 100%;
    min-height: auto;
  }

  .templates-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .rep-card-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .editor-header { padding: 0 10px; gap: 6px; }
  .btn { font-size: 12px; padding: 6px 10px; }
  .templates-grid { grid-template-columns: 1fr 1fr; }
  :root { --sidebar-w: 100%; }
}

/* =====================================
   Resume Template Styles
===================================== */

.resume-a4{
    width: 794px;
    min-height: 1123px;
    background: white;
    display: flex;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* LEFT SIDE (MAIN CONTENT) */
.resume-left{
    width: 65%;
    padding: 30px;
    border-right: 1px solid #eee;
}

/* RIGHT SIDE (SIDEBAR STYLE) */
.resume-right{
    width: 35%;
    padding: 30px;
    background: #f7f9fc;
}

/* HEADER STYLE LIKE IMAGE */
.rv-header h1{
    font-size: 28px;
    margin: 0;
}

.rv-header p{
    color: #666;
    margin-top: 5px;
}


/* ============================================================
   DARK SIDEBAR RESUME TEMPLATE
   ============================================================ */
.rv-a4 {
    width: 794px; min-height: 1123px; display: flex; flex-direction: row;
    background: #fff; font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
    overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.rv-sidebar {
    width: 38%; min-width: 38%; background: #1a2e4a; color: #fff;
    padding: 32px 22px 40px; display: flex; flex-direction: column;
}
.rv-photo-wrap {
    width: 110px; height: 110px; border-radius: 50%; overflow: hidden;
    border: 3px solid rgba(255,255,255,.35); margin: 0 auto 18px;
    background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rv-photo { width: 100%; height: 100%; object-fit: cover; }
.rv-photo-empty { font-size: 40px; opacity: .45; }
.rv-name { font-size: 22px; font-weight: 700; text-align: center; line-height: 1.2; margin-bottom: 4px; word-break: break-word; }
.rv-profession { font-size: 13px; text-align: center; opacity: .78; margin-bottom: 22px; word-break: break-word; }
.rv-sidebar-section { margin-bottom: 22px; }
.rv-sh { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 5px; margin-bottom: 10px; }
.rv-ci-list { display: flex; flex-direction: column; gap: 7px; }
.rv-ci { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; word-break: break-all; }
.rv-ci-icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; }
.rv-in-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #fff; color: #1a2e4a; border-radius: 3px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.rv-sk { margin-bottom: 9px; }
.rv-sk-name { font-size: 12px; margin-bottom: 4px; font-weight: 500; }
.rv-sk-track { height: 5px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
.rv-sk-fill { height: 100%; background: rgba(255,255,255,.85); border-radius: 3px; transition: width .4s ease; }
.rv-lang-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.rv-lang-lvl { opacity: .65; font-size: 11px; }
.rv-hobbies { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-hobby-chip { background: rgba(255,255,255,.15); border-radius: 20px; font-size: 11px; padding: 3px 10px; }
.rv-main { flex: 1; padding: 36px 30px 40px; display: flex; flex-direction: column; overflow: hidden; }
.rv-section { margin-bottom: 26px; }
.rv-ch { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1a2e4a; border-bottom: 2px solid currentColor; padding-bottom: 5px; margin-bottom: 14px; }
.rv-bio { font-size: 12.5px; line-height: 1.65; color: #444; }
.rv-entry { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; }
.rv-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rv-entry-title { font-size: 13.5px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.rv-entry-meta { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.rv-date { color: #94a3b8; }
.rv-entry-desc { font-size: 12px; color: #555; line-height: 1.55; margin-top: 5px; }
.rv-bullets { margin: 6px 0 0 16px; padding: 0; list-style: disc; }
.rv-bullets li { font-size: 12px; color: #444; line-height: 1.55; margin-bottom: 3px; }
.rv-refs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv-ref { background: #f8fafc; border-radius: 6px; padding: 10px 12px; border-left: 3px solid #1a2e4a; }
.rv-ref-name { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 3px; }
.rv-ref-sub  { font-size: 11.5px; color: #64748b; }
.rv-footer-note { margin-top: auto; padding-top: 16px; font-size: 11px; color: #94a3b8; text-align: center; border-top: 1px solid #f0f0f0; }
.rv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 400px; gap: 10px; color: #94a3b8; text-align: center; }
.rv-empty strong { font-size: 15px; color: #64748b; }
.rv-empty p { font-size: 13px; }


/* ============================================================
   20.  ENHANCEMENT LAYER  (visual refresh + empty-space fixes)
   ------------------------------------------------------------
   Loaded last on purpose: it overrides earlier rules of equal
   specificity. Nothing here renames a selector the editor JS
   depends on. Sections:
     20a. Tokens           20f. Form fields + 2-column grid
     20b. Header           20g. Section panels / cards
     20c. Format toolbar   20h. Templates, settings, misc
     20d. Icon rail        20i. Preview workspace (fills the space)
     20e. Sidebar panes    20j. Responsive
   ============================================================ */

/* ── 20a. Tokens ─────────────────────────────────────────── */
:root {
  --accent:        #4f7cff;
  --accent-hover:  #3b64e8;
  --accent-2:      #7c5cff;
  --accent-light:  #eef3ff;
  --accent-ring:   rgba(79, 124, 255, .22);

  --bg-page:       #eef1f6;
  --bg-sidebar:    #ffffff;
  --bg-card:       #f7f9fc;
  --border:        #e3e8ef;
  --border-strong: #cdd5e0;

  --header-h:      58px;
  --header-bg:     #0f172a;

  /* wider form column, but never more than ~1/3 of the screen */
  --sidebar-w:     clamp(400px, 30vw, 500px);
  --rail-w:        78px;

  --radius:        12px;
  --radius-sm:     8px;
  --shadow-sm:     0 1px 2px rgba(15,23,42,.06);
  --shadow-md:     0 4px 14px rgba(15,23,42,.09);
  --shadow-lg:     0 14px 44px rgba(15,23,42,.20);
}

body.editor-page {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 20b. Header ─────────────────────────────────────────── */
.editor-header {
  background: linear-gradient(90deg, #0b1222 0%, #131c33 55%, #1a2342 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 0 18px;
  gap: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 4px 18px rgba(2,6,23,.25);
}
.editor-header-left  { gap: 10px; }
.editor-header-right { gap: 8px; }

.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: #aab6cc; font-weight: 500;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.btn-back:hover { color: #fff; background: rgba(255,255,255,.10); }

.resume-title-input {
  flex: 0 1 380px;
  height: 36px;
  padding: 0 12px 0 34px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .005em;
  color: #f8fafc;
  background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat 11px center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.resume-title-input:hover { border-color: rgba(255,255,255,.20); background-color: rgba(255,255,255,.08); }
.resume-title-input:focus { border-color: var(--accent); background-color: rgba(255,255,255,.10); box-shadow: 0 0 0 3px var(--accent-ring); }

.autosave-status { font-size: 11.5px; padding: 4px 10px; }

/* header buttons: icon comes from CSS so it survives JS changing the label */
.editor-header .btn {
  height: 36px; padding: 0 14px; font-weight: 600; font-size: 13px;
  border-radius: 10px; gap: 7px;
}
.editor-header .btn::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.editor-header .btn-secondary {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #dbe4f3;
}
.editor-header .btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.editor-header .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 6px 18px rgba(79,124,255,.38);
}
.editor-header .btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); }
#saveBtn      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); }
#exportPDF    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
#exportDOCX   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
#shareBtn     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }

/* ── 20c. Format toolbar (global rich-text bar) ──────────── */
.rte-global-toolbar-host {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 18px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
  min-height: 46px;
}
.rte-global-toolbar-host::before {
  content: "Format";
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 999px;
}
.rte-global-toolbar-host .rte-toolbar {
  flex: 1 1 auto; min-width: 0; width: auto !important;
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding: 0 !important;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  gap: 2px;
}
.rte-global-toolbar-host .rte-toolbar > * { flex: none; }
.rte-global-toolbar-host .rte-toolbar button {
  height: 30px; min-width: 30px; padding: 0 9px; font-size: 12px; color: #475569; border-radius: 7px;
}
.rte-global-toolbar-host .rte-toolbar button:hover:not(:disabled) { background: var(--accent-light); color: var(--accent-hover); border-color: transparent; }
.rte-global-toolbar-host .rte-toolbar button:disabled { opacity: .55; }
.rte-global-toolbar-host .rte-toolbar select { height: 30px; font-size: 11.5px; border-radius: 7px; flex: none; }
/* make the symbol buttons look like what they do (best-effort selectors) */
.rte-toolbar button[data-command*="bold" i]      { font-weight: 800; font-size: 13px; color: #1e293b; }
.rte-toolbar button[data-command*="italic" i]    { font-style: italic; font-family: Georgia, serif; font-size: 13px; color: #1e293b; }
.rte-toolbar button[data-command*="underline" i] { text-decoration: underline; color: #1e293b; }
.rte-toolbar button[data-command*="strike" i]    { text-decoration: line-through; color: #1e293b; }
/* the "10 words / 94 chars" counter */
.rte-global-toolbar-host .rte-status,
.rte-global-toolbar-host .rte-counter,
.rte-global-toolbar-host .rte-word-count {
  flex: none; margin-left: auto; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
}
/* when no text field is active every button is disabled: say what to do instead of looking broken */
@supports selector(:has(*)) {
  .rte-global-toolbar-host:has(.rte-toolbar button:disabled)::after {
    content: "Click inside any text field to format";
    flex: none; order: 3;
    font-size: 11.5px; color: var(--text-muted); white-space: nowrap;
  }
}

/* ── 20d. Icon rail ──────────────────────────────────────── */
.editor-sidebar { box-shadow: 1px 0 0 var(--border), 6px 0 24px rgba(15,23,42,.04); z-index: 5; position: relative; }

.editor-nav {
  width: var(--rail-w); min-width: var(--rail-w);
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  padding: 12px 0; gap: 6px;
  overflow-y: auto; scrollbar-width: none;
}
.editor-nav::-webkit-scrollbar { display: none; }

.nav-btn {
  position: relative;
  width: 62px; min-height: 62px;
  gap: 5px; padding: 8px 2px 7px;
  border-radius: 12px;
  color: #64748b;
  font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav-btn .nav-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; line-height: 1; transition: background var(--transition), color var(--transition); }
.nav-btn .nav-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn .nav-text { font-size: 10.5px; line-height: 1.15; max-width: 60px; white-space: normal; word-break: keep-all; }
.nav-btn:hover { background: #eef2f9; color: #334155; }
.nav-btn:hover .nav-icon { background: #fff; box-shadow: var(--shadow-sm); }
.nav-btn.active { background: transparent; color: var(--accent-hover); }
.nav-btn.active .nav-icon { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 6px 16px rgba(79,124,255,.38); }
.nav-btn.active::before { content: ""; position: absolute; left: -8px; top: 18px; width: 4px; height: 26px; border-radius: 0 4px 4px 0; background: var(--accent); }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 20e. Sidebar panes ──────────────────────────────────── */
.sidebar-main { background: #f7f9fc; }
.sidebar-scroll { scrollbar-gutter: stable; }
.sidebar-scroll::-webkit-scrollbar { width: 8px; }

.tab-content { padding: 20px 20px 36px; }

.tab-content > h3,
.tab-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #0f172a;
  margin: 0 0 4px;
}
.tab-content > h3::after,
.tab-section-title::after {
  content: ""; flex: 1; height: 1px; margin-left: 10px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.tab-content > h4 {
  display: inline-flex; align-items: center; gap: 6px; align-self: start;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-hover); background: var(--accent-light);
  padding: 5px 11px; border-radius: 999px; margin-top: 4px;
}
.tab-content > hr { border: 0; height: 1px; background: var(--border); margin: 6px 0; }

/* profile pane: short fields sit two per row, everything else spans the row */
#profile.tab-content.active {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; align-content: start;
}
#profile.tab-content.active > * { grid-column: 1 / -1; min-width: 0; }
#profile.tab-content.active > .form-group { grid-column: auto; margin: 0; }

/* cards (education, employment, … ) become compact 2-column grids */
.rep-card {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px;
  padding: 14px; margin-bottom: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.rep-card > * { min-width: 0; grid-column: 1 / -1; }
.rep-card > .form-group,
.rep-card-row + .form-group { grid-column: auto; padding: 0; margin: 0; }
.rep-card > .rep-card-row   { padding: 0; }
.rep-card > *:last-child    { padding-bottom: 0; }
.rep-card > .rep-card-header {
  margin: -14px -14px 2px; padding: 9px 14px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--border);
}
@supports selector(:has(*)) {
  .rep-card > .form-group:has(textarea, .rte-wrap, .rich-editor, input[type="checkbox"], input[type="file"], .photo-upload-area,
      [name*="project" i], [name*="university" i], [name*="institution" i], [name*="website" i], [name*="url" i], [name*="email" i], [name*="address" i], [name*="link" i]) { grid-column: 1 / -1; }
}
.rep-card-row { gap: 14px 12px; }
/* breathing room between stacked fields inside section panels */
.section-body > * + .form-group,
.section-body > * + .rep-card-row { margin-top: 14px; }
.rep-card-row .form-group { margin: 0; }

/* ── 20f. Form fields ────────────────────────────────────── */
.form-group { margin-bottom: 0; }
.tab-content > .form-group + .form-group { margin-top: 0; }
.form-group label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: #64748b; margin-bottom: 6px; }

.resume-field,
.section-heading-edit,
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="url"],
.form-group input[type="number"], .form-group select, .form-group textarea {
  height: 40px; padding: 8px 12px; font-size: 13.5px; border-radius: 10px;
  border: 1px solid var(--border-strong); background-color: #fff;
  box-shadow: 0 1px 1px rgba(15,23,42,.03);
}
.form-group textarea, textarea.resume-field { height: auto; min-height: 86px; line-height: 1.5; resize: vertical; }
.resume-field::placeholder, .form-group input::placeholder, .form-group textarea::placeholder { color: #a3afc2; }
.resume-field:hover, .form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: #b4c0d2; }
.resume-field:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}
.form-group select { padding-right: 32px; }
.rte-wrap.rte-textarea-adapter .rich-editor { border-color: var(--border-strong); border-radius: 10px; min-height: 96px; padding: 10px 12px; }
.rte-wrap.rte-textarea-adapter .rich-editor:focus { box-shadow: 0 0 0 4px var(--accent-ring); }

/* ── 20g. Section panels, progress card, buttons ─────────── */
#sectionsContainer { gap: 12px; }
.section-panel { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow-sm); }
.section-panel:hover { box-shadow: var(--shadow-md); border-color: #d3dbe8; }
.section-header { padding: 11px 14px; background: linear-gradient(180deg, #fff, #f8fafc); }
.section-panel:hover .section-header { background: linear-gradient(180deg, #fff, #f3f6fb); }
.section-body { padding: 16px 14px 16px; }
.section-heading-edit { height: 34px; font-size: 14px; font-weight: 700; }
.drag-handle { color: #b0bccd; }

.toggle-section { width: 30px; height: 30px; background: #f1f5f9; }
.toggle-section:hover { background: var(--accent-light); color: var(--accent-hover); }

.resume-progress-card {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: linear-gradient(135deg, #1e3a8a 0%, #4f7cff 60%, #7c5cff 100%);
  box-shadow: 0 10px 26px rgba(79,124,255,.32);
  padding: 16px 16px 14px; margin-bottom: 16px; border-radius: 14px;
}
.resume-progress-card::after { content: ""; position: absolute; right: -30px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.10); }
.resume-progress-header span { color: rgba(255,255,255,.92); font-size: 13px; }
.resume-progress-header strong { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.resume-progress-track { height: 8px; background: rgba(255,255,255,.25); }
.resume-progress-fill { background: linear-gradient(90deg, #86efac, #fff); }
.resume-progress-message { color: rgba(255,255,255,.85); position: relative; z-index: 1; }

.btn { border-radius: 10px; font-weight: 600; }
.btn-sm { background: #fff; border-color: var(--border-strong); color: #475569; }
.btn-sm:hover:not(:disabled) { background: var(--accent-light); border-color: var(--accent); color: var(--accent-hover); }
.add-item-btn, .add-repeatable { border-style: dashed; background: #fbfcfe; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

.more-btn {
  background: #fff; color: var(--accent-hover); font-weight: 700; font-size: 13px;
  border: 1.5px dashed var(--accent); border-radius: 12px; padding: 11px;
}
.more-btn:hover { background: var(--accent-light); }
.more-menu { margin-top: 6px; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 320px; overflow: auto; }
.more-menu button { border-radius: 8px; padding: 9px 12px; font-size: 13px; color: #334155; }
.more-menu button:hover { background: var(--accent-light); color: var(--accent-hover); }

.photo-upload-area { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px; border-radius: 12px; background: #fff; }
.photo-hint { text-align: left; }

/* ── 20h. Templates, settings ────────────────────────────── */
.templates-grid { gap: 14px; }
.template-card { border-width: 2px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.template-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.template-card.active, .template-card.selected { box-shadow: 0 0 0 4px var(--accent-ring); }
.template-card h5 { font-size: 12.5px; color: #334155; padding: 8px; }

/* ── 20i. Preview workspace ──────────────────────────────── */
.editor-preview {
  background:
    radial-gradient(circle at 1px 1px, #c9d2e0 1px, transparent 1.2px) 0 0 / 20px 20px,
    linear-gradient(180deg, #eef1f6, #e6ebf3);
}

.preview-toolbar {
  gap: 10px; padding: 9px 18px; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: relative; z-index: 3; box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.preview-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: #0f172a; margin-right: 2px;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.preview-chip {
  font-size: 11px; font-weight: 700; color: var(--accent-hover); background: var(--accent-light);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.preview-chip:empty { display: none; }
.preview-zoom-group { margin-left: auto; display: inline-flex; padding: 3px; gap: 2px; background: #eef1f6; border-radius: 10px; }
.preview-toolbar .preview-zoom.btn-sm {
  padding: 4px 10px; font-size: 12px; font-weight: 600; background: transparent; border: 0; color: #64748b; border-radius: 7px;
}
.preview-toolbar .preview-zoom.btn-sm:hover { background: rgba(255,255,255,.7); color: #0f172a; }
.preview-toolbar .preview-zoom.btn-sm.active { background: #fff; color: var(--accent-hover); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.preview-fit.btn-sm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; }
.preview-fit.btn-sm.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-hover); }
.page-pill { font-size: 11.5px; font-weight: 600; color: #475569; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; margin-left: 0 !important; white-space: nowrap; }

/* paper is wrapped in .preview-stage so the whole sheet can be scaled up
   to use the free width (see the "Fit" script in editor.php) */
.preview-pages { padding: 28px 28px 64px; }
.preview-stage { width: 794px; flex: none; zoom: var(--preview-fit, 1); }
.resume-page { border-radius: 3px; box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 18px 50px rgba(15,23,42,.20); }

/* ── 20j. Responsive ─────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --sidebar-w: 380px; --rail-w: 70px; }
  .nav-btn { width: 58px; }
  .preview-chip { display: none; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 100%; }
  .editor-header-right .btn { padding: 0 10px; }
  .resume-title-input { flex-basis: 160px; }
  .preview-stage { width: 100%; zoom: 1; }
  #profile.tab-content.active, .rep-card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .editor-header-right .btn { font-size: 0; gap: 0; padding: 0 11px; }
  .editor-header-right #shareBtn { font-size: 13px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } * { transition-duration: 1ms !important; } }