/* CVGenius Pro — style.css */
:root{
  --ink:#0d0d14;--paper:#f5f4ef;--surface:#fff;--muted:#f0efe8;
  --border:#e2e0d5;--accent:#1a1a2e;--gold:#c8973a;--gold-light:#f0d080;
  --green:#2d7a4f;--red:#c0392b;--blue:#1e4d8c;
  --text:#1a1918;--text-soft:#6b6860;--text-muted:#9e9c95;
  --radius:4px;--shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,.12);--tpl-accent:#1a1a2e
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Instrument Sans',sans-serif;background:var(--paper);color:var(--text);min-height:100vh;font-size:15px;line-height:1.6}
.container{max-width:1040px;margin:0 auto;padding:0 28px}

/* HEADER */
header{background:var(--accent);position:sticky;top:0;z-index:50;box-shadow:0 2px 20px rgba(0,0,0,.2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:32px;height:32px;background:var(--gold);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:14px;color:var(--accent)}
.logo-name{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:#fff;letter-spacing:-.03em}
.logo-name span{color:var(--gold)}
.header-center{flex:1;display:flex;justify-content:center}
.live-counter{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7);font-family:'JetBrains Mono',monospace;background:rgba(255,255,255,.06);padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.1)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.header-tag{font-size:10px;font-family:'JetBrains Mono',monospace;background:rgba(200,151,58,.2);color:var(--gold-light);padding:3px 10px;border-radius:2px;border:1px solid rgba(200,151,58,.3);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}

/* HERO */
.hero{background:var(--accent);color:#fff;padding:60px 0 56px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 10% 50%,rgba(200,151,58,.08) 0%,transparent 70%);pointer-events:none}
.hero-content{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center}
.hero-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-family:'JetBrains Mono',monospace}
.hero h1{font-family:'Syne',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-desc{font-size:15px;color:rgba(255,255,255,.65);max-width:480px;margin-bottom:28px;line-height:1.7}
.ats-logos{margin-bottom:28px}
.ats-label{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;font-family:'JetBrains Mono',monospace}
.ats-row{display:flex;gap:8px;flex-wrap:wrap}
.ats-logo{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:5px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);font-family:'JetBrains Mono',monospace}
.stats{display:flex;gap:32px;flex-wrap:wrap}
.stat-num{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;color:var(--gold);line-height:1}
.stat-desc{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px}

/* BEFORE/AFTER */
.before-after-widget{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:20px;backdrop-filter:blur(10px)}
.ba-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ba-label{font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px}
.ba-label-before{background:rgba(192,57,43,.2);color:#ff8a80;border:1px solid rgba(192,57,43,.3)}
.ba-label-after{background:rgba(45,122,79,.2);color:#69f0ae;border:1px solid rgba(45,122,79,.3)}
.ba-arrow-center{color:var(--gold);font-size:20px;font-weight:700}
.ba-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ba-card{background:rgba(255,255,255,.04);border-radius:8px;padding:14px;border:1px solid rgba(255,255,255,.08)}
.ba-card-before{opacity:.7}
.ba-card-after{border-color:rgba(45,122,79,.4);background:rgba(45,122,79,.06)}
.ba-score-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ba-score-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:16px;flex-shrink:0;border:3px solid}
.ba-score-circle.bad{background:rgba(192,57,43,.2);color:#ff6b6b;border-color:rgba(192,57,43,.4)}
.ba-score-circle.good{background:rgba(45,122,79,.2);color:#69f0ae;border-color:rgba(45,122,79,.4)}
.ba-score-title.bad{color:#ff6b6b;font-size:13px;font-weight:700}
.ba-score-title.good{color:#69f0ae;font-size:13px;font-weight:700}
.ba-score-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.ba-cv-preview{margin-bottom:10px}
.ba-line{height:6px;border-radius:3px;margin-bottom:6px}
.ba-line.long{width:90%}.ba-line.medium{width:70%}.ba-line.short{width:50%}
.ba-line.muted{background:rgba(255,255,255,.12)}
.ba-line.vibrant{background:linear-gradient(90deg,rgba(200,151,58,.6),rgba(200,151,58,.3))}
.ba-section-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin:8px 0 6px}
.ba-section-title.muted{color:rgba(255,255,255,.3)}
.ba-section-title.vibrant{color:var(--gold)}
.ba-pills-row{display:flex;gap:4px;flex-wrap:wrap}
.ba-pill{font-size:9px;padding:2px 7px;border-radius:10px;font-family:'JetBrains Mono',monospace}
.ba-pill.muted{background:rgba(255,255,255,.08);color:rgba(255,255,255,.4)}
.ba-pill.vibrant{background:rgba(200,151,58,.2);color:var(--gold)}
.ba-kw-row{display:flex;gap:4px;flex-wrap:wrap}
.ba-kw{font-size:10px;padding:2px 8px;border-radius:10px;font-family:'JetBrains Mono',monospace}
.ba-kw.bad{background:rgba(192,57,43,.15);color:#ff6b6b}
.ba-kw.good{background:rgba(45,122,79,.15);color:#69f0ae}
.ba-cta{text-align:center;background:linear-gradient(135deg,var(--gold),#d4a040);color:var(--accent);font-weight:700;font-size:13px;padding:12px;border-radius:6px;cursor:pointer;transition:all .2s;margin-top:4px}
.ba-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,151,58,.4)}

/* ATS EDUCATIONAL */
.ats-edu-section{background:#fff;border-bottom:1px solid var(--border);padding:56px 0}
.ats-edu-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ats-edu-tag{display:inline-flex;align-items:center;background:rgba(200,151,58,.1);color:#9a6f1e;border:1px solid rgba(200,151,58,.3);border-radius:20px;padding:4px 14px;font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace;margin-bottom:16px}
.ats-edu-title{font-family:'Syne',sans-serif;font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--text);margin-bottom:16px;letter-spacing:-.02em;line-height:1.1}
.ats-edu-desc{font-size:14px;color:var(--text-soft);line-height:1.8}
.ats-edu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.ats-stat-item{background:var(--muted);border:1px solid var(--border);border-radius:8px;padding:16px 12px;text-align:center}
.ats-stat-icon{font-size:24px;margin-bottom:6px}
.ats-stat-num{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--accent);margin-bottom:4px}
.ats-stat-desc{font-size:11px;color:var(--text-muted);line-height:1.4}
.ats-edu-flow{display:flex;align-items:center;gap:8px;margin-bottom:12px;background:var(--muted);border:1px solid var(--border);border-radius:8px;padding:12px 16px}
.ats-flow-step{flex:1;text-align:center;font-size:12px;font-weight:600;padding:6px 8px;border-radius:4px}
.active-step{background:rgba(26,26,46,.08);color:var(--accent)}
.danger-step{background:rgba(192,57,43,.1);color:var(--red);border:1px solid rgba(192,57,43,.2)}
.muted-step{background:rgba(158,156,149,.1);color:var(--text-muted)}
.ats-flow-arrow{color:var(--gold);font-weight:700;flex-shrink:0}
.ats-edu-cta{font-size:12px;color:var(--red);font-weight:600;text-align:center;background:rgba(192,57,43,.06);border:1px solid rgba(192,57,43,.15);border-radius:6px;padding:10px}

/* TESTIMONIALS */
.testimonials-section{background:#fff;padding:56px 0;border-bottom:1px solid var(--border)}
.section-title-center{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;text-align:center;margin-bottom:32px}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-card{background:var(--muted);border:1px solid var(--border);border-radius:8px;padding:20px}
.t-mini-cv{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:#fff;border-radius:6px;border:1px solid var(--border)}
.t-cv-before,.t-cv-after{text-align:center;flex:1}
.t-cv-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:'JetBrains Mono',monospace}
.t-score{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:16px;margin:0 auto}
.t-score.bad-bg{background:rgba(192,57,43,.1);color:var(--red);border:2px solid rgba(192,57,43,.25)}
.t-score.good-bg{background:rgba(45,122,79,.1);color:var(--green);border:2px solid rgba(45,122,79,.3)}
.t-arrow{font-size:20px;color:var(--gold);font-weight:700;flex-shrink:0}
.t-quote{font-size:13px;color:var(--text-soft);line-height:1.7;margin-bottom:16px;font-style:italic}
.t-author{display:flex;align-items:center;gap:10px}
.t-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--gold));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.t-name{font-size:13px;font-weight:600}
.t-role{font-size:11px;color:var(--text-muted)}
.t-stars{margin-left:auto;color:var(--gold);font-size:12px}

/* STEPS BAR */
.steps-bar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:40;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.steps-inner{display:flex;height:48px;align-items:stretch}
.step-item{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-muted);border-right:1px solid var(--border);padding:0 12px;transition:all .3s;position:relative}
.step-item:last-child{border-right:none}
.step-item.active{color:var(--accent);background:rgba(26,26,46,.03)}
.step-item.done{color:var(--green)}
.step-item.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold)}
.step-num{width:20px;height:20px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.step-item.active .step-num{background:var(--accent);color:#fff}
.step-item.done .step-num{background:var(--green);color:#fff}

main{padding:40px 0 80px}

/* SECTION BLOCK */
.section-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;box-shadow:var(--shadow)}
.block-header{padding:20px 28px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px}
.block-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.block-num{width:24px;height:24px;background:var(--accent);color:#fff;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:'JetBrains Mono',monospace;flex-shrink:0}
.block-body{padding:24px 28px}
.block-badge{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace}

/* FORM */
.field{margin-bottom:20px}.field:last-child{margin-bottom:0}
.field-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);margin-bottom:7px}
textarea,input[type=text]{width:100%;border:1.5px solid var(--border);border-radius:var(--radius);padding:11px 14px;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--text);background:var(--surface);resize:vertical;transition:border-color .15s;outline:none;line-height:1.6}
textarea:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,26,46,.08)}
textarea::placeholder,input::placeholder{color:var(--text-muted)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.optional-tag{font-size:10px;font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0;margin-left:4px}
.req{color:var(--red)}
.char-count{font-size:11px;color:var(--text-muted);text-align:right;margin-top:4px;font-family:'JetBrains Mono',monospace}
.input-mode-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--muted);padding:4px;border-radius:var(--radius);width:fit-content}
.mode-tab{padding:7px 16px;border:none;background:transparent;border-radius:3px;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s}
.mode-tab.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.1);font-weight:600}

/* UPLOAD */
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--muted)}
.upload-zone:hover{border-color:var(--accent);background:#fff}
.upload-zone.dragover{border-color:var(--gold);background:rgba(200,151,58,.05)}
.upload-zone.has-file{border-color:var(--green);border-style:solid;background:rgba(45,122,79,.04)}
.upload-zone-sm{padding:20px}
.uz-icon{font-size:36px;margin-bottom:10px}.uz-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}.uz-hint{font-size:12px;color:var(--text-muted)}
.file-selected{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(45,122,79,.08);border-radius:var(--radius)}
.file-selected-name{font-size:13px;font-weight:600;color:var(--green)}
.file-selected-size{font-size:11px;color:var(--text-muted)}
.file-selected-remove{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;padding:2px 6px}
.file-selected-remove:hover{color:var(--red)}

/* PHOTO */
.photo-toggle{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--muted);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;margin-bottom:16px}
.toggle-switch{width:36px;height:20px;background:var(--border);border-radius:10px;position:relative;transition:background .2s;flex-shrink:0}
.toggle-switch.on{background:var(--green)}
.toggle-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-switch.on .toggle-knob{transform:translateX(16px)}

/* DETECT */
.detect-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;min-height:28px}
.detect-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:2px;font-size:11px;font-family:'JetBrains Mono',monospace;border:1px solid;opacity:0;transform:translateY(4px);transition:all .3s}
.detect-badge.show{opacity:1;transform:translateY(0)}
.badge-lang{background:rgba(30,77,140,.08);color:var(--blue);border-color:rgba(30,77,140,.25)}
.badge-sector{background:rgba(45,122,79,.08);color:var(--green);border-color:rgba(45,122,79,.25)}
.badge-level{background:rgba(200,151,58,.1);color:#9a6f1e;border-color:rgba(200,151,58,.3)}

/* TIP BOXES */
.tip-box{padding:10px 14px;border-radius:var(--radius);font-size:13px;line-height:1.6;margin-bottom:16px}
.tip-blue{background:rgba(30,77,140,.06);border:1px solid rgba(30,77,140,.15);color:#1a3a6e}
.tip-green{background:rgba(45,122,79,.06);border:1px solid rgba(45,122,79,.15);color:#1a4a2e}
.tip-gold{background:rgba(200,151,58,.08);border:1px solid rgba(200,151,58,.2);color:#7a5010}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover:not(:disabled){background:#2a2a4e;box-shadow:0 4px 16px rgba(26,26,46,.25);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--accent)}
.btn-gold:hover{background:#d4a040;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-soft);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-stripe{background:#635bff;color:#fff;border-radius:var(--radius);padding:12px 24px;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;width:100%;margin-bottom:10px;transition:all .15s}
.btn-stripe:hover{background:#5a52e8}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn-lg{padding:15px 32px;font-size:15px}
.alert{padding:12px 16px;border-radius:var(--radius);font-size:13px;display:flex;gap:10px;margin-bottom:16px}
.alert-err{background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.22);color:var(--red)}
.cta-section{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding:24px 0;border-top:1px solid var(--border)}
.cta-note{font-size:12px;color:var(--text-muted)}

/* LOADING */
.loading-screen{display:none;position:fixed;inset:0;background:rgba(13,13,20,.93);backdrop-filter:blur(12px);z-index:200;align-items:center;justify-content:center;flex-direction:column;gap:20px}
.loading-screen.on{display:flex}
.loader-ring{width:64px;height:64px}
.loader-ring svg{animation:spin 1.2s linear infinite;width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.lr-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3}
.lr-arc{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:140;stroke-dashoffset:40;stroke-linecap:round}
.loading-title{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;color:#fff}
.loading-pipeline{display:flex;flex-direction:column;gap:5px;min-width:320px}
.pipe-step{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:13px;color:rgba(255,255,255,.35);transition:all .4s;position:relative;overflow:hidden}
.pipe-step.running{background:rgba(200,151,58,.1);border-color:rgba(200,151,58,.3);color:var(--gold-light)}
.pipe-step.done{background:rgba(45,122,79,.1);border-color:rgba(45,122,79,.25);color:rgba(255,255,255,.5)}
.ps-label{flex:1}
.ps-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.05)}
.ps-fill{height:100%;width:0%;background:var(--gold);transition:width 2.2s linear}
.pipe-step.running .ps-fill{width:100%}
.pipe-step.done .ps-fill{width:100%;background:var(--green)}

/* ══════════════════════════════════════════════
   TEMPLATE SELECTOR — anteprime reali
══════════════════════════════════════════════ */
.template-selector{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;box-shadow:var(--shadow)}
.template-selector-header{padding:20px 28px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.template-selector-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 28px}
.template-card{border:2px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative;background:#fff}
.template-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.template-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,151,58,.25)}
.template-card.selected::after{content:'✓';position:absolute;top:8px;right:8px;background:var(--gold);color:var(--accent);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;z-index:2;box-shadow:0 2px 8px rgba(200,151,58,.4)}

/* Anteprima reale del CV in miniatura */
.tpl-preview-real{height:155px;overflow:hidden;position:relative;background:#f8f8f6}
.tpl-preview-real svg{width:100%;height:100%;display:block}
.tpl-preview-real .inner{transform:scale(0.32);transform-origin:top left;width:313%;height:313%;pointer-events:none;position:absolute;top:0;left:0}

/* Etichetta settore consigliato */
.tpl-info{padding:11px 14px;border-top:1px solid var(--border);background:#fafaf8}
.tpl-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.tpl-sector-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 8px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-weight:600;margin-top:4px}
.tpl-sector-badge.tech{background:rgba(99,102,241,.1);color:#4f46e5;border:1px solid rgba(99,102,241,.2)}
.tpl-sector-badge.manager{background:rgba(26,26,46,.08);color:#1a1a2e;border:1px solid rgba(26,26,46,.15)}
.tpl-sector-badge.creative{background:rgba(37,99,235,.1);color:#1d4ed8;border:1px solid rgba(37,99,235,.2)}
.tpl-sector-badge.academia{background:rgba(139,69,19,.1);color:#7c3a00;border:1px solid rgba(139,69,19,.2)}
.tpl-sector-badge.finance{background:rgba(30,77,140,.1);color:#1e4d8c;border:1px solid rgba(30,77,140,.2)}
.tpl-sector-badge.skills{background:rgba(6,22,40,.1);color:#0a1628;border:1px solid rgba(6,22,40,.2)}
.tpl-sector-badge.italian{background:rgba(200,151,58,.1);color:#9a6f1e;border:1px solid rgba(200,151,58,.3)}
.tpl-sector-badge.international{background:rgba(45,122,79,.1);color:#1a4a2e;border:1px solid rgba(45,122,79,.2)}
.tpl-sector-badge.eu{background:rgba(0,51,153,.1);color:#003399;border:1px solid rgba(0,51,153,.2)}
.tpl-sector-badge.sanita{background:rgba(45,122,79,.1);color:#1a5c36;border:1px solid rgba(45,122,79,.25)}
.tpl-sector-badge.turismo{background:rgba(217,119,6,.1);color:#92400e;border:1px solid rgba(217,119,6,.25)}
.tpl-sector-badge.edilizia{background:rgba(245,158,11,.1);color:#78350f;border:1px solid rgba(245,158,11,.25)}
.tpl-recommended{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--gold);font-weight:700;margin-left:6px}

/* ── MINI CV PREVIEWS — anteprime fedeli ai template ── */

/* Contenitore preview */
.tpl-preview-real {
  height: 160px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.tpl-preview-real .inner {
  position: absolute;
  top: 0; left: 0;
  width: 313%;
  height: 313%;
  transform: scale(0.32);
  transform-origin: top left;
  pointer-events: none;
  font-size: 14px;
  line-height: 1.5;
}

/* NOVA — dark sidebar */
.mini-nova{display:grid;grid-template-columns:200px 1fr;min-height:500px}
.mini-nova-sidebar{background:#0d1b2a;padding:28px 20px;color:#fff}
.mini-nova-main{background:#fff;padding:28px 24px}

/* EXECUTIVE — formale classico */
.mini-exec{padding:32px 36px;background:#fff;min-height:500px}

/* PULSE — header colorato */
.mini-pulse{background:#fff}
.mini-pulse-header{padding:24px 28px}
.mini-pulse-body{padding:22px 28px;display:grid;grid-template-columns:2fr 1fr;gap:18px}

/* SCHOLAR — bordo laterale */
.mini-scholar{padding:32px 36px;background:#fff;min-height:500px}

/* FINANCE — due colonne grigia */
.mini-finance{display:grid;grid-template-columns:1fr 140px;min-height:500px}
.mini-finance-main{padding:28px 22px;background:#fff;border-right:1px solid #e2e0d5}
.mini-finance-side{padding:28px 16px;background:#f8f9fa}

/* IMPACT — dark sidebar con skill bars */
.mini-impact{display:grid;grid-template-columns:210px 1fr;min-height:500px}
.mini-impact-sidebar{background:#0a1628;padding:28px 20px;color:#fff}
.mini-impact-main{background:#fff;padding:28px 24px}

/* MILANO — header con foto */
.mini-milano{background:#fff}
.mini-milano-header{display:flex;align-items:center;gap:16px;padding:22px 24px;background:#fef9f0;border-bottom:1px solid #e2e0d5}
.mini-milano-body{padding:20px 24px;display:grid;grid-template-columns:1fr 100px;gap:16px}

/* GLOBAL — clean internazionale */
.mini-global{padding:32px 36px;background:#fff;min-height:500px}
.mini-global-header{display:flex;justify-content:space-between;padding-bottom:14px;margin-bottom:14px}
.mini-global-body{display:grid;grid-template-columns:1fr 100px;gap:16px}

/* EUROPASS */
.mini-europass{background:#fff}
.mini-europass-header{background:#003399;padding:14px 20px;display:flex;align-items:center;gap:12px}
.mini-europass-body{padding:18px 22px}

/* Elementi riutilizzabili */
.m-line{height:7px;border-radius:3px;margin-bottom:6px;background:#e2e0d5}
.m-line.w95{width:95%}.m-line.w90{width:90%}.m-line.w80{width:80%}
.m-line.w70{width:70%}.m-line.w60{width:60%}.m-line.w50{width:50%}
.m-line.w40{width:40%}.m-line.w30{width:30%}
.m-line.dk{background:rgba(255,255,255,.25)}
.m-line.acc{background:var(--tpl-accent,#1a1a2e);opacity:.7}
.m-line.acc2{background:var(--tpl-accent,#1a1a2e);opacity:.35}

.m-name{height:12px;border-radius:3px;width:65%;margin-bottom:8px;background:#1a1a2e}
.m-name.dk{background:rgba(255,255,255,.85)}
.m-role{height:7px;border-radius:2px;width:48%;margin-bottom:16px}
.m-role.acc{background:var(--tpl-accent,#1a1a2e);opacity:.8}
.m-role.dk{background:rgba(255,255,255,.5)}

.m-sec{height:6px;border-radius:2px;width:52%;margin-bottom:10px;margin-top:16px}
.m-sec.acc{background:var(--tpl-accent,#1a1a2e)}
.m-sec.dk{background:rgba(255,255,255,.4)}
.m-sec.brown{background:#8b4513}
.m-sec.eu{background:#003399}

.m-circle{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);margin-bottom:14px}
.m-photo{width:40px;height:50px;background:rgba(200,151,58,.3);border-radius:2px;flex-shrink:0;border:1px solid rgba(200,151,58,.4)}
.m-photo-round{width:42px;height:42px;border-radius:50%;flex-shrink:0}

.m-pill{display:inline-block;height:13px;border-radius:3px;margin:3px;vertical-align:top}
.m-pill.dk{background:rgba(255,255,255,.18)}
.m-pill.acc{background:var(--tpl-accent,#1a1a2e);opacity:.3}
.m-pill.eu{background:rgba(0,51,153,.25)}

/* Skill bar per Impact */
.m-skill-wrap{margin-bottom:12px}
.m-skill-label{height:6px;border-radius:2px;width:68%;background:rgba(255,255,255,.55);margin-bottom:4px}
.m-skill-track{height:7px;background:rgba(255,255,255,.1);border-radius:3px}
.m-skill-fill{height:100%;border-radius:3px;background:var(--tpl-accent,#6366f1)}

/* COLOR PICKER */
.color-picker-section{padding:0 28px 24px;border-top:1px solid var(--border);margin-top:4px}
.color-picker-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);margin:16px 0 10px}
.color-swatches{display:flex;gap:8px;flex-wrap:wrap}
.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;position:relative}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.active{border-color:var(--text);transform:scale(1.1)}
.color-swatch.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white}

/* RESULTS HEADER */
.results-header{background:var(--accent);color:#fff;padding:28px 0;margin-bottom:28px;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.results-header-inner{padding:0 28px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px}
.score-display{display:flex;align-items:center;gap:20px}
.score-block{text-align:center}
.score-block-label{font-size:11px;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.score-arrow-big{font-size:28px;color:var(--gold);font-weight:700;margin:20px 4px 0}
.score-circle-wrap{position:relative;width:90px;height:90px}
.score-circle-big{width:110px;height:110px}
.score-circle-wrap svg{transform:rotate(-90deg)}
.sc-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:7}
.sc-fill{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1)}
.sc-fill-before{fill:none;stroke:rgba(192,57,43,.6);stroke-width:7;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;transition:stroke-dashoffset 1.5s ease}
.score-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.score-num{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:rgba(255,255,255,.6);line-height:1}
.score-num-big{font-size:28px;color:var(--gold)}
.score-lbl{font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase}
.score-meta h2{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;margin-bottom:6px}
.score-meta p{font-size:13px;color:rgba(255,255,255,.6);max-width:320px;line-height:1.6;margin-bottom:12px}
.score-status-badge{display:inline-flex;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace}
.score-status-badge.danger{background:rgba(192,57,43,.2);color:#ff8a80;border:1px solid rgba(192,57,43,.4)}
.score-status-badge.warning{background:rgba(247,185,50,.15);color:#ffd54f;border:1px solid rgba(247,185,50,.3)}
.score-status-badge.good{background:rgba(45,122,79,.2);color:#69f0ae;border:1px solid rgba(45,122,79,.4)}

/* LANG SELECTOR */
.lang-selector{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:12px 16px}
.lang-label{font-size:11px;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.lang-btns{display:flex;gap:6px;margin-bottom:6px}
.lang-btn{padding:6px 14px;border-radius:3px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.lang-btn.active{background:var(--gold);border-color:var(--gold);color:var(--accent)}
.lang-note{font-size:11px;color:rgba(255,255,255,.35)}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 10px;border-radius:2px;font-size:11px;font-family:'JetBrains Mono',monospace;border:1px solid;display:inline-flex;align-items:center;gap:4px;transition:all .3s}
.chip-present{background:rgba(45,122,79,.08);color:var(--green);border-color:rgba(45,122,79,.25)}
.chip-added{background:rgba(200,151,58,.1);color:#9a6f1e;border-color:rgba(200,151,58,.3)}
.chip-missing{background:rgba(192,57,43,.07);color:var(--red);border-color:rgba(192,57,43,.2)}
@keyframes spotlightIn{0%{background:rgba(200,151,58,.4);transform:scale(1.1)}100%{background:rgba(200,151,58,.1);transform:scale(1)}}
.chip-added.spotlight{animation:spotlightIn .8s ease forwards}
.kw-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:4px}
.kw-col-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:10px}

/* TABS */
.tabs-nav{display:flex;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow)}
.tab-btn{flex:1;padding:14px 8px;border:none;background:transparent;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-right:1px solid var(--border);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.tab-btn:last-child{border-right:none}
.tab-btn.active{background:var(--accent);color:#fff}
.tab-btn:not(.active):hover{background:var(--muted);color:var(--text)}
.tab-pane{display:none}.tab-pane.active{display:block}

/* CV PAPER */
.cv-paper{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;max-width:780px;margin:0 auto}

/* ANALYSIS */
.analysis-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:16px;box-shadow:var(--shadow)}
.analysis-block h3{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:12px}
.analysis-block p,.analysis-block li{font-size:13px;color:var(--text-soft);line-height:1.7;margin-bottom:6px}
.tip-question{background:var(--muted);border-left:3px solid var(--gold);padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;margin-bottom:12px}
.tip-q{font-weight:600;font-size:13px;color:var(--text);margin-bottom:6px}
.tip-a{font-size:13px;color:var(--text-soft);line-height:1.65}

/* COVER + LINKEDIN */
.cover-subject{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:14px;font-weight:600}
.cover-body{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-size:13px;line-height:1.8;white-space:pre-line;min-height:200px}
.li-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin-bottom:16px}
.li-section-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.li-content{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:14px;font-size:13px;line-height:1.7;white-space:pre-line}
.copy-mini{padding:5px 12px;border:1px solid var(--border);border-radius:3px;background:transparent;font-size:11px;color:var(--text-muted);cursor:pointer;transition:all .15s}
.copy-mini:hover{border-color:var(--accent);color:var(--accent)}

/* PAYMENT MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border-radius:8px;padding:32px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;margin-bottom:8px}
.modal-desc{font-size:14px;color:var(--text-soft);margin-bottom:24px}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:24px}
.pkg-card{border:2px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
.pkg-card:hover,.pkg-card.active{border-color:var(--accent)}
.pkg-card.active{background:rgba(26,26,46,.04)}
.pkg-price{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;color:var(--accent)}
.pkg-name{font-size:13px;font-weight:600;margin:4px 0}
.pkg-desc{font-size:11px;color:var(--text-muted)}
.pkg-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--accent);font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px}
.pay-methods{display:flex;flex-direction:column;gap:8px}
.modal-close{margin-top:16px;width:100%;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--text-muted);cursor:pointer}
.modal-close:hover{color:var(--red);border-color:var(--red)}

/* SOCIAL BANNER */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-110%)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-110%)}}
.social-banner{position:fixed;bottom:24px;left:24px;z-index:1000;background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);max-width:340px;animation:slideInLeft .4s ease;font-family:'Instrument Sans',sans-serif}
.sb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--gold));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.sb-text{flex:1;min-width:0}
.sb-name{font-size:13px;font-weight:600}
.sb-city{font-weight:400;color:var(--text-muted)}
.sb-action{font-size:12px;color:var(--text-soft);margin-top:2px;line-height:1.4}
.sb-time{font-size:11px;color:var(--text-muted);flex-shrink:0;font-family:'JetBrains Mono',monospace}
.sb-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding:2px 4px}
.sb-close:hover{color:var(--red)}

/* PAYMENT */
@keyframes unlockGlow{0%{box-shadow:0 0 0 0 rgba(200,151,58,.8)}50%{box-shadow:0 0 0 20px rgba(200,151,58,.2)}100%{box-shadow:0 0 0 0 rgba(200,151,58,0)}}
.locked-overlay{position:absolute;inset:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.4);z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
@keyframes cvSpotlight{0%{background:rgba(200,151,58,.25)}100%{background:transparent}}
.cv-modified{animation:cvSpotlight 3s ease forwards;border-radius:2px;padding:0 2px}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .5s ease both}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}

/* RESPONSIVE */
@media(max-width:900px){
  .template-grid{grid-template-columns:repeat(2,1fr)}
  .hero-content,.ats-edu-inner{grid-template-columns:1fr}
  .hero-right{display:none}
  .testimonials-grid,.grid-2,.grid-3,.kw-grid,.pkg-grid{grid-template-columns:1fr}
  .step-item span{display:none}
  .tabs-nav{flex-wrap:wrap}
  .tab-btn{flex:none;width:50%}
  .score-display{flex-wrap:wrap}
  .header-center{display:none}
  .ats-edu-stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .template-grid{grid-template-columns:repeat(2,1fr)}
  .ats-edu-stats{grid-template-columns:1fr}
}

/* ── SCRATCH MODE — Crea CV da zero ── */
.mode-tab-scratch {
  background: linear-gradient(135deg, rgba(200,151,58,.12), rgba(200,151,58,.06)) !important;
  color: #9a6f1e !important;
  border: 1.5px dashed rgba(200,151,58,.5) !important;
  font-weight: 700 !important;
}
.mode-tab-scratch.active {
  background: var(--gold) !important;
  color: var(--accent) !important;
  border: none !important;
  border-radius: 3px !important;
}

.scratch-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, rgba(200,151,58,.08), rgba(200,151,58,.03));
  border: 1.5px solid rgba(200,151,58,.3);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.scratch-intro-icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}
.scratch-intro-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 6px;
}
.scratch-intro-desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.7;
}

.scratch-examples { margin-bottom: 20px; }
.scratch-examples-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.scratch-example-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.scratch-example-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .2s;
}
.scratch-example-card:hover {
  border-color: var(--gold);
  box-shadow: 0 3px 12px rgba(200,151,58,.15);
  transform: translateY(-1px);
}
.se-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.se-text {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}

.scratch-tips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.scratch-tip {
  font-size: 11px;
  color: var(--green);
  background: rgba(45,122,79,.07);
  border: 1px solid rgba(45,122,79,.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
}

@media(max-width:700px){
  .scratch-example-cards { grid-template-columns: 1fr; }
  .scratch-intro { flex-direction: column; gap: 10px; }
}

/* ── AUTH HEADER ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── FAQ ── */
.faq-section{padding:60px 0;background:#fff;border-top:1px solid var(--border)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:900px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border);padding:0}
.faq-q{padding:18px 20px;font-size:14px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--text);user-select:none}
.faq-q:hover{background:var(--muted)}
.faq-arrow{font-size:11px;color:var(--text-soft);transition:transform .2s;flex-shrink:0}
.faq-q.open .faq-arrow{transform:rotate(180deg)}
.faq-a{display:none;padding:0 20px 16px;font-size:13px;color:var(--text-soft);line-height:1.75}
.faq-a.open{display:block}
@media(max-width:700px){.faq-grid{grid-template-columns:1fr}}

/* ── FOOTER ── */
.site-footer{background:#1a1a2e;padding:48px 0 24px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.footer-brand .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-desc{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:12px}
.footer-legal-note{font-size:11px;color:rgba(255,255,255,.35);line-height:1.6}
.footer-legal-note a{color:rgba(255,255,255,.45);text-decoration:none}
.footer-legal-note a:hover{color:rgba(255,255,255,.7)}
.footer-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:12px}
.footer-link{display:block;font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:8px;transition:color .15s}
.footer-link:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:rgba(255,255,255,.3)}
.footer-bottom-links a{color:rgba(255,255,255,.4);text-decoration:none}
.footer-bottom-links a:hover{color:rgba(255,255,255,.7)}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}

/* ── COOKIE BANNER ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:900;background:#1a1a2e;border-top:2px solid var(--gold);padding:14px 24px}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cookie-text{font-size:13px;color:rgba(255,255,255,.75);line-height:1.6;flex:1}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-btn{padding:8px 20px;border-radius:4px;border:none;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.cookie-accept{background:var(--gold);color:var(--accent)}
.cookie-accept:hover{background:#d4a040}

/* ── REVIEW BANNER ── */
.review-banner{background:linear-gradient(135deg,rgba(200,151,58,.08),rgba(200,151,58,.04));border:1.5px solid rgba(200,151,58,.35);border-radius:8px;padding:20px 24px;margin-top:20px}
.review-banner-inner{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.review-banner-left{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:200px}
.review-banner-icon{font-size:28px;flex-shrink:0;line-height:1}
.review-banner-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.review-banner-desc{font-size:13px;color:var(--text-soft);line-height:1.5}
.review-banner-stars{display:flex;gap:6px;align-items:center;flex-shrink:0}
.rev-star{font-size:28px;color:#ddd;cursor:pointer;transition:all .1s;line-height:1;user-select:none}
.rev-star.active,.rev-star:hover{color:#c8973a}
.review-form-area{width:100%;margin-top:14px}

/* ── EMPTY REVIEWS ── */
.testimonials-empty{background:#fff;border:1.5px dashed var(--border);border-radius:8px;padding:32px 20px}

/* ── CV TOOLBAR ── */
.cv-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;padding:12px 16px;background:var(--muted);border:1px solid var(--border);border-radius:6px}
.cv-toolbar-left,.cv-toolbar-right{display:flex;gap:8px;flex-wrap:wrap}
.btn-sm{padding:6px 12px;font-size:12px}

/* ── SHARE POPUP ── */
.share-popup{background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:20px 24px;margin-bottom:16px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.share-popup-title{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;margin-bottom:6px}
.share-popup-desc{font-size:13px;color:var(--text-soft);margin-bottom:14px;line-height:1.6}
.share-link-row{display:flex;gap:8px;align-items:center}

/* ── EDIT MODE ── */
.edit-mode-bar{display:flex;align-items:center;gap:12px;background:rgba(200,151,58,.1);border:1.5px solid rgba(200,151,58,.4);border-radius:6px;padding:10px 16px;margin-bottom:12px;font-size:13px;flex-wrap:wrap}
.edit-mode-bar strong{color:var(--gold)}
.btn-edit-toggle.active{background:rgba(200,151,58,.15);border-color:var(--gold);color:var(--gold)}

/* ══════════════════════════════════════════════════════════════
   FASE 1 — MOBILE RESPONSIVE
   Tutte le regole qui sotto si applicano SOLO su mobile.
   Il layout desktop rimane identico — zero modifiche sopra.
   ══════════════════════════════════════════════════════════════ */

/* ── BREAKPOINT PRINCIPALE: 768px ── */
@media(max-width:768px){

  /* Container padding ridotto */
  .container{padding:0 16px}

  /* ── HEADER ── */
  .header-inner{padding:0 16px}
  .header-tag{display:none}

  /* ── HERO ── */
  .hero{padding:32px 0 28px}
  .hero-content{grid-template-columns:1fr;gap:24px}
  .hero-right{display:none}
  .hero h1{font-size:26px}
  .hero-desc{font-size:14px}
  .ats-logos{display:none}
  .stats{gap:20px}
  .stat-num{font-size:22px}

  /* ── ATS EDUCATIONAL ── */
  .ats-edu-inner{grid-template-columns:1fr;gap:20px}
  .ats-edu-title{font-size:20px}
  .ats-edu-flow{flex-wrap:wrap;gap:6px}

  /* ── STEPS BAR ── */
  .steps-bar{top:56px}
  .steps-inner{gap:4px;padding:0 16px}
  .step-item{flex:1;font-size:11px}
  .step-num{width:22px;height:22px;font-size:11px}

  /* ── SECTION BLOCKS ── */
  .block-header{padding:14px 16px 12px;flex-wrap:wrap;gap:8px}
  .block-body{padding:16px}
  .block-title{font-size:14px}

  /* ── INPUT TABS ── */
  .input-mode-tabs{width:100%}
  .mode-tab{flex:1;padding:7px 8px;font-size:12px;text-align:center}

  /* ── GRID 2 COLONNE → 1 ── */
  .grid-2{grid-template-columns:1fr}

  /* ── TEMPLATE SELECTOR ── */
  .template-selector-header{flex-direction:column;gap:8px}
  .template-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .template-card{min-width:0}
  .tpl-preview{height:110px}

  /* ── BLOCCO 4 DATI PERSONALI ── */
  .grid-2 .field{margin-bottom:12px}

  /* ── CTA SECTION ── */
  .cta-section{flex-direction:column;align-items:stretch;padding:16px 0}
  .cta-section .btn-lg{width:100%;justify-content:center;padding:16px}
  .cta-section .btn-ghost{width:100%;justify-content:center}
  .cta-note{text-align:center;font-size:11px}

  /* ── RISULTATI HEADER ── */
  .results-header-inner{flex-direction:column;gap:16px}
  .score-display{gap:12px}
  .score-circle-wrap{width:70px;height:70px}
  .score-circle-big{width:84px;height:84px}
  .score-num{font-size:24px}
  .score-num-big{font-size:28px}
  .score-meta h2{font-size:18px}

  /* ── KEYWORD GRID ── */
  .kw-grid{grid-template-columns:1fr}

  /* ── TABS RISULTATI ── */
  .tabs-nav{flex-wrap:wrap}
  .tab-btn{flex:none;width:50%;font-size:12px;padding:11px 6px}

  /* ── CV TOOLBAR ── */
  .cv-toolbar{flex-direction:column;gap:8px}
  .cv-toolbar-left,.cv-toolbar-right{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .cv-toolbar .btn{flex:1;min-width:0;justify-content:center;font-size:12px;padding:8px 10px}

  /* ── SHARE POPUP ── */
  .share-link-row{flex-direction:column}

  /* ── MODAL PAGAMENTO ── */
  .modal-box{padding:20px 16px}
  .pkg-grid{grid-template-columns:1fr}

  /* ── REVIEW BANNER ── */
  .review-banner-inner{flex-direction:column;gap:12px}
  .review-banner-left{flex-direction:column}

  /* ── FAQ ── */
  .faq-grid{grid-template-columns:1fr}
  .faq-q{font-size:13px;padding:14px 16px}

  /* ── FOOTER ── */
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

/* ── BREAKPOINT PICCOLO: 480px ── */
@media(max-width:480px){
  .hero h1{font-size:22px}
  .template-grid{grid-template-columns:repeat(2,1fr)}
  .tab-btn{width:50%;font-size:11px}
  .score-display{flex-direction:column;align-items:center;text-align:center}
  .pkg-grid{grid-template-columns:1fr}
  .stats{justify-content:center}
}

/* ── STICKY BOTTONE OTTIMIZZA — solo mobile ── */
@media(max-width:768px){
  #stickyOptimizeBar{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:200;
    background:#fff;
    border-top:1px solid var(--border);
    padding:12px 16px;
    box-shadow:0 -4px 16px rgba(0,0,0,.1);
  }
  #stickyOptimizeBar .btn{
    width:100%;
    justify-content:center;
    padding:15px;
    font-size:15px;
  }
}
@media(min-width:769px){
  #stickyOptimizeBar{display:none !important}
}

/* ── DASHBOARD MOBILE ── */
@media(max-width:768px){
  .dashboard-grid{grid-template-columns:1fr;padding:16px 0 40px}
  .stats-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat-num{font-size:20px}
  .section-header{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .section-body{padding:14px 16px}
  .cv-item{flex-wrap:wrap;gap:8px}
  .cv-preview-badge{width:36px;height:44px}
  .cand-item{flex-wrap:wrap;gap:6px}
  .stato-select{font-size:11px;padding:3px 6px}
  .profile-card,.piano-card{margin-bottom:12px}
  .form-grid{grid-template-columns:1fr}
}

/* ── MOBILE WIZARD — step navigation ── */
@media(max-width:768px){

  /* Barra step mobile — diventa navigazione wizard */
  .steps-bar{
    position:fixed;
    top:56px;
    left:0;right:0;
    z-index:40;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }

  /* Step attivo evidenziato */
  .step-item.active .step-num{
    background:var(--accent);
    color:#fff;
  }

  /* Blocchi nascosti in wizard mode */
  .mwiz-hidden{
    display:none !important;
  }

  /* Bottoni navigazione wizard */
  .mwiz-nav{
    display:flex;
    gap:10px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--border);
  }
  .mwiz-btn-back{
    flex:1;
    padding:13px;
    background:transparent;
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    font-family:'Instrument Sans',sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--text-soft);
    cursor:pointer;
  }
  .mwiz-btn-next{
    flex:2;
    padding:13px;
    background:var(--accent);
    border:none;
    border-radius:var(--radius);
    font-family:'Instrument Sans',sans-serif;
    font-size:14px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
  }
  .mwiz-btn-next:disabled{
    opacity:.5;
    cursor:not-allowed;
  }
  .mwiz-btn-optimize{
    width:100%;
    padding:16px;
    background:var(--gold);
    border:none;
    border-radius:var(--radius);
    font-family:'Instrument Sans',sans-serif;
    font-size:15px;
    font-weight:700;
    color:var(--accent);
    cursor:pointer;
    margin-top:16px;
  }

  /* Step counter in cima al blocco */
  .mwiz-step-label{
    font-size:11px;
    font-family:'JetBrains Mono',monospace;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .mwiz-step-dot{
    width:6px;height:6px;
    border-radius:50%;
    background:var(--gold);
  }

  /* Margine top per compensare header + steps-bar fissi */
  #inputSection{
    margin-top:12px;
  }

  /* Nascondi CTA section originale su mobile — la sostituisce il wizard */
  .cta-section{
    display:none !important;
  }

  /* Nascondi sticky bar quando wizard è attivo */
  #stickyOptimizeBar{
    display:none !important;
  }
}

/* Desktop — niente wizard, tutto invariato */
@media(min-width:769px){
  .mwiz-nav{display:none !important}
  .mwiz-step-label{display:none !important}
  .mwiz-btn-optimize{display:none !important}
  .mwiz-hidden{display:block !important}
}

/* ── MOBILE SPLASH SCREEN ── */
.mobile-splash{display:none} /* nascosto su desktop */

@media(max-width:768px){
  /* Mostra splash, nascondi hero-left originale */
  .mobile-splash{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:8px 0 24px;
    width:100%;
  }
  .hero-left{display:none}

  .mobile-splash-eyebrow{
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
    font-family:'JetBrains Mono',monospace;
  }
  .mobile-splash-title{
    font-family:'Syne',sans-serif;
    font-size:28px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.02em;
    color:#fff;
    margin-bottom:14px;
  }
  .mobile-splash-title em{
    font-style:normal;
    color:var(--gold);
  }
  .mobile-splash-desc{
    font-size:14px;
    color:rgba(255,255,255,.65);
    line-height:1.65;
    margin-bottom:24px;
    max-width:320px;
  }
  .mobile-splash-stats{
    display:flex;
    gap:24px;
    justify-content:center;
    margin-bottom:28px;
  }
  .mobile-splash-stat{text-align:center}
  .mobile-splash-num{
    font-family:'Syne',sans-serif;
    font-size:24px;
    font-weight:800;
    color:var(--gold);
    line-height:1;
  }
  .mobile-splash-lbl{
    font-size:11px;
    color:rgba(255,255,255,.5);
    margin-top:3px;
  }
  .mobile-splash-cta{
    width:100%;
    max-width:320px;
    padding:17px 24px;
    background:var(--gold);
    border:none;
    border-radius:6px;
    font-family:'Syne',sans-serif;
    font-size:16px;
    font-weight:800;
    color:var(--accent);
    cursor:pointer;
    margin-bottom:12px;
    letter-spacing:-.01em;
  }
  .mobile-splash-note{
    font-size:11px;
    color:rgba(255,255,255,.35);
    font-family:'JetBrains Mono',monospace;
  }

  /* Nascondi steps bar finché wizard non è attivo */
  .steps-bar.mwiz-hidden{display:none !important}
}

/* ══ MOBILE RESULTS — bottom navigation ══ */
@media(max-width:768px){

  /* Bottom nav bar fissa */
  .mob-results-nav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:300;
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
    height:60px;
  }
  .mob-nav-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:none;
    background:transparent;
    cursor:pointer;
    color:var(--text-muted);
    font-family:'Instrument Sans',sans-serif;
    font-size:10px;
    font-weight:600;
    padding:6px 4px;
    transition:color .15s;
    border-top:2px solid transparent;
  }
  .mob-nav-btn.active{
    color:var(--accent);
    border-top-color:var(--accent);
  }
  .mob-nav-icon{font-size:18px;line-height:1}

  /* Padding bottom sui risultati per non nascondere contenuto sotto la nav */
  #results{padding-bottom:72px}

  /* Nascondi tabs nav desktop su mobile — sostituita dalla bottom nav */
  .tabs-nav{display:none !important}

  /* Mostra solo il tab attivo */
  .tab-pane{display:none !important}
  .tab-pane.mob-active{display:block !important}

  /* Score screen mobile */
  .mob-score-screen{
    padding:24px 20px;
    text-align:center;
  }
  .mob-score-big{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:20px;
  }
  .mob-score-arrow{
    font-size:22px;
    color:var(--gold);
  }

  /* Results header semplificato su mobile */
  .results-header{border-radius:0;margin-bottom:0}
  .results-header-inner{padding:16px}

  /* Keyword accordion su mobile */
  .kw-grid{grid-template-columns:1fr}
  .kw-col-accordion{
    border:1px solid var(--border);
    border-radius:4px;
    margin-bottom:8px;
    overflow:hidden;
  }
  .kw-col-header{
    padding:10px 14px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--muted);
  }
  .kw-col-body{
    padding:10px 14px;
    display:none;
  }
  .kw-col-body.open{display:block}

  /* Strumenti extra — card grandi */
  .mob-tools-grid{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:16px;
  }
  .mob-tool-card{
    background:#fff;
    border:1.5px solid var(--border);
    border-radius:8px;
    padding:20px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    transition:border-color .15s;
  }
  .mob-tool-card:hover{border-color:var(--accent)}
  .mob-tool-icon{font-size:28px;flex-shrink:0}
  .mob-tool-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px}
  .mob-tool-desc{font-size:12px;color:var(--text-soft)}

  /* CV toolbar mobile — icone compatte */
  .cv-toolbar{
    padding:8px 12px;
    gap:6px;
  }
  .cv-toolbar-left,.cv-toolbar-right{
    gap:6px;
  }
  .cv-toolbar .btn{
    padding:8px;
    font-size:11px;
    gap:3px;
  }

  /* Nuovo CV button mobile */
  .mob-new-cv-btn{
    width:100%;
    padding:14px;
    margin:16px 0 8px;
    background:var(--muted);
    border:1.5px solid var(--border);
    border-radius:6px;
    font-family:'Instrument Sans',sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    text-align:center;
  }
}

/* Desktop — bottom nav mai visibile */
@media(min-width:769px){
  .mob-results-nav{display:none !important}
  .mob-tools-grid{display:none !important}
  .mob-score-screen{display:none !important}
}

/* ══ MOBILE UX FIXES ══ */

/* Nascondi ATS e testimonials su mobile dopo splash */
@media(max-width:768px){
  .mob-hide-after-splash{display:none !important}

  /* Lang buttons visibili su sfondo chiaro */
  .mob-score-screen .lang-btn{
    color:var(--text) !important;
    border-color:var(--border) !important;
    background:#fff !important;
  }
  .mob-score-screen .lang-btn.active{
    background:var(--gold) !important;
    border-color:var(--gold) !important;
    color:var(--accent) !important;
  }
  .mob-score-screen .lang-label{
    color:var(--text-soft) !important;
  }

  /* Score badges su sfondo chiaro (score screen è bianco) */
  .mob-score-screen .score-status-badge.good{
    color:#1a5c36 !important;
    background:rgba(45,122,79,.12) !important;
  }
  .mob-score-screen .score-status-badge.warning{
    color:#854f0b !important;
    background:rgba(200,151,58,.12) !important;
  }
  .mob-score-screen .score-status-badge.danger{
    color:#a32d2d !important;
    background:rgba(192,57,43,.1) !important;
  }

  /* Chips visibili su sfondo chiaro */
  .mob-score-screen .chip-present{color:var(--green) !important}
  .mob-score-screen .chip-added{color:#9a6f1e !important}

  /* CV paper nascosto su mobile — mostro solo il messaggio */
  #cvPaper{display:none !important}
  #mobCvMessage{display:block !important}

  /* Review banner post-CV — visibile su mobile */
  .review-banner{display:block}

  /* Score screen — sfondo bianco */
  .mob-score-screen{
    background:#fff;
    border-radius:8px;
    margin:12px;
  }

  /* Nascondi desktop results header su mobile */
  .results-header{display:none}

  /* Nascondi keyword block — integrato nella schermata analisi */
  #kwBlock{display:none}
}

/* Desktop — tutto invariato */
@media(min-width:769px){
  .mob-hide-after-splash{display:block}
  #mobCvMessage{display:none !important}
  #cvPaper{display:block !important}
  #mobScoreScreen{display:none !important}
  #mobToolsScreen{display:none !important}
}

/* ══ FIX LABEL VISIBILI + MOBILE UX COMPLETO ══ */

/* Lang selector su sfondo scuro (results-header) */
.lang-selector-dark .lang-btn{
  color:rgba(255,255,255,.75);
  border-color:rgba(255,255,255,.25);
  background:transparent;
}
.lang-selector-dark .lang-btn.active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--accent);
}
.lang-selector-dark .lang-label{
  color:rgba(255,255,255,.5);
}
.lang-selector-dark .lang-note{
  color:rgba(255,255,255,.35);
}

/* Score status badge su sfondo scuro (results-header desktop) */
.results-header .score-status-badge.good{
  color:#69f0ae;
  background:rgba(45,122,79,.2);
  border:1px solid rgba(45,122,79,.4);
}
.results-header .score-status-badge.warning{
  color:#ffd54f;
  background:rgba(247,185,50,.15);
  border:1px solid rgba(247,185,50,.3);
}
.results-header .score-status-badge.danger{
  color:#ff8a80;
  background:rgba(192,57,43,.2);
  border:1px solid rgba(192,57,43,.4);
}

/* Chip visibili su sfondo scuro */
.results-header .chip-present{
  color:rgba(100,255,160,.85);
  background:rgba(45,122,79,.2);
  border-color:rgba(45,122,79,.3);
}
.results-header .chip-added{
  color:rgba(255,205,90,.85);
  background:rgba(200,151,58,.15);
  border-color:rgba(200,151,58,.3);
}

/* Review banner — visibile su sfondo chiaro */
.review-banner{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:16px 20px;
  margin-top:16px;
}
.review-banner-title{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}
.review-banner-desc{
  font-size:13px;
  color:var(--text-soft);
  line-height:1.5;
}
.rev-star{
  font-size:24px;
  cursor:pointer;
  color:#ddd;
  transition:color .1s;
}
.rev-star.active{color:#c8973a}

@media(max-width:768px){
  /* Review banner mobile — compatto e leggibile */
  .review-banner{
    margin:12px 0;
    padding:14px 16px;
  }
  .review-banner-inner{
    flex-direction:column;
    gap:12px;
  }
  .review-banner-left{
    flex-direction:row;
    gap:10px;
    align-items:flex-start;
  }
  .review-banner-icon{font-size:20px;flex-shrink:0}
  .review-banner-stars{
    display:flex;
    gap:8px;
    justify-content:center;
    font-size:28px;
  }

  /* Score screen mobile — colori corretti su sfondo bianco */
  .mob-score-screen .score-status-badge.good{
    color:#1a5c36 !important;
    background:rgba(45,122,79,.1) !important;
    border:1px solid rgba(45,122,79,.2) !important;
  }
  .mob-score-screen .score-status-badge.warning{
    color:#7a4400 !important;
    background:rgba(200,151,58,.1) !important;
    border:1px solid rgba(200,151,58,.25) !important;
  }
  .mob-score-screen .score-status-badge.danger{
    color:#a32d2d !important;
    background:rgba(192,57,43,.08) !important;
    border:1px solid rgba(192,57,43,.2) !important;
  }

  /* Lang buttons su sfondo bianco (mob score screen) */
  .mob-score-screen .lang-selector .lang-btn{
    color:var(--text) !important;
    border-color:var(--border) !important;
    background:#fff !important;
  }
  .mob-score-screen .lang-selector .lang-btn.active{
    background:var(--gold) !important;
    border-color:var(--gold) !important;
    color:var(--accent) !important;
  }
  .mob-score-screen .lang-selector .lang-label{
    color:var(--text-soft) !important;
  }

  /* Chip score screen — visibili su bianco */
  .mob-score-screen .chip-present{
    color:var(--green) !important;
    background:rgba(45,122,79,.08) !important;
  }
  .mob-score-screen .chip-added{
    color:#9a6f1e !important;
    background:rgba(200,151,58,.1) !important;
  }
  .mob-score-screen .chip{
    font-size:11px !important;
    color:var(--text) !important;
  }

  /* Toolbar CV mobile — icone visibili */
  .cv-toolbar .btn{
    font-size:11px;
    color:var(--text) !important;
  }

  /* Analisi tab — testo visibile */
  .analysis-block h3{color:var(--text) !important}
  .analysis-block p{color:var(--text-soft) !important}
}

/* ══ HIGHLIGHTS MODIFICHE AI ══ */
#highlightsPanel{animation:fadeUp .3s ease}

/* Score numeri colorati su mobile */
@media(max-width:768px){
  #mobScoreNum{
    font-family:'Syne',sans-serif;
    font-weight:800;
    transition:color .3s;
  }
  #mobScoreBeforeNum{
    font-family:'Syne',sans-serif;
    font-weight:700;
    color:#c0392b;
  }
  /* Bottoni step wizard non escono dalla pagina */
  .mwiz-nav{
    padding-bottom:4px;
  }
  .mwiz-btn-back,
  .mwiz-btn-next{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* Bottoni mobCvMessage non escono */
  #mobCvMessage .mwiz-btn-next,
  #mobCvMessage .mwiz-btn-back{
    width:100%;
    box-sizing:border-box;
  }
}

/* ══ FASE 3 — COME FUNZIONA ══ */
.how-it-works{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:40px 0;
}
.hiw-label{
  font-size:11px;
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--text-muted);
  text-align:center;
  margin-bottom:28px;
}
.hiw-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.hiw-step{
  flex:1;
  max-width:240px;
  text-align:center;
  padding:0 20px;
}
.hiw-icon{
  font-size:32px;
  margin-bottom:10px;
  line-height:1;
}
.hiw-num{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:13px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
}
.hiw-title{
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  margin-bottom:6px;
}
.hiw-desc{
  font-size:13px;
  color:var(--text-soft);
  line-height:1.6;
}
.hiw-arrow{
  font-size:22px;
  color:var(--gold);
  font-weight:700;
  flex-shrink:0;
  padding:0 4px;
  margin-top:-20px;
}

/* Tab badge analisi */
.tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  margin-left:4px;
  color:var(--gold);
  animation:pulse-dot 2s infinite;
}
.tab-btn.active .tab-badge{
  color:#fff;
  opacity:.8;
}

/* Mobile splash — steps compatti */
@media(max-width:768px){
  .how-it-works{display:none} /* nascosto su mobile — sostituito dalla splash */

  .mob-hiw{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.1);
    width:100%;
    max-width:320px;
  }
  .mob-hiw-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    font-size:11px;
    color:rgba(255,255,255,.6);
  }
  .mob-hiw-num{
    width:22px;height:22px;
    border-radius:50%;
    background:rgba(200,151,58,.3);
    color:var(--gold);
    font-weight:700;
    font-size:11px;
    display:flex;align-items:center;justify-content:center;
  }
  .mob-hiw-arr{
    font-size:12px;
    color:rgba(255,255,255,.3);
    padding-bottom:14px;
  }
}

/* Desktop — How it works sempre visibile */
@media(min-width:769px){
  .how-it-works{display:block}
  .mob-hiw{display:none}
}

/* ══ ACCESSIBILITÀ + PERFORMANCE UX 2026 ══ */

/* Focus visible — navigazione da tastiera */
:focus-visible{
  outline:3px solid #c8973a;
  outline-offset:2px;
  border-radius:2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid #c8973a;
  outline-offset:2px;
}
/* Nascondi outline solo per mouse, non per tastiera */
:focus:not(:focus-visible){outline:none}

/* Cursor pointer su tutti gli elementi cliccabili */
[onclick],[role="button"],[role="tab"]{cursor:pointer}

/* prefers-reduced-motion — disabilita animazioni per chi le ha disattivate */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .fade-up{opacity:1;transform:none}
  .loading-pipeline .ps-fill{transition:none}
  .score-circle-wrap svg circle{transition:none}
}

/* Skeleton loading — durante attesa AI */
.skeleton{
  background:linear-gradient(90deg,#f0efe8 25%,#e8e6df 50%,#f0efe8 75%);
  background-size:200% 100%;
  animation:skeleton-pulse 1.5s infinite;
  border-radius:4px;
}
@keyframes skeleton-pulse{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
  .skeleton{animation:none;background:#f0efe8}
}

/* Indicatore qualità CV — barra live */
.cv-quality-bar{
  height:4px;
  background:var(--border);
  border-radius:2px;
  overflow:hidden;
  margin-top:6px;
  transition:all .3s;
}
.cv-quality-fill{
  height:100%;
  border-radius:2px;
  transition:width .4s ease, background .4s ease;
}
.cv-quality-label{
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  color:var(--text-muted);
  margin-top:3px;
  transition:color .3s;
}

/* Toast globale — aria-live region */
#ariaLiveRegion{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* Hover states migliorati */
.tab-btn{transition:all .15s;outline:none}
.tab-btn:hover:not(.active){background:var(--muted);color:var(--text)}
.pkg-card{transition:all .15s;cursor:pointer}
.pkg-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.template-card{transition:all .15s}
.template-card:hover{transform:translateY(-2px)}
.faq-q{transition:background .15s}
.faq-q:hover{background:rgba(0,0,0,.02)}

/* ══ FORM VALIDATION + MICRO-INTERAZIONI 2026 ══ */

/* Field hint — validazione real-time */
.field-hint{
  font-size:11px;
  margin-top:4px;
  min-height:16px;
  transition:all .2s;
  font-family:'Instrument Sans',sans-serif;
}
.field-hint.hint-ok{color:#2d7a4f}
.field-hint.hint-err{color:#c0392b}
.field.has-error input,
.field.has-error textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.08)}
.field.has-ok input,
.field.has-ok textarea{border-color:#2d7a4f;box-shadow:0 0 0 3px rgba(45,122,79,.08)}

/* Auto-detect badge animato */
.auto-detect-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-family:'JetBrains Mono',monospace;
  background:#EAF3DE;color:#3B6D11;
  border:1px solid #C0DD97;border-radius:4px;
  padding:3px 8px;margin:4px 4px 0 0;
  opacity:0;transform:translateY(4px);
  transition:all .25s;
}
.auto-detect-badge.show{opacity:1;transform:translateY(0)}
.auto-detect-badge .det-apply{
  color:#185FA5;cursor:pointer;text-decoration:underline;margin-left:2px;
  font-weight:600;
}
.auto-detected-row{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}

/* Shake animation su errore */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.shake{animation:shake .35s ease}

/* Micro-interazioni bottoni — active state */
.btn:active{transform:scale(0.97) !important;transition:transform .08s !important}
.btn-sm:active{transform:scale(0.96)}
.color-swatch{transition:transform .15s,box-shadow .15s}
.color-swatch:active{transform:scale(0.95)}

/* Template card — hover più ricco */
.template-card{position:relative;overflow:hidden}
.template-card::after{
  content:'';position:absolute;inset:0;
  background:rgba(200,151,58,0);
  transition:background .2s;pointer-events:none;
}
.template-card:hover::after{background:rgba(200,151,58,.04)}
.template-card:active{transform:scale(0.98) !important}

/* Pkg card micro-interazione */
.pkg-card:active{transform:scale(0.98)}

/* Upload zone — feedback drag */
.upload-zone{transition:all .2s}
.upload-zone.drag-over{
  border-color:var(--accent);
  background:rgba(26,26,46,.04);
  transform:scale(1.01);
}

/* Step wizard — transizione fluida tra step */
.section-block{
  transition:opacity .25s ease, transform .25s ease;
}
.section-block.mwiz-hidden{
  opacity:0;
  transform:translateX(16px);
}
.section-block:not(.mwiz-hidden){
  opacity:1;
  transform:translateX(0);
}

/* Progress bar step wizard */
.mwiz-progress{
  height:3px;
  background:var(--border);
  margin-bottom:16px;
  border-radius:2px;
  overflow:hidden;
}
.mwiz-progress-fill{
  height:100%;
  background:var(--gold);
  border-radius:2px;
  transition:width .4s ease;
}

/* Bottone ottimizza — pulse quando pronto */
@keyframes btn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,151,58,.4)}
  50%{box-shadow:0 0 0 8px rgba(200,151,58,0)}
}
.btn-primary.ready-pulse{
  animation:btn-pulse 2s infinite;
}

/* Chip hover nel risultati */
.chip{transition:transform .1s,box-shadow .1s;cursor:default}
.chip:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}

/* Toolbar CV — feedback bottoni */
.cv-toolbar .btn{position:relative;overflow:hidden}
.cv-toolbar .btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0);
  transition:background .15s;pointer-events:none;
}
.cv-toolbar .btn:active::after{background:rgba(255,255,255,.15)}

/* Score circle — transizione colore */
.sc-fill{transition:stroke-dashoffset 1.2s cubic-bezier(.25,.46,.45,.94), stroke .4s}

/* FAQ — hover più visibile */
.faq-q{border-radius:4px}
.faq-q:hover{background:rgba(26,26,46,.03);padding-left:20px;transition:padding .2s,background .2s}

/* Field label animata — float su focus */
.field input:focus ~ .field-label,
.field textarea:focus ~ .field-label{
  color:var(--accent);
}

@media(prefers-reduced-motion:reduce){
  .section-block,.btn,.chip,.template-card,.upload-zone{transition:none !important;animation:none !important}
  .btn-primary.ready-pulse{animation:none}
  .shake{animation:none}
}

/* Auto-filled input feedback */
input.auto-filled{
  background:rgba(45,122,79,.04) !important;
  border-color:rgba(45,122,79,.4) !important;
  transition:background .3s, border-color .3s;
}

/* Progress bar wizard — solo mobile */
.mwiz-progress{display:none}
@media(max-width:768px){
  .mwiz-progress{
    display:block;
    height:3px;
    background:var(--border);
    border-radius:2px;
    overflow:hidden;
    margin-bottom:16px;
  }
}

/* ══ SKELETON LOADING + ERROR HANDLING + PERSONALIZZAZIONE ══ */

/* Skeleton CV durante attesa AI */
.loading-skeleton{
  margin-top:20px;
  width:min(520px,90vw);
}
.sk-label{
  font-size:11px;
  color:rgba(255,255,255,.35);
  text-align:center;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
  margin-bottom:12px;
}
.sk-cv{
  display:grid;
  grid-template-columns:140px 1fr;
  background:rgba(255,255,255,.06);
  border-radius:6px;
  overflow:hidden;
  height:220px;
}
.sk-sidebar{
  background:rgba(255,255,255,.04);
  padding:16px 12px;
  display:flex;flex-direction:column;gap:6px;
}
.sk-main{
  padding:16px;
  display:flex;flex-direction:column;gap:8px;
}
.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%);
  background-size:200% 100%;
  animation:sk-shine 1.6s infinite;
  border-radius:3px;
}
@keyframes sk-shine{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.sk-avatar{width:44px;height:44px;border-radius:50%;margin:0 auto 8px}
.sk-name{height:10px;width:80%;margin:0 auto}
.sk-role{height:8px;width:60%;margin:0 auto}
.sk-section-title{height:8px;width:40%}
.sk-line.full{height:7px;width:100%}
.sk-line.long{height:7px;width:85%}
.sk-line.medium{height:7px;width:65%}
.sk-line.short{height:7px;width:45%}
.sk-pill{height:18px;width:52px;border-radius:10px}
@media(prefers-reduced-motion:reduce){
  .skeleton{animation:none;background:rgba(255,255,255,.06)}
}
@media(max-width:768px){
  .sk-cv{grid-template-columns:100px 1fr;height:180px}
  .loading-skeleton{width:90vw}
}

/* Error box — azione contestuale */
.err-action-btn{
  margin-left:12px;
  padding:5px 14px;
  background:var(--gold);
  color:var(--accent);
  border:none;
  border-radius:4px;
  font-family:'Instrument Sans',sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s;
}
.err-action-btn:hover{background:#d4a040}

/* Onboarding tooltip */
#onboardingTooltip{animation:fadeUp .25s ease}

/* ════════════════════════════════════════════════════════════════
   BATCH B — Before/After + Score Radar + Social Proof (DESKTOP)
   Override mobile in mobile.css. Layout side-by-side desktop.
   ════════════════════════════════════════════════════════════════ */

/* ── Social Proof banner ── */
.sp-banner{
  background:linear-gradient(135deg,#fdfcfa,#f6f4ee);
  border:1px solid #e5e2dc;
  border-radius:10px;
  padding:14px 20px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.sp-counter{
  font-size:14px;
  color:#1a1918;
  display:flex;
  align-items:center;
  gap:8px;
}
.sp-counter strong{ color:#c8973a; font-weight:700; }
.sp-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:#2d7a4f;
  box-shadow:0 0 0 0 rgba(45,122,79,.6);
  animation: sp-pulse 1.6s infinite;
}
@keyframes sp-pulse{
  0%{ box-shadow:0 0 0 0 rgba(45,122,79,.6); }
  70%{ box-shadow:0 0 0 8px rgba(45,122,79,0); }
  100%{ box-shadow:0 0 0 0 rgba(45,122,79,0); }
}
.sp-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sp-badge{
  font-size:12px;
  padding:5px 11px;
  background:#fff;
  border:1px solid #e5e2dc;
  border-radius:14px;
  color:#1a1918;
  font-weight:500;
}

/* ── Before/After hero ── */
.ba-hero{
  background:#fff;
  border:1px solid #e5e2dc;
  border-radius:12px;
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.ba-hero-title{
  font-family:'Syne',sans-serif;
  font-size:18px;
  font-weight:700;
  color:#1a1918;
  margin-bottom:14px;
  text-align:center;
}
.ba-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.ba-col{
  padding:14px 16px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
}
.ba-before{
  background:#f6f4ee;
  border:1px solid #e0ddd6;
}
.ba-after{
  background:linear-gradient(180deg,#fffbf3,#fdf6e6);
  border:1.5px solid #c8973a;
  position:relative;
}
.ba-after::after{
  content:"✨";
  position:absolute;
  top:8px; right:10px;
  font-size:14px;
}
.ba-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.ba-label-before{ color:#888; }
.ba-label-after{ color:#c8973a; }
.ba-role{
  font-weight:700;
  font-size:14px;
  color:#1a1918;
  margin-bottom:6px;
}
.ba-summary{
  font-size:12px;
  color:#444;
  line-height:1.5;
  margin-bottom:8px;
}
.ba-bullets{
  margin:0; padding-left:18px;
  font-size:12px;
  line-height:1.5;
  color:#333;
}
.ba-bullets li{ margin-bottom:4px; }
.ba-empty{
  font-style:italic;
  color:#888;
  font-size:12px;
}

/* ── Score Radar ── */
.score-radar-container{
  background:#fff;
  border:1px solid #e5e2dc;
  border-radius:12px;
  padding:18px 22px 14px;
  margin-bottom:18px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.radar-title{
  font-family:'Syne',sans-serif;
  font-size:15px;
  font-weight:700;
  color:#1a1918;
  margin-bottom:10px;
}
.radar-svg-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.radar-svg{
  max-width:260px;
  height:auto;
}
.radar-caption{
  font-size:11px;
  color:#888;
  margin-top:6px;
}

/* END BATCH B ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   FIX UX BATCH B v2 — Legenda radar desktop
   ════════════════════════════════════════════════════════════════ */
.radar-legend{
  margin-top:12px;
  padding:10px 14px;
  background:#fdfcfa;
  border:1px solid #ece8de;
  border-radius:6px;
  text-align:left;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
}
.radar-legend .rl-row{
  font-size:12px;
  color:#444;
  line-height:1.5;
  padding:3px 0;
}
.radar-legend .rl-row strong{
  color:#1a1918;
  font-weight:700;
  display:inline-block;
  min-width:80px;
}

/* END FIX UX v2 ═════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   PRIVACY CLAUSE — checkbox + preview (footer-style)
   ════════════════════════════════════════════════════════════════ */

/* Checkbox row prima del bottone Ottimizza */
.privacy-opt-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  margin:12px 0 6px;
  background:#fafaf6;
  border:1px solid #e5e2dc;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  transition:background .15s, border-color .15s;
}
.privacy-opt-row:hover{
  background:#f5f3ec;
  border-color:#c8973a;
}
.privacy-opt-row input[type="checkbox"]{
  margin-top:2px;
  width:16px; height:16px;
  cursor:pointer;
  flex-shrink:0;
  accent-color:#c8973a;
}
.privacy-opt-text{
  font-size:13px;
  color:#1a1918;
  line-height:1.4;
  flex:1;
}
.privacy-opt-hint{
  display:block;
  font-size:11px;
  color:#888;
  margin-top:3px;
  font-weight:400;
}

/* Clausola privacy nel CV preview (footer testuale) */
.privacy-clause-preview{
  font-size:9px;
  color:#777;
  font-style:italic;
  line-height:1.35;
  margin-top:18px;
  padding-top:8px;
  border-top:0.5px solid #e0e0e0;
  /* Print rules */
  page-break-before:avoid;
  break-before:avoid;
  orphans:3;
  widows:3;
}

/* ══════════════════════════════════════════════════════════ */
/* ✨ AI REFINE BOX — modifica conversazionale CV (DESKTOP)    */
/* ══════════════════════════════════════════════════════════ */
.refine-box{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-top:24px}
.refine-box-header{background:var(--accent);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.refine-box-header-left{display:flex;align-items:center;gap:12px}
.refine-box-icon{width:32px;height:32px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.refine-box-title{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:-.02em}
.refine-box-subtitle{font-size:11px;color:rgba(255,255,255,.5);font-family:'JetBrains Mono',monospace;margin-top:1px}
.refine-box-counter{background:rgba(200,151,58,.2);border:1px solid rgba(200,151,58,.3);border-radius:20px;padding:4px 12px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--gold-light);white-space:nowrap}
.refine-box-counter b{color:#fff}
.refine-box-counter.refine-unlimited{background:rgba(45,122,79,.2);border-color:rgba(45,122,79,.4);color:#69f0ae}

.refine-box-body{display:grid;grid-template-columns:1fr 320px;gap:0}
.refine-chat-col{padding:20px;border-right:1px solid var(--border);min-width:0}
.refine-preview-col{padding:20px;background:var(--paper)}

.refine-sugg-label,.refine-history-label{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.refine-history-label{margin-top:14px}
.refine-suggestions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.refine-sugg-chip{background:var(--muted);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:11px;color:var(--text-soft);cursor:pointer;transition:.2s;font-weight:500;font-family:'Instrument Sans',sans-serif}
.refine-sugg-chip:hover{background:rgba(200,151,58,.12);border-color:rgba(200,151,58,.4);color:var(--gold)}

.refine-history{display:flex;flex-direction:column;gap:6px}
.refine-history-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--muted);border:1px solid var(--border);border-radius:6px}
.refine-hist-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rh-add{background:#22c55e}.rh-modify{background:var(--gold)}.rh-remove{background:var(--red)}.rh-reorganize{background:var(--blue)}
.refine-hist-text{flex:1;font-size:12px;color:var(--text-soft);min-width:0}
.refine-hist-undo{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);cursor:pointer;text-decoration:underline;flex-shrink:0;background:none;border:none;padding:0}
.refine-hist-undo:hover{color:var(--red)}

.refine-chat-thread{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.refine-msg{display:flex;gap:10px;align-items:flex-start}
.refine-msg.user{flex-direction:row-reverse}
.refine-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.refine-avatar-ai{background:var(--accent);color:var(--gold)}
.refine-avatar-user{background:rgba(26,26,46,.08);color:var(--accent);font-size:10px}
.refine-bubble{max-width:calc(100% - 42px);padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.55}
.refine-bubble-ai{background:var(--muted);border:1px solid var(--border);color:var(--text);border-radius:10px 10px 10px 2px}
.refine-bubble-user{background:var(--accent);color:#fff;border-radius:10px 10px 2px 10px}

.refine-diff{margin-top:10px;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.refine-diff-row{padding:5px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.refine-diff-remove{background:#fef2f2;color:#b91c1c}
.refine-diff-add{background:#f0fdf4;color:#166534}
.refine-diff-sign{font-weight:700;flex-shrink:0}
.refine-diff-actions{display:flex;gap:8px;margin-top:10px}
.refine-diff-btn{padding:6px 16px;border-radius:5px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:'Instrument Sans',sans-serif;transition:.2s}
.refine-diff-confirm{background:var(--green);color:#fff}
.refine-diff-confirm:hover{filter:brightness(1.1)}
.refine-diff-cancel{background:var(--muted);border:1px solid var(--border);color:var(--text-soft)}

.refine-input-row{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.refine-textarea{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:10px 12px;font-family:'Instrument Sans',sans-serif;font-size:13px;resize:none;outline:none;background:var(--paper);color:var(--text);transition:.2s;min-height:56px;max-height:140px}
.refine-textarea:focus{border-color:var(--gold);background:#fff}
.refine-textarea::placeholder{color:var(--text-muted)}
.refine-send-btn{width:40px;height:40px;background:var(--accent);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.refine-send-btn:hover{background:var(--gold)}
.refine-send-btn:hover svg{stroke:var(--accent)}
.refine-send-btn:disabled{opacity:.5;cursor:not-allowed}

.refine-preview-label{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.refine-preview-empty{font-size:12px;color:var(--text-muted);line-height:1.6;font-style:italic}
.refine-action-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.rb-add{background:rgba(45,122,79,.12);color:var(--green);border:1px solid rgba(45,122,79,.3)}
.rb-modify{background:rgba(200,151,58,.12);color:#9a6f1e;border:1px solid rgba(200,151,58,.3)}
.rb-remove{background:rgba(192,57,43,.1);color:var(--red);border:1px solid rgba(192,57,43,.2)}
.rb-reorganize{background:rgba(30,77,140,.1);color:var(--blue);border:1px solid rgba(30,77,140,.2)}
.rb-clarify{background:rgba(158,156,149,.12);color:var(--text-soft);border:1px solid var(--border)}
.refine-intent{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:14px}
.refine-intent-label{font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.refine-intent-row{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:var(--text-soft);margin-bottom:4px}
.refine-intent-row b{color:var(--text)}
.refine-intent-ok{color:var(--green);flex-shrink:0}
.refine-guardrail{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.refine-guardrail-title{font-size:11px;font-weight:700;color:#92400e;margin-bottom:4px}
.refine-guardrail-text{font-size:11px;color:#a16207;line-height:1.5}

/* spinner inline */
.refine-typing{display:flex;gap:4px;padding:4px 0}
.refine-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:refine-bounce 1.2s infinite}
.refine-typing span:nth-child(2){animation-delay:.2s}
.refine-typing span:nth-child(3){animation-delay:.4s}
@keyframes refine-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* upsell modal */
.refine-upsell-overlay{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px}
.refine-upsell-card{background:#fff;border-radius:16px;max-width:420px;width:100%;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.25)}
.refine-upsell-head{background:linear-gradient(135deg,#1a1a2e,#2a2a4e);padding:28px;text-align:center}
.refine-upsell-head .emoji{font-size:44px;margin-bottom:10px}
.refine-upsell-head h3{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:#fff;margin-bottom:8px}
.refine-upsell-head p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5}
.refine-upsell-body{padding:24px 28px}
.refine-upsell-body .btn{width:100%;justify-content:center;margin-bottom:8px}