:root {
    --ink: #0f0e0d;
    --paper: #faf8f4;
    --cream: #f2ede4;
    --gold: #c8a96e;
    --gold-light: #e8d5a3;
    --rust: #c4622d;
    --slate: #4a5568;
    --mist: #e8e4dc;
    --shadow: rgba(15,14,13,0.12);
    --panel-w: 450px;
    --radius: 12px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--ink);
   min-height: 100vh;
  overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ── TOPBAR ── */
  .topbar {
    height: 54px;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: relative;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,.4);
  }
  .topbar-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; font-weight: 700;
    color: var(--paper); letter-spacing: .01em;
  }
  .topbar-brand .dot { color: var(--gold); }
  .topbar-actions { display: flex; gap: 10px; }
  @media (max-width: 768px) {
    .topbar-actions {
      gap: 6px;
    }
    .topbar-actions .btn {
      padding: 6px 12px;
      font-size: 0.7rem;
    }
  }
  @media (max-width: 480px) {
    .topbar-actions {
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .topbar-actions::-webkit-scrollbar {
      display: none;
    }
    .topbar-actions .btn {
      padding: 5px 10px;
      font-size: 0.65rem;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }
  .menu-toggle {
    display: none;
  }
  .btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem; font-weight: 500;
    padding: 7px 16px; border-radius: 8px;
    border: none; cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    letter-spacing: .03em;
  }
  .btn-ghost {
    background: transparent;
    color: var(--mist);
    border: 1px solid rgba(255,255,255,.15);
  }
  .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
  .btn-gold {
    background: linear-gradient(135deg, var(--gold), #b8924a);
    color: var(--ink); font-weight: 600;
    box-shadow: 0 2px 12px rgba(200,169,110,.35);
  }
  .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(200,169,110,.5); }
  .btn-gold:active { transform: translateY(0); }
  .btn-rust {
    background: linear-gradient(135deg, var(--rust), #a8521e);
    color: #fff; font-weight: 600;
    box-shadow: 0 2px 12px rgba(196,98,45,.35);
  }
  .btn-rust:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(196,98,45,.5); }

  /* ── LAYOUT ── */
  .workspace {
    flex: 1; 
    display: flex; 
    min-height: 0;
  }

  /* ── SIDEBAR ── */
  .sidebar {
    width: var(--panel-w);
    background: var(--paper);
    border-right: 1px solid var(--mist);
    overflow-y: auto;
    height: calc(100vh - 54px);
    /* overflow-x: hidden; */
    display: flex; 
    flex-direction: column;
    box-shadow: 2px 0 16px var(--shadow);
    position: relative; z-index: 10;
  }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--mist); border-radius: 2px; }

  .sidebar-section {
    border-bottom: 1px solid var(--mist);
    animation: slideIn .35s cubic-bezier(.4,0,.2,1);
  }
  @keyframes slideIn {
    from { opacity:0; transform:translateX(-16px); }
    to { opacity:1; transform:translateX(0); }
  }
  .sidebar-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer;
    user-select: none;
    transition: background .15s;
  }
  .sidebar-section-header:hover { background: var(--cream); }
  .sidebar-section-header.dragging {
    background: var(--gold-light);
    opacity: 0.8;
    transform: rotate(2deg);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1000;
  }
  .sidebar-section.drag-over .sidebar-section-header {
    border-top: 2px solid var(--gold);
  }
  .sidebar-section-title {
    font-size: .72rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--slate);
    display: flex; align-items: center; gap: 8px;
  }
  .sidebar-section-title .icon {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--gold-light); display:flex; align-items:center; justify-content:center;
    font-size:.72rem;
  }
  .chevron {
    font-size:.7rem; color:var(--slate); transition: transform .2s;
  }
  .chevron.open { transform: rotate(90deg); }
  .sidebar-section-body {
    padding: 0 18px 16px;
    animation: expandDown .25s cubic-bezier(.4,0,.2,1);
  }
  @keyframes expandDown {
    from { opacity:0; transform: scaleY(.9); transform-origin: top; }
    to { opacity:1; transform: scaleY(1); }
  }

  /* ── FORM CONTROLS ── */
  .field { margin-bottom: 12px; }
  .field label {
    display: block; font-size: .7rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--slate); margin-bottom: 5px;
  }
  .field input, .field textarea, .field select {
    width: 100%; font-family: 'DM Sans', sans-serif;
    font-size: .82rem; padding: 8px 11px;
    border: 1.5px solid var(--mist); border-radius: 8px;
    background: var(--cream); color: var(--ink);
    outline: none; transition: border-color .15s, box-shadow .15s;
    resize: none;
  }
  .field input:focus, .field textarea:focus {
    border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,110,.15);
  }
  .field textarea { min-height: 70px; line-height: 1.5; }

  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .tag-input-row { display: flex; gap: 6px; }
  .tag-input-row input { flex:1; }
  .btn-add {
    padding: 0 12px; background: var(--gold-light); border: none;
    border-radius: 8px; cursor: pointer; font-size: 1.1rem; color: var(--ink);
    transition: all .15s; flex-shrink:0;
  }
  .btn-add:hover { background: var(--gold); }

  .badge-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .badge {
    font-size:.7rem; font-weight:500; font-family:'JetBrains Mono', monospace;
    padding: 3px 9px; border-radius:5px;
    display:inline-flex; align-items:center; gap:5px;
    background: var(--ink); color: var(--gold-light);
    animation: popIn .2s cubic-bezier(.4,0,.2,1);
  }
  @keyframes popIn {
    from { opacity:0; transform:scale(.7); }
    to { opacity:1; transform:scale(1); }
  }
  .badge-del {
    cursor:pointer; opacity:.6; transition:opacity .15s;
    font-size:.6rem; line-height:1;
  }
  .badge-del:hover { opacity:1; }

  .entry-card {
    background: var(--cream); border: 1.5px solid var(--mist);
    border-radius: 10px; padding: 12px; margin-bottom: 10px;
    position:relative; transition: box-shadow .2s;
    animation: popIn .25s cubic-bezier(.4,0,.2,1);
  }
  .entry-card:hover { box-shadow: 0 4px 16px var(--shadow); }
  .entry-card-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:10px;
  }
  .entry-card-title {
    font-size:.72rem; font-weight:600; color:var(--slate);
    letter-spacing:.04em; text-transform:uppercase;
  }
  .entry-card-del {
    width:22px; height:22px; border-radius:6px; border:none;
    background: rgba(196,98,45,.12); color:var(--rust); cursor:pointer;
    font-size:.7rem; display:flex; align-items:center; justify-content:center;
    transition: all .15s;
  }
  .entry-card-del:hover { background:var(--rust); color:#fff; }

  .btn-add-entry {
    width:100%; padding:9px; border-radius:9px;
    border: 1.5px dashed var(--gold); background: transparent;
    color: var(--gold); font-family:'DM Sans',sans-serif;
    font-size:.8rem; font-weight:600; cursor:pointer; letter-spacing:.04em;
    transition: all .2s;
  }
  .btn-add-entry:hover { background: rgba(200,169,110,.08); }

  /* ── PREVIEW AREA ── */
  .preview-wrap {
    flex:1; overflow:auto; min-height: 0;
    height: calc(100vh - 54px);
    flex-direction:column; align-items: flex-start;
    padding: 36px 24px;
    background: #ddd8ce;
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.06) 1px, transparent 0);
    background-size: 24px 24px;
    position:relative;
  }
  .preview-wrap::-webkit-scrollbar { width:6px; }
  .preview-wrap::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); border-radius:3px; }

  /* ── RESUME PAPER ── */
  .resume-paper {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    box-shadow: 0 8px 60px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.1);
    border-radius: 2px;
    padding: 14mm 16mm 16mm;
    position: relative;
    transform-origin: top center;
    transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s;
    animation: floatIn .6s cubic-bezier(.22,1,.36,1);
  }
  @keyframes floatIn {
    from { opacity:0; transform: translateY(40px) rotateX(8deg); }
    to { opacity:1; transform: translateY(0) rotateX(0); }
  }
  .resume-paper:hover {
    box-shadow: 0 20px 80px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-4px);
  }

  /* Resume styles */
  .r-header {
    display:flex; align-items:center; gap:18px;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 2px solid #f0ece4;
  }
  .r-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    object-fit:cover; border: 3px solid #f0ece4;
    flex-shrink:0; background:#f0ece4;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:#aaa;
    overflow:hidden;
  }
  .r-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .r-name-block { flex:1; }
  .r-name {
    font-family:'Playfair Display',serif;
    font-size: 1.9rem; font-weight:700; line-height:1.1;
    color: #0f0e0d; letter-spacing:-.01em;
  }
  .r-name .r-position {
    font-size:.85rem; color:#6b7280; margin-top:3px;
    font-weight:400; letter-spacing:.04em;
  }
  .r-contacts {
    display:grid; grid-template-columns:1fr 1fr; gap:4px 24px;
    margin-top:10px;
  }
  .r-contact-item {
    display:flex; align-items:center; gap:6px;
    font-size:.73rem; color:#374151;
  }
  .r-contact-item .ci-icon { font-size:.8rem; opacity:.6; }
  .r-contact-item a { color:#374151; text-decoration:none; }
  .r-contact-item a:hover { text-decoration:underline; color: var(--rust); }

  .r-section { margin-bottom: 18px; }
  .r-section-title {
    font-size:.78rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:#374151;
    padding: 6px 10px; margin-bottom:10px;
    background: #f7f4ef;
    border-left: 3px solid #c8a96e;
    border-radius: 0 4px 4px 0;
  }

  .r-skills-list { display:flex; flex-direction:column; gap:4px; }
  .r-skill-line {
    font-size:.8rem; line-height:1.5; color:#374151;
    padding-left:14px; position:relative;
  }
  .r-skill-line::before {
    content:'○'; position:absolute; left:0;
    font-size:.5rem; top:5px; color:#9ca3af;
  }
  .r-skill-kw {
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem; padding:1px 5px; border-radius:3px;
    background:#fef3e8; color:#c4622d; font-weight:500;
  }

  .r-exp-item { margin-bottom:12px; }
  .r-exp-header {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:1px;
  }
  .r-exp-company {
    font-size:.88rem; font-weight:700; color:#0f0e0d;
  }
  .r-exp-date {
    font-size:.72rem; color:#9ca3af; font-family:'JetBrains Mono',monospace;
    white-space:nowrap;
  }
  .r-exp-role {
    font-size:.78rem; font-weight:600; color:#374151; margin-bottom:4px;
  }
  .r-exp-bullets { list-style:none; }
  .r-exp-bullets li {
    font-size:.78rem; line-height:1.6; color:#4b5563;
    padding-left:14px; position:relative; margin-bottom:2px;
  }
  .r-exp-bullets li::before {
    content:'○'; position:absolute; left:0;
    font-size:.5rem; top:5px; color:#9ca3af;
  }

  .r-edu-item { margin-bottom:8px; }
  .r-edu-header {
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .r-edu-school { font-size:.85rem; font-weight:600; color:#0f0e0d; }
  .r-edu-date { font-size:.72rem; color:#9ca3af; font-family:'JetBrains Mono',monospace; }
  .r-edu-desc { font-size:.77rem; color:#6b7280; margin-top:1px; }

  .r-text-block {
    font-size:.8rem; line-height:1.7; color:#4b5563;
  }
  .r-image-block {
    max-width:100%; border-radius:6px; margin-top:6px;
  }

  /* ── BLOCK ADD BAR ── */
  .add-blocks-bar {
    display:flex; gap:8px; padding:14px 18px;
    border-bottom:1px solid var(--mist);
    flex-wrap:wrap;
  }
  .add-block-btn {
    font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600;
    padding:6px 12px; border-radius:8px; border:1.5px solid var(--mist);
    background:var(--cream); color:var(--slate); cursor:pointer;
    letter-spacing:.03em; transition:all .15s;
    display:flex; align-items:center; gap:5px;
  }
  .add-block-btn:hover { border-color:var(--gold); color:var(--ink); background:rgba(200,169,110,.07); }

  /* ── FLOATING CONTROLS on paper ── */
  .r-section-wrap {
    position:relative;
  }
  .r-section-wrap:hover .r-section-actions { opacity:1; }
  .r-section-actions {
    position:absolute; right:-38px; top:0;
    display:flex; flex-direction:column; gap:4px;
    opacity:0; transition:opacity .2s;
  }
  .r-section-btn {
    width:28px; height:28px; border-radius:7px; border:none;
    background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
    cursor:pointer; font-size:.7rem;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; color:var(--slate);
  }
  .r-section-btn:hover { background:var(--rust); color:#fff; }

  /* ── ZOOM CONTROLS ── */
  .zoom-controls {
    position:fixed; bottom:24px; right:24px;
    display:flex; flex-direction:column; gap:6px; z-index:50;
  }
  .zoom-btn {
    width:38px; height:38px; border-radius:10px; border:none;
    background:var(--ink); color:var(--paper);
    font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 16px rgba(0,0,0,.25); transition:all .15s;
  }
  .zoom-btn:hover { background:#333; transform:scale(1.05); }
  .zoom-label {
    text-align:center; font-size:.65rem; color:#777; font-family:'JetBrains Mono',monospace;
  }

  /* ── LANG TOGGLE ── */
  .lang-toggle {
    position:fixed; bottom:24px; left:calc(var(--panel-w)+24px);
    background:var(--ink); color:var(--paper);
    padding:8px 14px; border-radius:10px; font-size:.75rem; font-weight:600;
    cursor:pointer; border:none; z-index:50;
    box-shadow:0 4px 16px rgba(0,0,0,.2);
    transition:all .15s;
  }
  .lang-toggle:hover { background:#222; }

  /* ── RESPONSIVE DESIGN ── */
  @media (max-width: 1200px) {
    :root {
      --panel-w: 400px;
    }
    .resume-paper {
      width: 190mm;
    }
  }

  @media (max-width: 1024px) {
    :root {
      --panel-w: 380px;
    }
    .resume-paper {
      width: 180mm;
    }
  }

  @media (max-width: 768px) {
    :root {
      --panel-w: 100vw;
    }
    body {
      overflow-x: hidden;
    }
    .workspace {
      position: relative;
    }
    .sidebar {
      position: fixed;
      top: 54px;
      left: 0;
      height: calc(100vh - 54px);
      width: var(--panel-w);
      z-index: 1000;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      box-shadow: 4px 0 20px var(--shadow);
    }
    .sidebar.open {
      transform: translateX(0);
    }
    .sidebar-overlay {
      position: fixed;
      top: 54px;
      left: 0;
      width: 100vw;
      height: calc(100vh - 54px);
      background: rgba(0,0,0,0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .sidebar.open + .sidebar-overlay {
      opacity: 1;
      visibility: visible;
    }
    .preview-wrap {
      width: 100vw;
      padding: 20px 12px;
    }
    .resume-paper {
      width: 100%;
      min-height: auto;
      padding: 10mm 12mm;
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
      font-size: 14px;
    }
    .r-name {
      font-size: 1.6rem;
    }
    .r-avatar {
      width: 60px;
      height: 60px;
    }
    .topbar {
      position: relative;
      z-index: 1001;
    }
    .menu-toggle {
      display: block !important;
      background: transparent;
      border: none;
      color: var(--paper);
      font-size: 1.2rem;
      padding: 8px;
      cursor: pointer;
      margin-right: 10px;
    }
    .lang-toggle {
      left: 24px;
      bottom: 24px;
    }
    .r-contacts {
      grid-template-columns: 1fr;
      gap: 2px;
    }
    .field-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .topbar {
      padding: 0 16px;
      height: 50px;
    }
    .topbar-brand {
      font-size: 1rem;
    }
    .preview-wrap {
      padding: 16px 8px;
    }
    .resume-paper {
      padding: 8mm 10mm;
      font-size: 12px;
    }
    .r-name {
      font-size: 1.4rem;
    }
    .r-avatar {
      width: 50px;
      height: 50px;
    }
    .r-header {
      gap: 12px;
    }
    .zoom-controls {
      bottom: 16px;
      right: 16px;
    }
    .zoom-btn {
      width: 32px;
      height: 32px;
      font-size: 1rem;
    }
  }

  /* ── PRINT STYLES ── */
  @media print {
    body { overflow:visible; background:#fff; }
    .topbar, .sidebar, .zoom-controls, .lang-toggle, .r-section-actions, .preview-wrap > *:not(.resume-paper) { display:none!important; }
    .workspace { display:block; }
    .preview-wrap {
      padding:0; background:#fff;
      display:block; overflow:visible;
      background-image:none;
    }
    .resume-paper {
      box-shadow:none; transform:none!important;
      border-radius:0; animation:none;
      padding:14mm 16mm; width:100%; min-height:auto;
    }
  }

  /* ── AVATAR PREVIEW ── */
  .avatar-preview-row {
    display:flex; align-items:center; gap:10px; margin-top:6px;
  }
  .avatar-thumb {
    width:44px; height:44px; border-radius:50%;
    object-fit:cover; border:2px solid var(--mist);
  }

  /* ── CONTACT ROW ── */
  .contact-row {
    display:grid; grid-template-columns:auto 1fr auto auto;
    gap:6px; align-items:center; margin-bottom:6px;
  }
  @media (max-width: 768px) {
    .contact-row {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .contact-row input {
      width: 100% !important;
    }
  }