/**
 * AI Resume Builder — Styles v4.0
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@300;400;500&display=swap');

/* ─── Reset ── */
.arb-app *, .arb-app *::before, .arb-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Variables — Dark ── */
.arb-app {
    --bg:    #0f0f12; --surf:#17171c; --surf2:#1e1e25; --surf3:#25252e;
    --bdr:   #2a2a35; --bdr2:#34343f;
    --tx:    #e4e4ec; --tx2:#9090a8; --tx3:#50505e;
    --acc:   #6366f1; --acc2:rgba(99,102,241,0.18);
    --paper: #ffffff; --ptx:#111118; --pm:#374151; --pf:#6b7280;
    --pshadow: 0 8px 64px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.35);
    --ok:#22c55e; --err:#ef4444; --warn:#f59e0b;
    --r:6px; --r2:10px;
    --sw:272px;
    --font:'DM Sans',system-ui,sans-serif;
    --mono:'DM Mono',monospace;
    --disp:'DM Serif Display',Georgia,serif;
    font-family: var(--font); font-size: 14px; color: var(--tx);
    background: var(--bg);
    /* Full viewport — fixed so WP theme can't constrain it */
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    overflow: clip;
}
/* Modals escape arb-app — must have these */
.arb-modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    background: rgba(0,0,0,.72) !important;
}
/* ─── Light ── */
.arb-app[data-arb-theme="light"] {
    --bg:#f0f0f4; --surf:#ffffff; --surf2:#f5f5fa; --surf3:#ebebf2;
    --bdr:#d8d8e4; --bdr2:#c8c8d8; --tx:#111118; --tx2:#50505e; --tx3:#9090a8;
    --acc2:rgba(99,102,241,0.12);
    --pshadow:0 4px 32px rgba(0,0,0,0.12),0 1px 6px rgba(0,0,0,0.08);
}
/* hide WP elements behind our fixed app */
body:has([data-resume-builder]) { overflow:hidden !important; }
body:has([data-resume-builder]) > *:not(#arb-root):not([data-resume-builder]):not(script):not(style):not(link) { visibility:hidden !important; }
body:has([data-resume-builder]) #arb-root,
body:has([data-resume-builder]) [data-resume-builder] { visibility:visible !important; }

/* ══════════════════════════════════════════════════════
   TOPBAR  — two rows, no wrapping, no overflow
   ══════════════════════════════════════════════════════ */
.arb-topbar {
    display: flex;
    flex-direction: column;
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    z-index: 100;
    width: 100%;
}

/* ROW 1 ── title · tabs · status/theme/shortcuts */
.arb-topbar-row1 {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 12px;
    gap: 8px;
    overflow: hidden;           /* never wraps */
    flex-shrink: 0;
}
.arb-topbar-l {
    flex: 0 0 auto;
}
.arb-topbar-l .arb-title-in {
    width: 180px;
}
.arb-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    background: var(--surf2);
    border-radius: var(--r);
    padding: 3px;
}
.arb-tab {
    background: transparent; border: none; cursor: pointer;
    padding: 5px 11px;
    border-radius: calc(var(--r) - 1px);
    color: var(--tx2); font-family: var(--font); font-size: 12px;
    font-weight: 500; transition: all .15s; white-space: nowrap;
}
.arb-tab:hover { color: var(--tx); background: var(--surf3); }
.arb-tab--a { background: var(--surf) !important; color: var(--tx) !important; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.arb-topbar-r {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;          /* pushes to far right */
    flex-shrink: 0;
}
.arb-title-in {
    background: transparent; border: none; outline: none;
    color: var(--tx); font-family: var(--font); font-size: 14px;
    font-weight: 500; padding: 4px 8px; border-radius: var(--r);
    transition: background .15s; white-space: nowrap;
}
.arb-title-in:hover,.arb-title-in:focus { background: var(--surf2); }
.arb-ss { font-size: 11px; font-family: var(--mono); white-space: nowrap; }
.arb-ss--pending { color: var(--warn); }
.arb-ss--saving  { color: var(--tx2); }
.arb-ss--saved   { color: var(--ok); }
.arb-ss--error   { color: var(--err); }
.arb-theme-btn {
    background: var(--surf2); border: 1px solid var(--bdr);
    border-radius: var(--r); width: 28px; height: 28px;
    cursor: pointer; color: var(--tx2); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.arb-theme-btn:hover { border-color: var(--acc); color: var(--acc); }
.arb-sh { font-size: 10px; color: var(--tx3); font-family: var(--mono); white-space: nowrap; }

/* ROW 2 ── Format controls · · · · Page controls   (editor tab only) */
.arb-topbar-row2 {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    gap: 4px;
    overflow: hidden;
    flex-shrink: 0;
    border-top: 1px solid var(--bdr2);
    background: var(--surf2);
}
/* ── Format bar (JS uses .arb-fmtbar) ── */
.arb-fmtbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    height: 34px;
    background: transparent;
    border: none;
    padding: 0;
}
.arb-fmtbar-sep {
    width: 1px; height: 14px;
    background: var(--bdr2);
    margin: 0 4px;
    flex-shrink: 0;
}
/* Font & size selects */
.arb-fmtbar-font,
.arb-fmtbar-size {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tx2);
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    padding: 2px 4px;
    height: 26px;
    transition: all .12s;
    flex-shrink: 0;
}
.arb-fmtbar-font { width: 100px; }
.arb-fmtbar-size { width: 60px; }
.arb-fmtbar-font:hover,
.arb-fmtbar-size:hover { border-color: var(--bdr2); background: var(--surf3); color: var(--tx); }
.arb-fmtbar-font option,
.arb-fmtbar-size option { background: #1e1e28; color: #e4e4ec; }
/* B I U buttons */
.arb-fmtbar-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tx2);
    font-size: 12px;
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
    padding: 0;
    font-family: var(--font);
}
.arb-fmtbar-btn:hover { border-color: var(--bdr2); background: var(--surf3); color: var(--acc); }
.arb-fmtbar-btn--on { background: var(--acc2) !important; border-color: var(--acc) !important; color: var(--acc) !important; }
/* Color wheel */
.arb-fmtbar-color {
    position: relative; width: 22px; height: 22px;
    border-radius: 50%; overflow: hidden;
    border: 1.5px solid var(--bdr2); cursor: pointer;
    flex-shrink: 0; transition: border-color .12s;
}
.arb-fmtbar-color:hover { border-color: var(--acc); }
.arb-fmtbar-colorwheel {
    width: 100%; height: 100%;
    background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
    pointer-events: none;
}
.arb-fmtbar-colorinput {
    position: absolute; inset: -3px;
    width: calc(100% + 6px); height: calc(100% + 6px);
    opacity: 0; cursor: pointer; border: none;
}
.arb-fmtbar-hint {
    font-size: 10px; color: var(--tx3);
    font-family: var(--mono); white-space: nowrap;
    padding: 0 6px;
}
/* ── Page controls (JS uses .arb-pg-ctrl / .arb-pg-btn) ── */
.arb-pg-ctrl {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding-left: 8px;
    border-left: 1px solid var(--bdr2);
}
.arb-pg-btn {
    background: var(--surf3);
    border: 1px solid var(--bdr2);
    border-radius: 4px;
    color: var(--tx2);
    font-size: 11px; font-family: var(--mono);
    cursor: pointer;
    padding: 2px 8px; height: 24px;
    white-space: nowrap; transition: all .12s; flex-shrink: 0;
}
.arb-pg-btn:hover     { border-color: var(--acc); color: var(--acc); background: var(--acc2); }
.arb-pg-btn--rm:hover { border-color: var(--err); color: var(--err); background: rgba(239,68,68,.08); }
.arb-pg-num {
    font-size: 10px; font-family: var(--mono);
    color: var(--tx3); white-space: nowrap;
}
/* spacer between fmtbar and page controls */
.arb-topbar-row2-sep { flex: 1; }

/* ── Light mode overrides ── */
.arb-app[data-arb-theme="light"] .arb-fmtbar-font,
.arb-app[data-arb-theme="light"] .arb-fmtbar-size { color: #555; }
.arb-app[data-arb-theme="light"] .arb-fmtbar-font:hover,
.arb-app[data-arb-theme="light"] .arb-fmtbar-size:hover { background: rgba(0,0,0,.05); color: #111; }
.arb-app[data-arb-theme="light"] .arb-fmtbar-font option,
.arb-app[data-arb-theme="light"] .arb-fmtbar-size option { background: #fff; color: #111; }
.arb-app[data-arb-theme="light"] .arb-fmtbar-btn { color: #666; }
.arb-app[data-arb-theme="light"] .arb-fmtbar-btn:hover { background: var(--acc2); color: var(--acc); }
.arb-app[data-arb-theme="light"] .arb-pg-btn { background: #f0f0f8; border-color: #c8c8d8; color: #555; }
.arb-app[data-arb-theme="light"] .arb-pg-ctrl { border-color: var(--bdr); }

/* Format controls: Font | Size | B I U | Color */
.arb-fmt {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.arb-fmt-sep {
    width: 1px; height: 14px;
    background: var(--bdr2);
    margin: 0 4px;
    flex-shrink: 0;
}
.arb-fmt-select {
    background: transparent; border: 1px solid transparent;
    color: var(--tx2); font-size: 11px; font-family: var(--font);
    cursor: pointer; outline: none; border-radius: 4px;
    padding: 2px 4px; height: 26px; transition: all .12s;
    flex-shrink: 0;
}
.arb-fmt-select:hover { border-color: var(--bdr2); background: var(--surf3); color: var(--tx); }
.arb-fmt-select.arb-fmt-font { width: 100px; }
.arb-fmt-select.arb-fmt-size { width: 60px; }
.arb-fmt-select option { background: #1e1e28; color: #e4e4ec; }
.arb-fmt-btn {
    background: transparent; border: 1px solid transparent;
    color: var(--tx2); font-size: 12px; cursor: pointer;
    width: 26px; height: 26px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s; flex-shrink: 0; padding: 0;
}
.arb-fmt-btn:hover { border-color: var(--bdr2); background: var(--surf3); color: var(--acc); }
.arb-fmt-btn--on { background: var(--acc2) !important; border-color: var(--acc) !important; color: var(--acc) !important; }
.arb-fmt-color {
    position: relative; width: 22px; height: 22px; border-radius: 50%;
    overflow: hidden; border: 1.5px solid var(--bdr2); cursor: pointer;
    flex-shrink: 0; transition: border-color .12s;
}
.arb-fmt-color:hover { border-color: var(--acc); }
.arb-fmt-color-wheel {
    width: 100%; height: 100%;
    background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
    pointer-events: none;
}
.arb-fmt-color-input {
    position: absolute; inset: -3px;
    width: calc(100% + 6px); height: calc(100% + 6px);
    opacity: 0; cursor: pointer; border: none;
}
/* Spacer pushes page controls to right */
.arb-topbar-row2-gap { flex: 1; }
/* Page controls: + Page  − Page  N pgs */
.arb-pgc {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.arb-pgc-btn {
    background: var(--surf3); border: 1px solid var(--bdr2);
    border-radius: 4px; color: var(--tx2);
    font-size: 11px; font-family: var(--mono);
    cursor: pointer; padding: 2px 8px; height: 24px;
    white-space: nowrap; transition: all .12s; flex-shrink: 0;
}
.arb-pgc-btn:hover     { border-color: var(--acc); color: var(--acc); background: var(--acc2); }
.arb-pgc-btn--rm:hover { border-color: var(--err); color: var(--err); background: rgba(239,68,68,.08); }
.arb-pgc-count {
    font-size: 10px; font-family: var(--mono);
    color: var(--tx3); white-space: nowrap;
}
/* Light mode row2 */
.arb-app[data-arb-theme="light"] .arb-topbar-row2 { background: var(--surf2); border-top-color: var(--bdr); }
.arb-app[data-arb-theme="light"] .arb-fmt-select { color: #555; }
.arb-app[data-arb-theme="light"] .arb-fmt-select:hover { background: rgba(0,0,0,.05); color: #111; }
.arb-app[data-arb-theme="light"] .arb-fmt-select option { background: #fff; color: #111; }
.arb-app[data-arb-theme="light"] .arb-fmt-btn { color: #666; }
.arb-app[data-arb-theme="light"] .arb-fmt-btn:hover { background: var(--acc2); color: var(--acc); }
.arb-photo-zone--filled { border-style:solid; border-color:var(--bdr2); }
.arb-photo-img { width:100%; height:100%; object-fit:cover; display:block; }
.arb-photo-ph { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--tx3); font-size:10px; padding:4px; text-align:center; pointer-events:none; }
.arb-photo-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; opacity:0; transition:opacity .15s; font-size:10px; color:#fff; }
.arb-photo-zone:hover .arb-photo-overlay { opacity:1; }
.arb-photo-remove { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:var(--err); border:none; color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.arb-photo-zone:hover .arb-photo-remove { opacity:1; }

/* ─── Block Content ──────────────────────────────────────────────────────────── */
h3.arb-sl,.arb-sl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--tx3); font-family:var(--mono); padding:0; margin-bottom:8px; }

/* Header */
.arb-block-header .arb-hdr-inner { display:flex; gap:14px; align-items:flex-start; }
.arb-hdr-text { flex:1; min-width:0; }
.arb-hdr-name { font-family:var(--disp); font-size:22px; line-height:1.15; color:var(--tx); display:block; margin-bottom:3px; }
.arb-hdr-role { font-size:13px; color:var(--tx2); display:block; margin-bottom:8px; }
.arb-hdr-meta { display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin-bottom:4px; }
.arb-hdr-mi   { font-size:12px; color:var(--tx2); font-family:var(--mono); }
.arb-sep      { color:var(--tx3); font-size:11px; }

/* Summary */
.arb-sum-body { font-size:13px; line-height:1.6; color:var(--tx2); display:block; width:100%; }

/* Experience */
.arb-exp-hdr { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.arb-exp-l   { flex:1; min-width:0; }
.arb-exp-r   { flex-shrink:0; text-align:right; }
.arb-exp-co  { font-size:14px; font-weight:600; color:var(--tx); display:block; margin-bottom:2px; }
.arb-exp-ro  { font-size:13px; color:var(--tx2); display:block; }
.arb-exp-pe  { font-size:12px; color:var(--tx2); font-family:var(--mono); display:block; margin-bottom:2px; }
.arb-exp-lo  { font-size:11px; color:var(--tx3); font-family:var(--mono); display:block; }
.arb-exp-de  { font-size:13px; line-height:1.6; color:var(--tx2); display:block; width:100%; white-space:pre-wrap; }

/* Education */
.arb-edu-r   { display:flex; justify-content:space-between; gap:10px; }
.arb-edu-l   { flex:1; }
.arb-edu-rr  { flex-shrink:0; text-align:right; }
.arb-edu-ins { font-size:14px; font-weight:600; color:var(--tx); display:block; margin-bottom:2px; }
.arb-edu-deg { font-size:13px; color:var(--tx2); display:block; }
.arb-edu-per { font-size:12px; color:var(--tx2); font-family:var(--mono); display:block; margin-bottom:2px; }
.arb-edu-gpa { font-size:11px; color:var(--tx3); font-family:var(--mono); display:block; }

/* Skills */
.arb-sk-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.arb-sk-cat  { display:flex; gap:6px; align-items:baseline; }
.arb-sk-lb   { font-size:12px; font-weight:600; color:var(--tx); flex-shrink:0; min-width:80px; }
.arb-sk-it   { font-size:12px; color:var(--tx2); display:block; }

/* Projects */
.arb-proj-item { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--bdr); }
.arb-proj-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.arb-proj-nm { font-size:14px; font-weight:600; color:var(--tx); display:block; margin-bottom:4px; }
.arb-proj-de { font-size:13px; color:var(--tx2); line-height:1.55; display:block; margin-bottom:4px; white-space:pre-wrap; }
.arb-proj-lk { font-size:11px; color:var(--acc); font-family:var(--mono); display:block; }

/* Certifications */
.arb-cert-it { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px; margin-bottom:6px; }
.arb-cert-it:last-child { margin-bottom:0; }
.arb-cert-nm { font-size:13px; font-weight:600; color:var(--tx); }
.arb-cert-is { font-size:13px; color:var(--tx2); }
.arb-cert-yr { font-size:11px; color:var(--tx3); font-family:var(--mono); }

/* Languages */
.arb-lang-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.arb-lang-it   { display:flex; align-items:center; gap:6px; }
.arb-lang-nm   { font-size:13px; font-weight:500; color:var(--tx); }
.arb-lang-lv   { background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); color:var(--tx2); font-family:var(--mono); font-size:11px; padding:2px 6px; cursor:pointer; outline:none; }

/* Contact */
.arb-ct-list  { list-style:none; display:flex; flex-direction:column; gap:6px; }
.arb-ct-item  { display:flex; align-items:center; gap:8px; }
.arb-ct-ic    { font-size:14px; flex-shrink:0; width:20px; text-align:center; }
.arb-ct-val   { font-size:13px; color:var(--tx2); font-family:var(--mono); }

/* Utility */
.arb-add-btn { background:transparent; border:1px dashed var(--bdr2); border-radius:var(--r); color:var(--tx3); font-size:11px; font-family:var(--mono); cursor:pointer; padding:4px 10px; transition:all .15s; }
.arb-add-btn:hover { border-color:var(--acc); color:var(--acc); background:var(--acc2); }
.arb-ai-btn { background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.15)); border:1px solid rgba(99,102,241,.35); border-radius:var(--r); color:#a5b4fc; font-size:11px; font-family:var(--mono); cursor:pointer; padding:4px 10px; transition:all .15s; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }
.arb-ai-btn:hover:not(:disabled) { background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(139,92,246,.25)); border-color:var(--acc); }
.arb-ai-btn--lock { background:rgba(100,116,139,.1); border-color:rgba(100,116,139,.3); color:#94a3b8; }
.arb-ai-btn--lock:hover { background:rgba(100,116,139,.18); border-color:#64748b; color:#cbd5e1; cursor:pointer; }
.arb-ai-btn--ld { opacity:.7; cursor:wait; }
.arb-ai-btn:disabled { cursor:not-allowed; }
.arb-unknown { padding:8px; color:var(--err); font-family:var(--mono); font-size:12px; }

/* ─── Preview Panel ──────────────────────────────────────────────────────────── */
.arb-pv-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.arb-pv-bar { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--bdr); flex-shrink:0; background:var(--surf); }
.arb-pv-lbl { font-size:12px; font-weight:600; color:var(--tx2); font-family:var(--mono); }
.arb-pv-zoom { display:flex; align-items:center; gap:8px; }
.arb-pv-zoom button { width:24px; height:24px; background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); cursor:pointer; color:var(--tx); font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.arb-pv-zoom button:hover { border-color:var(--acc); color:var(--acc); }
.arb-pv-zoom span { font-size:11px; font-family:var(--mono); color:var(--tx2); min-width:34px; text-align:center; }
.arb-pv-scroll { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; align-items:center; background:#2a2a35; }
.arb-app[data-arb-theme="light"] .arb-pv-scroll { background:#c8c8d8; }

/* A4 page — scale wrapper keeps scroll correct */
.arb-pv-a4-outer { flex-shrink:0; overflow:hidden; }
.arb-pv-a4 { width:794px; min-height:1123px; background:var(--paper); box-shadow:var(--pshadow); transform-origin:top left; flex-shrink:0; }

/* ─── Preview CV Content ─────────────────────────────────────────────────────── */
.arb-pv { width:100%; min-height:1123px; font-family:'DM Sans',sans-serif; font-size:10px; color:#111118; padding:40px 48px; background:white; display:flex; flex-direction:column; }
.arb-pv span[style*='font-size'] { font-family:inherit; }
.arb-pv-hdr { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; padding-bottom:12px; border-bottom:2px solid var(--acc,#6366f1); }
.arb-pv-photo { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--acc,#6366f1); }
.arb-pv-hdr-t { flex:1; min-width:0; }
.arb-pv-name { font-family:'DM Serif Display',Georgia,serif; font-size:22px; font-weight:700; color:#111118; line-height:1.1; margin-bottom:2px; }
.arb-pv-role { font-size:12px; color:var(--acc,#6366f1); font-weight:500; margin-bottom:4px; }
.arb-pv-contacts { font-size:9px; color:#6b7280; }
.arb-pv-single { display:flex; flex-direction:column; gap:10px; flex:1; }
.arb-pv-2col-body { display:flex; gap:16px; align-items:flex-start; flex:1; }
.arb-pv-sidebar { width:36%; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.arb-pv-main    { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }

/* Template header variants */
.arb-pv--modern .arb-pv-hdr,.arb-pv--executive .arb-pv-hdr,.arb-pv--creative .arb-pv-hdr { background:var(--acc,#6366f1); color:white; border-radius:4px; padding:14px; margin-bottom:12px; border-bottom:none; }
.arb-pv--modern .arb-pv-name,.arb-pv--executive .arb-pv-name,.arb-pv--creative .arb-pv-name { color:white; }
.arb-pv--modern .arb-pv-role,.arb-pv--executive .arb-pv-role,.arb-pv--creative .arb-pv-role { color:rgba(255,255,255,.8); }
.arb-pv--modern .arb-pv-contacts,.arb-pv--executive .arb-pv-contacts,.arb-pv--creative .arb-pv-contacts { color:rgba(255,255,255,.7); }
.arb-pv--minimal .arb-pv-hdr { border-bottom-color:#e5e7eb; }
.arb-pv--minimal .arb-pv-role { color:#374151; }
.arb-pv--academic { font-family:'Times New Roman',serif; }
.arb-pv--academic .arb-pv-name { font-family:'Times New Roman',serif; }


/* Stitch Template — Dark sidebar + white main */
.arb-pv--stitch { font-family:'Montserrat',sans-serif; display:flex; flex-direction:column; }
.arb-pv--stitch .arb-pv-hdr { background:#333; color:white; padding:24px 20px; border-bottom:none; border-radius:0; }
.arb-pv--stitch .arb-pv-hdr-t { flex:1; }
.arb-pv--stitch .arb-pv-name { font-family:'Libre Baskerville',Georgia,serif; color:white; font-size:26px; text-transform:uppercase; letter-spacing:.08em; line-height:1.15; }
.arb-pv--stitch .arb-pv-role { color:rgba(255,255,255,.75); font-size:9px; text-transform:uppercase; letter-spacing:.2em; font-weight:300; margin-top:6px; }
.arb-pv--stitch .arb-pv-contacts { color:rgba(255,255,255,.6); font-size:8px; margin-top:4px; }
.arb-pv--stitch .arb-pv-photo { width:60px; height:60px; border-radius:50%; border:3px solid rgba(255,255,255,.3); margin-right:14px; }
.arb-pv--stitch .arb-pv-2col-body { gap:0; }
.arb-pv--stitch .arb-pv-sidebar { background:#3d3d3d; color:white; padding:14px 12px; width:35%; min-height:300px; }
.arb-pv--stitch .arb-pv-sidebar .arb-pvb-hd { color:white; border-color:rgba(255,255,255,.4); letter-spacing:.15em; }
.arb-pv--stitch .arb-pv-sidebar .arb-pvb-txt { color:rgba(255,255,255,.8); }
.arb-pv--stitch .arb-pv-sidebar .arb-pvb-co { color:white; font-weight:600; }
.arb-pv--stitch .arb-pv-sidebar .arb-pvb-ro { color:rgba(255,255,255,.65); }
.arb-pv--stitch .arb-pv-sidebar .arb-pvb-pr { color:rgba(255,255,255,.45); }
.arb-pv--stitch .arb-pv-main { background:white; padding:14px 16px; }
.arb-pv--stitch .arb-pv-main .arb-pvb-hd { color:#333; border-color:#333; letter-spacing:.15em; }
.arb-pv--stitch .arb-pv-main .arb-pvb-co { color:#333; font-weight:700; font-size:10px; }
.arb-pv--stitch .arb-pv-main .arb-pvb-ro { color:#555; font-style:italic; }
.arb-pv--stitch .arb-pv-main .arb-pvb-pr { color:#888; font-weight:700; font-size:8px; }

/* White Minimal template */
.arb-pv--white-minimal { font-family:'Inter',sans-serif; }
.arb-pv--white-minimal .arb-pv-hdr { background:white; border-bottom:none; padding:20px 20px 10px; }
.arb-pv--white-minimal .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:28px; font-weight:700; color:#2C2C2C; letter-spacing:.05em; line-height:1.1; }
.arb-pv--white-minimal .arb-pv-role { font-family:'Montserrat',sans-serif; font-size:9px; color:#2C2C2C; letter-spacing:.2em; font-weight:400; text-transform:uppercase; margin-top:4px; }
.arb-pv--white-minimal .arb-pv-contacts { font-size:8px; color:#6A6A6A; margin-top:3px; }
.arb-pv--white-minimal .arb-pv-photo { width:64px; height:64px; border-radius:50%; }
.arb-pv--white-minimal .arb-pv-2col-body { gap:0; }
.arb-pv--white-minimal .arb-pv-sidebar { background:#F4F5F7; padding:14px 12px; width:35%; }
.arb-pv--white-minimal .arb-pv-sidebar .arb-pvb-hd { color:#2C2C2C; border-color:#2C2C2C; font-family:'Montserrat',sans-serif; letter-spacing:.12em; }
.arb-pv--white-minimal .arb-pv-sidebar .arb-pvb-txt { color:#6A6A6A; }
.arb-pv--white-minimal .arb-pv-sidebar .arb-pvb-co { color:#2C2C2C; font-weight:600; }
.arb-pv--white-minimal .arb-pv-sidebar .arb-pvb-ro { color:#6A6A6A; font-size:9px; }
.arb-pv--white-minimal .arb-pv-main { background:white; padding:14px 16px; }
.arb-pv--white-minimal .arb-pv-main .arb-pvb-hd { color:#2C2C2C; border-color:#2C2C2C; font-family:'Montserrat',sans-serif; letter-spacing:.12em; }
.arb-pv--white-minimal .arb-pv-main .arb-pvb-co { color:#2C2C2C; font-weight:600; font-size:10px; }
.arb-pv--white-minimal .arb-pv-main .arb-pvb-ro { color:#B08968; font-family:'Montserrat',sans-serif; font-size:9px; font-weight:600; }
.arb-pv--white-minimal .arb-pv-main .arb-pvb-pr { color:#6A6A6A; font-size:8px; }
.arb-pv--white-minimal .arb-pv-main .arb-pvb-txt { color:#6A6A6A; font-size:9px; line-height:1.6; }


/* Green Clean template */
.arb-pv--green-clean { font-family:'Inter',sans-serif; background:white; }
.arb-pv--green-clean .arb-pv-hdr { border-bottom:none; padding:18px 20px 10px; background:white; }
.arb-pv--green-clean .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:26px; font-weight:800; color:#0F4C3A; letter-spacing:.12em; text-transform:uppercase; line-height:1.1; }
.arb-pv--green-clean .arb-pv-role { color:#5A5A5A; font-size:10px; letter-spacing:.15em; font-weight:500; margin-top:3px; }
.arb-pv--green-clean .arb-pv-contacts { font-size:8px; color:#5A5A5A; margin-top:3px; }
.arb-pv--green-clean .arb-pv-photo { width:56px; height:56px; border-radius:4px; }
.arb-pv--green-clean .arb-pv-single { padding:4px 20px; }
.arb-pv--green-clean .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:9px; font-weight:800; color:#0F4C3A; border-bottom:1.5px solid #B2C2BB; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; padding-bottom:3px; }
.arb-pv--green-clean .arb-pvb-co { color:#0F4C3A; font-weight:600; font-size:10px; }
.arb-pv--green-clean .arb-pvb-ro { color:#5A5A5A; font-size:9px; }
.arb-pv--green-clean .arb-pvb-pr { color:#333; font-size:8.5px; font-weight:500; }
.arb-pv--green-clean .arb-pvb-txt { color:#5A5A5A; font-size:9px; line-height:1.6; }


/* Modern Card template */
.arb-pv--modern-card { font-family:'Inter',sans-serif; background:white; }
.arb-pv--modern-card .arb-pv-hdr { border-bottom:none; padding:0; margin-bottom:0; }
.arb-pv--modern-card .arb-pv-2col-body { gap:0; align-items:flex-start; }
.arb-pv--modern-card .arb-pv-sidebar { width:32%; background:white; padding:14px 10px; display:flex; flex-direction:column; gap:8px; }
.arb-pv--modern-card .arb-pv-photo { width:60px; height:60px; border-radius:50%; border:2px solid #E2E8F0; display:block; margin:0 auto 6px; }
.arb-pv--modern-card .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:18px; font-weight:600; color:#333; letter-spacing:.05em; text-align:center; text-transform:uppercase; line-height:1.2; }
.arb-pv--modern-card .arb-pv-role { color:#666; font-size:9px; text-align:center; letter-spacing:.05em; font-weight:400; margin-top:2px; }
.arb-pv--modern-card .arb-pv-contacts { display:none; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb { background:white; border:1px solid #C4C4C4; border-radius:8px; padding:8px 10px; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:8px; font-weight:600; color:#333; text-align:center; letter-spacing:.12em; border-bottom:1px solid #C4C4C4; padding-bottom:3px; margin-bottom:5px; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb-txt { color:#666; font-size:8.5px; text-align:center; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb-co { color:#333; font-weight:600; font-size:9px; text-align:center; }
.arb-pv--modern-card .arb-pv-main { background:white; padding:14px 16px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:9px; font-weight:600; color:#333; text-align:center; border:none; border-bottom:1.5px solid #C4C4C4; letter-spacing:.15em; padding-bottom:4px; margin-bottom:8px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-co { color:#333; font-family:'Montserrat',sans-serif; font-weight:600; font-size:10px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-ro { color:#555; font-style:italic; font-size:9px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-pr { color:#666; font-size:8px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-txt { color:#666; font-size:9px; line-height:1.6; }


/* BW Minimal template */
.arb-pv--bw-minimal { font-family:'Inter',sans-serif; background:white; }
.arb-pv--bw-minimal .arb-pv-hdr { border-bottom:none; padding:14px 20px 8px; background:white; display:flex; align-items:center; gap:12px; }
.arb-pv--bw-minimal .arb-pv-photo { width:56px; height:56px; border-radius:50%; border:1.5px solid #222; filter:grayscale(100%); flex-shrink:0; }
.arb-pv--bw-minimal .arb-pv-hdr-t { flex:1; border-bottom:1px solid #222; padding-bottom:5px; }
.arb-pv--bw-minimal .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:20px; font-weight:700; color:#111; letter-spacing:.08em; text-transform:uppercase; }
.arb-pv--bw-minimal .arb-pv-role { color:#333; font-family:'Montserrat',sans-serif; font-size:9px; letter-spacing:.2em; font-weight:400; margin-top:2px; }
.arb-pv--bw-minimal .arb-pv-contacts { font-size:8px; color:#555; margin-top:2px; }
.arb-pv--bw-minimal .arb-pv-2col-body { gap:0; }
.arb-pv--bw-minimal .arb-pv-sidebar { width:32%; background:white; padding:12px 12px; }
.arb-pv--bw-minimal .arb-pv-main { background:white; padding:12px 16px; }
.arb-pv--bw-minimal .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700; color:#111; border-bottom:1px solid #222; letter-spacing:.12em; text-transform:uppercase; padding-bottom:3px; margin-bottom:6px; }
.arb-pv--bw-minimal .arb-pvb-co { color:#111; font-weight:600; font-size:9.5px; letter-spacing:.05em; }
.arb-pv--bw-minimal .arb-pvb-ro { color:#333; font-size:9px; }
.arb-pv--bw-minimal .arb-pvb-pr { color:#555; font-size:8px; font-weight:300; }
.arb-pv--bw-minimal .arb-pvb-txt { color:#333; font-size:9px; line-height:1.6; }


/* Timeline layout (stitch, white-minimal, modern-card, bw-minimal) */
.arb-pvb-tl-item { position:relative; padding-left:14px; margin-bottom:8px; }
.arb-pvb-tl-dot { position:absolute; left:0; top:3px; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.arb-pvb-tl-body { border-left:1px solid #ddd; padding-left:8px; margin-left:3px; }
.arb-pvb-pe--tl { font-size:8px; color:#999; margin-bottom:2px; }

/* Grid layout (green-clean) */
.arb-pvb-grid-row { display:grid; grid-template-columns:90px 1fr; gap:8px; margin-bottom:8px; }
.arb-pvb-grid-left { font-size:9px; color:#5A5A5A; }
.arb-pvb-grid-right { }

/* Preview blocks */
.arb-pvb { break-inside:avoid; flex:1; }
.arb-pvb-hd { font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--acc,#6366f1); border-bottom:1px solid var(--acc,#6366f1); padding-bottom:2px; margin-bottom:5px; }
.arb-pvb-txt { font-size:9.5px; color:#374151; line-height:1.55; white-space:pre-wrap; }
.arb-pvb-txt span[style*="font-size"] { line-height:inherit; }
.arb-pvb-co span[style*="font-size"], .arb-pvb-ro span[style*="font-size"] { font-size:inherit; }
.arb-pvb-eh  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2px; }
.arb-pvb-co  { font-weight:700; font-size:10px; color:#111118; }
.arb-pvb-pe  { font-size:9px; color:#6b7280; }
.arb-pvb-ro  { font-size:9.5px; color:#374151; margin-bottom:3px; }
.arb-pvb-sk  { display:flex; font-size:9px; margin-bottom:2px; }
.arb-pvb-sk strong { min-width:70px; color:#111118; }
.arb-pvb-langs { display:flex; flex-wrap:wrap; gap:4px; }
.arb-pvb-lang  { font-size:9px; background:#f3f4f6; border-radius:3px; padding:1px 5px; color:#374151; }
.arb-pvb-proj  { margin-bottom:6px; }
.arb-pvb-proj:last-child { margin-bottom:0; }
.arb-pvb-lk    { font-size:8.5px; color:var(--acc,#6366f1); }
.arb-pvb-cr    { font-size:9px; color:#374151; margin-bottom:2px; }

/* ─── Cover Letter ───────────────────────────────────────────────────────────── */
.arb-cl { flex:1; display:flex; overflow:hidden; }
.arb-cl-panel { width:300px; flex-shrink:0; background:var(--surf); border-right:1px solid var(--bdr); overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.arb-cl-phd   { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--tx); }
.arb-cl-phd span { font-size:18px; }
.arb-cl-fld   { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:500; color:var(--tx2); }
.arb-cl-in,.arb-cl-ta { background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); color:var(--tx); font-family:var(--font); font-size:12px; padding:7px 10px; outline:none; width:100%; transition:border-color .15s; }
.arb-cl-in:focus,.arb-cl-ta:focus { border-color:var(--acc); }
.arb-cl-ta { resize:vertical; min-height:100px; }
.arb-cl-tone { display:flex; flex-direction:column; gap:6px; }
.arb-cl-tone-hd { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:500; color:var(--tx2); }
.arb-cl-tone-v { font-size:12px; color:var(--tx); }
.arb-cl-tone input[type=range] { width:100%; accent-color:var(--acc); }
.arb-cl-er  { font-size:12px; color:var(--err); display:flex; justify-content:space-between; align-items:center; }
.arb-cl-er button { background:none; border:none; cursor:pointer; color:var(--err); font-size:14px; }
.arb-cl-gen { background:var(--acc); border:none; border-radius:var(--r); color:white; font-family:var(--font); font-size:13px; font-weight:600; padding:10px; cursor:pointer; transition:all .15s; width:100%; }
.arb-cl-gen:hover:not(:disabled) { filter:brightness(1.12); }
.arb-cl-gen:disabled { opacity:.5; cursor:not-allowed; }
.arb-cl-gen--lk { background:linear-gradient(135deg,#f59e0b,#f97316); }
.arb-cl-gen--ld { opacity:.7; cursor:wait; }
.arb-cl-out { flex:1; overflow-y:auto; padding:24px; background:#2a2a35; display:flex; flex-direction:column; align-items:center; }
.arb-app[data-arb-theme="light"] .arb-cl-out { background:#c8c8d8; }
.arb-cl-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.3); flex:1; min-height:200px; font-size:14px; }
.arb-cl-empty span { font-size:32px; opacity:.4; }
.arb-cl-sk   { width:100%; max-width:700px; background:white; border-radius:4px; padding:40px; }
.arb-cl-sk-h { height:24px; background:#e5e7eb; border-radius:4px; margin-bottom:20px; animation:arbShim 1.4s infinite; }
.arb-cl-sk-b { height:200px; background:#f3f4f6; border-radius:4px; animation:arbShim 1.4s infinite .1s; }
.arb-cl-res  { width:100%; max-width:700px; display:flex; flex-direction:column; gap:12px; }
.arb-cl-res-bar { display:flex; align-items:center; gap:8px; }
.arb-cl-res-bar>span:first-child { font-size:12px; color:rgba(255,255,255,.5); font-family:var(--mono); flex:1; }
.arb-cl-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); color:rgba(255,255,255,.8); font-size:12px; padding:5px 12px; cursor:pointer; transition:all .15s; }
.arb-cl-btn:hover { background:rgba(255,255,255,.18); }
.arb-cl-btn--g { background:transparent; }
.arb-cl-paper { background:white; border-radius:4px; padding:48px 56px; box-shadow:0 8px 64px rgba(0,0,0,.4); color:#111118; font-family:'DM Sans',sans-serif; }
.arb-cl-name    { font-family:'DM Serif Display',Georgia,serif; font-size:20px; color:#111118; margin-bottom:2px; }
.arb-cl-company { font-size:13px; color:#6b7280; margin-bottom:12px; }
.arb-cl-div     { border:none; border-top:1px solid #e5e7eb; margin-bottom:20px; }
.arb-cl-para    { font-size:13px; color:#374151; line-height:1.7; margin-bottom:14px; }
.arb-cl-closing { font-size:13px; color:#374151; margin-bottom:6px; }
.arb-cl-sig     { font-family:'DM Serif Display',Georgia,serif; font-size:15px; color:#111118; }

/* ─── Toast ──────────────────────────────────────────────────────────────────── */
.arb-toast { position:fixed; bottom:20px; right:20px; z-index:9999; padding:10px 16px; border-radius:var(--r); font-size:13px; font-weight:500; box-shadow:0 4px 20px rgba(0,0,0,.4); animation:arbSlideUp .25s ease; max-width:320px; }
.arb-toast--success { background:#166534; color:#bbf7d0; border:1px solid #15803d; }
.arb-toast--error   { background:#7f1d1d; color:#fecaca; border:1px solid #991b1b; }
.arb-toast--info    { background:var(--surf2); color:var(--tx); border:1px solid var(--bdr2); }

@keyframes arbSlideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes arbShim { 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:900px){
    .arb-sidebar { width:100%; height:auto; max-height:200px; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--bdr); overflow-x:auto; overflow-y:hidden; }
    .arb-pv-scroll { padding:12px; }
    .arb-pv-a4 { width:100%; }
    .arb-cl { flex-direction:column; }
    .arb-cl-panel { width:100%; border-right:none; border-bottom:1px solid var(--bdr); max-height:45vh; }
}
@media(max-width:600px){
    .arb-tabs,.arb-sh { display:none !important; }
}

/* ─── Full-page mount fix ──────────────────────────────────────────────────── */
/* Ensures the builder fills the whole viewport regardless of theme wrapper */
#arb-root,
/* ─── Layout ─────────────────────────────────────────────────────────────────── */
.arb-main { flex:1; display:flex; overflow:hidden; min-height:0; }
.arb-main--pv,.arb-main--cl { overflow:hidden; }

/* ─── Sidebar ────────────────────────────────────────────────────────────────── */
.arb-sidebar { width:var(--sw); flex-shrink:0; background:var(--surf); border-right:1px solid var(--bdr); display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--bdr) transparent; }
.arb-sidebar::-webkit-scrollbar { width:4px; } .arb-sidebar::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:2px; }
.arb-brand { display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--bdr); flex-shrink:0; }
.arb-brand-ic { font-size:20px; color:var(--acc); }
.arb-brand-nm { font-size:13px; font-weight:600; color:var(--tx); line-height:1.2; }
.arb-brand-pl { font-size:10px; color:var(--tx3); font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.arb-sb-acts { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--bdr); flex-shrink:0; }
.arb-save-btn,.arb-ghost-btn { flex:1; border:1px solid var(--bdr); border-radius:var(--r); cursor:pointer; font-family:var(--font); font-size:12px; font-weight:500; padding:6px 10px; transition:all .15s; }
.arb-save-btn { background:var(--acc); border-color:var(--acc); color:#fff; }
.arb-save-btn:hover:not(:disabled) { filter:brightness(1.1); }
.arb-save-btn:disabled { opacity:.45; cursor:not-allowed; }
.arb-save-btn--ld { opacity:.65; cursor:wait; }
.arb-ghost-btn { background:transparent; color:var(--tx2); }
.arb-ghost-btn:hover:not(:disabled) { background:var(--surf2); color:var(--tx); }
.arb-ghost-btn:disabled { opacity:.35; cursor:not-allowed; }
.arb-sl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--tx3); padding:12px 14px 5px; font-family:var(--mono); }

/* ─── Score ──────────────────────────────────────────────────────────────────── */
.arb-score { padding:10px 12px 8px; border-bottom:1px solid var(--bdr); }
.arb-score-hd { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--tx3); font-family:var(--mono); margin-bottom:4px; }
.arb-score-arc { position:relative; display:flex; justify-content:center; }
.arb-score-svg { width:100%; max-width:170px; overflow:visible; }
.arb-score-track { stroke:var(--surf3); }
.arb-score-nw { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; line-height:1; }
.arb-score-n { font-family:var(--disp); font-size:26px; font-weight:700; line-height:1; }
.arb-score-pct { font-size:11px; color:var(--tx3); font-family:var(--mono); }
.arb-score-tl { font-size:10px; font-family:var(--mono); font-weight:500; margin-top:1px; }
.arb-score-tip { font-size:11px; color:var(--tx2); text-align:center; margin-top:4px; }
.arb-score-tip strong { color:var(--tx); }

/* ─── Template Picker ────────────────────────────────────────────────────────── */
.arb-tmpl { border-bottom:1px solid var(--bdr); padding-bottom:10px; }
.arb-tmpl-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; padding:0 10px; }
.arb-tmpl-btn { position:relative; background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); cursor:pointer; padding:6px 4px 5px; transition:all .15s; display:flex; flex-direction:column; align-items:center; gap:4px; }
.arb-tmpl-btn:hover { border-color:var(--bdr2); background:var(--surf3); }
.arb-tmpl-btn--a { border-color:var(--ta,var(--acc)) !important; background:var(--surf3) !important; }
.arb-tmpl-pv { width:44px; height:32px; background:#fff; border-radius:2px; overflow:hidden; position:relative; display:flex; }
.arb-tmpl-sb { width:14px; flex-shrink:0; opacity:.85; }
.arb-tmpl-lines { flex:1; padding:4px 3px 3px; display:flex; flex-direction:column; gap:2px; }
.arb-tl { height:2px; background:#ddd; border-radius:1px; width:100%; }
.arb-tl--h { background:var(--ta,#6366f1); height:3px; }
.arb-tl--s { width:65%; }
.arb-tmpl-lb { font-size:10px; color:var(--tx2); font-family:var(--mono); }
.arb-tmpl-btn--a .arb-tmpl-lb { color:var(--tx); }
.arb-tmpl-ck { position:absolute; top:3px; right:4px; font-size:9px; color:var(--ta,var(--acc)); font-weight:700; }

/* ─── CV Type ────────────────────────────────────────────────────────────────── */
.arb-cvt { border-bottom:1px solid var(--bdr); padding-bottom:10px; }
.arb-cvt-grid { display:flex; flex-wrap:wrap; gap:4px; padding:0 10px; }
.arb-cvt-btn { display:flex; align-items:center; gap:4px; background:var(--surf2); border:1px solid var(--bdr); border-radius:20px; padding:4px 10px; cursor:pointer; font-family:var(--font); font-size:11px; font-weight:500; color:var(--tx2); transition:all .15s; }
.arb-cvt-btn:hover { border-color:var(--bdr2); color:var(--tx); }
.arb-cvt-btn--a { background:var(--acc2); border-color:var(--acc); color:var(--acc); }
.arb-cvt-ic { font-size:13px; }

/* ─── Layout Toggle ──────────────────────────────────────────────────────────── */
.arb-ly { border-bottom:1px solid var(--bdr); padding-bottom:10px; }
.arb-ly-btns { display:flex; gap:6px; padding:0 12px; }
.arb-ly-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); cursor:pointer; font-family:var(--font); font-size:11px; font-weight:500; color:var(--tx2); padding:7px 8px; transition:all .15s; }
.arb-ly-btn:hover { border-color:var(--bdr2); color:var(--tx); }
.arb-ly-btn--a { background:var(--acc2); border-color:var(--acc); color:var(--acc); }

/* ─── Block List ─────────────────────────────────────────────────────────────── */
.arb-blist { list-style:none; padding:0 8px 8px; display:flex; flex-direction:column; gap:3px; }
.arb-tile { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--r); border:1px solid transparent; transition:all .15s; cursor:default; }
.arb-tile:hover { background:var(--surf2); border-color:var(--bdr); }
.arb-tile-ic { font-size:15px; flex-shrink:0; color:var(--tac,var(--acc)); }
.arb-tile-tx { flex:1; min-width:0; }
.arb-tile-tx strong { display:block; font-size:12px; font-weight:600; color:var(--tx); line-height:1.2; }
.arb-tile-tx span { display:block; font-size:10px; color:var(--tx3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arb-tile-add { width:22px; height:22px; border-radius:50%; border:1px solid var(--bdr); background:var(--surf3); color:var(--tx2); cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; font-weight:300; }
.arb-tile:hover .arb-tile-add { border-color:var(--tac,var(--acc)); color:var(--tac,var(--acc)); background:rgba(99,102,241,.1); }

/* ─── PDF Importer ───────────────────────────────────────────────────────────── */
.arb-pdf-imp { border-top:1px solid var(--bdr); padding:0 0 12px; }
.arb-pdf-drop { margin:0 10px; border:1.5px dashed var(--bdr2); border-radius:var(--r); padding:12px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; transition:all .15s; color:var(--tx2); font-size:12px; text-align:center; }
.arb-pdf-drop:hover,.arb-pdf-drop--drag { border-color:var(--acc); color:var(--acc); background:var(--acc2); }
.arb-pdf-drop--err { border-color:var(--err); }
.arb-pdf-hint { font-size:10px; color:var(--tx3); font-family:var(--mono); }
.arb-pdf-err  { font-size:10px; color:var(--err); margin-top:2px; }
.arb-pdf-prg  { margin:0 10px; background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; height:40px; display:flex; align-items:center; position:relative; padding:0 10px; }
.arb-pdf-prg-bar { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--acc),#818cf8); transition:width .4s ease; opacity:.25; }
.arb-pdf-prg span { position:relative; font-size:11px; font-family:var(--mono); color:var(--tx); z-index:1; }

/* ─── Canvas ─────────────────────────────────────────────────────────────────── */
.arb-cv-wrap { flex:1; overflow-y:auto; background:var(--bg); padding:20px; scrollbar-width:thin; scrollbar-color:var(--bdr) transparent; }
.arb-cv-wrap::-webkit-scrollbar { width:5px; } .arb-cv-wrap::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:3px; }
.arb-cv-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--tx3); user-select:none; min-height:300px; }
.arb-cv-empty-ic { font-size:36px; opacity:.3; }
.arb-cv-empty-t { font-size:15px; font-weight:500; color:var(--tx2); }
.arb-cv-empty-h { font-size:12px; max-width:280px; text-align:center; line-height:1.5; }
.arb-cv { display:flex; flex-direction:column; gap:8px; max-width:860px; margin:0 auto; }

/* ─── Canvas Block ───────────────────────────────────────────────────────────── */
.arb-cb { background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r2); overflow:hidden; position:relative; transition:border-color .15s,box-shadow .15s; cursor:pointer; }
.arb-cb:hover { border-color:var(--bdr2); }
.arb-cb--sel { border-color:var(--acc) !important; box-shadow:0 0 0 2px var(--acc2); }
.arb-cb-stripe { height:3px; width:100%; }
.arb-cb-bar { display:flex; align-items:center; justify-content:space-between; padding:6px 12px 5px; border-bottom:1px solid var(--bdr); }
.arb-cb-type { font-size:11px; font-family:var(--mono); font-weight:500; }
.arb-cb-acts { display:flex; gap:3px; }
.arb-cb-mv,.arb-cb-del { background:transparent; border:none; cursor:pointer; color:var(--tx3); font-size:14px; width:22px; height:22px; border-radius:4px; display:flex; align-items:center; justify-content:center; transition:all .12s; font-family:var(--mono); line-height:1; }
.arb-cb-mv:hover:not(:disabled) { background:var(--surf2); color:var(--tx); }
.arb-cb-mv:disabled { opacity:.2; cursor:not-allowed; }
.arb-cb-del:hover { background:rgba(239,68,68,.15); color:var(--err); }
.arb-cb-body { padding:14px 16px 16px; }

/* ─── Editable Field ─────────────────────────────────────────────────────────── */
.arb-ef { display:inline-block; min-width:20px; cursor:text; outline:none; border-radius:3px; transition:background .12s; line-height:inherit; color:inherit; white-space:pre-wrap; word-break:break-word; }
.arb-ef:focus { background:rgba(99,102,241,.08); }
.arb-ef--empty { opacity:.35; }

/* ─── Photo Upload ───────────────────────────────────────────────────────────── */
.arb-photo-wrap { flex-shrink:0; }
.arb-photo-zone { width:76px; height:76px; border-radius:50%; border:2px dashed var(--bdr2); cursor:pointer; overflow:hidden; position:relative; transition:all .15s; display:flex; align-items:center; justify-content:center; background:var(--surf2); }
.arb-photo-zone:hover,.arb-photo-zone--drag { border-color:var(--acc); background:var(--acc2); }
.arb-photo-zone--filled { border-style:solid; border-color:var(--bdr2); }
.arb-photo-img { width:100%; height:100%; object-fit:cover; display:block; }
.arb-photo-ph { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--tx3); font-size:10px; padding:4px; text-align:center; pointer-events:none; }
.arb-photo-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; opacity:0; transition:opacity .15s; font-size:10px; color:#fff; }
.arb-photo-zone:hover .arb-photo-overlay { opacity:1; }
.arb-photo-remove { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:var(--err); border:none; color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.arb-photo-zone:hover .arb-photo-remove { opacity:1; }

/* ─── Block Content ──────────────────────────────────────────────────────────── */
h3.arb-sl,.arb-sl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--tx3); font-family:var(--mono); padding:0; margin-bottom:8px; }

/* Header */
.arb-block-header .arb-hdr-inner { display:flex; gap:14px; align-items:flex-start; }
.arb-hdr-text { flex:1; min-width:0; }
.arb-hdr-name { font-family:var(--disp); font-size:22px; line-height:1.15; color:var(--tx); display:block; margin-bottom:3px; }
.arb-hdr-role { font-size:13px; color:var(--tx2); display:block; margin-bottom:8px; }
.arb-hdr-meta { display:flex; flex-wrap:wrap; align-items:center; gap:3px; margin-bottom:4px; }
.arb-hdr-mi   { font-size:12px; color:var(--tx2); font-family:var(--mono); }
.arb-sep      { color:var(--tx3); font-size:11px; }

/* Summary */
.arb-sum-body { font-size:13px; line-height:1.6; color:var(--tx2); display:block; width:100%; }

/* Experience */
.arb-exp-hdr { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.arb-exp-l   { flex:1; min-width:0; }
.arb-exp-r   { flex-shrink:0; text-align:right; }
.arb-exp-co  { font-size:14px; font-weight:600; color:var(--tx); display:block; margin-bottom:2px; }
.arb-exp-ro  { font-size:13px; color:var(--tx2); display:block; }
.arb-exp-pe  { font-size:12px; color:var(--tx2); font-family:var(--mono); display:block; margin-bottom:2px; }
.arb-exp-lo  { font-size:11px; color:var(--tx3); font-family:var(--mono); display:block; }
.arb-exp-de  { font-size:13px; line-height:1.6; color:var(--tx2); display:block; width:100%; white-space:pre-wrap; }

/* Education */
.arb-edu-r   { display:flex; justify-content:space-between; gap:10px; }
.arb-edu-l   { flex:1; }
.arb-edu-rr  { flex-shrink:0; text-align:right; }
.arb-edu-ins { font-size:14px; font-weight:600; color:var(--tx); display:block; margin-bottom:2px; }
.arb-edu-deg { font-size:13px; color:var(--tx2); display:block; }
.arb-edu-per { font-size:12px; color:var(--tx2); font-family:var(--mono); display:block; margin-bottom:2px; }
.arb-edu-gpa { font-size:11px; color:var(--tx3); font-family:var(--mono); display:block; }

/* Skills */
.arb-sk-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.arb-sk-cat  { display:flex; gap:6px; align-items:baseline; }
.arb-sk-lb   { font-size:12px; font-weight:600; color:var(--tx); flex-shrink:0; min-width:80px; }
.arb-sk-it   { font-size:12px; color:var(--tx2); display:block; }

/* Projects */
.arb-proj-item { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--bdr); }
.arb-proj-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.arb-proj-nm { font-size:14px; font-weight:600; color:var(--tx); display:block; margin-bottom:4px; }
.arb-proj-de { font-size:13px; color:var(--tx2); line-height:1.55; display:block; margin-bottom:4px; white-space:pre-wrap; }
.arb-proj-lk { font-size:11px; color:var(--acc); font-family:var(--mono); display:block; }

/* Certifications */
.arb-cert-it { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px; margin-bottom:6px; }
.arb-cert-it:last-child { margin-bottom:0; }
.arb-cert-nm { font-size:13px; font-weight:600; color:var(--tx); }
.arb-cert-is { font-size:13px; color:var(--tx2); }
.arb-cert-yr { font-size:11px; color:var(--tx3); font-family:var(--mono); }

/* Languages */
.arb-lang-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.arb-lang-it   { display:flex; align-items:center; gap:6px; }
.arb-lang-nm   { font-size:13px; font-weight:500; color:var(--tx); }
.arb-lang-lv   { background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); color:var(--tx2); font-family:var(--mono); font-size:11px; padding:2px 6px; cursor:pointer; outline:none; }

/* Contact */
.arb-ct-list  { list-style:none; display:flex; flex-direction:column; gap:6px; }
.arb-ct-item  { display:flex; align-items:center; gap:8px; }
.arb-ct-ic    { font-size:14px; flex-shrink:0; width:20px; text-align:center; }
.arb-ct-val   { font-size:13px; color:var(--tx2); font-family:var(--mono); }

/* Utility */
.arb-add-btn { background:transparent; border:1px dashed var(--bdr2); border-radius:var(--r); color:var(--tx3); font-size:11px; font-family:var(--mono); cursor:pointer; padding:4px 10px; transition:all .15s; }
.arb-add-btn:hover { border-color:var(--acc); color:var(--acc); background:var(--acc2); }

.arb-unknown { padding:8px; color:var(--err); font-family:var(--mono); font-size:12px; }

/* ─── Preview Panel ──────────────────────────────────────────────────────────── */

.arb-pv-bar { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--bdr); flex-shrink:0; background:var(--surf); }
.arb-pv-lbl { font-size:12px; font-weight:600; color:var(--tx2); font-family:var(--mono); }
.arb-pv-zoom { display:flex; align-items:center; gap:8px; }
.arb-pv-zoom button { width:24px; height:24px; background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); cursor:pointer; color:var(--tx); font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.arb-pv-zoom button:hover { border-color:var(--acc); color:var(--acc); }
.arb-pv-zoom span { font-size:11px; font-family:var(--mono); color:var(--tx2); min-width:34px; text-align:center; }
.arb-pv-scroll { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; align-items:center; background:#2a2a35; }
.arb-app[data-arb-theme="light"] .arb-pv-scroll { background:#c8c8d8; }

/* A4 page — scale wrapper keeps scroll correct */
.arb-pv-a4-outer { flex-shrink:0; overflow:hidden; }
.arb-pv-a4 { width:794px; min-height:1123px; background:var(--paper); box-shadow:var(--pshadow); transform-origin:top left; flex-shrink:0; }

/* ─── Preview CV Content ─────────────────────────────────────────────────────── */
.arb-pv { width:100%; min-height:1123px; font-family:'DM Sans',sans-serif; font-size:10px; color:#111118; padding:40px 48px; background:white; display:flex; flex-direction:column; }
.arb-pv span[style*='font-size'] { font-family:inherit; }
.arb-pv-hdr { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; padding-bottom:12px; border-bottom:2px solid var(--acc,#6366f1); }
.arb-pv-photo { width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--acc,#6366f1); }
.arb-pv-hdr-t { flex:1; min-width:0; }
.arb-pv-name { font-family:'DM Serif Display',Georgia,serif; font-size:22px; font-weight:700; color:#111118; line-height:1.1; margin-bottom:2px; }
.arb-pv-role { font-size:12px; color:var(--acc,#6366f1); font-weight:500; margin-bottom:4px; }
.arb-pv-contacts { font-size:9px; color:#6b7280; }
.arb-pv-single { display:flex; flex-direction:column; gap:10px; flex:1; }
.arb-pv-2col-body { display:flex; gap:16px; align-items:flex-start; flex:1; }
.arb-pv-sidebar { width:36%; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.arb-pv-main    { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }

/* Template header variants */
.arb-pv--modern .arb-pv-hdr,.arb-pv--executive .arb-pv-hdr,.arb-pv--creative .arb-pv-hdr { background:var(--acc,#6366f1); color:white; border-radius:4px; padding:14px; margin-bottom:12px; border-bottom:none; }
.arb-pv--modern .arb-pv-name,.arb-pv--executive .arb-pv-name,.arb-pv--creative .arb-pv-name { color:white; }
.arb-pv--modern .arb-pv-role,.arb-pv--executive .arb-pv-role,.arb-pv--creative .arb-pv-role { color:rgba(255,255,255,.8); }
.arb-pv--modern .arb-pv-contacts,.arb-pv--executive .arb-pv-contacts,.arb-pv--creative .arb-pv-contacts { color:rgba(255,255,255,.7); }
.arb-pv--minimal .arb-pv-hdr { border-bottom-color:#e5e7eb; }
.arb-pv--minimal .arb-pv-role { color:#374151; }
.arb-pv--academic { font-family:'Times New Roman',serif; }
.arb-pv--academic .arb-pv-name { font-family:'Times New Roman',serif; }


/* Green Clean template */
.arb-pv--green-clean { font-family:'Inter',sans-serif; background:white; }
.arb-pv--green-clean .arb-pv-hdr { border-bottom:none; padding:18px 20px 10px; background:white; }
.arb-pv--green-clean .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:26px; font-weight:800; color:#0F4C3A; letter-spacing:.12em; text-transform:uppercase; line-height:1.1; }
.arb-pv--green-clean .arb-pv-role { color:#5A5A5A; font-size:10px; letter-spacing:.15em; font-weight:500; margin-top:3px; }
.arb-pv--green-clean .arb-pv-contacts { font-size:8px; color:#5A5A5A; margin-top:3px; }
.arb-pv--green-clean .arb-pv-photo { width:56px; height:56px; border-radius:4px; }
.arb-pv--green-clean .arb-pv-single { padding:4px 20px; }
.arb-pv--green-clean .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:9px; font-weight:800; color:#0F4C3A; border-bottom:1.5px solid #B2C2BB; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; padding-bottom:3px; }
.arb-pv--green-clean .arb-pvb-co { color:#0F4C3A; font-weight:600; font-size:10px; }
.arb-pv--green-clean .arb-pvb-ro { color:#5A5A5A; font-size:9px; }
.arb-pv--green-clean .arb-pvb-pr { color:#333; font-size:8.5px; font-weight:500; }
.arb-pv--green-clean .arb-pvb-txt { color:#5A5A5A; font-size:9px; line-height:1.6; }


/* Modern Card template */
.arb-pv--modern-card { font-family:'Inter',sans-serif; background:white; }
.arb-pv--modern-card .arb-pv-hdr { border-bottom:none; padding:0; margin-bottom:0; }
.arb-pv--modern-card .arb-pv-2col-body { gap:0; align-items:flex-start; }
.arb-pv--modern-card .arb-pv-sidebar { width:32%; background:white; padding:14px 10px; display:flex; flex-direction:column; gap:8px; }
.arb-pv--modern-card .arb-pv-photo { width:60px; height:60px; border-radius:50%; border:2px solid #E2E8F0; display:block; margin:0 auto 6px; }
.arb-pv--modern-card .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:18px; font-weight:600; color:#333; letter-spacing:.05em; text-align:center; text-transform:uppercase; line-height:1.2; }
.arb-pv--modern-card .arb-pv-role { color:#666; font-size:9px; text-align:center; letter-spacing:.05em; font-weight:400; margin-top:2px; }
.arb-pv--modern-card .arb-pv-contacts { display:none; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb { background:white; border:1px solid #C4C4C4; border-radius:8px; padding:8px 10px; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:8px; font-weight:600; color:#333; text-align:center; letter-spacing:.12em; border-bottom:1px solid #C4C4C4; padding-bottom:3px; margin-bottom:5px; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb-txt { color:#666; font-size:8.5px; text-align:center; }
.arb-pv--modern-card .arb-pv-sidebar .arb-pvb-co { color:#333; font-weight:600; font-size:9px; text-align:center; }
.arb-pv--modern-card .arb-pv-main { background:white; padding:14px 16px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:9px; font-weight:600; color:#333; text-align:center; border:none; border-bottom:1.5px solid #C4C4C4; letter-spacing:.15em; padding-bottom:4px; margin-bottom:8px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-co { color:#333; font-family:'Montserrat',sans-serif; font-weight:600; font-size:10px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-ro { color:#555; font-style:italic; font-size:9px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-pr { color:#666; font-size:8px; }
.arb-pv--modern-card .arb-pv-main .arb-pvb-txt { color:#666; font-size:9px; line-height:1.6; }


/* BW Minimal template */
.arb-pv--bw-minimal { font-family:'Inter',sans-serif; background:white; }
.arb-pv--bw-minimal .arb-pv-hdr { border-bottom:none; padding:14px 20px 8px; background:white; display:flex; align-items:center; gap:12px; }
.arb-pv--bw-minimal .arb-pv-photo { width:56px; height:56px; border-radius:50%; border:1.5px solid #222; filter:grayscale(100%); flex-shrink:0; }
.arb-pv--bw-minimal .arb-pv-hdr-t { flex:1; border-bottom:1px solid #222; padding-bottom:5px; }
.arb-pv--bw-minimal .arb-pv-name { font-family:'Montserrat',sans-serif; font-size:20px; font-weight:700; color:#111; letter-spacing:.08em; text-transform:uppercase; }
.arb-pv--bw-minimal .arb-pv-role { color:#333; font-family:'Montserrat',sans-serif; font-size:9px; letter-spacing:.2em; font-weight:400; margin-top:2px; }
.arb-pv--bw-minimal .arb-pv-contacts { font-size:8px; color:#555; margin-top:2px; }
.arb-pv--bw-minimal .arb-pv-2col-body { gap:0; }
.arb-pv--bw-minimal .arb-pv-sidebar { width:32%; background:white; padding:12px 12px; }
.arb-pv--bw-minimal .arb-pv-main { background:white; padding:12px 16px; }
.arb-pv--bw-minimal .arb-pvb-hd { font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700; color:#111; border-bottom:1px solid #222; letter-spacing:.12em; text-transform:uppercase; padding-bottom:3px; margin-bottom:6px; }
.arb-pv--bw-minimal .arb-pvb-co { color:#111; font-weight:600; font-size:9.5px; letter-spacing:.05em; }
.arb-pv--bw-minimal .arb-pvb-ro { color:#333; font-size:9px; }
.arb-pv--bw-minimal .arb-pvb-pr { color:#555; font-size:8px; font-weight:300; }
.arb-pv--bw-minimal .arb-pvb-txt { color:#333; font-size:9px; line-height:1.6; }


/* Timeline layout (stitch, white-minimal, modern-card, bw-minimal) */
.arb-pvb-tl-item { position:relative; padding-left:14px; margin-bottom:8px; }
.arb-pvb-tl-dot { position:absolute; left:0; top:3px; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.arb-pvb-tl-body { border-left:1px solid #ddd; padding-left:8px; margin-left:3px; }
.arb-pvb-pe--tl { font-size:8px; color:#999; margin-bottom:2px; }

/* Grid layout (green-clean) */
.arb-pvb-grid-row { display:grid; grid-template-columns:90px 1fr; gap:8px; margin-bottom:8px; }
.arb-pvb-grid-left { font-size:9px; color:#5A5A5A; }
.arb-pvb-grid-right { }

/* Preview blocks */
.arb-pvb { break-inside:avoid; flex:1; }
.arb-pvb-hd { font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--acc,#6366f1); border-bottom:1px solid var(--acc,#6366f1); padding-bottom:2px; margin-bottom:5px; }
.arb-pvb-txt { font-size:9.5px; color:#374151; line-height:1.55; white-space:pre-wrap; }
.arb-pvb-txt span[style*="font-size"] { line-height:inherit; }
.arb-pvb-co span[style*="font-size"], .arb-pvb-ro span[style*="font-size"] { font-size:inherit; }
.arb-pvb-eh  { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:2px; }
.arb-pvb-co  { font-weight:700; font-size:10px; color:#111118; }
.arb-pvb-pe  { font-size:9px; color:#6b7280; }
.arb-pvb-ro  { font-size:9.5px; color:#374151; margin-bottom:3px; }
.arb-pvb-sk  { display:flex; font-size:9px; margin-bottom:2px; }
.arb-pvb-sk strong { min-width:70px; color:#111118; }
.arb-pvb-langs { display:flex; flex-wrap:wrap; gap:4px; }
.arb-pvb-lang  { font-size:9px; background:#f3f4f6; border-radius:3px; padding:1px 5px; color:#374151; }
.arb-pvb-proj  { margin-bottom:6px; }
.arb-pvb-proj:last-child { margin-bottom:0; }
.arb-pvb-lk    { font-size:8.5px; color:var(--acc,#6366f1); }
.arb-pvb-cr    { font-size:9px; color:#374151; margin-bottom:2px; }

/* ─── Cover Letter ───────────────────────────────────────────────────────────── */
.arb-cl { flex:1; display:flex; overflow:hidden; }
.arb-cl-panel { width:300px; flex-shrink:0; background:var(--surf); border-right:1px solid var(--bdr); overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.arb-cl-phd   { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--tx); }
.arb-cl-phd span { font-size:18px; }
.arb-cl-fld   { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:500; color:var(--tx2); }
.arb-cl-in,.arb-cl-ta { background:var(--surf2); border:1px solid var(--bdr); border-radius:var(--r); color:var(--tx); font-family:var(--font); font-size:12px; padding:7px 10px; outline:none; width:100%; transition:border-color .15s; }
.arb-cl-in:focus,.arb-cl-ta:focus { border-color:var(--acc); }
.arb-cl-ta { resize:vertical; min-height:100px; }
.arb-cl-tone { display:flex; flex-direction:column; gap:6px; }
.arb-cl-tone-hd { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:500; color:var(--tx2); }
.arb-cl-tone-v { font-size:12px; color:var(--tx); }
.arb-cl-tone input[type=range] { width:100%; accent-color:var(--acc); }
.arb-cl-er  { font-size:12px; color:var(--err); display:flex; justify-content:space-between; align-items:center; }
.arb-cl-er button { background:none; border:none; cursor:pointer; color:var(--err); font-size:14px; }
.arb-cl-gen { background:var(--acc); border:none; border-radius:var(--r); color:white; font-family:var(--font); font-size:13px; font-weight:600; padding:10px; cursor:pointer; transition:all .15s; width:100%; }
.arb-cl-gen:hover:not(:disabled) { filter:brightness(1.12); }
.arb-cl-gen:disabled { opacity:.5; cursor:not-allowed; }
.arb-cl-gen--lk { background:linear-gradient(135deg,#f59e0b,#f97316); }
.arb-cl-gen--ld { opacity:.7; cursor:wait; }
.arb-cl-out { flex:1; overflow-y:auto; padding:24px; background:#2a2a35; display:flex; flex-direction:column; align-items:center; }
.arb-app[data-arb-theme="light"] .arb-cl-out { background:#c8c8d8; }
.arb-cl-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.3); flex:1; min-height:200px; font-size:14px; }
.arb-cl-empty span { font-size:32px; opacity:.4; }
.arb-cl-sk   { width:100%; max-width:700px; background:white; border-radius:4px; padding:40px; }
.arb-cl-sk-h { height:24px; background:#e5e7eb; border-radius:4px; margin-bottom:20px; animation:arbShim 1.4s infinite; }
.arb-cl-sk-b { height:200px; background:#f3f4f6; border-radius:4px; animation:arbShim 1.4s infinite .1s; }
.arb-cl-res  { width:100%; max-width:700px; display:flex; flex-direction:column; gap:12px; }
.arb-cl-res-bar { display:flex; align-items:center; gap:8px; }
.arb-cl-res-bar>span:first-child { font-size:12px; color:rgba(255,255,255,.5); font-family:var(--mono); flex:1; }
.arb-cl-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:var(--r); color:rgba(255,255,255,.8); font-size:12px; padding:5px 12px; cursor:pointer; transition:all .15s; }
.arb-cl-btn:hover { background:rgba(255,255,255,.18); }
.arb-cl-btn--g { background:transparent; }
.arb-cl-paper { background:white; border-radius:4px; padding:48px 56px; box-shadow:0 8px 64px rgba(0,0,0,.4); color:#111118; font-family:'DM Sans',sans-serif; }
.arb-cl-name    { font-family:'DM Serif Display',Georgia,serif; font-size:20px; color:#111118; margin-bottom:2px; }
.arb-cl-company { font-size:13px; color:#6b7280; margin-bottom:12px; }
.arb-cl-div     { border:none; border-top:1px solid #e5e7eb; margin-bottom:20px; }
.arb-cl-para    { font-size:13px; color:#374151; line-height:1.7; margin-bottom:14px; }
.arb-cl-closing { font-size:13px; color:#374151; margin-bottom:6px; }
.arb-cl-sig     { font-family:'DM Serif Display',Georgia,serif; font-size:15px; color:#111118; }

/* ─── Toast ──────────────────────────────────────────────────────────────────── */
.arb-toast { position:fixed; bottom:20px; right:20px; z-index:9999; padding:10px 16px; border-radius:var(--r); font-size:13px; font-weight:500; box-shadow:0 4px 20px rgba(0,0,0,.4); animation:arbSlideUp .25s ease; max-width:320px; }
.arb-toast--success { background:#166534; color:#bbf7d0; border:1px solid #15803d; }
.arb-toast--error   { background:#7f1d1d; color:#fecaca; border:1px solid #991b1b; }
.arb-toast--info    { background:var(--surf2); color:var(--tx); border:1px solid var(--bdr2); }

@keyframes arbSlideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes arbShim { 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:900px){
    .arb-sidebar { width:100%; height:auto; max-height:200px; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--bdr); overflow-x:auto; overflow-y:hidden; }
    .arb-pv-scroll { padding:12px; }
    .arb-pv-a4 { width:100%; }
    .arb-cl { flex-direction:column; }
    .arb-cl-panel { width:100%; border-right:none; border-bottom:1px solid var(--bdr); max-height:45vh; }
}
@media(max-width:600px){
    .arb-tabs,.arb-sh { display:none !important; }
}


/* ══════════════════════════════════════════════════════
   CANVAS — 2-col drag-drop editor
   ══════════════════════════════════════════════════════ */
.arb-editor-2col {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 8px;
    padding: 4px 4px 8px;
    align-items: start;
    box-sizing: border-box;
}
.arb-editor-col {
    min-height: 120px;
    border-radius: var(--r2);
    border: 2px dashed var(--bdr2);
    padding: 6px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.arb-editor-col--left  { border-color: rgba(99,102,241,.45); }
.arb-editor-col--right { border-color: rgba(34,197,94,.4); }
/* Dragover highlight — class toggled by JS onDragEnter/onDragLeave */
.arb-editor-col--over { border-style: solid !important; }
.arb-editor-col--left.arb-editor-col--over  { border-color: #6366f1 !important; background: rgba(99,102,241,.1) !important; }
.arb-editor-col--right.arb-editor-col--over { border-color: #22c55e !important; background: rgba(34,197,94,.08) !important; }
.arb-editor-col-hd {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; font-family: var(--mono);
    padding: 2px 4px 5px; border-bottom: 1px solid var(--bdr); margin-bottom: 2px;
    flex-shrink: 0;
}
.arb-editor-col--left  .arb-editor-col-hd { color: #a5b4fc; }
.arb-editor-col--right .arb-editor-col-hd { color: #86efac; }
.arb-editor-col-empty {
    font-size: 11px; color: var(--tx3); font-family: var(--mono);
    text-align: center; padding: 28px 8px;
    border: 1px dashed var(--bdr); border-radius: var(--r); margin: 4px;
    pointer-events: none;
}
/* Drag states */
.arb-cb[draggable="true"] { cursor: grab; }
.arb-cb[draggable="true"]:active { cursor: grabbing; }
.arb-cb--dragging { opacity: 0.35; transform: scale(0.96); pointer-events: none; }
/* Column toggle + badge */
.arb-cb-col {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 12px; border: 1px solid;
    font-size: 10px; font-family: var(--mono); font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap; margin-right: 4px;
}
.arb-cb-col--side { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.4); color: #a5b4fc; }
.arb-cb-col--side:hover { background: rgba(99,102,241,.25); border-color: #6366f1; }
.arb-cb-col--main { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); color: #86efac; }
.arb-cb-col--main:hover { background: rgba(34,197,94,.22); border-color: #22c55e; }
.arb-cb-col-badge {
    font-size: 9px; font-family: var(--mono); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 12px; border-bottom: 1px solid var(--bdr);
}
.arb-cb-col-badge--side { background: rgba(99,102,241,.07); color: rgba(99,102,241,.7); }
.arb-cb-col-badge--main { background: rgba(34,197,94,.06);  color: rgba(34,197,94,.65); }
/* Page separator */
.arb-page-sep {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 6px; color: var(--tx3);
    font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
.arb-page-sep::before,.arb-page-sep::after { content:''; flex:1; height:1px; background:var(--bdr2); }

/* ══════════════════════════════════════════════════════
   EDITABLE SECTION LABELS
   ══════════════════════════════════════════════════════ */
.arb-sl-editable { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.arb-sl-text { outline:none; border-radius:3px; padding:1px 4px; transition:background .12s; }
.arb-sl-text:hover,.arb-sl-text:focus { background:var(--surf2); }
.arb-sl-edit-ic { font-size:10px; color:var(--tx3); opacity:0; transition:opacity .15s; }
.arb-sl-editable:hover .arb-sl-edit-ic { opacity:1; }

/* ══════════════════════════════════════════════════════
   FLOATING FONT TOOLBAR — hidden (replaced by inline)
   ══════════════════════════════════════════════════════ */
#arb-font-bar { display: none !important; }

/* ══════════════════════════════════════════════════════
   ELEMENTOR-STYLE BLOCK PICKER
   ══════════════════════════════════════════════════════ */

/* Add block button */
.arb-add-wrap {
    position: relative;
    margin: 6px 0;
}
.arb-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: 1.5px dashed var(--bdr2);
    border-radius: var(--r);
    color: var(--tx3);
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    justify-content: center;
}
.arb-add-btn:hover, .arb-add-btn--open {
    border-color: var(--acc);
    color: var(--acc);
    background: var(--acc2);
}
.arb-add-plus {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    transition: transform .2s;
}
.arb-add-btn--open .arb-add-plus { transform: rotate(45deg); }
.arb-add-label { font-size: 11px; font-weight: 500; }

/* Block picker popup */
.arb-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    width: 320px;
    background: var(--surf);
    border: 1px solid var(--bdr2);
    border-radius: var(--r2);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    overflow: hidden;
}
.arb-picker-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--bdr);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--tx2);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.arb-picker-close {
    background: transparent; border: none;
    color: var(--tx3); font-size: 16px; cursor: pointer; line-height: 1;
    padding: 0 2px; border-radius: 4px; transition: all .12s;
}
.arb-picker-close:hover { color: var(--err); background: rgba(239,68,68,.1); }
.arb-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--bdr);
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bdr2) transparent;
}
.arb-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--surf);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.arb-picker-item:hover { background: var(--surf2); }
.arb-picker-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.arb-picker-label { font-size: 12px; font-weight: 600; color: var(--tx); font-family: var(--font); }
.arb-picker-desc  { display: none; } /* hidden in compact grid */

/* ══════════════════════════════════════════════════════
   PER-PAGE LAYOUT TOGGLE + PAGE BAR
   ══════════════════════════════════════════════════════ */
.arb-page-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: var(--surf2);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
}
.arb-page-bar-title {
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tx3);
    flex-shrink: 0;
}
.arb-pg-layout {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.arb-pg-layout-lbl {
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--mono);
    white-space: nowrap;
}
.arb-pg-layout-btn {
    background: var(--surf3);
    border: 1px solid var(--bdr2);
    border-radius: 4px;
    color: var(--tx2);
    font-size: 10px;
    font-family: var(--mono);
    cursor: pointer;
    padding: 3px 9px;
    height: 22px;
    white-space: nowrap;
    transition: all .12s;
}
.arb-pg-layout-btn:hover { border-color: var(--acc); color: var(--acc); }
.arb-pg-layout-btn--on {
    background: var(--acc2) !important;
    border-color: var(--acc) !important;
    color: var(--acc) !important;
    font-weight: 600;
}

/* Light mode */
.arb-app[data-arb-theme="light"] .arb-picker { background: #fff; border-color: #c8c8d8; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.arb-app[data-arb-theme="light"] .arb-picker-grid { background: #e8e8f0; }
.arb-app[data-arb-theme="light"] .arb-picker-item { background: #fff; }
.arb-app[data-arb-theme="light"] .arb-picker-item:hover { background: #f5f5fa; }
.arb-app[data-arb-theme="light"] .arb-add-btn { border-color: #c8c8d8; color: #9090a8; }
.arb-app[data-arb-theme="light"] .arb-add-btn:hover { border-color: var(--acc); color: var(--acc); background: rgba(99,102,241,.08); }
.arb-app[data-arb-theme="light"] .arb-page-bar { background: #f5f5fa; border-color: #d8d8e4; }
.arb-app[data-arb-theme="light"] .arb-pg-layout-btn { background: #ebebf2; border-color: #c8c8d8; color: #555; }

/* ══════════════════════════════════════════════════════
   ROW — Elementor-style rows within a page
   ══════════════════════════════════════════════════════ */
.arb-row {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--r);
    margin-bottom: 4px;
    transition: border-color .15s;
}
.arb-row:hover { border-color: var(--bdr2); }

.arb-row-ctrl {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--surf2);
    border-radius: var(--r) var(--r) 0 0;
    border: 1px solid var(--bdr);
    border-bottom: none;
    opacity: 0;
    transition: opacity .15s;
}
.arb-row:hover .arb-row-ctrl { opacity: 1; }
.arb-row-lyt-btn {
    background: transparent;
    border: 1px solid var(--bdr2);
    border-radius: 3px;
    color: var(--tx3);
    font-size: 10px;
    font-family: var(--mono);
    cursor: pointer;
    padding: 2px 8px;
    height: 20px;
    transition: all .12s;
}
.arb-row-lyt-btn:hover     { border-color: var(--acc); color: var(--acc); }
.arb-row-lyt-btn--on       { background: var(--acc2); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.arb-row-del-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--tx3);
    font-size: 13px;
    cursor: pointer;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.arb-row-del-btn:hover { border-color: var(--err); color: var(--err); background: rgba(239,68,68,.08); }

/* Add Row button */
.arb-add-row-wrap { padding: 6px 0 2px; }
.arb-add-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px;
    background: transparent;
    border: 1.5px dashed var(--bdr);
    border-radius: var(--r);
    color: var(--tx3);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
}
.arb-add-row-btn:hover { border-color: var(--acc); color: var(--acc); background: var(--acc2); }

/* Preview page separator */
.arb-pv-all { display: flex; flex-direction: column; gap: 24px; }
.arb-pv-pgsep {
    text-align: center;
    font-size: 10px;
    font-family: var(--mono, monospace);
    color: #888;
    padding: 4px 0;
    border-top: 1px dashed #ccc;
    margin-bottom: 8px;
}

/* Light mode row controls */
.arb-app[data-arb-theme="light"] .arb-row-ctrl { background: #f5f5fa; border-color: #d8d8e4; }
.arb-app[data-arb-theme="light"] .arb-row-lyt-btn { border-color: #c8c8d8; color: #888; }
.arb-app[data-arb-theme="light"] .arb-add-row-btn { border-color: #c8c8d8; color: #aaa; }

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — proper stacking, no desktop bleed
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* App shell */
    .arb-app {
        flex-direction: column;
        position: fixed !important;
        top: 0; left: 0;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden;
    }

    /* Preview panel full-height scroll on mobile */
    .arb-pv-panel { flex: 1; min-height: 0; overflow: hidden; }
    .arb-pv-scroll {
        flex: 1;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
    }
    .arb-pv-a4-outer { margin: 0 !important; }
    .arb-pv-all { gap: 12px; }

    /* Topbar row 1: hide shortcuts, shrink title */
    .arb-topbar-row1 { padding: 0 8px; gap: 6px; }
    .arb-topbar-l .arb-title-in { width: 100px; font-size: 12px; }
    .arb-sh { display: none !important; }
    .arb-ss { display: none; }
    .arb-tab { padding: 5px 7px; font-size: 11px; }

    /* Topbar row 2: scroll horizontally if needed */
    .arb-topbar-row2 { overflow-x: auto; gap: 2px; padding: 0 8px; }
    .arb-fmtbar-font { width: 80px; }

    /* Main layout: sidebar collapses to top strip */
    .arb-main {
        flex-direction: column !important;
        overflow: hidden;
    }
    .arb-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 48px;       /* collapsed by default */
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
        border-right: none;
        border-bottom: 1px solid var(--bdr);
        flex-shrink: 0;
        transition: max-height .25s;
    }
    .arb-sidebar.arb-sidebar--open {
        max-height: 50vh;
        flex-direction: column;
        overflow-y: auto;
        flex-wrap: nowrap;
    }

    /* Sidebar toggle button (mobile only) */
    .arb-sb-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 48px;
        background: var(--surf2);
        border: none;
        border-bottom: 1px solid var(--bdr);
        color: var(--tx2);
        font-family: var(--font);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Canvas: full width, scrollable */
    .arb-cv-wrap {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        width: 100%;
    }

    /* Two-col stack on mobile */
    .arb-editor-2col {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    /* Block picker: full-width */
    .arb-picker {
        width: calc(100vw - 24px);
        left: 50%;
        transform: translateX(-50%);
        max-height: 60vh;
        overflow-y: auto;
    }
    .arb-picker-grid { grid-template-columns: 1fr 1fr; }

    /* Preview A4 */
    .arb-pv-panel { padding: 0; }
    .arb-pv-scroll { padding: 8px; }
    .arb-pv-bar { padding: 6px 10px; }
}

@media (max-width: 480px) {
    .arb-tab { padding: 4px 6px; font-size: 10px; }
    .arb-topbar-l .arb-title-in { width: 80px; }
    .arb-picker-grid { grid-template-columns: 1fr; }
}

/* ── Custom Block (editor) ── */
.arb-block-custom { }
.arb-custom-fields { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.arb-custom-row { display:flex; align-items:flex-start; gap:4px; }
.arb-custom-row-inner { flex:1; display:grid; grid-template-columns:120px 1fr; gap:6px; align-items:flex-start; }
.arb-custom-lbl { font-weight:600; font-size:12px; color:var(--tx); min-width:0; }
.arb-custom-val { font-size:12px; color:var(--tx2); min-width:0; }
.arb-custom-del-row { flex-shrink:0; width:20px; height:20px; background:transparent; border:1px solid transparent; border-radius:3px; color:var(--tx3); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:2px; transition:all .12s; }
.arb-custom-del-row:hover { border-color:var(--err); color:var(--err); background:rgba(239,68,68,.08); }

/* ── Custom Block (preview) ── */
.arb-pvb-custom-row { display:flex; gap:4px; margin-bottom:3px; font-size:9.5px; flex-wrap:wrap; }
.arb-pvb-custom-lbl { color:#111118; white-space:nowrap; }
.arb-pvb-custom-val { color:#374151; flex:1; min-width:0; white-space:pre-wrap; }

/* ── Section label edit ── */
.arb-sl-editable { display:flex; align-items:center; gap:4px; cursor:text; }
.arb-sl-text { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tx2); outline:none; min-width:20px; border-bottom:1px dashed transparent; transition:border-color .12s; }
.arb-sl-text:hover, .arb-sl-text:focus { border-bottom-color:var(--acc); }
.arb-sl-edit-ic { font-size:10px; color:var(--tx3); opacity:0; transition:opacity .12s; }
.arb-sl-editable:hover .arb-sl-edit-ic { opacity:1; }

/* ── Upgrade Modal ── */
.arb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.arb-modal {
    background: var(--surf);
    border: 1px solid var(--bdr2);
    border-radius: 12px;
    padding: 32px 28px 24px;
    max-width: 420px;
    width: 100%;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    animation: arbModalIn .18s cubic-bezier(.34,1.1,.64,1);
}
/* Large modals override base max-width */
.arb-modal.arb-atj-modal,
.arb-modal.arb-ats-modal,
.arb-modal.arb-jd-modal,
.arb-modal.arb-ct-modal,
.arb-modal.arb-li-modal { max-width: none; padding: 0; border-radius: 16px; }
@keyframes arbModalIn {
    from { opacity:0; transform:scale(.92) translateY(10px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}
.arb-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    background: transparent;
    border: none;
    color: var(--tx3);
    font-size: 18px;
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    transition: all .12s;
}
.arb-modal-close:hover { background: var(--surf2); color: var(--tx); }
.arb-modal-icon { font-size: 36px; margin-bottom: 12px; text-align: center; }
.arb-modal-title {
    font-family: var(--serif, 'DM Serif Display', Georgia, serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 10px;
    text-align: center;
}
.arb-modal-body {
    font-size: 13px;
    color: var(--tx2);
    line-height: 1.6;
    margin-bottom: 14px;
    text-align: center;
}
.arb-modal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arb-modal-list li {
    font-size: 12px;
    color: var(--tx2);
    padding: 4px 0 4px 4px;
    border-left: 2px solid var(--acc);
    padding-left: 10px;
}
.arb-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.arb-modal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    background: var(--acc);
    color: white;
    border: none;
    border-radius: var(--r);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}
.arb-modal-cta:hover { opacity: .88; transform: translateY(-1px); }
.arb-modal-skip {
    background: transparent;
    border: none;
    color: var(--tx3);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color .12s;
}
.arb-modal-skip:hover { color: var(--tx2); }

/* Light mode modal */
.arb-app[data-arb-theme="light"] .arb-modal {
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 24px 60px rgba(0,0,0,.15);
}

/* ══════════════════════════════════════════════════════
   1-CLICK CV WIZARD
   ══════════════════════════════════════════════════════ */
.arb-oneclick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 24px);
    margin: 12px 12px 4px;
    padding: 9px 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: var(--r);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    letter-spacing: .01em;
    transition: all .15s;
    box-shadow: 0 2px 12px rgba(99,102,241,.35);
}
.arb-oneclick-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 18px rgba(99,102,241,.45); }

/* Wizard modal sizing */
.arb-wizard {
    max-width: 540px !important;
    padding: 28px 24px 20px !important;
}
.arb-wiz-hd { text-align:center; margin-bottom:20px; }
.arb-wiz-icon { font-size:30px; margin-bottom:6px; }
.arb-wiz-sub { font-size:12px; color:var(--tx3); margin-top:4px; }

/* Step dots */
.arb-wiz-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 22px;
    position: relative;
}
.arb-wiz-line {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 140px; height: 2px;
    background: var(--bdr2);
    z-index: 0;
}
.arb-wiz-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--surf2);
    border: 2px solid var(--bdr2);
    color: var(--tx3);
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    margin: 0 24px;
    transition: all .2s;
}
.arb-wiz-dot--on  { background: var(--acc); border-color: var(--acc); color: #fff; }
.arb-wiz-dot--done { background: #22c55e; border-color: #22c55e; color: #fff; }

/* Step body */
.arb-wiz-body { display:flex; flex-direction:column; gap:12px; min-height:180px; }
.arb-wiz-sh { font-size:14px; font-weight:600; color:var(--tx); margin:0 0 4px; }
.arb-wiz-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.arb-wiz-lbl { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:600; color:var(--tx2); text-transform:uppercase; letter-spacing:.04em; }
.arb-wiz-lbl--full { grid-column:1/-1; }
.arb-wiz-in {
    background: var(--surf2);
    border: 1px solid var(--bdr2);
    border-radius: var(--r);
    color: var(--tx);
    font-size: 13px;
    font-family: var(--font);
    padding: 8px 10px;
    outline: none;
    transition: border-color .12s;
    width: 100%;
    box-sizing: border-box;
}
.arb-wiz-in:focus { border-color: var(--acc); }
.arb-wiz-sel { cursor:pointer; }
.arb-wiz-ta { resize: vertical; min-height: 80px; line-height:1.5; }

/* Confirmation step */
.arb-wiz-confirm { align-items:stretch; }
.arb-wiz-summary {
    background: var(--surf2);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arb-wiz-sum-row { display:flex; align-items:center; gap:10px; font-size:12px; }
.arb-wiz-sum-row span { color:var(--tx3); min-width:70px; }
.arb-wiz-sum-row strong { color:var(--tx); }
.arb-wiz-gate { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:var(--r); padding:12px 14px; text-align:center; font-size:12px; color:var(--tx2); }
.arb-wiz-gate p { margin:0 0 10px; }
.arb-wiz-ready { font-size:12px; color:#22c55e; text-align:center; padding:8px 0; }
.arb-wiz-err { font-size:11px; color:#f87171; background:rgba(248,113,113,.08); border-radius:var(--r); padding:8px 10px; margin:0; }

/* Footer */
.arb-wiz-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--bdr);
}
.arb-wiz-back { background:transparent; border:1px solid var(--bdr2); border-radius:var(--r); color:var(--tx2); font-size:12px; padding:7px 14px; cursor:pointer; transition:all .12s; }
.arb-wiz-back:hover { border-color:var(--acc); color:var(--acc); }
.arb-wiz-next { background:var(--surf2); border:1px solid var(--bdr2); border-radius:var(--r); color:var(--tx); font-size:13px; font-weight:600; padding:8px 18px; cursor:pointer; transition:all .12s; }
.arb-wiz-next:hover:not(:disabled) { border-color:var(--acc); color:var(--acc); }
.arb-wiz-next:disabled { opacity:.4; cursor:not-allowed; }
.arb-wiz-gen { background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none; border-radius:var(--r); color:#fff; font-size:13px; font-weight:700; padding:9px 20px; cursor:pointer; transition:all .15s; box-shadow:0 2px 10px rgba(99,102,241,.4); }
.arb-wiz-gen:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); }
.arb-wiz-gen--ld { opacity:.75; cursor:wait; }
.arb-wiz-gen:disabled { cursor:not-allowed; }

/* Light mode */
.arb-app[data-arb-theme="light"] .arb-wiz-in { background:#fff; border-color:#d1d5db; color:#111; }
.arb-app[data-arb-theme="light"] .arb-wiz-summary { background:#f9fafb; border-color:#e5e7eb; }

/* Mobile */
@media (max-width: 600px) {
    .arb-wiz-row { grid-template-columns:1fr; }
    .arb-wizard { padding: 20px 16px 16px !important; }
}
.arb-wiz-opt { font-weight:400; color:var(--tx3); text-transform:none; font-size:10px; }

/* ══════════════════════════════════════════════════════
   TEMPLATE GALLERY — User-facing
   ══════════════════════════════════════════════════════ */
.arb-tg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    z-index: 99998;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.arb-tg {
    background: var(--surf);
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: arbTGIn .2s ease;
}
@keyframes arbTGIn {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Header */
.arb-tg-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}
.arb-tg-hd-left {}
.arb-tg-title { font-size:20px; font-weight:700; color:var(--tx); margin:0 0 3px; }
.arb-tg-sub   { font-size:12px; color:var(--tx3); margin:0; }
.arb-tg-close { background:transparent; border:none; font-size:22px; cursor:pointer; color:var(--tx3); width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.arb-tg-close:hover { background:var(--surf2); color:var(--tx); }

/* Toolbar */
.arb-tg-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.arb-tg-search-wrap {
    position: relative;
    flex-shrink: 0;
}
.arb-tg-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:13px; pointer-events:none; }
.arb-tg-search {
    background: var(--surf2);
    border: 1px solid var(--bdr2);
    border-radius: var(--r);
    color: var(--tx);
    font-size: 13px;
    padding: 7px 10px 7px 30px;
    width: 200px;
    outline: none;
    transition: border-color .12s;
}
.arb-tg-search:focus { border-color:var(--acc); }
.arb-tg-filters { display:flex; gap:5px; flex-wrap:wrap; }
.arb-tg-filter {
    background: var(--surf2);
    border: 1px solid var(--bdr);
    border-radius: 20px;
    color: var(--tx2);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    cursor: pointer;
    transition: all .12s;
    text-transform: capitalize;
}
.arb-tg-filter:hover { border-color:var(--acc); color:var(--acc); }
.arb-tg-filter--on { background:var(--acc); border-color:var(--acc); color:#fff; }

/* Body */
.arb-tg-body { flex:1; overflow-y:auto; padding:20px 24px; }
.arb-tg-loading, .arb-tg-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:200px; color:var(--tx3); font-size:14px; }
.arb-tg-spinner { width:32px; height:32px; border:3px solid var(--bdr2); border-top-color:var(--acc); border-radius:50%; animation:arbSpin .8s linear infinite; }
@keyframes arbSpin { to { transform:rotate(360deg); } }
.arb-tg-empty-icon { font-size:32px; }

/* Grid */
.arb-tg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* Card */
.arb-tg-card {
    border: 2px solid var(--bdr);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    background: var(--surf2);
}
.arb-tg-card:hover { border-color:var(--acc); box-shadow:0 4px 20px rgba(0,0,0,.15); transform:translateY(-2px); }
.arb-tg-card--pv { border-color:var(--acc); }

/* Thumbnail */
.arb-tg-thumb {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.arb-tg-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.arb-tg-thumb-placeholder {
    width: 100%; height: 100%;
    background: #fff;
    padding: 16px 12px;
    box-sizing: border-box;
}
.arb-tg-thumb-lines { display:flex; flex-direction:column; gap:5px; }
.arb-tg-tl { height:5px; background:#e5e7eb; border-radius:3px; }
.arb-tg-tl--name  { height:9px; width:70%; }
.arb-tg-tl--role  { height:5px; width:45%; background:#d1d5db; }
.arb-tg-tl--sep   { height:2px; width:100%; margin:4px 0; }
.arb-tg-tl--short { width:55%; }

/* Card info */
.arb-tg-card-info { padding:10px 12px 8px; }
.arb-tg-card-name { font-size:12px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.arb-tg-card-meta { display:flex; gap:4px; flex-wrap:wrap; }
.arb-tg-badge { font-size:10px; padding:1px 6px; border-radius:3px; font-weight:500; text-transform:capitalize; }
.arb-tg-badge--cat { background:rgba(99,102,241,.12); color:#6366f1; }
.arb-tg-badge--lyt { background:rgba(16,185,129,.1); color:#059669; }

/* Hover overlay */
.arb-tg-card-overlay {
    padding: 8px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arb-tg-card:hover .arb-tg-card-overlay { opacity: 1; }
.arb-tg-use-btn {
    background: var(--acc);
    color: #fff;
    border: none;
    border-radius: var(--r);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
    width: 100%;
}
.arb-tg-use-btn:hover { opacity: .85; }

/* Gallery sidebar button variant */
.arb-oneclick-btn--gallery {
    background: var(--surf2) !important;
    color: var(--tx) !important;
    border: 1px solid var(--bdr2) !important;
    box-shadow: none !important;
}
.arb-oneclick-btn--gallery:hover { border-color:var(--acc) !important; color:var(--acc) !important; }

/* Light mode */
.arb-app[data-arb-theme="light"] .arb-tg { background:#fff; }
.arb-app[data-arb-theme="light"] .arb-tg-search { background:#f9fafb; border-color:#d1d5db; color:#111; }
.arb-app[data-arb-theme="light"] .arb-tg-card { background:#fff; border-color:#e5e7eb; }
.arb-app[data-arb-theme="light"] .arb-tg-filter { background:#f3f4f6; border-color:#d1d5db; color:#374151; }

/* Mobile */
@media (max-width:768px) {
    .arb-tg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
    .arb-tg-thumb { height:130px; }
    .arb-tg-toolbar { flex-direction:column; align-items:flex-start; }
    .arb-tg-search { width:100%; }
}

/* ── Post-Import Template Banner ── */
.arb-import-banner {
    background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%);
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 8px 0 4px;
}
.arb-import-banner-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.arb-import-banner-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.arb-import-banner-msg { flex: 1; }
.arb-import-banner-msg strong { font-size: 13px; color: #166534; display: block; margin-bottom: 2px; }
.arb-import-banner-msg p { font-size: 11px; color: #4b5563; margin: 0; line-height: 1.4; }
.arb-import-banner-x {
    background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 16px; padding: 0; line-height: 1;
    flex-shrink: 0;
}
.arb-import-banner-x:hover { color: #374151; }
.arb-import-banner-btn {
    width: 100%;
    padding: 9px 12px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    margin-bottom: 6px;
}
.arb-import-banner-btn:hover { opacity: .9; }
.arb-import-banner-skip {
    font-size: 10px;
    color: #9ca3af;
    text-align: center;
    margin: 0;
}

/* ══════════════════════════════════════════
   Block Properties Panel
   ══════════════════════════════════════════ */
.arb-props-panel {
    background: #fff;
    border: 1.5px solid #e0e7ff;
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(99,102,241,.08);
}
.arb-props-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.arb-props-title {
    font-size: 12px; font-weight: 700; color: #4f46e5;
}
.arb-props-reset {
    font-size: 10px; background: none; border: 1px solid #e5e7eb;
    border-radius: 4px; padding: 2px 7px; cursor: pointer; color: #6b7280;
}
.arb-props-reset:hover { background: #f3f4f6; color: #374151; }

.arb-props-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.arb-props-label {
    font-size: 11px; font-weight: 600; color: #374151;
    min-width: 72px; flex-shrink: 0;
}
.arb-props-color-wrap {
    display: flex; align-items: center; gap: 5px; flex: 1;
}
.arb-props-color {
    width: 28px; height: 24px;
    border: 1.5px solid #d1d5db; border-radius: 4px;
    padding: 1px; cursor: pointer; background: none;
}
.arb-props-clear {
    font-size: 13px; background: none; border: none;
    cursor: pointer; color: #9ca3af; padding: 0 2px; line-height: 1;
    width: 16px;
}
.arb-props-clear:hover { color: #ef4444; }
.arb-props-hex {
    font-size: 10px; color: #9ca3af; font-family: monospace;
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arb-props-slider-wrap {
    display: flex; align-items: center; gap: 6px; flex: 1;
}
.arb-props-slider {
    flex: 1; accent-color: #6366f1; cursor: pointer;
}
.arb-props-val {
    font-size: 11px; color: #374151; min-width: 30px;
    text-align: right; font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   Corner Resize Handle
   ══════════════════════════════════════════ */
.arb-resize-handle {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px; height: 20px;
    background: #6366f1;
    border-radius: 3px 0 4px 0;
    cursor: nwse-resize;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #fff;
    user-select: none;
    opacity: 0.85;
    z-index: 10;
    transition: opacity .15s, transform .15s;
}
.arb-resize-handle:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Make CanvasBlock position:relative so anchor positions correctly */
.arb-cb {
    position: relative;
}

/* ══════════════════════════════════════════
   Icon Picker
   ══════════════════════════════════════════ */
.arb-iconbtn-wrap { position: relative; display: inline-block; }
.arb-iconbtn {
    background: none; border: 1px solid #e5e7eb; border-radius: 5px;
    padding: 3px 7px; cursor: pointer; font-size: 14px; line-height: 1;
    color: #6b7280; transition: background .12s;
}
.arb-iconbtn:hover { background: #f3f4f6; color: #374151; }

.arb-iconpicker {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 999;
    background: #fff; border: 1.5px solid #e5e7eb;
    border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.14);
    width: 320px; overflow: hidden;
}
.arb-iconpicker-header {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 10px 8px; border-bottom: 1px solid #f3f4f6;
}
.arb-iconpicker-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.arb-iconpicker-tab {
    font-size: 11px; font-weight: 600; padding: 4px 9px;
    border-radius: 6px; border: 1.5px solid transparent;
    background: #f3f4f6; color: #6b7280; cursor: pointer;
}
.arb-iconpicker-tab--on { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.arb-iconpicker-search {
    flex: 1; font-size: 12px; border: 1px solid #e5e7eb;
    border-radius: 6px; padding: 4px 8px; outline: none;
}
.arb-iconpicker-search:focus { border-color: #6366f1; }
.arb-iconpicker-close {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: #9ca3af; padding: 0 4px; line-height: 1;
}
.arb-iconpicker-close:hover { color: #374151; }

.arb-iconpicker-groups {
    display: flex; gap: 4px; padding: 8px 10px 4px;
    overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
.arb-iconpicker-groups::-webkit-scrollbar { display: none; }
.arb-iconpicker-grp {
    font-size: 10px; font-weight: 600; white-space: nowrap;
    padding: 3px 8px; border-radius: 20px; border: 1px solid #e5e7eb;
    background: #f9fafb; color: #6b7280; cursor: pointer; flex-shrink: 0;
}
.arb-iconpicker-grp--on { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

.arb-iconpicker-grid {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 2px; padding: 8px 10px 10px;
    max-height: 200px; overflow-y: auto;
}
.arb-iconpicker-item {
    background: none; border: none; border-radius: 6px;
    cursor: pointer; padding: 4px; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s;
}
.arb-iconpicker-item:hover { background: #f3f4f6; }
.arb-iconpicker-item--emoji { font-size: 19px; }
.arb-iconpicker-item--fa {
    flex-direction: column; gap: 2px; font-size: 12px;
    grid-column: span 2;
}
.arb-icon-preview { font-size: 16px; }
.arb-icon-name { font-size: 9px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px; }

/* ══════════════════════════════════════════
   Image Upload
   ══════════════════════════════════════════ */
.arb-imgup {
    border: 1.5px dashed #d1d5db; border-radius: 8px;
    overflow: hidden; background: #f9fafb;
}
.arb-imgup-tabs {
    display: flex; border-bottom: 1px solid #e5e7eb;
}
.arb-imgup-tab {
    flex: 1; font-size: 11px; font-weight: 600; padding: 7px;
    background: none; border: none; cursor: pointer; color: #6b7280;
}
.arb-imgup-tab--on { background: #fff; color: #4f46e5; border-bottom: 2px solid #6366f1; }

.arb-imgup-drop {
    padding: 20px 12px; text-align: center; cursor: pointer;
    transition: background .12s;
}
.arb-imgup-drop:hover, .arb-imgup-drop--drag { background: #eef2ff; border-color: #6366f1; }
.arb-imgup-icon { font-size: 28px; margin-bottom: 6px; }
.arb-imgup-hint { font-size: 12px; font-weight: 600; color: #374151; margin: 0 0 3px; }
.arb-imgup-sub  { font-size: 10px; color: #9ca3af; }

.arb-imgup-url-wrap {
    display: flex; gap: 6px; padding: 12px;
}
.arb-imgup-url-input {
    flex: 1; font-size: 12px; border: 1px solid #d1d5db;
    border-radius: 6px; padding: 6px 8px; outline: none;
}
.arb-imgup-url-input:focus { border-color: #6366f1; }
.arb-imgup-url-btn {
    font-size: 12px; font-weight: 600; padding: 6px 12px;
    background: #6366f1; color: #fff; border: none;
    border-radius: 6px; cursor: pointer;
}
.arb-imgup-url-btn:hover { background: #4f46e5; }
.arb-imgup-err { font-size: 11px; color: #dc2626; padding: 0 12px 8px; margin: 0; }

.arb-imgup-preview { position: relative; }
.arb-imgup-img { width: 100%; max-height: 200px; object-fit: contain; display: block; border-radius: 6px; background: #f3f4f6; }
.arb-imgup-preview-actions {
    display: flex; gap: 6px; padding: 6px 4px 2px;
}
.arb-imgup-change {
    font-size: 11px; padding: 3px 8px; border-radius: 5px;
    border: 1px solid #e5e7eb; background: #f9fafb;
    cursor: pointer; color: #374151;
}
.arb-imgup-change:hover { background: #f3f4f6; }

/* Image block options */
.arb-block-image { display: flex; flex-direction: column; gap: 8px; }
.arb-imgblock-opts { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #374151; }
.arb-imgblock-opts label { display: flex; align-items: center; gap: 6px; }
.arb-imgblock-align { display: flex; align-items: center; gap: 6px; }
.arb-imgblock-align-btn {
    padding: 3px 8px; border-radius: 5px; border: 1px solid #e5e7eb;
    background: #f9fafb; cursor: pointer; font-size: 13px;
}
.arb-imgblock-align-btn--on { background: #eef2ff; border-color: #6366f1; color: #4f46e5; }
.arb-imgblock-caption {
    font-size: 11px; border: 1px solid #e5e7eb; border-radius: 5px;
    padding: 3px 7px; width: 100%; outline: none;
}

/* ══════════════════════════════════════════
   PDF Download Button
   ══════════════════════════════════════════ */
.arb-pdf-dl-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }

.arb-pdf-dl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 7px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.35);
    transition: opacity .15s, transform .1s;
}
.arb-pdf-dl-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.arb-pdf-dl-btn:disabled,
.arb-pdf-dl-btn--ld { opacity: .7; cursor: wait; }
.arb-pdf-dl-err {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5;
    border-radius: 6px; padding: 4px 10px; font-size: 11px;
    white-space: nowrap; z-index: 99;
}

/* ══════════════════════════════════════════
   Duplicate Block Button
   ══════════════════════════════════════════ */
.arb-cb-dup {
    background: none; border: 1px solid rgba(99,102,241,.4);
    border-radius: 4px; color: #a5b4fc; cursor: pointer;
    font-size: 13px; padding: 1px 5px; line-height: 1;
    transition: background .12s, color .12s;
}
.arb-cb-dup:hover { background: rgba(99,102,241,.15); color: #6366f1; }

/* ══════════════════════════════════════════
   Divider Block Editor
   ══════════════════════════════════════════ */
.arb-block-divider { padding: 4px 0; }
.arb-divider-preview { border-top: 2px solid #6366f1; }

/* ══════════════════════════════════════════
   Shape Block Editor
   ══════════════════════════════════════════ */
.arb-block-shape { display: flex; flex-direction: column; gap: 8px; }
.arb-shape-preview { border: 1px solid #6366f1; }

.arb-shape-opts {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px; color: #374151;
}
.arb-shape-opts label {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.arb-shape-sel {
    flex: 1; font-size: 11px; border: 1px solid #e5e7eb;
    border-radius: 5px; padding: 2px 6px; outline: none;
}
.arb-props-color {
    width: 28px; height: 24px; padding: 1px; border: 1px solid #e5e7eb;
    border-radius: 4px; cursor: pointer;
}
.arb-props-clear {
    background: none; border: none; color: #9ca3af;
    cursor: pointer; font-size: 14px; padding: 0 2px;
}

[data-arb-theme="dark"] .arb-shape-opts { color: #e2e8f0; }
[data-arb-theme="dark"] .arb-shape-sel { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ══════════════════════════════════════════
   PDF Download Button
   ══════════════════════════════════════════ */
.arb-pdf-dl-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }

.arb-pdf-dl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border: none; border-radius: 7px;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(99,102,241,.35);
    transition: opacity .15s, transform .1s;
}
.arb-pdf-dl-btn:hover  { opacity: .88; transform: translateY(-1px); }
.arb-pdf-dl-btn:active { transform: translateY(0); }
.arb-pdf-dl-btn--ld    { opacity: .7; cursor: wait; }
.arb-pdf-dl-err {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
    border-radius: 6px; padding: 5px 9px; font-size: 11px;
    white-space: nowrap; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* ══════════════════════════════════════════
   Duplicate Block Button
   ══════════════════════════════════════════ */
.arb-cb-dup {
    background: none; border: 1px solid #6366f1; border-radius: 4px;
    color: #6366f1; font-size: 13px; padding: 2px 6px;
    cursor: pointer; line-height: 1; transition: background .12s;
}
.arb-cb-dup:hover { background: #eef2ff; }

/* ══════════════════════════════════════════
   Divider Block
   ══════════════════════════════════════════ */
.arb-block-divider { padding: 6px 0; }
.arb-divider-preview { width: 100%; }

/* ══════════════════════════════════════════
   Shape Block
   ══════════════════════════════════════════ */
.arb-block-shape { padding: 4px 0; }
.arb-shape-preview { width: 100%; }

/* Shared options panel for divider + shape */
.arb-shape-opts {
    display: flex; flex-direction: column; gap: 7px;
    padding: 8px 0 2px; font-size: 11px; color: #6b7280;
}
.arb-shape-opts label {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.arb-shape-opts input[type=range] { flex: 1; min-width: 60px; }
.arb-shape-opts span { min-width: 30px; color: #374151; font-weight: 600; }
.arb-shape-sel {
    flex: 1; font-size: 11px; border: 1px solid #e5e7eb;
    border-radius: 5px; padding: 3px 6px; outline: none; background: #fff;
}
.arb-props-clear {
    background: none; border: 1px solid #e5e7eb; border-radius: 4px;
    padding: 2px 5px; cursor: pointer; font-size: 11px; color: #9ca3af;
}
.arb-props-clear:hover { color: #dc2626; border-color: #fca5a5; }

/* ══════════════════════════════════════════
   Color Palette Picker
   ══════════════════════════════════════════ */
.arb-palette { margin-bottom: 4px; }
.arb-palette-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 12px 10px;
}
.arb-palette-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff; font-weight: 700;
    transition: transform .12s, box-shadow .12s;
    outline: none;
}
.arb-palette-swatch:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.arb-palette-swatch--on { border-color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.3); transform: scale(1.12); }
.arb-palette-swatch--custom {
    background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red) !important;
    font-size: 11px;
}
.arb-palette-custom { position: relative; display: inline-flex; cursor: pointer; }

/* ══════════════════════════════════════════
   Skill Progress Bar
   ══════════════════════════════════════════ */
.arb-sk-bar-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #6b7280; padding: 4px 12px;
    cursor: pointer;
}
.arb-sk-level {
    display: flex; align-items: center; gap: 6px;
    padding-top: 4px;
}
.arb-sk-level input[type=range] { flex: 1; }
.arb-sk-level-val { font-size: 11px; color: #6b7280; min-width: 32px; text-align: right; }

/* Preview */
.arb-pvb-sk-bar-row { margin: 4px 0; }
.arb-pvb-sk-bar-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 3px;
}
.arb-pvb-sk-bar-label strong { font-size: 10px; font-weight: 700; }
.arb-pvb-sk-bar-pct { font-size: 9px; color: #888; }
.arb-pvb-sk-bar-track {
    height: 5px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.arb-pvb-sk-bar-fill {
    height: 100%; border-radius: 99px;
    transition: width .4s ease;
}
.arb-pvb-sk-bar-items { font-size: 9px; color: #6b7280; margin-top: 2px; }

/* ══════════════════════════════════════════
   QR Code Block
   ══════════════════════════════════════════ */
.arb-block-qr { display: flex; flex-direction: column; gap: 10px; }
.arb-qr-preview { padding: 8px 0; }
.arb-qr-loading { font-size: 11px; color: #9ca3af; padding: 8px; }
.arb-qr-url-in {
    flex: 1; font-size: 11px; border: 1px solid #e5e7eb;
    border-radius: 5px; padding: 4px 7px; outline: none; width: 100%;
}
.arb-qr-url-in:focus { border-color: #6366f1; }
[data-arb-theme="dark"] .arb-sk-bar-toggle { color: #94a3b8; }
[data-arb-theme="dark"] .arb-pvb-sk-bar-track { background: #334155; }

/* ══════════════════════════════════════════
   My CVs Button (Sidebar)
   ══════════════════════════════════════════ */
.arb-oneclick-btn--mycvs {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%) !important;
}

/* ══════════════════════════════════════════
   CV Manager Modal
   ══════════════════════════════════════════ */
.arb-cvmgr {
    width: min(680px, 96vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.arb-cvmgr-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.arb-cvmgr-hd h2 { margin: 0; font-size: 17px; font-weight: 700; }
.arb-cvmgr-hd-actions { display: flex; align-items: center; gap: 8px; }

.arb-cvmgr-new {
    padding: 6px 14px; border-radius: 7px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.arb-cvmgr-new:hover { opacity: .9; }

.arb-cvmgr-loading,
.arb-cvmgr-err,
.arb-cvmgr-empty {
    padding: 32px 22px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}
.arb-cvmgr-err { color: #dc2626; }

.arb-cvmgr-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}
.arb-cvmgr-row:hover { background: #f9fafb; }
.arb-cvmgr-row--active { background: #eef2ff; }
.arb-cvmgr-row--active:hover { background: #e0e7ff; }

.arb-cvmgr-info { flex: 1; min-width: 0; }
.arb-cvmgr-title {
    font-size: 14px; font-weight: 600; color: #111827;
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arb-cvmgr-badge {
    font-size: 9px; font-weight: 700; padding: 2px 6px;
    background: #6366f1; color: #fff; border-radius: 20px;
    flex-shrink: 0;
}
.arb-cvmgr-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #9ca3af; margin-top: 3px;
}
.arb-cvmgr-dot { color: #d1d5db; }

.arb-cvmgr-actions {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    flex-shrink: 0;
}
.arb-cvmgr-btn {
    padding: 5px 10px; border-radius: 6px; border: 1px solid #e5e7eb;
    font-size: 11px; font-weight: 600; cursor: pointer;
    background: #f9fafb; color: #374151;
    transition: background .12s;
    white-space: nowrap;
}
.arb-cvmgr-btn:hover:not(:disabled) { background: #f3f4f6; }
.arb-cvmgr-btn:disabled { opacity: .5; cursor: wait; }

.arb-cvmgr-btn--open {
    background: #eef2ff; color: #4f46e5; border-color: #c7d2fe;
}
.arb-cvmgr-btn--open:hover { background: #e0e7ff; }

.arb-cvmgr-btn--share {
    background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
}
.arb-cvmgr-btn--share:hover { background: #dcfce7; }

.arb-cvmgr-btn--revoke {
    background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.arb-cvmgr-btn--revoke:hover { background: #ffedd5; }

.arb-cvmgr-btn--del {
    background: #fff5f5; color: #dc2626; border-color: #fecaca;
}
.arb-cvmgr-btn--del:hover { background: #fee2e2; }

/* Dark mode */
[data-arb-theme="dark"] .arb-cvmgr { background: #1e293b; }
[data-arb-theme="dark"] .arb-cvmgr-hd { border-color: #334155; }
[data-arb-theme="dark"] .arb-cvmgr-hd h2 { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-cvmgr-row { border-color: #334155; }
[data-arb-theme="dark"] .arb-cvmgr-row:hover { background: #263244; }
[data-arb-theme="dark"] .arb-cvmgr-row--active { background: #1e2d4a; }
[data-arb-theme="dark"] .arb-cvmgr-title { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-cvmgr-meta { color: #64748b; }
[data-arb-theme="dark"] .arb-cvmgr-btn { background: #263244; color: #cbd5e1; border-color: #334155; }
[data-arb-theme="dark"] .arb-cvmgr-btn:hover:not(:disabled) { background: #334155; }

/* ══════════════════════════════════════════
   ATS + LinkedIn Sidebar Buttons
   ══════════════════════════════════════════ */
.arb-oneclick-btn--ats {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%) !important;
}
.arb-oneclick-btn--li {
    background: linear-gradient(135deg, #0a66c2 0%, #0284c7 100%) !important;
}

/* ══════════════════════════════════════════
   ATS Score Checker Modal
   ══════════════════════════════════════════ */
.arb-ats-modal {
    width: min(820px, 96vw); max-height: 88vh;
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.arb-ats-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.arb-ats-hd h2 { margin: 0; font-size: 17px; font-weight: 700; }

.arb-ats-body {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; flex: 1; overflow: hidden;
}
.arb-ats-left {
    padding: 18px 20px; border-right: 1px solid #f3f4f6;
    display: flex; flex-direction: column; gap: 10px;
}
.arb-ats-right {
    overflow-y: auto; padding: 16px 20px;
}

.arb-ats-label {
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em;
}
.arb-ats-hint { font-weight: 400; color: #9ca3af; }

.arb-ats-jd {
    flex: 1; font-size: 12px; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 10px; outline: none; resize: vertical; font-family: inherit;
    line-height: 1.5; min-height: 120px; width: 100%; box-sizing: border-box;
}
.arb-ats-jd:focus { border-color: #6366f1; }

.arb-ats-btn {
    padding: 10px 18px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #dc2626, #ea580c);
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
    transition: opacity .15s;
}
.arb-ats-btn:hover:not(:disabled) { opacity: .9; }
.arb-ats-btn:disabled, .arb-ats-btn--ld { opacity: .7; cursor: wait; }
.arb-ats-err { font-size: 11px; color: #dc2626; margin: 0; }

.arb-ats-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; text-align: center;
    color: #9ca3af; gap: 8px; padding: 24px;
}
@keyframes arb-spin { to { transform: rotate(360deg); } }

.arb-ats-spinner {
    width: 36px; height: 36px; border: 3px solid #e5e7eb;
    border-top-color: #dc2626; border-radius: 50%;
    animation: arb-spin 0.7s linear infinite;
}

/* Score ring */
.arb-ats-score-wrap { text-align: center; margin-bottom: 16px; }
.arb-ats-score-ring {
    display: inline-flex; align-items: center; justify-content: center;
    width: 110px; height: 110px; border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--score) * 1%), #e5e7eb 0%);
    margin-bottom: 10px;
}
.arb-ats-score-inner {
    width: 86px; height: 86px; background: #fff; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.arb-ats-score-num { font-size: 26px; font-weight: 800; line-height: 1; }
.arb-ats-score-pct { font-size: 11px; color: #9ca3af; }
.arb-ats-grade { font-size: 13px; font-weight: 700; }
.arb-ats-summary { font-size: 12px; color: #6b7280; margin: 0 auto; max-width: 280px; line-height: 1.5; }

/* Sections */
.arb-ats-section { margin-bottom: 14px; }
.arb-ats-sec-hd {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #6b7280; margin-bottom: 6px;
    padding-bottom: 4px; border-bottom: 1px solid #f3f4f6;
}
.arb-ats-sec-hd--good { color: #16a34a; border-color: #dcfce7; }
.arb-ats-sec-hd--bad  { color: #dc2626; border-color: #fee2e2; }

.arb-ats-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.arb-ats-tag {
    font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500;
}
.arb-ats-tag--good { background: #dcfce7; color: #15803d; }
.arb-ats-tag--bad  { background: #fee2e2; color: #dc2626; }

.arb-ats-issue {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; padding: 6px 0;
    border-bottom: 1px solid #f9fafb;
}
.arb-ats-issue-cat {
    font-weight: 600; min-width: 80px; flex-shrink: 0;
}
.arb-ats-issue--high .arb-ats-issue-cat { color: #dc2626; }
.arb-ats-issue--medium .arb-ats-issue-cat { color: #ca8a04; }
.arb-ats-issue--low .arb-ats-issue-cat { color: #6b7280; }
.arb-ats-issue-detail { color: #374151; line-height: 1.4; }

.arb-ats-imps {
    margin: 0; padding-left: 18px;
}
.arb-ats-imps li { font-size: 12px; color: #374151; margin-bottom: 6px; line-height: 1.4; }

/* ══════════════════════════════════════════
   LinkedIn Import Modal
   ══════════════════════════════════════════ */
.arb-li-modal {
    width: min(560px, 96vw); padding: 0;
}
.arb-li-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }

.arb-li-tabs { display: flex; gap: 6px; }
.arb-li-tab {
    flex: 1; padding: 8px; border-radius: 8px; border: 1.5px solid #e5e7eb;
    font-size: 12px; font-weight: 600; cursor: pointer;
    background: #f9fafb; color: #6b7280;
}
.arb-li-tab--on { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

.arb-li-section { display: flex; flex-direction: column; gap: 8px; }
.arb-li-desc { font-size: 12px; color: #6b7280; margin: 0; }

.arb-li-url-in {
    width: 100%; font-size: 13px; border: 1px solid #e5e7eb;
    border-radius: 8px; padding: 10px 12px; outline: none; box-sizing: border-box;
}
.arb-li-url-in:focus { border-color: #0a66c2; }

.arb-li-ta {
    width: 100%; font-size: 12px; border: 1px solid #e5e7eb;
    border-radius: 8px; padding: 10px 12px; outline: none;
    resize: vertical; font-family: inherit; box-sizing: border-box;
}
.arb-li-ta:focus { border-color: #0a66c2; }

.arb-li-tip {
    font-size: 11px; color: #6b7280; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 6px; padding: 8px 12px;
    line-height: 1.5;
}

/* Dark mode */
[data-arb-theme="dark"] .arb-ats-modal,
[data-arb-theme="dark"] .arb-li-modal { background: #1e293b; }
[data-arb-theme="dark"] .arb-ats-hd { border-color: #334155; }
[data-arb-theme="dark"] .arb-ats-hd h2,
[data-arb-theme="dark"] .arb-ats-label { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-ats-body { border-color: #334155; }
[data-arb-theme="dark"] .arb-ats-left { border-color: #334155; }
[data-arb-theme="dark"] .arb-ats-jd,
[data-arb-theme="dark"] .arb-li-url-in,
[data-arb-theme="dark"] .arb-li-ta {
    background: #0f172a; border-color: #334155; color: #e2e8f0;
}
[data-arb-theme="dark"] .arb-ats-score-inner { background: #1e293b; }
[data-arb-theme="dark"] .arb-ats-issue-detail { color: #cbd5e1; }
[data-arb-theme="dark"] .arb-ats-imps li { color: #cbd5e1; }
[data-arb-theme="dark"] .arb-li-tab { background: #263244; color: #94a3b8; border-color: #334155; }
[data-arb-theme="dark"] .arb-li-tab--on { background: #1e2d4a; color: #a5b4fc; border-color: #4f46e5; }

/* ══════════════════════════════════════════
   Universal AI Field Button
   ══════════════════════════════════════════ */
.arb-aifb {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 5px; border: 1px solid #c7d2fe;
    background: #eef2ff; color: #4f46e5;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, transform .1s;
    vertical-align: middle; flex-shrink: 0;
}
.arb-aifb:hover:not(:disabled) { background: #e0e7ff; transform: scale(1.04); }
.arb-aifb:disabled, .arb-aifb--ld { opacity: .6; cursor: wait; }
.arb-aifb--lock { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }

.arb-cert-row { display: flex; align-items: center; gap: 6px; }
.arb-proj-desc-row { display: flex; align-items: flex-start; gap: 6px; }
.arb-proj-desc-row .arb-proj-de { flex: 1; }

/* ══════════════════════════════════════════
   New Sidebar buttons
   ══════════════════════════════════════════ */
.arb-oneclick-btn--gap { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important; }
.arb-oneclick-btn--co  { background: linear-gradient(135deg, #0f766e 0%, #059669 100%) !important; }
.arb-oneclick-btn--iv  { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important; }

/* ══════════════════════════════════════════
   Shared modal top bar (skill gap, companies, interview)
   ══════════════════════════════════════════ */
.arb-skillgap-modal,
.arb-companies-modal,
.arb-interview-modal {
    width: min(760px, 96vw); max-height: 88vh;
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.arb-skillgap-top {
    display: flex; gap: 8px; padding: 14px 22px;
    border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
}
.arb-iv-top { flex-wrap: wrap; }
.arb-ats-btn--gap { background: linear-gradient(135deg, #7c3aed, #6366f1) !important; }
.arb-ats-btn--co  { background: linear-gradient(135deg, #0f766e, #059669) !important; }
.arb-ats-btn--iv  { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }

/* ══════════════════════════════════════════
   Skill Gap Analyzer
   ══════════════════════════════════════════ */
.arb-skillgap-body { overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.arb-sg-readiness {
    display: flex; align-items: center; gap: 20px;
    padding-bottom: 14px; border-bottom: 1px solid #f3f4f6;
}
.arb-sg-roles { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.arb-sg-role-lbl { color: #9ca3af; }
.arb-sg-section { display: flex; flex-direction: column; gap: 8px; }
.arb-sg-gap {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; border-radius: 8px; border: 1px solid #fee2e2;
    background: #fff5f5; font-size: 12px;
}
.arb-sg-gap--high   { background: #fff1f2; border-color: #fecdd3; }
.arb-sg-gap--medium { background: #fffbeb; border-color: #fde68a; }
.arb-sg-gap--low    { background: #f9fafb; border-color: #e5e7eb; }
.arb-sg-gap-skill { font-weight: 700; min-width: 110px; }
.arb-sg-gap-imp {
    font-size: 9px; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; text-transform: uppercase; flex-shrink: 0;
    background: #fecdd3; color: #9f1239;
}
.arb-sg-gap--medium .arb-sg-gap-imp { background: #fde68a; color: #92400e; }
.arb-sg-gap--low .arb-sg-gap-imp    { background: #e5e7eb; color: #374151; }
.arb-sg-gap-reason { color: #6b7280; flex: 1; }

.arb-sg-path { display: flex; flex-direction: column; gap: 8px; }
.arb-sg-step {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px; border-radius: 8px; background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.arb-sg-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: #6366f1; color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.arb-sg-step-body { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.arb-sg-step-body strong { font-size: 13px; color: #111827; }
.arb-sg-step-res  { color: #4f46e5; }
.arb-sg-step-time { color: #9ca3af; font-size: 11px; }

/* ══════════════════════════════════════════
   Top Companies
   ══════════════════════════════════════════ */
.arb-companies-body { overflow-y: auto; padding: 14px 18px; }
.arb-co-profile {
    font-size: 12px; color: #6b7280; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 14px; line-height: 1.5;
}
.arb-co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arb-co-card {
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
    transition: border-color .12s, box-shadow .12s;
}
.arb-co-card:hover { border-color: #a5b4fc; box-shadow: 0 2px 12px rgba(99,102,241,.1); }
.arb-co-card-hd { display: flex; align-items: center; gap: 8px; }
.arb-co-size-ic { font-size: 20px; flex-shrink: 0; }
.arb-co-name { font-size: 14px; font-weight: 700; display: block; }
.arb-co-industry { font-size: 11px; color: #9ca3af; }
.arb-co-remote { font-size: 10px; font-weight: 600; background: #d1fae5; color: #065f46; padding: 2px 7px; border-radius: 20px; margin-left: auto; white-space: nowrap; }
.arb-co-why { font-size: 12px; color: #374151; margin: 0; line-height: 1.4; }
.arb-co-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.arb-co-role-tag { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: #eef2ff; color: #4f46e5; }
.arb-co-culture { font-size: 11px; color: #9ca3af; margin: 0; }
.arb-co-search-link {
    font-size: 11px; font-weight: 600; color: #0a66c2;
    text-decoration: none; padding: 4px 0;
}
.arb-co-search-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   Interview Prep
   ══════════════════════════════════════════ */
.arb-interview-body { overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.arb-iv-meta {
    display: flex; gap: 20px; font-size: 12px; color: #6b7280;
    padding-bottom: 10px; border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
}
.arb-iv-style { color: #7c3aed; }
.arb-iv-section { border: 1.5px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.arb-iv-sec-hd {
    width: 100%; text-align: left; background: #f8fafc;
    padding: 12px 16px; font-size: 14px; font-weight: 700;
    border: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    color: #111827;
}
.arb-iv-sec-hd:hover { background: #f3f4f6; }
.arb-iv-sec-count { font-size: 11px; font-weight: 500; color: #9ca3af; margin-left: auto; }
.arb-iv-chevron { color: #9ca3af; font-size: 10px; }

.arb-iv-q { border-top: 1px solid #f3f4f6; }
.arb-iv-q-hd {
    width: 100%; text-align: left; padding: 10px 16px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: flex-start; gap: 8px; font-size: 13px;
}
.arb-iv-q-hd:hover { background: #fafafa; }
.arb-iv-diff {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    padding: 2px 7px; border-radius: 20px; background: #f3f4f6;
    flex-shrink: 0; margin-top: 1px;
}
.arb-iv-q-text { flex: 1; text-align: left; line-height: 1.4; color: #111827; }
.arb-iv-q-body { padding: 4px 16px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.arb-iv-block {
    border-radius: 8px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px; font-size: 12px;
}
.arb-iv-block strong { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.arb-iv-block p { margin: 0; line-height: 1.5; color: #374151; }
.arb-iv-block--framework { background: #eef2ff; border: 1px solid #c7d2fe; }
.arb-iv-block--framework strong { color: #4f46e5; }
.arb-iv-block--sample { background: #f0fdf4; border: 1px solid #bbf7d0; }
.arb-iv-block--sample strong { color: #15803d; }
.arb-iv-block--tip { background: #fffbeb; border: 1px solid #fde68a; }
.arb-iv-block--tip strong { color: #92400e; }

.arb-iv-tips { background: #f8fafc; border-radius: 10px; padding: 14px 16px; }
.arb-iv-tips strong { font-size: 13px; color: #111827; }
.arb-iv-tips ol { margin: 8px 0 0; padding-left: 18px; }
.arb-iv-tips li { font-size: 12px; color: #374151; margin-bottom: 5px; line-height: 1.4; }

/* Dark mode basics */
[data-arb-theme="dark"] .arb-skillgap-modal,
[data-arb-theme="dark"] .arb-companies-modal,
[data-arb-theme="dark"] .arb-interview-modal { background: #1e293b; }
[data-arb-theme="dark"] .arb-sg-step { background: #263244; border-color: #334155; }
[data-arb-theme="dark"] .arb-co-card { border-color: #334155; background: #1e293b; }
[data-arb-theme="dark"] .arb-co-card:hover { border-color: #6366f1; }
[data-arb-theme="dark"] .arb-co-name { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-co-why,
[data-arb-theme="dark"] .arb-iv-q-text { color: #cbd5e1; }
[data-arb-theme="dark"] .arb-iv-sec-hd { background: #263244; color: #f1f5f9; }
[data-arb-theme="dark"] .arb-iv-sec-hd:hover { background: #334155; }
[data-arb-theme="dark"] .arb-iv-block p { color: #cbd5e1; }
[data-arb-theme="dark"] .arb-iv-tips { background: #263244; }
[data-arb-theme="dark"] .arb-iv-tips li { color: #cbd5e1; }

/* ══════════════════════════════════════════
   Career Tools Sidebar Buttons
   ══════════════════════════════════════════ */
.arb-oneclick-btn--gap { background: linear-gradient(135deg,#16a34a,#059669) !important; }
.arb-oneclick-btn--co  { background: linear-gradient(135deg,#0284c7,#0891b2) !important; }
.arb-oneclick-btn--iq  { background: linear-gradient(135deg,#7c3aed,#6366f1) !important; }

/* ══════════════════════════════════════════
   Shared Career Modal shell
   ══════════════════════════════════════════ */
.arb-career-modal {
    width: min(700px,96vw); max-height:88vh;
    display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.arb-career-modal--wide { width: min(860px,96vw); }

.arb-career-body {
    display:grid; grid-template-columns: 240px 1fr;
    flex:1; overflow:hidden;
}
.arb-career-input {
    padding:18px 16px; border-right:1px solid #f3f4f6;
    display:flex; flex-direction:column; gap:10px;
    background:#fafafa;
}
.arb-career-results { overflow-y:auto; padding:16px 20px; }

/* ATS btn colour variants */
.arb-ats-btn--green  { background: linear-gradient(135deg,#16a34a,#059669); box-shadow:0 2px 8px rgba(22,163,74,.3); }
.arb-ats-btn--blue   { background: linear-gradient(135deg,#0284c7,#0891b2); box-shadow:0 2px 8px rgba(2,132,199,.3); }
.arb-ats-btn--purple { background: linear-gradient(135deg,#7c3aed,#6366f1); box-shadow:0 2px 8px rgba(124,58,237,.3); }

/* ══════════════════════════════════════════
   Skill Gap Analyzer
   ══════════════════════════════════════════ */
.arb-sg-ready { margin-bottom:14px; }
.arb-sg-ready-hd { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:5px; }
.arb-sg-ready-track { height:8px; background:#e5e7eb; border-radius:99px; overflow:hidden; }
.arb-sg-ready-fill  { height:100%; background:linear-gradient(90deg,#16a34a,#65a30d); border-radius:99px; transition:width .5s; }
.arb-sg-role { font-size:11px; color:#6b7280; margin:6px 0 0; }

.arb-sg-skill-row { padding:8px 0; border-bottom:1px solid #f3f4f6; }
.arb-sg-skill-top { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.arb-sg-skill-name { font-size:13px; font-weight:600; flex:1; }
.arb-sg-priority { font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; color:#fff; text-transform:uppercase; }
.arb-sg-skill-reason { font-size:11px; color:#6b7280; margin:0; }

.arb-sg-lp { font-size:12px; padding:5px 0; border-bottom:1px solid #f9fafb; }
.arb-sg-lp-time { color:#9ca3af; font-style:italic; }

/* ══════════════════════════════════════════
   Top Companies
   ══════════════════════════════════════════ */
.arb-co-profile { font-size:12px; color:#6b7280; margin:0 0 12px; padding:8px 12px; background:#f9fafb; border-radius:8px; }
.arb-co-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }

.arb-co-card {
    border:1.5px solid #e5e7eb; border-radius:10px; padding:14px;
    display:flex; flex-direction:column; gap:6px;
    transition:box-shadow .15s;
}
.arb-co-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }

.arb-co-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.arb-co-name { font-size:14px; font-weight:700; color:#111827; flex:1; }
.arb-co-match { font-size:12px; font-weight:700; flex-shrink:0; }

.arb-co-tags { display:flex; flex-wrap:wrap; gap:4px; }
.arb-co-tag { font-size:10px; padding:2px 7px; border-radius:20px; background:#f3f4f6; color:#6b7280; }
.arb-co-tag--remote { background:#dcfce7; color:#15803d; }

.arb-co-why { font-size:11px; color:#374151; margin:0; line-height:1.4; }
.arb-co-culture { font-size:11px; color:#6b7280; margin:0; }
.arb-co-rating { font-size:11px; color:#ca8a04; margin:0; }
.arb-co-apply {
    font-size:11px; font-weight:700; color:#6366f1; text-decoration:none;
    padding:5px 10px; border:1px solid #c7d2fe; border-radius:6px;
    text-align:center; background:#eef2ff; margin-top:auto;
    display:block;
}
.arb-co-apply:hover { background:#e0e7ff; }

/* ══════════════════════════════════════════
   Interview Prep
   ══════════════════════════════════════════ */
.arb-iq-tabs { display:flex; gap:5px; margin-bottom:14px; flex-wrap:wrap; }
.arb-iq-tab {
    padding:6px 12px; border-radius:20px; border:1.5px solid #e5e7eb;
    font-size:11px; font-weight:600; cursor:pointer;
    background:#f9fafb; color:#6b7280; display:flex; align-items:center; gap:5px;
}
.arb-iq-tab--on { background:#f5f3ff; color:#7c3aed; border-color:#ddd6fe; }
.arb-iq-count {
    background:#7c3aed; color:#fff; border-radius:20px;
    font-size:9px; padding:1px 5px; font-weight:700;
}

.arb-iq-list { display:flex; flex-direction:column; gap:8px; }
.arb-iq-item { border:1.5px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.arb-iq-q {
    width:100%; text-align:left; padding:12px 14px;
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    font-family:inherit;
}
.arb-iq-q:hover { background:#fafafa; }
.arb-iq-qtext { flex:1; font-size:13px; font-weight:600; color:#111827; }
.arb-iq-diff { font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; color:#fff; flex-shrink:0; }
.arb-iq-arrow { font-size:10px; color:#9ca3af; flex-shrink:0; }

.arb-iq-answer { padding:12px 14px; background:#fafafa; border-top:1px solid #f3f4f6; }
.arb-iq-why { font-size:11px; color:#6b7280; margin:0 0 8px; }
.arb-iq-ans-hd { font-size:11px; font-weight:700; color:#374151; margin-bottom:5px; }
.arb-iq-ans-txt { font-size:12px; color:#374151; line-height:1.6; margin:0 0 6px; white-space:pre-wrap; }
.arb-iq-star { font-size:11px; color:#7c3aed; margin:0; font-style:italic; }

/* Dark mode */
[data-arb-theme="dark"] .arb-career-input { background:#172030; border-color:#334155; }
[data-arb-theme="dark"] .arb-co-card { border-color:#334155; background:#1e293b; }
[data-arb-theme="dark"] .arb-co-name { color:#f1f5f9; }
[data-arb-theme="dark"] .arb-co-why { color:#cbd5e1; }
[data-arb-theme="dark"] .arb-co-tag { background:#263244; color:#94a3b8; }
[data-arb-theme="dark"] .arb-co-profile { background:#263244; color:#94a3b8; }
[data-arb-theme="dark"] .arb-iq-item { border-color:#334155; }
[data-arb-theme="dark"] .arb-iq-q { color:#f1f5f9; }
[data-arb-theme="dark"] .arb-iq-q:hover { background:#263244; }
[data-arb-theme="dark"] .arb-iq-qtext { color:#f1f5f9; }
[data-arb-theme="dark"] .arb-iq-answer { background:#172030; border-color:#334155; }
[data-arb-theme="dark"] .arb-iq-ans-txt { color:#cbd5e1; }
[data-arb-theme="dark"] .arb-sg-skill-row { border-color:#334155; }
[data-arb-theme="dark"] .arb-sg-skill-reason { color:#94a3b8; }

/* ══════════════════════════════════════════
   Career Tools Button
   ══════════════════════════════════════════ */
.arb-oneclick-btn--career {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 50%, #0891b2 100%) !important;
    font-size: 13px !important;
}

/* ══════════════════════════════════════════
   Career Tools Modal
   ══════════════════════════════════════════ */
.arb-ct-modal {
    width: min(960px, 97vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.arb-ct-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    overflow: hidden;
}

/* Left panel */
.arb-ct-left {
    padding: 18px 16px;
    border-right: 1px solid #f3f4f6;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.arb-ct-desc {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Source toggle */
.arb-ct-source { display: flex; gap: 5px; }
.arb-ct-src-btn {
    flex: 1; padding: 7px; border-radius: 8px;
    border: 1.5px solid #e5e7eb; background: #fff;
    font-size: 11px; font-weight: 600; color: #6b7280; cursor: pointer;
}
.arb-ct-src-btn--on { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

/* Drop zone */
.arb-ct-drop {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s, background .15s;
}
.arb-ct-drop:hover, .arb-ct-drop--drag {
    border-color: #6366f1;
    background: #eef2ff;
}
.arb-ct-drop--done { border-color: #16a34a; background: #f0fdf4; border-style: solid; }

.arb-ct-drop-inner {}
.arb-ct-drop-hint { font-size: 13px; font-weight: 600; color: #374151; margin: 6px 0 3px; }
.arb-ct-drop-sub  { font-size: 10px; color: #9ca3af; }

.arb-ct-file { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.arb-ct-fname { font-size: 11px; font-weight: 600; color: #15803d; margin: 0; word-break: break-all; }
.arb-ct-fclr {
    font-size: 11px; padding: 2px 8px; border-radius: 5px;
    border: 1px solid #fecaca; background: #fee2e2; color: #dc2626; cursor: pointer;
}

.arb-ct-current-info {
    text-align: center; padding: 14px;
    background: #eef2ff; border-radius: 8px;
    font-size: 12px; color: #4f46e5;
}
.arb-ct-current-info p { margin: 4px 0; }

/* Progress */
.arb-ct-prog { display: flex; flex-direction: column; gap: 5px; }
.arb-ct-prog-bar-track { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.arb-ct-prog { background: #e5e7eb; border-radius: 99px; height: 6px; overflow: hidden; }
.arb-ct-prog-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #7c3aed);
    border-radius: 99px;
    transition: width .4s ease;
}
.arb-ct-prog-label { font-size: 11px; color: #6b7280; margin: 0; text-align: center; }

/* Analyse button */
.arb-ats-btn--career {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    box-shadow: 0 2px 8px rgba(99,102,241,.35) !important;
    width: 100%;
    padding: 11px;
}

/* What you get */
.arb-ct-what { margin-top: 4px; }
.arb-ct-what-hd { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.arb-ct-what-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid #f3f4f6;
    font-size: 12px;
}
.arb-ct-what-row strong { display: block; color: #111827; font-weight: 600; }
.arb-ct-what-row p { margin: 2px 0 0; color: #9ca3af; font-size: 11px; }
.arb-ct-what-row > span { font-size: 20px; flex-shrink: 0; }

/* Right panel */
.arb-ct-right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.arb-ct-results { flex: 1; overflow-y: auto; padding: 0 20px 20px; }

/* Candidate summary */
.arb-ct-who {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 0 10px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 12px;
}
.arb-ct-who-name { font-size: 16px; font-weight: 700; color: #111827; }
.arb-ct-who-role { font-size: 12px; color: #6b7280; }

/* Result tabs */
.arb-ct-tabs {
    display: flex; gap: 6px; margin-bottom: 14px;
    padding: 12px 0 0;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 10px;
}
.arb-ct-tab {
    padding: 7px 16px; border-radius: 20px; border: 1.5px solid #e5e7eb;
    font-size: 12px; font-weight: 600; cursor: pointer;
    background: #f9fafb; color: #6b7280;
}
.arb-ct-tab--on { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

.arb-ct-panel { padding-top: 4px; }

/* Dark mode */
[data-arb-theme="dark"] .arb-ct-modal { background: #1e293b; }
[data-arb-theme="dark"] .arb-ct-left { background: #172030; border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-drop { background: #1e293b; border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-drop:hover { background: #1e2d4a; border-color: #6366f1; }
[data-arb-theme="dark"] .arb-ct-current-info { background: #1e2d4a; color: #a5b4fc; }
[data-arb-theme="dark"] .arb-ct-drop-hint { color: #e2e8f0; }
[data-arb-theme="dark"] .arb-ct-tabs { border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-tab { background: #263244; color: #94a3b8; border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-tab--on { background: #1e2d4a; color: #a5b4fc; border-color: #4f46e5; }
[data-arb-theme="dark"] .arb-ct-who { border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-who-name { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-ct-what-row { border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-what-row strong { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-ct-src-btn { background: #263244; color: #94a3b8; border-color: #334155; }
[data-arb-theme="dark"] .arb-ct-src-btn--on { background: #1e2d4a; color: #a5b4fc; }

/* ══════════════════════════════════════════
   Feature Lock Overlay
   ══════════════════════════════════════════ */
.arb-feat-lock-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.arb-feat-lock-blur {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
}
.arb-feat-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: 8px;
}
.arb-feat-lock-badge {
    text-align: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    border: 1.5px solid #e5e7eb;
    max-width: 220px;
}
.arb-feat-lock-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.arb-feat-lock-title {
    font-size: 13px; font-weight: 700; color: #111827;
    margin: 0 0 4px;
}
.arb-feat-lock-desc {
    font-size: 11px; color: #6b7280;
    margin: 0 0 10px;
}
.arb-feat-lock-btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s;
}
.arb-feat-lock-btn:hover { opacity: .88; color: #fff; }

/* Dark mode */
[data-arb-theme="dark"] .arb-feat-lock-overlay { background: rgba(15,23,42,0.7); }
[data-arb-theme="dark"] .arb-feat-lock-badge { background: #1e293b; border-color: #334155; }
[data-arb-theme="dark"] .arb-feat-lock-title { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-feat-lock-desc { color: #94a3b8; }

/* ══════════════════════════════════════════
   JD Tailor Button + Modal
   ══════════════════════════════════════════ */
.arb-oneclick-btn--jd {
    background: linear-gradient(135deg,#0f766e,#059669) !important;
}
.arb-jd-modal {
    width: min(860px,97vw) !important;
    max-width: min(860px,97vw) !important; max-height:90vh;
    display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.arb-jd-layout {
    display:grid; grid-template-columns:300px 1fr;
    flex:1; overflow:hidden;
}
.arb-jd-left {
    padding:18px 16px; border-right:1px solid #f3f4f6;
    background:#fafafa; display:flex; flex-direction:column; gap:10px;
    overflow-y:auto;
}
.arb-jd-right { overflow-y:auto; padding:16px 20px; }

/* Scores */
.arb-jd-scores {
    display:flex; align-items:center; justify-content:center; gap:16px;
    padding:16px; background:#f9fafb; border-radius:10px; margin-bottom:14px;
}
.arb-jd-score-box { text-align:center; }
.arb-jd-score-box--after { }
.arb-jd-score-label { font-size:11px; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
.arb-jd-score-num { font-size:32px; font-weight:800; line-height:1.1; }
.arb-jd-score-sub { font-size:10px; color:#9ca3af; }
.arb-jd-score-arrow { font-size:24px; color:#d1d5db; }

.arb-jd-summary {
    font-size:13px; color:#374151; line-height:1.6;
    background:#f0fdf4; border:1px solid #bbf7d0;
    border-radius:8px; padding:12px 14px; margin:0;
}
.arb-jd-results { display:flex; flex-direction:column; gap:14px; }

/* ══════════════════════════════════════════
   Recruiter Dashboard
   ══════════════════════════════════════════ */
.arb-rec-wrap {
    max-width: 1100px; margin: 0 auto; padding: 24px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.arb-rec-hd {
    display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.arb-rec-title { font-size:22px; font-weight:800; margin:0; color:#111827; }
.arb-rec-count { font-size:12px; color:#6b7280; background:#f3f4f6; padding:3px 10px; border-radius:20px; }

/* AI Rank bar */
.arb-rec-rank-bar {
    display:flex; gap:10px; margin-bottom:16px;
    background:#f0f9ff; border:1.5px solid #bae6fd; border-radius:10px; padding:12px 14px;
}
.arb-rec-jd-in {
    flex:1; font-size:13px; border:1px solid #e5e7eb; border-radius:7px;
    padding:8px 12px; outline:none;
}
.arb-rec-jd-in:focus { border-color:#6366f1; }
.arb-rec-rank-btn { flex-shrink:0; white-space:nowrap; background:linear-gradient(135deg,#6366f1,#7c3aed) !important; }

/* Filters */
.arb-rec-filters { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.arb-rec-search {
    flex:1; min-width:200px; font-size:13px; border:1px solid #e5e7eb;
    border-radius:8px; padding:8px 12px; outline:none;
}
.arb-rec-status-filters { display:flex; gap:5px; flex-wrap:wrap; }
.arb-rec-sf {
    padding:5px 12px; border-radius:20px; border:1.5px solid #e5e7eb;
    font-size:11px; font-weight:600; cursor:pointer; background:#f9fafb; color:#6b7280;
}
.arb-rec-sf--on { background:#eef2ff; color:#4f46e5; border-color:#c7d2fe; }

/* Body grid */
.arb-rec-body { display:grid; grid-template-columns:340px 1fr; gap:16px; min-height:500px; }

/* Candidate list */
.arb-rec-list { display:flex; flex-direction:column; gap:8px; overflow-y:auto; max-height:680px; }
.arb-rec-card {
    padding:12px 14px; border:1.5px solid #e5e7eb; border-radius:10px;
    cursor:pointer; background:#fff; transition:all .15s;
}
.arb-rec-card:hover { border-color:#6366f1; box-shadow:0 2px 8px rgba(99,102,241,.1); }
.arb-rec-card--sel { border-color:#6366f1; background:#eef2ff; }
.arb-rec-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.arb-rec-card-name { font-size:14px; font-weight:700; color:#111827; }
.arb-rec-score { font-size:11px; font-weight:700; flex-shrink:0; }
.arb-rec-card-role { font-size:12px; color:#6b7280; margin-bottom:6px; }
.arb-rec-card-meta { display:flex; align-items:center; gap:8px; font-size:11px; color:#9ca3af; }
.arb-rec-status-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; color:#fff; }

/* Detail panel */
.arb-rec-detail {
    border:1.5px solid #e5e7eb; border-radius:12px; padding:20px;
    background:#fff; overflow-y:auto; max-height:680px; display:flex; flex-direction:column; gap:14px;
}
.arb-rec-det-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.arb-rec-det-name { font-size:18px; font-weight:800; color:#111827; margin:0 0 4px; }
.arb-rec-det-role { font-size:13px; color:#6b7280; margin:0; }
.arb-rec-det-actions { flex-shrink:0; }
.arb-rec-det-info { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#374151; }
.arb-rec-verdict { font-size:13px; color:#374151; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; padding:8px 12px; margin:0; }
.arb-rec-note-wrap { display:flex; flex-direction:column; gap:6px; margin-top:4px; }

/* Responsive */
@media (max-width:768px) {
    .arb-rec-body { grid-template-columns:1fr; }
    .arb-jd-layout { grid-template-columns:1fr; }
    .arb-ct-layout  { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════
   Apply to This Job — Button + Modal
   ══════════════════════════════════════════ */

/* Sidebar button — stands out as #1 CTA */
.arb-oneclick-btn--apply {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%) !important;
    font-size: 14px !important;
    padding: 11px 12px !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.35) !important;
    animation: arb-pulse-apply 2.5s ease-in-out infinite;
}
@keyframes arb-pulse-apply {
    0%,100% { box-shadow: 0 4px 14px rgba(239,68,68,.35); }
    50%      { box-shadow: 0 4px 22px rgba(239,68,68,.6); }
}

/* Modal */
.arb-atj-modal {
    position: relative;
    width: min(1100px, 97vw) !important;
    max-width: 97vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
    transition: width .2s, height .2s, border-radius .2s;
}
.arb-modal-overlay--fs {
    padding: 0 !important;
}
.arb-atj-modal--fs {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
}

/* Header */
.arb-atj-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
    gap: 10px;
}
.arb-atj-hd-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.arb-atj-badge {
    font-size: 10px; font-weight: 800; padding: 3px 8px;
    background: rgba(255,255,255,.25); color: #fff; border-radius: 20px;
    letter-spacing: .06em;
}
.arb-atj-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arb-atj-modal .arb-modal-close { color: rgba(255,255,255,.8); }
.arb-atj-modal .arb-modal-close:hover { color: #fff; }

/* Body layout */
.arb-atj-body {
    display: grid;
    grid-template-columns: 65% 35%;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.arb-atj-left {
    padding: 20px 22px;
    border-right: 1px solid #f3f4f6;
    background: #fafafa;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}
.arb-atj-right {
    overflow-y: auto;
    background: #172030;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.arb-atj-desc { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0; }

/* Progress */
.arb-atj-prog-wrap {
    height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.arb-atj-prog-bar {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #ec4899);
    border-radius: 99px;
    transition: width .5s ease;
}

/* Generate button */
.arb-atj-btn {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 800; cursor: pointer;
    box-shadow: 0 3px 12px rgba(239,68,68,.3);
    transition: opacity .15s;
}
.arb-atj-btn:hover:not(:disabled) { opacity: .9; }
.arb-atj-btn:disabled { opacity: .6; cursor: wait; }

/* What you get rows */
.arb-atj-what { margin-top: 8px; border-top: 1px solid #f3f4f6; padding-top: 12px; }
.arb-atj-what-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 6px 0; font-size: 12px;
}
.arb-atj-what-ic { font-size: 18px; flex-shrink: 0; }
.arb-atj-what-row strong { display: block; color: #111827; font-weight: 600; font-size: 12px; }
.arb-atj-what-row p { margin: 1px 0 0; color: #9ca3af; font-size: 11px; }

/* Action buttons */
.arb-atj-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.arb-atj-action-btn {
    width: 100%; padding: 10px;
    border-radius: 8px; border: 1.5px solid #e5e7eb;
    font-size: 12px; font-weight: 700; cursor: pointer;
    background: #f9fafb; color: #374151;
    transition: all .15s;
}
.arb-atj-action-btn:hover:not(:disabled) { background: #f3f4f6; }
.arb-atj-action-btn--cl { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.arb-atj-action-btn--cl:hover { background: #e0e7ff; }
.arb-atj-action-btn--done { background: #f0fdf4 !important; color: #16a34a !important; border-color: #bbf7d0 !important; cursor: default; }

/* Results */
.arb-atj-results { display: flex; flex-direction: column; gap: 0; }

/* Score banner */
.arb-atj-score-banner {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    padding: 14px 16px; margin-bottom: 14px;
    background: linear-gradient(135deg, #fdf4ff, #eff6ff);
    border: 1.5px solid #e9d5ff; border-radius: 12px;
}
.arb-atj-score-item { text-align: center; }
.arb-atj-score-lbl { display: block; font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.arb-atj-score-val { display: block; font-size: 28px; font-weight: 800; line-height: 1; }
.arb-atj-score-arrow { font-size: 20px; color: #d1d5db; }
.arb-atj-score-improve {
    font-size: 16px; font-weight: 800; color: #16a34a;
    background: #f0fdf4; padding: 6px 14px; border-radius: 20px;
    border: 1.5px solid #bbf7d0;
}
.arb-atj-score-improve span { font-size: 11px; font-weight: 500; color: #6b7280; }

/* Tab content */
.arb-atj-tab-content { padding-top: 8px; }

/* Experience blocks */
.arb-atj-exp { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.arb-atj-exp:last-child { border-bottom: none; }
.arb-atj-exp-title { display: block; font-size: 13px; color: #111827; margin-bottom: 6px; }
.arb-atj-exp-desc { font-size: 12px; color: #374151; line-height: 1.6; margin: 0; }

/* Cover letter */
.arb-atj-cl-wrap { display: flex; flex-direction: column; }
.arb-atj-cl-text {
    font-size: 13px; color: #374151; line-height: 1.7;
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 8px; padding: 16px; margin: 0;
}

/* Dark mode */
[data-arb-theme="dark"] .arb-atj-left { background: #172030; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-modal { background: #1e293b; }
[data-arb-theme="dark"] .arb-atj-cl-text { background: #263244; border-color: #334155; color: #cbd5e1; }
[data-arb-theme="dark"] .arb-atj-exp { border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-exp-title { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-atj-exp-desc { color: #94a3b8; }
[data-arb-theme="dark"] .arb-atj-score-banner { background: linear-gradient(135deg,#1e2040,#1a2840); border-color:#334155; }
[data-arb-theme="dark"] .arb-atj-what-row strong { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-atj-action-btn { background: #263244; color: #cbd5e1; border-color: #334155; }

/* ══════════════════════════════════════════
   Apply to Job — CV Source Selector
   ══════════════════════════════════════════ */
.arb-atj-src { margin-bottom: 4px; overflow: hidden; }
.arb-atj-src-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6);
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0 0 6px;
}
.arb-atj-src-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.arb-atj-src-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px; border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07);
    cursor: pointer; text-align: left;
    transition: all .12s;
}
.arb-atj-src-btn > span:first-child { font-size: 16px; flex-shrink: 0; }
.arb-atj-src-btn strong { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.9); }
.arb-atj-src-btn span:last-child { font-size: 10px; color: rgba(255,255,255,.4); }
.arb-atj-src-btn:hover { border-color: #6366f1; background: rgba(99,102,241,.2); }
.arb-atj-src-btn--on {
    border-color: #6366f1; background: rgba(99,102,241,.3);
}
.arb-atj-src-btn--on strong { color: #a5b4fc; }

/* PDF zone inside Apply modal */
.arb-atj-pdf-zone { display: flex; flex-direction: column; gap: 6px; }

/* Quick Form */
.arb-atj-qf { display: flex; flex-direction: column; gap: 7px; }

.arb-atj-qf-photo-row {
    display: flex; align-items: flex-start; gap: 10px;
}
.arb-atj-qf-photo {
    width: 60px; height: 60px; flex-shrink: 0;
    border-radius: 50%; border: 2px dashed #d1d5db;
    cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #f9fafb; transition: border-color .12s;
}
.arb-atj-qf-photo:hover { border-color: #6366f1; }
.arb-atj-qf-photo-img { width: 100%; height: 100%; object-fit: cover; }
.arb-atj-qf-photo-ph {
    display: flex; flex-direction: column; align-items: center;
    font-size: 18px; gap: 1px;
}
.arb-atj-qf-name-group {
    flex: 1; display: flex; flex-direction: column; gap: 5px;
}
.arb-atj-qf-row2 { display: flex; flex-direction: column; gap: 5px; }

/* Divider */
.arb-atj-divider {
    border-top: 1px solid #e5e7eb;
    margin: 8px 0;
}

/* Two column row for company + title */
.arb-atj-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }

/* Dark mode */
[data-arb-theme="dark"] .arb-atj-src-btn { background: #263244; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-src-btn strong { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-atj-src-btn--on { background: #1e2d4a; border-color: #4f46e5; }
[data-arb-theme="dark"] .arb-atj-src-btn--on strong { color: #a5b4fc; }
[data-arb-theme="dark"] .arb-atj-qf-photo { background: #263244; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-divider { border-color: #334155; }

/* ══════════════════════════════════════════
   Smart Apply — Step Indicator
   ══════════════════════════════════════════ */
.arb-atj-steps {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; padding: 10px 4px;
    border-bottom: 1px solid #f3f4f6;
}
.arb-atj-step {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    opacity: .35; transition: opacity .2s;
}
.arb-atj-step--active { opacity: 1; }
.arb-atj-step--done   { opacity: .7; }
.arb-atj-step-ic {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; background: #f3f4f6; border: 2px solid #e5e7eb;
}
.arb-atj-step--active .arb-atj-step-ic { background: #eef2ff; border-color: #6366f1; color: #4f46e5; }
.arb-atj-step--done   .arb-atj-step-ic { background: #f0fdf4; border-color: #16a34a; color: #16a34a; }
.arb-atj-step-lbl { font-size: 9px; color: #9ca3af; font-weight: 600; text-transform: uppercase; }
.arb-atj-step--active .arb-atj-step-lbl { color: #4f46e5; }

/* ── JD source tabs ── */
.arb-atj-jd-tabs { display: flex; gap: 5px; margin-bottom: 6px; }
.arb-atj-jd-tab {
    flex: 1; padding: 6px; border-radius: 7px;
    border: 1.5px solid #e5e7eb; background: #f9fafb;
    font-size: 11px; font-weight: 600; color: #6b7280; cursor: pointer;
}
.arb-atj-jd-tab--on { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

.arb-atj-url-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Checking state ── */
.arb-atj-checking { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 0; }
.arb-atj-form { display: flex; flex-direction: column; gap: 10px; }

/* ── Eligibility badge ── */
.arb-atj-elig-panel { display: flex; flex-direction: column; gap: 10px; }
.arb-atj-elig-badge {
    text-align: center; padding: 16px 12px;
    border-radius: 12px;
}
.arb-atj-elig-score { font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.arb-atj-elig-label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.arb-atj-elig-msg   { font-size: 12px; color: #374151; margin: 0; line-height: 1.5; }

.arb-atj-elig-actions { display: flex; flex-direction: column; gap: 6px; }
.arb-atj-low-match-warn {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fff7ed; border: 1px solid #fed7aa;
    border-radius: 8px; padding: 10px 12px;
    font-size: 12px; color: #92400e;
}

/* ── Eligibility detail (right panel) ── */
.arb-atj-elig-detail { padding-top: 4px; }
.arb-atj-req {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid #f3f4f6;
    font-size: 12px;
}
.arb-atj-req--met .arb-atj-req-ic { color: #16a34a; font-size: 16px; flex-shrink: 0; }
.arb-atj-req-sev {
    font-size: 9px; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; color: #fff; flex-shrink: 0;
    text-transform: uppercase; margin-top: 2px;
}
.arb-atj-req strong { display: block; color: #111827; }
.arb-atj-req-has    { color: #6b7280; font-size: 11px; }
.arb-atj-workaround {
    margin: 5px 0 0; font-size: 11px; color: #059669;
    background: #f0fdf4; border-radius: 5px; padding: 4px 8px;
}

/* Dark mode */
[data-arb-theme="dark"] .arb-atj-steps { border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-step-ic { background: #263244; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-jd-tab  { background: #263244; border-color: #334155; color: #94a3b8; }
[data-arb-theme="dark"] .arb-atj-jd-tab--on { background: #1e2d4a; color: #a5b4fc; border-color: #4f46e5; }
[data-arb-theme="dark"] .arb-atj-req { border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-req strong { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-atj-elig-msg { color: #cbd5e1; }

/* ══════════════════════════════════════════
   Apply to Job — Right Panel Preview
   ══════════════════════════════════════════ */
.arb-atj-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    overflow-y: auto;
}

/* How it works */
.arb-atj-how {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
}
.arb-atj-how-title {
    font-size: 11px; font-weight: 700; color: #6366f1;
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0 0 12px;
}
.arb-atj-how-row {
    display: flex; gap: 10px; align-items: flex-start;
    margin-bottom: 10px;
}
.arb-atj-how-row:last-child { margin-bottom: 0; }
.arb-atj-how-ic {
    font-size: 16px; flex-shrink: 0; width: 28px; height: 28px;
    background: #fff; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e5e7eb;
}
.arb-atj-how-content { flex: 1; min-width: 0; }
.arb-atj-how-step-title {
    display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.arb-atj-how-num {
    width: 16px; height: 16px; background: #6366f1; color: #fff;
    border-radius: 50%; font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.arb-atj-how-step-title strong {
    font-size: 12px; font-weight: 700; color: #111827;
}
.arb-atj-how-desc {
    font-size: 11px; color: #6b7280; margin: 0; line-height: 1.4;
}

/* Sample output */
.arb-atj-sample {
    background: #fff; border: 1.5px solid #e5e7eb;
    border-radius: 10px; padding: 12px 14px;
}
.arb-atj-sample-title {
    font-size: 10px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 10px;
}
.arb-atj-sample-score {
    display: flex; align-items: center; gap: 10px;
    justify-content: center; margin-bottom: 10px;
}
.arb-atj-sample-score-item {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.arb-atj-sample-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: center;
}
.arb-atj-sample-tags .arb-ats-tag {
    font-size: 10px; padding: 2px 7px;
}

/* Time comparison */
.arb-atj-time {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 10px 12px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    flex-wrap: wrap;
}
.arb-atj-time-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.arb-atj-time-before { font-size: 13px; font-weight: 700; color: #dc2626; }
.arb-atj-time-after  { font-size: 13px; font-weight: 700; color: #16a34a; }

/* Dark mode */
[data-arb-theme="dark"] .arb-atj-how { background: #1a2234; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-how-title { color: #a5b4fc; }
[data-arb-theme="dark"] .arb-atj-how-step-title strong { color: #f1f5f9; }
[data-arb-theme="dark"] .arb-atj-how-ic { background: #263244; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-how-desc { color: #94a3b8; }
[data-arb-theme="dark"] .arb-atj-sample { background: #1e293b; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-time { background: #1a2234; border-color: #334155; }
[data-arb-theme="dark"] .arb-atj-right { background: #1e293b; }

/* CV source hint */
.arb-atj-src-hint {
    font-size: 11px;
    color: #6b7280;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0 0;
    line-height: 1.5;
}
[data-arb-theme="dark"] .arb-atj-src-hint {
    background: #1e3a4a;
    border-color: #1e4a6a;
    color: #94a3b8;
}

/* CV source contextual info */
.arb-atj-src-info {
    margin-top: 8px;
    min-height: 36px;
    width: 100%;
    box-sizing: border-box;
}
.arb-atj-src-info p {
    font-size: 12px;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 7px;
    padding: 8px 12px;
    margin: 0;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    animation: arbFadeIn .15s ease;
}
@keyframes arbFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
[data-arb-theme="dark"] .arb-atj-src-info p {
    background: #1e2d4a;
    border-color: #3730a3;
    color: #a5b4fc;
}