:root{
  --bg:#07090f;--s1:#0c0f1c;--s2:#111525;
  --g1:rgba(255,255,255,.04);--g2:rgba(255,255,255,.08);--g3:rgba(255,255,255,.13);
  --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.14);--b3:rgba(255,255,255,.22);
  --t1:#edf0f8;--t2:#7a8499;--t3:#3b4259;
  --v:#7c5cfc;--vd:#6344e8;--vl:rgba(124,92,252,.14);--vg:rgba(124,92,252,.28);
  --em:#00cc7a;--cy:#00bcd4;--am:#f5a623;--rd:#ff4444;
  --font:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:14px;--rs:10px;--rx:6px;
  --ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scrollbar-width:thin;scrollbar-color:var(--v) var(--s1);}
body{font-family:var(--font);background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 70% 50% at 80% 0%,rgba(124,92,252,.07),transparent),radial-gradient(ellipse 50% 40% at 10% 100%,rgba(0,204,122,.05),transparent);pointer-events:none;z-index:0;}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:200;height:52px;background:rgba(7,9,15,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 24px;gap:12px;}
.logo{display:flex;align-items:center;gap:8px;font-size:.93rem;font-weight:800;color:var(--t1);text-decoration:none;}
.logo-gem{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--v),#a78bfa);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.78rem;box-shadow:0 0 14px var(--vg);}
.topbar-gap{flex:1;}
.priv{display:flex;align-items:center;gap:4px;background:rgba(0,204,122,.09);border:1px solid rgba(0,204,122,.2);border-radius:20px;padding:3px 9px;font-size:.62rem;font-weight:600;color:var(--em);}

/* ── MAIN ── */
.main{max-width:1100px;margin:0 auto;padding:32px 40px 80px;position:relative;z-index:1;}
@media(max-width:768px){.main{padding:24px 16px 60px;}}

/* ── PASO 1 ── */
#step1{animation:fadeUp .4s var(--ease);}
#step2{display:none;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--vl);border:1px solid rgba(124,92,252,.25);border-radius:20px;padding:4px 12px;font-size:.67rem;font-weight:700;color:var(--v);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.page-title{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;line-height:1.2;color:var(--t1);margin-bottom:8px;}
.page-title span{background:linear-gradient(135deg,var(--v),#a78bfa,var(--cy));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.page-sub{font-size:.85rem;color:var(--t2);margin-bottom:28px;line-height:1.6;}

/* Country pill */
.country-pill{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--g1);border:1.5px solid var(--b2);border-radius:var(--rs);cursor:pointer;transition:all .15s;margin-bottom:10px;}
.country-pill:hover{background:var(--g2);}
.country-pill img{width:24px;height:17px;object-fit:cover;border-radius:3px;}
.cp-name{font-size:.88rem;font-weight:700;color:var(--t1);}
.cp-hint{font-size:.68rem;color:var(--t2);}
.cp-arrow{margin-left:auto;color:var(--t3);font-size:.75rem;transition:transform .2s;}
.cp-arrow.open{transform:rotate(180deg);}
.country-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-bottom:10px;animation:fadeUp .2s var(--ease);}
.country-grid.open{display:grid;}
.ccard{display:flex;align-items:center;gap:6px;padding:7px 9px;background:var(--g1);border:1.5px solid var(--b1);border-radius:var(--rs);cursor:pointer;transition:all .15s;font-size:.72rem;color:var(--t2);}
.ccard:hover{background:var(--g2);border-color:var(--b2);color:var(--t1);}
.ccard.sel{background:var(--vl);border-color:var(--v);color:var(--v);}
.ccard img{width:18px;height:12px;object-fit:cover;border-radius:2px;flex-shrink:0;}

/* Format grid */
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:7px;margin-bottom:10px;}
.fcard{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--g1);border:1.5px solid var(--b1);border-radius:var(--rs);cursor:pointer;transition:all .18s;}
.fcard:hover{background:var(--g2);border-color:var(--b2);transform:translateY(-1px);}
.fcard.sel{background:var(--vl);border-color:var(--v);box-shadow:0 0 12px var(--vg);}
.fcard i{color:var(--v);font-size:.82rem;width:14px;flex-shrink:0;}
.fcard-n{font-size:.75rem;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:4px;}
.fcard-d{font-size:.6rem;color:var(--t3);font-family:var(--mono);}
.fcard.sel .fcard-n{color:var(--v);}
.ot{font-size:.5rem;background:var(--vl);color:var(--v);padding:1px 3px;border-radius:3px;}
.fmt-tip{padding:9px 12px;border-radius:var(--rs);font-size:.72rem;color:var(--t2);line-height:1.5;display:none;margin-bottom:10px;animation:fadeUp .2s var(--ease);}
.fmt-tip.show{display:block;}
.fmt-tip.ok{background:rgba(124,92,252,.07);border:1px solid rgba(124,92,252,.18);}
.fmt-tip.warn{background:rgba(255,68,68,.06);border:1px solid rgba(255,68,68,.18);color:#ff9090;}

/* Upload */
.upload-zone{border:2px dashed var(--b2);border-radius:var(--r);padding:38px 20px;text-align:center;cursor:pointer;background:var(--g1);transition:all .2s;position:relative;overflow:hidden;margin-bottom:10px;}
.upload-zone::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--vl),transparent 70%);opacity:0;transition:opacity .2s;pointer-events:none;}
.upload-zone:hover::after,.upload-zone.over::after{opacity:1;}
.upload-zone:hover,.upload-zone.over{border-color:var(--v);transform:translateY(-2px);box-shadow:0 0 28px var(--vg);}
.uz-icon{width:52px;height:52px;border-radius:50%;background:var(--vl);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--v);font-size:1.2rem;box-shadow:0 0 18px var(--vg);position:relative;z-index:1;}
.uz-t{font-size:.92rem;font-weight:700;color:var(--t1);margin-bottom:4px;position:relative;z-index:1;}
.uz-s{font-size:.75rem;color:var(--t2);position:relative;z-index:1;}
.uz-s b{color:var(--v);}
input[type=file]{display:none;}

/* Foto cargada badge */
.file-badge{display:flex;align-items:center;gap:10px;padding:10px 13px;background:rgba(0,204,122,.07);border:1px solid rgba(0,204,122,.2);border-radius:var(--rs);margin-bottom:10px;display:none;animation:fadeUp .2s var(--ease);}
.file-badge.show{display:flex;}
.file-badge img{width:36px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--b2);}
.file-badge-info{flex:1;min-width:0;}
.file-badge-name{font-size:.76rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-badge-size{font-size:.65rem;color:var(--t3);font-family:var(--mono);}
.file-badge-change{font-size:.68rem;color:var(--v);cursor:pointer;white-space:nowrap;background:none;border:none;font-family:var(--font);padding:0;}
.file-badge-change:hover{text-decoration:underline;}

/* Process button */
.btn-process{
  width:100%;padding:15px;
  background:linear-gradient(135deg,var(--v),#a78bfa);
  color:#fff;border:none;border-radius:var(--rs);
  font-family:var(--font);font-size:1rem;font-weight:700;
  cursor:pointer;box-shadow:0 4px 20px var(--vg);
  transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;
}
.btn-process:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--vg);}
.btn-process:disabled{opacity:.35;pointer-events:none;}

/* ── LAYOUT PASO 1: 2 columnas ── */
.step1-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:24px;
  align-items:stretch;
}
@media(max-width:900px){.step1-layout{grid-template-columns:1fr 240px;}}
@media(max-width:580px){
  .step1-layout{grid-template-columns:1fr;}
  .fmt-preview-col{display:none;}
}

/* ── FORMAT PREVIEW (columna derecha) ── */
.fmt-preview-col{
  position:sticky;
  top:70px;
  /* Altura máxima = viewport - topbar, para que quede visible */
  max-height:calc(100vh - 80px);
}
.fmt-preview-card{
  background:var(--g1);
  border:1px solid var(--b1);
  border-radius:var(--rs);
  padding:16px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%; /* ocupa toda la columna */
}
.fmt-preview-title{
  font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--t3);
}
.fmt-preview-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1; /* crece para llenar el espacio disponible */
  min-height:180px;
  background:var(--s2);
  border-radius:var(--rx);
  border:1px solid var(--b1);
  padding:16px;
}
/* SVG del documento */
.fmt-doc-svg{
  width:100%;
  height:auto;
  max-width:160px;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 6px 18px rgba(124,92,252,.35));
  overflow:visible;
}
@keyframes docPop{
  0%  {transform:scale(.7) rotate(-3deg);opacity:0}
  60% {transform:scale(1.06) rotate(1deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
.fmt-doc-svg.animate{
  animation:docPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.fmt-dim-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:var(--vl);border:1px solid rgba(124,92,252,.2);
  border-radius:20px;padding:5px 12px;
  font-size:.75rem;font-weight:700;color:var(--v);
  font-family:var(--mono);
}
.fmt-doc-name{font-size:.78rem;font-weight:700;color:var(--t1);}
.fmt-doc-country{font-size:.64rem;color:var(--t2);margin-top:1px;}
.fmt-orient-badge{
  display:inline-block;font-size:.6rem;font-weight:700;
  padding:3px 8px;border-radius:4px;
  background:rgba(0,188,212,.1);color:var(--cy);
  border:1px solid rgba(0,188,212,.2);
}
#step2{position:relative;z-index:1;}

/* Animación de procesamiento */
.processing-screen{
  text-align:center;padding:40px 20px 20px;
  animation:fadeUp .3s var(--ease);
}
.proc-ring-wrap{
  position:relative;width:88px;height:88px;margin:0 auto 24px;
}
.proc-ring{
  width:88px;height:88px;border-radius:50%;
  border:3px solid var(--b1);
  border-top-color:var(--v);
  border-right-color:rgba(124,92,252,.4);
  animation:spin 1s linear infinite;
  position:absolute;inset:0;
}
.proc-ring2{
  width:68px;height:68px;border-radius:50%;
  border:2px solid var(--b1);
  border-bottom-color:var(--cy);
  animation:spin 1.5s linear infinite reverse;
  position:absolute;top:10px;left:10px;
}
.proc-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

.proc-title{font-size:1.1rem;font-weight:800;color:var(--t1);margin-bottom:6px;}
.proc-sub{font-size:.8rem;color:var(--t2);margin-bottom:28px;font-family:var(--mono);}

/* Steps de progreso */
.proc-steps{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:0 auto 32px;text-align:left;}
.pstep{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--g1);border:1px solid var(--b1);border-radius:var(--rs);font-size:.78rem;color:var(--t3);transition:all .4s var(--ease);}
.pstep.active{background:rgba(124,92,252,.08);border-color:rgba(124,92,252,.2);color:var(--t1);}
.pstep.done{background:rgba(0,204,122,.07);border-color:rgba(0,204,122,.2);color:var(--em);}
.pstep-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0;background:var(--b1);}
.pstep.active .pstep-icon{background:var(--vl);color:var(--v);}
.pstep.done  .pstep-icon{background:rgba(0,204,122,.15);color:var(--em);}
.pstep-label{flex:1;}
.pstep-time{font-size:.6rem;color:var(--t3);font-family:var(--mono);}

/* Barra de progreso */
.proc-bar-wrap{max-width:520px;margin:0 auto;height:4px;background:var(--b1);border-radius:2px;overflow:hidden;}
.proc-bar{height:100%;background:linear-gradient(90deg,var(--v),var(--cy));border-radius:2px;width:0;transition:width .5s var(--ease);box-shadow:0 0 8px var(--vg);}

/* ── RESULTADO: VARIANTES ── */
.result-screen{display:none;animation:fadeUp .35s var(--ease);}

.result-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.result-back{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--t2);cursor:pointer;background:var(--g2);border:1px solid var(--b1);border-radius:var(--rs);padding:7px 12px;transition:all .15s;}
.result-back:hover{background:var(--g3);color:var(--t1);}
.result-title{font-size:1.1rem;font-weight:800;color:var(--t1);}
.result-sub{font-size:.75rem;color:var(--t2);}

/* Variantes */
.variants-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
@media(max-width:480px){.variants-row{grid-template-columns:1fr;}}
.vcard{border:2px solid var(--b1);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .2s var(--ease);background:var(--s1);}
.vcard:hover{border-color:var(--b3);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4);}
.vcard.sel{border-color:var(--v);box-shadow:0 0 0 1px var(--v),0 8px 28px var(--vg);}
.vcard-img{width:100%;padding-top:133%;position:relative;overflow:hidden;background:repeating-conic-gradient(#1a1c2c 0% 25%,#13152a 0% 50%) 0 0/14px 14px;cursor:move;user-select:none;-webkit-user-select:none;}
.vcard-img img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none;}
.vcard-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;}
.vcard-loader i{font-size:1.2rem;color:var(--t3);}
.vcard-loader.spin i{animation:spin 1s linear infinite;color:var(--v);}
.vcard-loader span{font-size:.62rem;color:var(--t3);font-family:var(--mono);text-align:center;padding:0 8px;}
.vc-progbar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--b1);}
.vc-progfill{height:100%;background:linear-gradient(90deg,var(--v),var(--cy));width:0;transition:width .3s;}
.vcard-foot{padding:9px 11px;display:flex;align-items:center;gap:8px;}
.vcard-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:.58rem;color:transparent;transition:all .15s;flex-shrink:0;}
.vcard.sel .vcard-check{background:var(--v);border-color:var(--v);color:#fff;}
.vcard-info{flex:1;}
.vcard-lbl{font-size:.74rem;font-weight:700;color:var(--t1);}
.vcard-desc{font-size:.61rem;color:var(--t2);}
.vcard.sel .vcard-lbl{color:var(--v);}
.vc-badge{font-size:.52rem;font-weight:700;padding:2px 5px;border-radius:20px;background:rgba(0,188,212,.12);color:var(--cy);border:1px solid rgba(0,188,212,.2);}

/* Ajustes colapsables */
.adj-section{background:var(--g1);border:1px solid var(--b1);border-radius:var(--rs);overflow:hidden;margin-bottom:16px;}
.adj-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;user-select:none;}
.adj-toggle-row:hover{background:var(--g2);}
.adj-toggle-lbl{font-size:.72rem;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:7px;}
.adj-toggle-lbl i{color:var(--v);font-size:.7rem;}
.adj-chevron{color:var(--t3);font-size:.7rem;transition:transform .2s;}
.adj-chevron.open{transform:rotate(180deg);}
.adj-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:16px;}
.adj-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:420px){.adj-row{grid-template-columns:1fr;}}

.adj-item{display:flex;flex-direction:column;gap:6px;}
.adj-item label{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:700;color:var(--t2);}
.adj-item .val-wrap{display:flex;align-items:center;gap:6px;}
.adj-item .val{font-family:var(--mono);font-size:.65rem;color:var(--v);background:rgba(124,92,252,.1);padding:2px 6px;border-radius:4px;min-width:32px;text-align:center;}
.adj-reset{width:20px;height:20px;border-radius:4px;background:var(--b1);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transition:all .2s;}
.adj-reset:hover{background:var(--v);color:#fff;}

.slk{position:relative;background:var(--s2);border:1px solid var(--b1);border-radius:8px;padding:10px 12px;height:36px;display:flex;align-items:center;}

/* Estilo Premium para todos los Sliders */
input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;height:4px;background:var(--b2);border-radius:2px;outline:none;
}
input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;border-radius:2px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--t1);cursor:pointer;margin-top:-7px;
  border:3px solid var(--v);box-shadow:0 0 10px rgba(124,92,252,0.4);transition:transform .15s var(--spring);
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 0 15px var(--v);}

/* Slider de Rotación con Regla (Ruler) */
.slk-ruler{
  background-image: repeating-linear-gradient(90deg, var(--b2) 0, var(--b2) 1px, transparent 1px, transparent 10%);
  background-size: 100% 12px;
  background-position: left bottom 6px;
  background-repeat: repeat-X;
}
.slk-ruler::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:20px;background:var(--v);pointer-events:none;z-index:1;box-shadow:0 0 8px var(--v);
}
.adj-transforms{display:flex;gap:6px;padding:0 14px 12px;}
.txbtn{flex:1;height:31px;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);color:var(--t2);cursor:pointer;font-size:.68rem;font-weight:600;font-family:var(--font);transition:all .15s;}
.txbtn:hover{background:var(--v);color:#fff;border-color:var(--v);}

/* Download section */
.dl-section{display:flex;gap:16px;align-items:flex-start;}
@media(max-width:520px){.dl-section{flex-direction:column;align-items:center;}}
.canvas-col{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:7px;}
.canvas-frame{padding:6px;background:var(--g2);border:1px solid var(--b2);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.55);position:relative;background-image:radial-gradient(ellipse at top left,rgba(124,92,252,.1),transparent 50%);}
.canvas-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10;opacity:0;transition:opacity .3s;border-radius:10px;}
.canvas-wm.on{opacity:1;}
.canvas-wm span{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.38);background:rgba(0,0,0,.12);padding:2px 9px;border-radius:20px;transform:rotate(-22deg);border:1px solid rgba(255,255,255,.1);}
#previewCanvas{display:block;cursor:move;border-radius:var(--rx);}
.canvas-hint{font-size:.61rem;color:var(--t3);display:flex;align-items:center;gap:3px;}
.canvas-dim{font-size:.59rem;color:var(--t3);font-family:var(--mono);}
.dl-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.dl-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:2px;}
.dlbtn{display:flex;align-items:center;gap:10px;padding:10px 13px;border:none;border-radius:var(--rs);cursor:pointer;transition:all .15s;width:100%;text-align:left;font-family:var(--font);}
.dlbtn:hover{transform:translateX(4px);}
.di{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;}
.dt .dn{font-size:.77rem;font-weight:700;color:var(--t1);}
.dt .dd{font-size:.61rem;color:rgba(255,255,255,.45);}
.dlbtn-v{background:linear-gradient(135deg,var(--v),#a78bfa);box-shadow:0 2px 12px var(--vg);}
.dlbtn-v:hover{box-shadow:0 6px 20px var(--vg);}
.dlbtn-c{background:linear-gradient(135deg,#009eb8,#0284c7);box-shadow:0 2px 10px rgba(0,158,184,.3);}
.dlbtn-a{background:linear-gradient(135deg,#d08800,var(--am));box-shadow:0 2px 10px rgba(200,130,0,.3);}
.dlbtn-r{background:linear-gradient(135deg,#c91c2a,var(--rd));box-shadow:0 2px 10px rgba(200,28,42,.3);}
.dlbtn-g{background:var(--g2);border:1px solid var(--b2);}
.dlbtn-g .dn,.dlbtn-g .dd{color:var(--t2);}
.dlbtn-g:hover{background:var(--g3);transform:none;}
.restart-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 0;font-size:.7rem;color:var(--t3);cursor:pointer;background:none;border:none;font-family:var(--font);transition:color .15s;margin-top:2px;}
.restart-btn:hover{color:var(--rd);}

/* ── MODALS ── */
.eraser-overlay,.paywall-overlay{position:fixed;inset:0;background:rgba(5,6,12,.9);z-index:4500;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;}
.eraser-overlay.show,.paywall-overlay.show{opacity:1;visibility:visible;}
.eraser-modal{background:#0a0c18;border:1px solid var(--b2);border-radius:var(--r);display:flex;flex-direction:column;width:min(96vw,940px);height:min(90vh,700px);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.8);}
.em-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--b1);background:var(--g2);flex-shrink:0;}
.em-title{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--t1);}
.em-title i{color:var(--v);}
.em-close{width:26px;height:26px;border-radius:50%;border:1px solid var(--b1);background:var(--g3);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.74rem;transition:all .15s;flex-shrink:0;}
.em-close:hover{background:var(--rd);color:#fff;border-color:transparent;}
.em-tb{display:flex;align-items:center;gap:11px;padding:8px 14px;border-bottom:1px solid var(--b1);flex-shrink:0;flex-wrap:wrap;}
.etg{display:flex;flex-direction:column;gap:3px;min-width:0;}
.etg-l{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);}
.emodes{display:flex;gap:3px;}
.emb{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--g2);border:1px solid var(--b1);border-radius:var(--rx);cursor:pointer;color:var(--t2);font-size:.68rem;font-weight:600;font-family:var(--font);transition:all .15s;white-space:nowrap;}
.emb:hover{background:var(--g3);color:var(--t1);}
.emb.active{background:var(--vl);border-color:var(--v);color:var(--v);}
.emb.ra{background:rgba(0,188,212,.1);border-color:var(--cy);color:var(--cy);}
.eraser-canvas-wrap{flex:1;overflow:auto;background:linear-gradient(45deg,#181a2c 25%,transparent 25%),linear-gradient(-45deg,#181a2c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#181a2c 75%),linear-gradient(-45deg,transparent 75%,#181a2c 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;background-color:#0b0d1a;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;}
#eraserDisplayCanvas{display:block;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 40px rgba(0,0,0,.7);touch-action:none;user-select:none;}
.em-ft{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-top:1px solid var(--b1);background:var(--g2);flex-shrink:0;gap:10px;}
.em-hint{font-size:.68rem;color:var(--t3);flex:1;}
.btn-xs{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--rx);font-size:.69rem;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s;border:1px solid var(--b2);background:var(--g2);color:var(--t2);}
.btn-xs:hover{background:var(--g3);color:var(--t1);}
.btn-xs.pv{background:var(--vl);border-color:rgba(124,92,252,.3);color:var(--v);}
.btn-xs.pv:hover{background:var(--v);color:#fff;}
.color-swatch-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .12s;}
.color-swatch-item:hover{transform:translateY(-2px);}
.color-swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--b2);cursor:pointer;transition:all .15s;padding:0;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.color-swatch.active{border-color:var(--v)!important;box-shadow:0 0 0 2px var(--v),0 8px 16px var(--vg);}
.color-lbl{font-size:.54rem;color:var(--t3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;}
.color-swatch-item.active .color-lbl{color:var(--v);font-weight:700;}

#colorPanel{width:220px !important;padding:16px 14px !important;}
.cp-sect{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.cp-sect-h{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.cp-sect-h i{color:var(--v);font-size:.7rem;}
.paywall-modal{background:#090b16;border:1px solid var(--b2);border-radius:16px;padding:24px 20px 20px;max-width:390px;width:90vw;box-shadow:0 24px 64px rgba(0,0,0,.8);transform:scale(.92) translateY(16px);transition:transform .3s var(--spring);position:relative;background-image:radial-gradient(ellipse at top,rgba(124,92,252,.1),transparent 55%);}
.paywall-overlay.show .paywall-modal{transform:scale(1) translateY(0);}
.pw-x{position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:50%;border:1px solid var(--b1);background:var(--g2);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.74rem;transition:all .15s;}
.pw-x:hover{color:var(--t1);}
.pw-ico{width:46px;height:46px;background:linear-gradient(135deg,var(--v),#a78bfa);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;margin:0 auto 11px;box-shadow:0 0 18px var(--vg);}
.pw-h{font-size:.98rem;font-weight:800;color:var(--t1);text-align:center;margin-bottom:5px;}
.pw-p{font-size:.74rem;color:var(--t2);text-align:center;margin-bottom:13px;line-height:1.5;}
.pw-plans{display:flex;gap:7px;margin-bottom:13px;}
.pw-plan{flex:1;padding:10px 7px;background:var(--g2);border:1.5px solid var(--b1);border-radius:var(--rs);text-align:center;cursor:pointer;transition:all .15s;position:relative;}
.pw-plan:hover,.pw-plan.s{border-color:var(--v);background:var(--vl);box-shadow:0 0 10px var(--vg);}
.pw-plan.pop::before{content:'⭐ Popular';position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--v),#a78bfa);color:#fff;font-size:.52rem;font-weight:700;padding:2px 6px;border-radius:10px;white-space:nowrap;}
.pw-pn{font-size:.66rem;font-weight:600;color:var(--t2);}.pw-pp{font-size:.96rem;font-weight:800;color:var(--t1);}.pw-ps{font-size:.54rem;color:var(--t3);font-family:var(--mono);}
.pw-feats{list-style:none;margin-bottom:13px;display:flex;flex-direction:column;gap:5px;}
.pw-feats li{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--t2);}
.pw-feats li i{color:var(--em);font-size:.68rem;}
.pw-step{animation:fadeUp .2s var(--ease);}
.pw-back{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;color:var(--t3);cursor:pointer;margin-bottom:10px;transition:color .15s;}
.pw-back:hover{color:var(--v);}
.pw-sh{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--b1);}
.pw-si-box{width:28px;height:28px;border-radius:7px;background:var(--vl);display:flex;align-items:center;justify-content:center;color:var(--v);flex-shrink:0;}
.pw-st{font-size:.78rem;font-weight:700;color:var(--t1);}.pw-ss{font-size:.65rem;color:var(--v);font-family:var(--mono);}
.pw-methods{display:flex;gap:5px;margin-bottom:9px;}
.pw-m{flex:1;padding:6px 4px;background:var(--g2);border:1.5px solid var(--b1);border-radius:var(--rx);cursor:pointer;color:var(--t2);font-size:.66rem;font-weight:600;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:3px;transition:all .15s;}
.pw-m:hover,.pw-m.a{border-color:var(--v);background:var(--vl);color:var(--v);}
.pw-field{margin-bottom:8px;}.pw-field label{display:block;font-size:.63rem;font-weight:600;color:var(--t2);margin-bottom:3px;}
.pw-iw{position:relative;}.pw-ico2{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.68rem;pointer-events:none;}
.pw-iw input{width:100%;padding:7px 8px 7px 26px;background:var(--g2);border:1px solid var(--b1);border-radius:var(--rx);color:var(--t1);font-size:.76rem;font-family:var(--mono);outline:none;transition:border-color .15s;}
.pw-iw input:focus{border-color:var(--v);box-shadow:0 0 0 3px var(--vl);}
.pw-2c{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pw-tot{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;background:var(--g2);border:1px solid var(--b1);border-radius:var(--rx);margin-bottom:9px;font-size:.73rem;color:var(--t2);}
.pw-tval{font-size:.95rem;font-weight:800;color:var(--t1);}
.pw-cta{width:100%;padding:11px;background:linear-gradient(135deg,var(--v),#a78bfa);color:#fff;border:none;border-radius:var(--rs);font-family:var(--font);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 4px 14px var(--vg);}
.pw-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--vg);}
.pw-note{text-align:center;font-size:.59rem;color:var(--t3);margin-top:6px;font-family:var(--mono);}
.pw-alt{display:flex;align-items:center;gap:6px;background:rgba(0,188,212,.08);border:1px solid rgba(0,188,212,.18);border-radius:var(--rx);padding:8px 10px;font-size:.71rem;color:var(--t2);margin-bottom:8px;}
.pw-proc{display:flex;flex-direction:column;align-items:center;padding:4px 0;}
.pw-ring{position:relative;width:52px;height:52px;margin-bottom:12px;}
.pw-rs{position:absolute;inset:0;border:3px solid var(--b1);border-top-color:var(--v);border-radius:50%;animation:spin .8s linear infinite;}
.pw-ri{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--v);}
.pw-pt{font-size:.9rem;font-weight:700;color:var(--t1);margin-bottom:3px;}.pw-ps2{font-size:.68rem;color:var(--t3);font-family:var(--mono);margin-bottom:12px;}
.pw-psteps{width:100%;display:flex;flex-direction:column;gap:5px;}
.pw-pst{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--t2);padding:6px 9px;background:var(--g2);border:1px solid var(--b1);border-radius:var(--rs);transition:all .3s;}
.pw-pst.done{color:var(--em);border-color:rgba(0,204,122,.22);background:rgba(0,204,122,.06);}
.pw-pst.dim{color:var(--t3);}.pw-pst i{width:12px;flex-shrink:0;}
.pw-succ{display:flex;flex-direction:column;align-items:center;text-align:center;}
.pw-si2{width:54px;height:54px;background:linear-gradient(135deg,var(--em),#34d399);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;margin-bottom:10px;box-shadow:0 0 22px rgba(0,204,122,.4);animation:pop .5s var(--spring) both;}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.pw-stit{font-size:.95rem;font-weight:800;color:var(--t1);margin-bottom:3px;}.pw-ssub{font-size:.72rem;color:var(--t2);margin-bottom:12px;}
.pw-rcpt{width:100%;background:var(--g2);border:1px solid var(--b1);border-radius:var(--rs);overflow:hidden;}
.pw-rr{display:flex;justify-content:space-between;padding:6px 9px;font-size:.69rem;border-bottom:1px solid var(--b1);}
.pw-rr:last-child{border-bottom:none;}.pw-rr span:first-child{color:var(--t3);}.pw-rr span:last-child{color:var(--t1);font-family:var(--mono);}
.statusbar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(9,11,20,.95);border:1px solid var(--b2);border-radius:var(--rs);padding:9px 15px;display:flex;align-items:center;gap:7px;font-size:.76rem;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:9000;min-width:200px;max-width:90vw;transition:transform .35s var(--spring);}
.statusbar.show{transform:translateX(-50%) translateY(0);}
.statusbar.success{border-left:3px solid var(--em);}.statusbar.error{border-left:3px solid var(--rd);}.statusbar.info{border-left:3px solid var(--v);}
.loadover{position:fixed;inset:0;background:rgba(5,6,12,.7);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:8000;opacity:0;visibility:hidden;transition:all .2s;}
.loadover.show{opacity:1;visibility:visible;}
.spinner{width:30px;height:30px;border:2.5px solid var(--b1);border-top-color:var(--v);border-radius:50%;animation:spin .7s linear infinite;box-shadow:0 0 12px var(--vg);}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

.chk-box{background:var(--g1);border:1px solid var(--b1);border-radius:var(--rs);padding:14px;}
.chk-item{font-size:0.75rem; color:var(--t2); display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:500;}
.chk-item i{width:16px; text-align:center;}
.chk-item.pass{color:var(--em);}
.chk-item.fail{color:var(--rd);}

.secure-img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.btn-cam-trigger{margin-top:10px;padding:8px 16px;background:var(--g3);border:1px solid var(--b2);border-radius:var(--rx);color:var(--t2);font-size:.72rem;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;}
.btn-cam-trigger:hover{background:var(--v);color:#fff;border-color:var(--v);transform:translateY(-2px);}

/* Camera Overlay */
.camera-overlay{position:fixed;inset:0;background:rgba(5,6,12,.95);z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s;}
.camera-overlay.show{opacity:1;visibility:visible;}
.camera-modal{background:#0a0c18;border:1px solid var(--b2);border-radius:var(--r);width:min(94vw,500px);overflow:hidden;box-shadow:0 32px 64px rgba(0,0,0,.8);}
.camera-hd{padding:12px 16px;border-bottom:1px solid var(--b1);display:flex;justify-content:space-between;align-items:center;}
.camera-title{font-size:.85rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px;}
.camera-title i{color:var(--em);}
.camera-view{position:relative;background:#000;aspect-ratio:3/4;overflow:hidden;}
#cameraVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
.camera-silhouette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;}
.camera-hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:.65rem;padding:5px 12px;border-radius:20px;white-space:nowrap;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);}
.camera-ft{padding:16px;display:flex;justify-content:center;background:var(--g2);}
.btn-capture{width:60px;height:60px;border-radius:50%;border:4px solid #fff;background:var(--rd);color:#fff;font-size:0;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.btn-capture:hover{transform:scale(1.1);background:#ff4d4d;}
.btn-capture:active{transform:scale(0.9);}

/* Trust Section */
.trust-section{padding:40px 20px;max-width:900px;margin:0 auto;border-top:1px solid var(--b1);}
.trust-badges{display:flex;justify-content:center;gap:25px;margin-bottom:30px;flex-wrap:wrap;}
.trust-badge{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--t2);font-weight:600;}
.trust-badge i{color:var(--em);font-size:.9rem;}
.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:600px){.testimonial-grid{grid-template-columns:1fr;}}
.t-card{background:var(--g2);padding:20px;border-radius:var(--rs);border:1px solid var(--b1);transition:transform .2s;}
.t-card:hover{transform:translateY(-4px);border-color:var(--v);}
.t-stars{color:#f5a623;font-size:.7rem;margin-bottom:10px;}
.t-card p{font-size:.78rem;color:var(--t1);line-height:1.6;font-style:italic;margin-bottom:12px;}
.t-author{font-size:.68rem;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}