/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --white:#FFF;
    --black:#000;
    --blue:#4287F5;
    --blue-deep:#2E6BDE;
    --blue-soft:#EEF4FE;
    --blue-mist:#DCE8FD;
    --ink:#0E1626;
    --slate:#5B6B85;
    --slate-2:#93A0B4;
    --line:rgba(14,22,38,.09);
    --line-2:rgba(14,22,38,.05);
    --green:#1FAA6E;
    --red:#E64848;
    --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
    --shadow-1:0 1px 2px rgba(14,22,38,.05), 0 1px 3px rgba(14,22,38,.04);
    --shadow-2:0 8px 24px rgba(14,22,38,.08), 0 2px 8px rgba(66,135,245,.06);
    --shadow-3:0 30px 70px rgba(14,22,38,.16), 0 10px 26px rgba(66,135,245,.12);
    --spring:cubic-bezier(.34,1.56,.64,1);
    --ease:cubic-bezier(.4,0,.2,1);
  }
  *,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; overflow:hidden;}
  body{
    background:var(--white); color:var(--ink); font-family:'DM Sans',sans-serif;
    font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  button{cursor:pointer; border:none; background:none; font-family:inherit;}
  input,select,textarea{font-family:inherit;}
  img{max-width:100%; display:block;}
  ::-webkit-scrollbar{width:5px;}
  ::-webkit-scrollbar-track{background:var(--blue-soft);}
  ::-webkit-scrollbar-thumb{background:var(--blue); border-radius:3px;}
  :focus-visible{outline:2.5px solid var(--blue); outline-offset:2px; border-radius:6px;}

* { -webkit-tap-highlight-color: transparent; }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  }

  /* ============================================================ KEYFRAMES */
  @keyframes fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes scaleSpring{from{opacity:0; transform:scale(.92)}to{opacity:1; transform:scale(1)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
  @keyframes pulseGlow{0%,100%{opacity:.55; transform:scale(1)}50%{opacity:1; transform:scale(1.04)}}
  @keyframes blobMove1{0%,100%{transform:translate(0,0) scale(1) rotate(0)}33%{transform:translate(60px,-40px) scale(1.12) rotate(8deg)}66%{transform:translate(-30px,30px) scale(.94) rotate(-6deg)}}
  @keyframes blobMove2{0%,100%{transform:translate(0,0) scale(1) rotate(0)}33%{transform:translate(-50px,35px) scale(.92) rotate(-8deg)}66%{transform:translate(35px,-25px) scale(1.08) rotate(5deg)}}
  @keyframes blobMove3{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes driftDot{0%,100%{transform:translate(0,0); opacity:.25}50%{transform:translate(var(--dx,10px),var(--dy,-14px)); opacity:.6}}
  @keyframes checkDraw{to{stroke-dashoffset:0}}
  @keyframes confettiBurst{0%{transform:translate(0,0) scale(1); opacity:1}100%{transform:translate(var(--cx),var(--cy)) scale(.3); opacity:0}}
  @keyframes shimmerSweep{0%{background-position:-360px 0}100%{background-position:360px 0}}
  @keyframes ringSpin{to{transform:rotate(360deg)}}

  body {
    margin: 7px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    
    background-image: url("/images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    opacity: 1;
    filter: blur(1px);
    transform: scale(1.1);
    z-index: -1;
  }

  /*.container {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
  }*/

  /* ============================================================ AMBIENT BACKGROUND */
  .bg-ambient{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .blob{position:absolute; border-radius:50%; filter:blur(70px);}
  .blob.b1{width:560px; height:560px; top:-180px; right:-140px; background:radial-gradient(circle,rgba(66,135,245,.16),transparent 70%); animation:blobMove1 26s ease-in-out infinite;}
  .blob.b2{width:420px; height:420px; bottom:-160px; left:-100px; background:radial-gradient(circle,rgba(66,135,245,.12),transparent 70%); animation:blobMove2 22s ease-in-out infinite;}
  .blob.b3{width:300px; height:300px; top:40%; left:50%; background:radial-gradient(circle,rgba(66,135,245,.07),transparent 70%); animation:blobMove2 30s ease-in-out infinite reverse;}
  .ring-orbit{position:absolute; top:50%; left:80%; width:640px; height:640px; border:1px solid rgba(66,135,245,.09); border-radius:50%; transform:translate(-50%,-50%); animation:blobMove3 90s linear infinite;}
  .ring-orbit::after{content:''; position:absolute; top:-3px; left:50%; width:6px; height:6px; background:var(--blue); border-radius:50%; opacity:.5;}
  .bg-dots{position:absolute; inset:0;}
  .dot{position:absolute; width:3px; height:3px; background:var(--blue); border-radius:50%; animation:driftDot var(--dur,8s) ease-in-out infinite; opacity:.3;}
  .bg-grid{position:absolute; inset:0; background-image:radial-gradient(circle,rgba(66,135,245,.16) 1px,transparent 1px); background-size:34px 34px; opacity:.05;}

  /* ============================================================ APP SHELL */
  .app-shell {
    position:relative; z-index:1; height:98.2vh;
    height:100dvh; display:flex; flex-direction:column;
    transition:filter .5s var(--ease), opacity .5s var(--ease);

    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 20px;
  }
  .app-shell.inert{filter:blur(14px); opacity:.6; pointer-events:none;}

  /* ---- top bar ---- */
  .topbar {
    flex:0 0 auto; height:clamp(60px,8vh,74px); display:flex; align-items:center;
    justify-content:space-between; padding:0 clamp(20px,4vw,48px); 
    border-bottom:1px solid var(--line);

    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
  }
  /*.brand{display:flex; align-items:center; gap:6px; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px; color:var(--blue);}*/
  .brand .dot{width:6px; height:6px; background:var(--blue); border-radius:50%; margin-top:1px;}
  .brand small{font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600; color:var(--slate-2); letter-spacing:.6px; text-transform:uppercase; margin-left:8px; padding-left:8px; border-left:1px solid var(--line);}

  .stepper-pills{display:flex; align-items:center; gap:10px;}
  .step-pill{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--slate-2); transition:color .3s;}
  .step-pill.active{color:var(--ink);}
  .step-pill.done{color:var(--slate);}
  .step-pill .num {
    width:23px; height:23px; border-radius:50%;
    border:1.5px solid var(--blue); display:flex;
    align-items:center; justify-content:center; color: var(--blue);
    background: rgba(255, 255, 255, 0); font-size:11px; font-weight:700; 
    transition:all .35s var(--spring); flex-shrink:0;
  }
  .step-pill.active .num{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 0 0 5px var(--blue-soft);}
  .step-pill.done .num{background:var(--green); border-color:var(--green); color:#fff;}
  .step-pill .lbl{display:none;}
  @media(min-width:640px){ .step-pill .lbl{display:inline; color: var(--blue);} }
  .step-connector{width:clamp(24px,4vw,44px); height:1.5px; background:var(--blue); opacity: 0.5; position:relative; overflow:hidden; border-radius:2px;}
  .step-connector .fill{position:absolute; inset:0; background:var(--blue); width:0; transition:width .6s var(--ease);}
  .step-connector.done .fill{width:100%;}

  .btn-exit{font-size:12.5px; font-weight:600; color:var(--slate-2); display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:100px; transition:all .25s;}
  .btn-exit:hover{color:var(--ink); background:var(--blue-soft);}
  .btn-exit svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;}

  /* ---- steps viewport ---- */
  .steps-viewport{position:relative; flex:1 1 auto; overflow:hidden;}
  .step-panel{
    position:absolute; inset:0; display:grid; grid-template-columns:1.25fr 1fr;
    transition:transform .6s var(--spring), opacity .5s var(--ease), filter .5s var(--ease);
  }

  #stepsViewport[data-step="1"] .panel-1{transform:translateX(0); opacity:1; filter:blur(0); pointer-events:all; z-index:2;}
  #stepsViewport[data-step="1"] .panel-2{transform:translateX(3%); opacity:0; filter:blur(6px); pointer-events:none; z-index:1;}

  #stepsViewport[data-step="2"] .panel-1{transform:translateX(-3%); opacity:0; filter:blur(6px); pointer-events:none; z-index:1;}
  #stepsViewport[data-step="2"] .panel-2{transform:translateX(0); opacity:1; filter:blur(0); pointer-events:all; z-index:2; margin-top: 10px;}

  .form-col{height:100%; overflow-y:auto; padding:clamp(22px,3.6vh,44px) clamp(24px,4.4vw,64px);}
  .side-col {
    height:100%; overflow:hidden; position:relative; display:flex; flex-direction:column; 
    justify-content: top; padding:clamp(24px,4vh,48px);
    border-radius: 20px; align-items: center; margin-left: 8px;

    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
  }

  .side-col .trust-panel {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
  }

  .panel-eyebrow{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--blue-deep); margin-bottom:10px; opacity:0; animation:fadeUp .5s var(--ease) .05s forwards;}
  .panel-title{font-family:'Outfit',serif; font-weight:400; font-size:clamp(24px,2.6vw,32px); line-height:1.15; margin-bottom:8px; opacity:0; animation:fadeUp .55s var(--ease) .1s forwards;}
  .panel-title em{font-style:italic; color:var(--blue);}
  .panel-sub{font-size:13px; color:var(--slate); margin-bottom:clamp(18px,3vh,30px); max-width:440px; opacity:0; animation:fadeUp .55s var(--ease) .15s forwards;}

  /* ============================================================ FORM COMPONENTS */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
  .form-grid.g1{grid-template-columns:1fr;}
  .field{display:flex; flex-direction:column; gap:5px; opacity:0; animation:fadeUp .45s var(--ease) forwards;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:11.5px; font-weight:600; color:var(--slate); display:flex; align-items:center; gap:5px; letter-spacing:.1px;}
  .field label .req{color:var(--blue); font-size:13px; line-height:1;}
  .field label .opt{font-size:9.5px; font-weight:600; color:var(--slate-2); background:var(--line-2); padding:1px 6px; border-radius:100px; text-transform:uppercase; letter-spacing:.4px;}

  .input-wrap{position:relative;}
  .input,.select,.textarea{
    width:100%; height:42px; padding:0 14px; border-radius:11px; border:1px solid var(--line);
    font-size:13px; color:var(--ink); outline:none; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;

    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
  }
  .input:focus,.select:focus,.textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-soft);}
  .input:disabled{background:var(--line-2); color:var(--slate-2); cursor:not-allowed;}
  .input.has-status {
    padding-right:38px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
  }
  .textarea{height:auto; min-height:74px; padding:10px 14px; resize:none; line-height:1.6;}
  .select{appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2393A0B4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:32px;}

  .input.valid{border-color:#BEE3CE;}
  .input.invalid{border-color:#F3C2C2; animation:shakeX .4s;}
  .input-status{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
  .input-status svg{width:14px; height:14px; fill:none; stroke-width:2.5;}
  .input-status.ok svg{stroke:var(--green);}
  .input-status.bad svg{stroke:var(--red);}
  .spinner-sm{width:13px; height:13px; border:2px solid var(--blue-mist); border-top-color:var(--blue); border-radius:50%; animation:spin .7s linear infinite;}

  .field-msg{font-size:10.5px; height:0; opacity:0; overflow:hidden; transition:all .25s var(--ease); color:var(--red);}
  .field-msg.show{height:14px; opacity:1;}
  .field-msg.ok{color:var(--green);}
  .field-hint{font-size:10.5px; color:var(--slate-2);}

  /* segmented control */
  .seg-control {
    position:relative; display:flex; /*background: var(--blue-soft);*/ 
    border-radius:100px; padding:4px; gap:2px;

    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
  }
  .seg-pill-bg {
    position:absolute; top:4px; bottom:4px; left:4px;
    width:calc(50% - 6px); border-radius:100px;
    box-shadow:var(--shadow-1);
    transition:left .35s var(--spring);

    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
  }
  .seg-btn{position:relative; z-index:1; flex:1; text-align:center; padding:9px 12px; font-size:12.5px; font-weight:700; color:var(--slate); border-radius:100px; transition:color .3s;}
  .seg-btn.active{color:var(--blue-deep);}

  /* switch */
  .switch-row{display:flex; align-items:center; justify-content:space-between; gap:14px;}
  .switch-text strong{font-size:12.5px; font-weight:700; display:block;}
  .switch-text span{font-size:11px; color:var(--slate-2);}
  .switch{width:40px; height:23px; border-radius:100px; background:var(--line); position:relative; transition:background .3s var(--ease); flex-shrink:0;}
  .switch::after{content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .3s var(--spring);}
  .switch.on{background:var(--blue);}
  .switch.on::after{transform:translateX(17px);}

  /* chip multiselect */
  .chip-row{display:flex; gap:8px; flex-wrap:wrap;}
  .chip-opt{padding:7px 13px; border-radius:100px; border:1.5px solid var(--line); font-size:11.5px; font-weight:600; color:var(--slate); transition:all .25s var(--spring);}
  .chip-opt.on{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-1px);}
  .chip-opt:hover:not(.on){border-color:var(--blue-mist); color:var(--blue-deep);}

  /* swatches */
  .swatch-row{display:flex; align-items:center; gap:9px;}
  .swatch{width:26px; height:26px; border-radius:50%; cursor:pointer; transition:transform .25s var(--spring); position:relative; flex-shrink:0; background:var(--sc);}
  .swatch.on{transform:scale(1.2); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--sc);}
  .swatch.custom{background:conic-gradient(from 0deg,#F0A93A,#4287F5,#1FAA6E,#F2637B,#F0A93A); display:flex; align-items:center; justify-content:center;}
  .swatch.custom input{position:absolute; inset:0; opacity:0; cursor:pointer;}

  /* upload dropzones */
  .upload-zone{
    border:1.5px dashed var(--line); border-radius:14px; cursor:pointer; position:relative; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
    transition:all .3s var(--ease); background:var(--line-2);
  }
  .upload-zone:hover{border-color:var(--blue); background:var(--blue-soft);}
  .upload-zone.dragover{border-color:var(--blue); background:var(--blue-soft); transform:scale(1.02);}
  .upload-zone svg{width:18px; height:18px; fill:none; stroke:var(--black); stroke-width:1.6;}
  .upload-zone .uz-txt{font-size:10.5px; color:var(--black); font-weight:600; padding:0 6px;}
  .upload-zone.has-file{border-style:solid; border-color:var(--line);}
  .upload-zone img.uz-preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .uz-remove{position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(14,22,38,.6); color:#fff; display:flex; align-items:center; justify-content:center; z-index:2; transition:background .2s;}
  .uz-remove:hover{background:var(--red);}
  .uz-remove svg{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.5;}
  #dzLogo{width:64px; height:64px; border-radius:16px;}
  #dzCover{flex:1; height:64px; border-radius:14px;}
  .upload-row{display:flex; gap:12px; align-items:flex-start;}

  /* buttons */
  .btn-primary{
    height:46px; padding:0 24px; border-radius:100px; background:var(--blue); color:#fff;
    font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all .3s var(--spring); box-shadow:0 10px 24px rgba(66,135,245,.28); width:100%;
  }
  .btn-primary:hover:not(:disabled){background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 16px 34px rgba(66,135,245,.36);}
  .btn-primary:disabled{background:#E4E9F1; color:#AEB8C6; box-shadow:none; cursor:not-allowed;}
  .btn-primary svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.5;}
  .btn-row{display:flex; gap:10px;}
  .btn-ghost-sm {
    height:46px; padding:0 18px; border-radius:100px; 
    border:1.5px solid var(--line); color:var(--slate); 
    font-weight:600; font-size:13px; transition:all .25s; 
    flex-shrink:0; display: flex; align-items: center;
    justify-content: center;
  }
  .btn-ghost-sm:hover {
    border-color:var(--slate-2); color:var(--ink);
    display: flex; align-items: center;
  }

  .actions-block{margin-top:18px; opacity:0; animation:fadeUp .5s var(--ease) forwards;}

  /* trust panel (step 1 side) */
  .trust-list {
    display:flex; flex-direction:column; 
    gap:14px; margin-bottom:26px;

    background: transparent;
    border-radius: 20px;
  }
  .trust-item{display:flex; align-items:flex-start; gap:12px; opacity:0; animation:fadeUp .5s var(--ease) forwards;}
  .trust-ico {
    width:34px; height:34px; border-radius:10px; 
    border:1px solid var(--line); display:flex; align-items:center; 
    justify-content:center; flex-shrink:0; box-shadow:var(--shadow-1);
    
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
  }
  .trust-ico svg{width:15px; height:15px; fill:none; stroke:var(--blue); stroke-width:2;}
  .trust-item strong{font-size:12.5px; display:block; margin-bottom:1px;}
  .trust-item span{font-size:11.5px; color:var(--slate);}

  .checklist {
    display:flex; flex-direction:column; gap:10px;
    border:1px solid var(--line); border-radius:14px; padding:16px; 
    box-shadow:var(--shadow-1);
    
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
  }
  .checklist-title{font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--slate-2); margin-bottom:2px;}
  .check-row{display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; color:var(--slate-2); transition:color .3s;}
  .check-row.done{color:var(--ink);}
  .check-circle{width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s var(--spring);}
  .check-row.done .check-circle{background:var(--green); border-color:var(--green);}
  .check-circle svg{width:10px; height:10px; fill:none; stroke:#fff; stroke-width:3; opacity:0; transition:opacity .2s;}
  .check-row.done .check-circle svg{opacity:1;}

  /* ============================================================ STORE PREVIEW (step 2 side) */
  .preview-frame{
    max-width: 70%; border-radius: 25px; min-width: 60%;
    max-width: 75%; min-height: 0%; max-height: 95%;
    flex:1; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    box-shadow:var(--shadow-3); display:flex; flex-direction:column; max-height:100%;
  }
  .pf-browser-bar{height:30px; flex-shrink:0; display:flex; align-items:center; gap:6px; padding:0 12px; background:var(--line-2); border-bottom:1px solid var(--line);}
  .pf-dot{width:6px; height:6px; border-radius:50%; background:var(--line);}
  .pf-url{flex:1; text-align:center; font-size:9.5px; color:var(--slate-2); font-weight:600;}
  .pf-body{flex:1; overflow:hidden; display:flex; flex-direction:column;}
  .pf-cover {
    height:64px; position:relative; transition:background .4s var(--ease);
    flex-shrink:0; background:var(--blue); z-index: 90;
  }
  .pf-cover img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
  .pf-content {
    align-items: baseline; z-index: 99;
    flex:1; padding: 35px 10px; position:relative; 
    overflow:hidden; display:flex; flex-direction:column;
  }
  .pf-avatar-wrap {
    position: relative; z-index: 99;
    margin-top:-26px; margin-bottom:8px;
  }
  .pf-avatar {
    position: relative; z-index: 99;
    width:52px; height:52px; border-radius:14px; border:3px solid #fff;
    box-shadow:var(--shadow-2); display:flex; align-items:center; justify-content:center;
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:19px; color:#fff;
    background:var(--blue); transition:background .4s var(--ease); overflow:hidden;
  }
  .pf-avatar img{width:100%; height:100%; object-fit:cover;}
  .pf-name{font-family:'Outfit',serif; font-weight:500; font-size:16px; margin-bottom:2px; transition:color .3s;}
  .pf-cat{display:inline-flex; font-size:9.5px; font-weight:700; color:#fff; padding:2px 9px; border-radius:100px; margin-bottom:8px; transition:background .4s var(--ease); background:var(--blue);}
  .pf-desc{font-size:11px; font-weight: 400; color:var(--slate); line-height:1.6; margin-bottom:12px; flex:1; overflow:hidden;}
  .pf-slogan{font-size:13px; font-weight: 600; color:var(--blue); line-height:1.6; margin-bottom:0px; flex:1; overflow:hidden;}
  .pf-badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
  .pf-badge {
    font-size:9px; font-weight:700; padding:3px 9px; border-radius:100px; 
    border: 1px solid; color:var(--blue-deep); display:flex; 
    align-items:center; gap:4px; opacity:0; transform:scale(.8); 
    transition:all .3s var(--spring);
  }
  .pf-badge.show{opacity:1; transform:scale(1);}
  .pf-follow-btn{width:100%; padding:9px; border-radius:100px; color:#fff; font-weight:700; font-size:11.5px; transition:background .4s var(--ease); background:var(--blue); text-align:center;}

  /* ============================================================ MOBILE SUBSTEP NAV */
  .substep-dots{display:none; gap:6px; margin-bottom:16px;}
  .substep-dots .d{width:6px; height:6px; border-radius:50%; background:var(--line); transition:all .3s var(--ease);}
  .substep-dots .d.on{background:var(--blue); width:18px; border-radius:4px;}
  .substep-nav{display:none; gap:10px; margin-top:16px;}
  .subgroup{transition:opacity .35s var(--ease), transform .35s var(--ease);}

  /* mobile preview FAB + sheet */
  .preview-fab{display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:700; background:var(--ink); color:#fff; padding:11px 20px; border-radius:100px; font-size:12.5px; font-weight:700; align-items:center; gap:8px; box-shadow:0 14px 30px rgba(14,22,38,.3);}
  .preview-fab svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2;}
  .preview-sheet-ov{display:none; position:fixed; inset:0; background:rgba(14,22,38,.4); z-index:1500; opacity:0; pointer-events:none; transition:opacity .3s;}
  .preview-sheet-ov.on{opacity:1; pointer-events:all;}

  /* ============================================================ AUTH GATE */
  .auth-gate {
    position:fixed; inset:0; z-index:5000; display:flex;
    align-items:center; justify-content:center; margin: 10px;
    transition:opacity .5s var(--ease); padding:20px;
    background: rgba(0, 0, 0, 0);
    
    /*background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;*/
  }
  .auth-gate.hidden{opacity:0; pointer-events:none;}
  .gate-checking{display:flex; flex-direction:column; align-items:center; gap:16px; animation:fadeIn .4s var(--ease);}
  .gate-ring{width:44px; height:44px; border:3px solid var(--blue-mist); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite;}
  .gate-checking p{font-size:13px; color:var(--slate); font-weight:500;}

  .login-card{
    width:100%; max-width:400px; background:#fff; border-radius:var(--r-xl); border:1px solid var(--line);
    box-shadow:var(--shadow-3); padding:40px 36px; animation:scaleSpring .5s var(--spring);
  }
  .login-brand{display:flex; align-items:center; gap:6px; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:22px; color:var(--blue); margin-bottom:26px;}
  .login-brand .dot{width:6px; height:6px; background:var(--blue); border-radius:50%; margin-top:1px;}
  .login-card h2{font-family:'Outfit',serif; font-weight:500; font-size:25px; margin-bottom:8px;}
  .login-card p.sub{font-size:12.5px; color:var(--slate); line-height:1.65; margin-bottom:24px;}
  .login-card p.sub strong{color:var(--ink);}
  .login-field{margin-bottom:14px;}
  .login-field label{font-size:11.5px; font-weight:600; color:var(--slate); margin-bottom:6px; display:block;}
  .btn-login{width:100%; height:46px; border-radius:100px; background:var(--blue); color:#fff; font-weight:700; font-size:13.5px; margin-top:6px; transition:all .3s var(--spring); box-shadow:0 10px 24px rgba(66,135,245,.28); display:flex; align-items:center; justify-content:center; gap:8px;}
  .btn-login:hover{background:var(--blue-deep); transform:translateY(-2px);}
  .btn-login.loading{pointer-events:none;}
  .login-foot{text-align:center; margin-top:18px; font-size:11.5px; color:var(--slate-2);}
  .login-foot a{color:var(--blue); font-weight:600;}
  .login-foot a:hover{text-decoration:underline;}

  /* ============================================================ CONFIRM MODAL (exit) */
  .confirm-ov{position:fixed; inset:0; z-index:4000; background:rgba(14,22,38,.4); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(4px);}
  .confirm-ov.on{opacity:1; pointer-events:all;}
  .confirm-card{background:#fff; border-radius:var(--r-lg); padding:30px; max-width:360px; width:100%; box-shadow:var(--shadow-3); transform:scale(.9); transition:transform .3s var(--spring);}
  .confirm-ov.on .confirm-card{transform:scale(1);}
  .confirm-card h3{font-family:'Outfit',serif; font-weight: 400; font-size:20px; margin-bottom:8px;}
  .confirm-card p{font-size:12.5px; color:var(--slate); line-height:1.6; margin-bottom:22px;}

  /* ============================================================ SUCCESS SCREEN */
  .success-screen {
    position:fixed; inset:0; z-index:6000;
    display:flex; align-items:center; justify-content:center; 
    background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(16px);
    opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
  }
  .success-screen.on{opacity:1; pointer-events:all;}
  .success-inner{text-align:center; max-width:420px; padding:20px; position:relative;}
  .success-check{width:84px; height:84px; border-radius:50%; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; position:relative;}
  .success-check svg{width:38px; height:38px;}
  .success-check i{width:38px; height:38px;}
  .success-check path{fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:checkDraw .6s var(--ease) .3s forwards;}
  .confetti-piece{position:absolute; width:7px; height:7px; border-radius:2px; top:50%; left:50%; animation:confettiBurst 1s var(--ease) forwards;}
  .success-inner h2{font-family:'Outfit',serif; font-weight:400; font-size:30px; margin-bottom:12px; opacity:0; animation:fadeUp .5s var(--ease) .4s forwards;}
  .success-inner p{color:var(--slate); font-size:13.5px; line-height:1.7; margin-bottom:30px; opacity:0; animation:fadeUp .5s var(--ease) .48s forwards;}
  .success-btns{display:flex; gap:10px; justify-content:center; opacity:0; animation:fadeUp .5s var(--ease) .56s forwards;}

  /* ============================================================ TOASTS */
  .toast-stack{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:7000; display:flex; flex-direction:column; gap:8px; align-items:center;}
  .toast{position:relative; overflow:hidden; min-width:260px; max-width:380px; background:var(--ink); color:#fff; padding:13px 18px; border-radius:13px; font-size:12.5px; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:0 20px 44px rgba(14,22,38,.28); animation:scaleSpring .4s var(--spring);}
  .toast.error{background:#3D1414;}
  .toast .t-ico{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .toast.success .t-ico{background:rgba(31,170,110,.2); color:var(--green);}
  .toast.error .t-ico{background:rgba(230,72,72,.2); color:#FF8A8A;}
  .toast .t-ico svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.5;}

  /* CEP LOADER POPUP */
  .cep-loader-ov {
    position: fixed; 
    inset: 0; 
    z-index: 5500;
    background: rgba(14,22,38,.4); 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    display: flex; 
    align-items: center; 
    justify-content: center;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity .3s var(--ease);
  }
  .cep-loader-ov.on { 
    opacity: 1; 
    pointer-events: all; 
  }
  .cep-loader-card {
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6); 
    border-radius: var(--r-md);
    padding: 24px 32px; 
    text-align: center; 
    box-shadow: var(--shadow-3);
    transform: scale(0.9); 
    transition: transform .3s var(--spring);
  }
  .cep-loader-ov.on .cep-loader-card { 
    transform: scale(1); 
  }
  .cep-loader-card p { 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--slate); 
    margin: 0; 
  }

  /* ============================================================ RESPONSIVE */
  @media (max-width:1080px){
    .step-panel{grid-template-columns:1.15fr .95fr;}
    .form-grid{gap:10px 12px;}
  }
  @media (max-width:900px){
    .checklist{padding:13px;}
  }
  @media (max-width:820px){
    .step-panel{grid-template-columns:1fr;}
    .side-col.trust-panel{display:none;}
    .side-col.preview-panel{
      position:fixed; left:0; right:0; bottom:0; top:auto; height:72vh; z-index:1600;
      border-radius:24px 24px 0 0; box-shadow:0 -20px 50px rgba(14,22,38,.2);
      transform:translateY(105%); transition:transform .45s var(--spring); border-left:none; border-top:1px solid var(--line);
    }
    .side-col.preview-panel.open{transform:translateY(0);}
    .preview-sheet-ov{display:block;}
    #stepsViewport[data-step="2"] .preview-fab{display:flex;}
    .substep-dots{display:flex;}
    .substep-nav{display:flex;}
    .subgroup.hide-mobile{opacity:0; transform:translateX(16px); pointer-events:none; position:absolute; top:0; left:0; right:0;}
    #stepsViewport{position:relative;}
  }
  @media (max-width:560px){
    .topbar{padding:0 16px;}
    .form-col{padding:18px 18px 90px;}
    .form-grid{grid-template-columns:1fr;}
    .form-grid .field:not(.full){grid-column:1/-1;}
    .btn-row{flex-direction:column-reverse;}
    .btn-ghost-sm{width:0%;}
    .login-card{padding:30px 24px;}
  }