/* ===================== ResumeX AI ===================== */
/* Brand: coral #f1917d primary, teal #7bd0c1 accent (Codesala) */
:root, [data-theme="dark"]{
  --bg:#0b0d14;
  --bg-2:#11141f;
  --panel:#161a28;
  --panel-2:#1c2133;
  --line:#262b3d;
  --line-2:#2f3550;
  --txt:#e8eaf2;
  --txt-2:#9aa1b9;
  --txt-3:#646b86;
  --bg-glow:#2a1d24;
  --paper-bg:#3a3f52;
  --ring-track:#21263a;
  --shadow:0 10px 40px rgba(0,0,0,.4);

  --brand:#f1917d;
  --brand-2:#e8745d;
  --brand-rgb:241,145,125;
  --accent:#7bd0c1;
  --accent-2:#56b9b0;
  --accent-rgb:123,208,193;
  --warn:#ffb020;
  --danger:#ff5c70;
  --good:#22c55e;
  --radius:14px;
  --paper:#ffffff;
}
[data-theme="light"]{
  --bg:#eef0f6;
  --bg-2:#f6f7fb;
  --panel:#ffffff;
  --panel-2:#f1f3f9;
  --line:#e4e7f0;
  --line-2:#d3d8e6;
  --txt:#1b2030;
  --txt-2:#5c6479;
  --txt-3:#9099ad;
  --bg-glow:#ffe6df;
  --paper-bg:#dde1ec;
  --ring-track:#e4e7f0;
  --shadow:0 10px 38px rgba(30,40,70,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%, var(--bg-glow) 0%, var(--bg) 55%);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  transition:background .3s, color .3s;
}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;letter-spacing:-.02em}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--brand);color:#fff}

/* ---------- App shell ---------- */
#app[hidden]{display:none}
#app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}

.sidebar{
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:grid;place-items:center;font-family:'Sora';font-weight:800;font-size:20px;color:#fff;
  box-shadow:0 6px 18px rgba(var(--brand-rgb),.45);
}
.brand-mark span{color:var(--accent)}
.brand-name{font-family:'Sora';font-weight:800;font-size:18px}
.brand-name span{color:var(--brand)}

.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:11px;
  background:none;border:none;color:var(--txt-2);
  padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;text-align:left;width:100%;
  transition:.15s;
}
.nav-item:hover{background:var(--panel);color:var(--txt)}
.nav-item.active{background:linear-gradient(90deg,rgba(var(--brand-rgb),.22),rgba(var(--brand-rgb),.05));color:var(--txt)}
.nav-item.active .ico{color:var(--brand)}
.ico{width:20px;display:inline-grid;place-items:center;font-size:14px;color:var(--txt-3);font-style:normal}
.nav-item[data-view="linkedin"] .ico{font-size:11px;font-weight:800;background:#0a66c2;color:#fff;border-radius:3px;width:18px;height:16px;line-height:16px}

.nav-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.plan-chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.plan-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.plan-name{font-size:12.5px;font-weight:600}
.plan-sub{font-size:11px;color:var(--txt-3)}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;overflow:hidden}
.topbar{
  height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;border-bottom:1px solid var(--line);background:var(--bg-2);
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}
.resume-select{
  background:var(--panel);border:1px solid var(--line);color:var(--txt);
  padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:500;min-width:170px;
}
.ai-status{font-size:12px;color:var(--warn);font-weight:600;padding:5px 10px;border:1px solid var(--line);border-radius:20px}
.ai-status.live{color:var(--accent)}
.theme-toggle{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--txt-2);font-size:16px;display:grid;place-items:center;transition:.15s}
.theme-toggle:hover{color:var(--txt);border-color:var(--line-2)}

.view-wrap{flex:1;overflow-y:auto;padding:26px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;
  padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;transition:.15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(var(--brand-rgb),.4)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.btn.ghost:hover{background:var(--panel-2);box-shadow:none;border-color:var(--line-2)}
.btn.sm{padding:8px 13px;font-size:13px}
.btn.ai{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06302a}
.btn.ai:hover{box-shadow:0 8px 22px rgba(var(--accent-rgb),.35)}
.btn.danger{background:none;border:1px solid var(--danger);color:var(--danger)}
.btn.danger:hover{background:rgba(255,92,112,.12);box-shadow:none}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- Cards / generic ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.section-head{margin-bottom:18px}
.section-head h2{font-size:22px}
.section-head p{color:var(--txt-2);font-size:14px;margin-top:4px}
.grid{display:grid;gap:16px}
.muted{color:var(--txt-2)}
.pill{display:inline-block;background:var(--panel-2);border:1px solid var(--line);color:var(--txt-2);
  padding:4px 11px;border-radius:20px;font-size:12px;font-weight:500}

/* inputs */
label.fld{display:block;margin-bottom:12px}
label.fld span{display:block;font-size:12.5px;color:var(--txt-2);margin-bottom:6px;font-weight:500}
input,textarea,select{font-family:inherit}
.inp,textarea.inp,select.inp{
  width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:9px;font-size:14px;transition:.15s;
}
.inp:focus,textarea.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.2)}
textarea.inp{resize:vertical;min-height:78px;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Dashboard ---------- */
.dash-hero{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-bottom:18px}
.score-ring-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(150px 150px at 50% 26%,rgba(var(--brand-rgb),.20),transparent),linear-gradient(180deg,var(--panel),var(--bg-2));
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.ring{position:relative;width:170px;height:170px}
.ring svg{transform:rotate(-90deg)}
.ring .track{stroke:var(--ring-track)}
.ring-val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-val b{font-family:'Sora';font-size:42px;line-height:1}
.ring-val small{display:block;color:var(--txt-2);font-size:12px;margin-top:2px}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.score-tile{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:.15s}
.score-tile:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.score-tile .lbl{font-size:12.5px;color:var(--txt-2);display:flex;justify-content:space-between;align-items:center}
.score-tile .num{font-family:'Sora';font-size:26px;margin:8px 0 9px}
.bar{height:7px;background:var(--bg-2);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.score-tile.good .bar i{background:linear-gradient(90deg,#22c55e,var(--accent))}
.score-tile.warn .bar i{background:linear-gradient(90deg,#ffb020,#ff8a3d)}
.score-tile.bad .bar i{background:linear-gradient(90deg,#ff5c70,#ff8a3d)}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.quick{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:14px;
  padding:18px;text-align:left;transition:.18s;position:relative;overflow:hidden}
.quick::after{content:"";position:absolute;inset:0;border-radius:14px;background:radial-gradient(140px 90px at 18% 0%,rgba(var(--brand-rgb),.10),transparent);opacity:0;transition:.18s}
.quick:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 14px 32px rgba(var(--brand-rgb),.20)}
.quick:hover::after{opacity:1}
.quick .qico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;color:var(--brand);
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.30),rgba(var(--accent-rgb),.16));
  border:1px solid rgba(var(--brand-rgb),.30);margin-bottom:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.quick:hover .qico{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent}
.quick h4{font-size:14.5px;margin-bottom:4px}
.quick p{font-size:12.5px;color:var(--txt-2);line-height:1.45}
.quick[data-view="linkedin"] .qico{font-weight:800;font-style:normal}

/* ---------- Builder ---------- */
.builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.editor{display:flex;flex-direction:column;gap:12px}
.sec-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sec-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel);cursor:pointer;user-select:none}
.sec-bar:hover{background:var(--panel-2)}
.sec-bar .drag{color:var(--txt-3);cursor:grab;font-size:15px}
.sec-bar h4{flex:1;font-size:14px;font-family:'Inter';font-weight:600}
.sec-bar .chev{color:var(--txt-3);transition:.2s;font-size:12px}
.sec-block.open .chev{transform:rotate(90deg)}
.sec-body{display:none;padding:14px;border-top:1px solid var(--line);background:var(--bg-2)}
.sec-block.open .sec-body{display:block}
.item-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:10px;position:relative}
.item-card .del{position:absolute;top:9px;right:9px;background:none;border:none;color:var(--txt-3);font-size:15px}
.item-card .del:hover{color:var(--danger)}
.add-item{width:100%;background:none;border:1px dashed var(--line-2);color:var(--txt-2);padding:9px;border-radius:9px;font-size:13px}
.add-item:hover{border-color:var(--brand);color:var(--txt)}
.ai-mini{display:inline-flex;align-items:center;gap:5px;background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.35);
  color:var(--accent-2);padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;margin-top:2px}
.ai-mini:hover{background:rgba(var(--accent-rgb),.24)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;padding:5px 9px;font-size:12.5px}
.chip b{font-weight:500}
.chip x{cursor:pointer;color:var(--txt-3);font-style:normal}
.chip x:hover{color:var(--danger)}

/* preview / paper */
.preview-pane{position:sticky;top:0}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
.paper-scroll{background:var(--paper-bg);border-radius:12px;padding:18px;max-height:calc(100vh - 160px);overflow:auto}
.paper{background:var(--paper);color:#1a1a1a;width:100%;max-width:680px;margin:0 auto;
  min-height:880px;padding:46px 50px;font-size:13px;line-height:1.5;box-shadow:0 12px 40px rgba(0,0,0,.45);
  font-family:'Inter',sans-serif}

/* ---------- ATS / analysis ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.gauge{display:flex;align-items:center;gap:16px}
.gauge .ring{width:110px;height:110px}
.gauge .ring-val b{font-size:30px}
.kw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.kw-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kw{font-size:12px;padding:4px 9px;border-radius:7px;font-weight:500}
.kw.hit{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.kw.miss{background:rgba(255,92,112,.13);color:#ff8a99;border:1px solid rgba(255,92,112,.3)}
.suggestion{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.suggestion:last-child{border:none}
.suggestion .s-ico{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;background:var(--panel-2);color:var(--txt-2)}
.suggestion.ok .s-ico{background:rgba(34,197,94,.15);color:#4ade80}
.suggestion.warn .s-ico{background:rgba(255,176,32,.15);color:var(--warn)}
.suggestion.bad .s-ico{background:rgba(255,92,112,.15);color:var(--danger)}
.suggestion p{font-size:13px;color:var(--txt);line-height:1.45}
.suggestion small{color:var(--txt-3)}

/* ---------- Templates ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tpl{background:var(--panel);border:2px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.16s;position:relative}
.tpl:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tpl.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.25)}
.tpl.create{display:grid;place-items:center;border-style:dashed;min-height:230px;color:var(--txt-2)}
.tpl.create:hover{color:var(--brand);border-color:var(--brand)}
.tpl.create .plus{font-size:34px;margin-bottom:8px}
.tpl-thumb{height:170px;background:#fff;padding:14px;overflow:hidden}
.tpl-meta{padding:11px 13px;display:flex;justify-content:space-between;align-items:center}
.tpl-meta b{font-size:13.5px}
.tpl-meta .tag{font-size:10.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em}
.tpl .tpl-del{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;display:none}
.tpl:hover .tpl-del{display:grid;place-items:center}

.mini{font-size:5px;line-height:1.35;color:#222;font-family:Inter}
.mini .mh{height:8px;border-radius:2px;margin-bottom:4px}
.mini .ml{height:3px;background:#dfe2ea;border-radius:2px;margin-bottom:3px}
.mini .ml.s{width:55%}.mini .ml.m{width:80%}

/* ---------- Template Studio ---------- */
.studio{display:grid;grid-template-columns:210px minmax(0,1fr) 230px;gap:16px;align-items:start}
.studio-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-3);margin:14px 0 8px}
.studio-col h4:first-child{margin-top:0}
.palette{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;position:sticky;top:0}
.pal-item{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:7px;cursor:grab;transition:.12s}
.pal-item:hover{border-color:var(--brand);transform:translateX(2px)}
.pal-item .pi{width:18px;text-align:center;color:var(--brand)}
.pal-item.dragging{opacity:.4}

.canvas-wrap{background:var(--paper-bg);border-radius:12px;padding:18px;min-height:600px;max-height:calc(100vh - 150px);overflow:auto}
.canvas-paper{background:#fff;color:#1a1a1a;max-width:680px;margin:0 auto;min-height:560px;
  padding:40px 44px;box-shadow:0 12px 40px rgba(0,0,0,.4);font-size:13px;line-height:1.5}
.canvas-paper.twocol{display:grid;grid-template-columns:34% 1fr;gap:26px;padding:0;overflow:hidden}
.canvas-paper.twocol .col-side{background:#f4f5f8;padding:34px 22px}
.canvas-paper.twocol .col-main{padding:34px 30px 34px 0}
.dropzone{min-height:60px}
.canvas-paper:not(.twocol) .dropzone{min-height:520px}
.dz-empty{border:2px dashed #c7ccd9;border-radius:8px;padding:22px;text-align:center;color:#9aa1b9;font-size:11px}
.col-side .dz-empty,.col-main .dz-empty{padding:14px}

.cblock{position:relative;border:1.5px solid transparent;border-radius:6px;padding:4px 6px;margin:2px 0;cursor:grab}
.cblock:hover{border-color:rgba(var(--brand-rgb),.6);background:rgba(var(--brand-rgb),.05)}
.cblock.sel{border-color:var(--brand);background:rgba(var(--brand-rgb),.07)}
.cblock.dragging{opacity:.35}
.cblock .blk-tools{position:absolute;top:-10px;right:6px;display:none;gap:4px;z-index:3}
.cblock:hover .blk-tools,.cblock.sel .blk-tools{display:flex}
.blk-tools button{width:20px;height:20px;border-radius:5px;border:none;background:var(--brand);color:#fff;font-size:11px;display:grid;place-items:center}
.blk-tools button.x{background:var(--danger)}
.drop-line{height:3px;background:var(--brand);border-radius:3px;margin:3px 0;box-shadow:0 0 8px var(--brand)}

.studio-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;position:sticky;top:0}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.swatch{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent}
.swatch.sel{border-color:var(--txt)}
.color-row{display:flex;align-items:center;gap:8px}

/* ---------- Chat ---------- */
.chat{display:flex;flex-direction:column;height:calc(100vh - 150px)}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:6px 2px}
.msg{max-width:78%;padding:12px 15px;border-radius:14px;font-size:14px;line-height:1.5}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px;white-space:pre-wrap}
.chat-input{display:flex;gap:10px;margin-top:14px}
.chat-input .inp{flex:1}
.suggest-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.suggest-row .pill{cursor:pointer}
.suggest-row .pill:hover{border-color:var(--brand);color:var(--txt)}

/* loading */
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:var(--panel-2);
  border:1px solid var(--line-2);color:var(--txt);padding:12px 20px;border-radius:11px;font-size:14px;
  box-shadow:var(--shadow);transition:.3s;opacity:0;z-index:100}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.ok{border-color:var(--accent)}
.toast.err{border-color:var(--danger)}

/* empty */
.empty{text-align:center;padding:50px 20px;color:var(--txt-3)}
.empty .big{font-size:46px;margin-bottom:10px;opacity:.6}

/* ---------- PRINT ---------- */
@media print{
  body{background:#fff}
  #app,.toast{display:none!important}
  #printLayer{display:block!important}
  #printLayer .paper{box-shadow:none;margin:0;max-width:100%;min-height:auto;padding:40px}
}
#printLayer{display:none}

/* ====== Resume template skins ====== */
.paper h1.r-name{font-family:'Sora';font-size:27px;margin-bottom:3px}
.paper .r-role{color:var(--tpl-accent,#f1917d);font-weight:600;font-size:13.5px;margin-bottom:4px}
.paper .r-contact{color:#555;font-size:11.5px;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.paper .r-sec{margin-bottom:15px}
.paper .r-sec h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tpl-accent,#f1917d);
  border-bottom:1.5px solid #e3e3ea;padding-bottom:4px;margin-bottom:9px}
.paper .r-item{margin-bottom:10px}
.paper .r-item .r-top{display:flex;justify-content:space-between;gap:10px}
.paper .r-item b{font-size:13px}
.paper .r-item .r-sub{color:#555;font-size:11.5px}
.paper .r-item .r-date{color:#888;font-size:11px;white-space:nowrap}
.paper .r-item ul{margin:5px 0 0 16px}
.paper .r-item li{margin-bottom:3px}
.paper .r-skills{display:flex;flex-wrap:wrap;gap:6px}
.paper .r-skills span{background:color-mix(in srgb,var(--tpl-accent,#f1917d) 16%,#fff);color:var(--tpl-accent,#f1917d);padding:3px 9px;border-radius:5px;font-size:11px}
.paper .r-summary{font-size:12.5px;color:#333;line-height:1.55}

/* modern uses --tpl-accent (default brand coral) */
.paper.t-minimal .r-sec h3{color:#1a1a1a;border-color:#d4d4d4}
.paper.t-minimal h1.r-name{font-family:'Inter';font-weight:700}
.paper.t-minimal .r-role{color:#444}
.paper.t-minimal .r-skills span{background:#f1f1f1;color:#333}
.paper.t-executive{padding-top:38px}
.paper.t-executive h1.r-name{text-align:center;letter-spacing:.04em}
.paper.t-executive .r-contact{justify-content:center}
.paper.t-executive .r-role{text-align:center}
.paper.t-executive .r-sec h3{text-align:center;color:#1a2744;border-bottom:2px solid #1a2744}
.paper.t-executive .r-role{color:#1a2744}
.paper.t-executive .r-skills span{background:#eef1f6;color:#1a2744}
.paper.t-developer{font-family:'Inter'}
.paper.t-developer h1.r-name,.paper.t-developer .r-role{color:#0b8f6a}
.paper.t-developer .r-sec h3{color:#0b8f6a;border-color:#cdeee2}
.paper.t-developer .r-skills span{background:#e4f7f0;color:#0b8f6a;font-family:ui-monospace,monospace}
.paper.t-creative{padding-left:54px;border-left:6px solid var(--brand)}
.paper.t-creative h1.r-name,.paper.t-creative .r-role{color:var(--brand)}
.paper.t-creative .r-sec h3{color:#0e9c8a;border-color:#cdeee2}
.paper.t-creative .r-skills span{background:#e4f7f0;color:#0e9c8a}
.paper.t-corporate .r-sec h3{background:#1f3a5f;color:#fff;padding:5px 10px;border:none;border-radius:4px}
.paper.t-corporate h1.r-name,.paper.t-corporate .r-role{color:#1f3a5f}
.paper.t-corporate .r-skills span{background:#e8eef5;color:#1f3a5f}

/* custom layout paper (studio output) */
.paper.t-custom.twocol{display:grid;grid-template-columns:34% 1fr;gap:26px;padding:0;overflow:hidden;min-height:880px}
.paper.t-custom.twocol .col-side{background:#f4f5f8;padding:46px 26px}
.paper.t-custom.twocol .col-main{padding:46px 40px 46px 0}
.paper .cb-divider{border:none;border-top:1.5px solid #e3e3ea;margin:10px 0}
.paper .cb-spacer{height:16px}
.paper .cb-text{font-size:12.5px;color:#333;line-height:1.55;margin-bottom:10px}
.paper .cb-photo{width:96px;height:96px;border-radius:50%;background:#e7e9f0 center/cover;margin:0 auto 14px;display:grid;place-items:center;color:#aab;font-size:24px}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%)}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:34px 30px;box-shadow:var(--shadow)}
.auth-brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:6px}
.auth-brand .brand-mark{width:40px;height:40px}
.auth-brand .brand-name{font-size:20px}
.auth-card h2{text-align:center;font-size:21px;margin-top:14px}
.auth-card .sub{text-align:center;color:var(--txt-2);font-size:13.5px;margin:5px 0 22px}
.auth-card .btn{margin-top:6px}
.auth-switch{text-align:center;font-size:13px;color:var(--txt-2);margin-top:16px}
.auth-switch a{color:var(--brand);font-weight:600;cursor:pointer}
.auth-err{background:rgba(255,92,112,.12);border:1px solid rgba(255,92,112,.3);color:#ff8a99;
  padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:14px;display:none}
.auth-err.show{display:block}
.auth-foot{text-align:center;font-size:11.5px;color:var(--txt-3);margin-top:18px}

/* ---------- Create-resume wizard ---------- */
.cta-create{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(var(--brand-rgb),.20),rgba(var(--accent-rgb),.12)),var(--panel);
  border:1px solid rgba(var(--brand-rgb),.30);border-radius:16px;padding:20px 24px;margin-bottom:18px}
.cta-create .ct-l h3{font-size:19px;margin-bottom:3px}
.cta-create .ct-l p{font-size:13.5px;color:var(--txt-2)}
.cta-create .ct-spark{font-size:13px;color:var(--accent-2);font-weight:700;margin-bottom:4px;letter-spacing:.04em}
.wiz{max-width:760px;margin:0 auto}
.wiz-prog{display:flex;gap:8px;margin-bottom:6px}
.wiz-prog .dot{flex:1;height:6px;border-radius:6px;background:var(--line);transition:.3s}
.wiz-prog .dot.on{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.wiz-step-lbl{font-size:12.5px;color:var(--txt-3);margin-bottom:18px}
.wiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.wiz .gen-state{text-align:center;padding:40px 20px}
.wiz .gen-state .big{font-size:42px;margin-bottom:14px}
.wiz .gen-state .glist{max-width:340px;margin:18px auto 0;text-align:left}
.wiz .gen-state .glist div{font-size:13.5px;color:var(--txt-2);padding:5px 0;display:flex;gap:9px;align-items:center}
.wiz .gen-state .glist .gd{width:16px}
.result-layouts{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0 0}
.layout-chip{padding:7px 14px;border-radius:9px;border:1.5px solid var(--line);background:var(--panel);font-size:13px;cursor:pointer;font-weight:600;transition:.14s}
.layout-chip:hover{border-color:var(--line-2)}
.layout-chip.on{border-color:var(--brand);color:var(--brand);background:rgba(var(--brand-rgb),.10)}
.result-grid{display:grid;grid-template-columns:1fr 440px;gap:22px;align-items:start}
@media(max-width:1000px){.result-grid{grid-template-columns:1fr}}

/* ---------- Modal (verify / paywall) ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(8,10,18,.66);backdrop-filter:blur(4px);
  display:grid;place-items:center;z-index:200;padding:20px;opacity:0;animation:mfade .2s forwards}
@keyframes mfade{to{opacity:1}}
.modal{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:30px 28px;box-shadow:var(--shadow);position:relative}
.modal .mclose{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--txt-3);font-size:20px}
.modal .mclose:hover{color:var(--txt)}
.modal .micon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.22),rgba(var(--accent-rgb),.18))}
.modal h3{font-size:20px;margin-bottom:6px}
.modal p.msub{color:var(--txt-2);font-size:14px;margin-bottom:18px;line-height:1.5}
.modal .otp-in{letter-spacing:8px;text-align:center;font-size:22px;font-weight:700}
.modal .mnote{font-size:12px;color:var(--txt-3);margin-top:12px;text-align:center}
.modal .mlink{color:var(--brand);cursor:pointer;font-weight:600}
.price-tag{font-family:'Sora';font-size:34px;font-weight:800;color:var(--brand);margin:6px 0}
.price-tag small{font-size:14px;color:var(--txt-2);font-weight:500}
.feat-list{list-style:none;margin:14px 0 18px;padding:0}
.feat-list li{font-size:14px;color:var(--txt);padding:5px 0;display:flex;gap:9px;align-items:center}
.feat-list li::before{content:"✓";color:var(--accent);font-weight:800}

/* guest banner */
.guest-banner{background:linear-gradient(90deg,rgba(var(--brand-rgb),.16),rgba(var(--accent-rgb),.10));
  border:1px solid rgba(var(--brand-rgb),.3);border-radius:12px;padding:12px 16px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.guest-banner span{font-size:13.5px;color:var(--txt)}
.badge-ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--accent);
  background:rgba(var(--accent-rgb),.14);padding:3px 9px;border-radius:20px}

/* responsive */
@media(max-width:1200px){ .studio{grid-template-columns:180px 1fr} .studio-panel{display:none} }
@media(max-width:1100px){
  .builder,.split{grid-template-columns:1fr}
  .dash-hero{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr 1fr}
  .preview-pane{position:static}
  .studio{grid-template-columns:1fr}
  .palette{position:static}
}
@media(max-width:780px){
  #app{grid-template-columns:1fr}
  .sidebar{display:none}
}