:root {
    --bg: #080808;
    --bg-card: #111111;
    --accent: #bc6ff1;
    --accent-hover: #d285ff;
    --accent-glow: rgba(188,111,241,0.25);
    --green: #10b981;
    --border: #2a2a2a;
    --text: #ffffff;
    --text-sec: #8b929e;
    --text-muted: #6b7280;
    --glass: rgba(18,18,18,0.97);
    --shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* ── GLOBAL SLIM SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(188,111,241,0.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(188,111,241,0.6); }
* { scrollbar-width: thin; scrollbar-color: rgba(188,111,241,0.35) transparent; }

*{box-sizing:border-box;margin:0;padding:0;}
html{background:#050505;overscroll-behavior-y:none;}
body{font-family:'Inter',sans-serif;background:radial-gradient(ellipse at 20% 0%,#1a0a2e 0%,#0a0a0a 50%,#050505 100%);background-attachment:fixed;color:var(--text);line-height:1.6;min-height:100vh;}
h1,h2,h3{font-family:'Outfit',sans-serif;}

/* NAV */
.topnav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:60px;background:rgba(8,8,8,0.9);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);}
.back-link{display:flex;align-items:center;gap:8px;color:var(--text-sec);text-decoration:none;font-size:.9rem;transition:color .2s;min-width:160px;}
.back-link:hover{color:var(--text);}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:2px;text-transform:uppercase;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;}
.nav-logo{height:28px;filter:drop-shadow(0 0 8px var(--accent-glow));}
.nav-auth{display:flex;align-items:center;gap:10px;min-width:160px;justify-content:flex-end;}
.nav-user-pill{display:flex;align-items:center;gap:8px;background:rgba(188,111,241,.1);border:1px solid rgba(188,111,241,.3);border-radius:99px;padding:6px 14px;font-size:.85rem;}
.nav-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;}
.nav-login-btn{background:var(--accent);color:#fff;border:none;border-radius:99px;padding:8px 18px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s;}
.nav-login-btn:hover{background:var(--accent-hover);}
.nav-logout-btn{background:transparent;color:var(--text-sec);border:1px solid var(--border);border-radius:99px;padding:6px 14px;font-size:.82rem;cursor:pointer;transition:all .2s;}
.nav-logout-btn:hover{color:var(--text);border-color:#555;}
.nav-disenos-btn{background:rgba(188,111,241,.12);color:var(--accent);border:1px solid rgba(188,111,241,.35);border-radius:99px;padding:6px 16px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;}
.nav-disenos-btn:hover{background:rgba(188,111,241,.22);border-color:var(--accent);}

/* NAV — MOBILE */
@media(max-width:640px){
  .topnav{padding:0 .75rem;height:54px;}
  /* Brand stays centered via absolute — prevent overflow clash */
  .nav-brand{font-size:.85rem;letter-spacing:1px;pointer-events:none;}
  /* Back link: show only the arrow icon to save space */
  .back-link .back-text{display:none;}
  .back-link{min-width:auto;padding:6px;}
  /* Mis Diseños: hidden in nav on mobile (lives in FAB instead) */
  .nav-disenos-desktop{display:none!important;}
  /* User pill: hide name, show only avatar */
  .nav-user-pill .nav-name{display:none;}
  .nav-user-pill{padding:3px 3px 3px 3px;border-radius:50%;}
  /* Auth compact */
  .nav-login-btn{padding:6px 12px;font-size:.78rem;}
  .nav-logout-btn{padding:5px 10px;font-size:.75rem;}
  .nav-auth{min-width:auto;gap:6px;}
}

/* ── MIS DISEÑOS FAB (mobile only) ── */
.mis-disenos-fab{
  display:none; /* hidden by default — shown only on mobile via media query */
}
@media(max-width:640px){
  .mis-disenos-fab{
    display:flex;
    align-items:center;
    gap:8px;
    position:fixed;
    bottom:1.2rem;
    right:1.1rem;
    z-index:900;
    background:linear-gradient(135deg,var(--accent),#7c3aed);
    color:#fff;
    border:none;
    border-radius:99px;
    padding:11px 18px 11px 14px;
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:.85rem;
    letter-spacing:.5px;
    box-shadow:0 6px 24px rgba(188,111,241,.45);
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
  }
  .mis-disenos-fab:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(188,111,241,.6);
  }
  .mis-disenos-fab:active{transform:scale(.96);}
}

/* VERIFY BANNER */
.verify-banner{background:linear-gradient(135deg,#1a1200,#2a1800);border-bottom:1px solid #5a3e00;padding:10px 2rem;display:flex;align-items:center;justify-content:center;gap:14px;font-size:.88rem;color:#fbbf24;margin-top:60px;}
.verify-banner button{background:#fbbf24;color:#000;border:none;border-radius:20px;padding:4px 14px;font-size:.82rem;font-weight:700;cursor:pointer;}

/* AUTH OVERLAY */
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s;}
.auth-overlay.show{opacity:1;visibility:visible;}
.auth-card{width:95%;max-width:460px;padding:2.5rem;border-radius:20px;border:1px solid rgba(188,111,241,0.2);position:relative;max-height:92vh;overflow-y:auto;background:rgba(10,10,18,0.98);box-shadow:0 0 0 1px rgba(188,111,241,0.08),0 30px 80px rgba(0,0,0,0.8),0 0 60px rgba(188,111,241,0.06);scrollbar-width:thin;scrollbar-color:rgba(188,111,241,0.25) transparent;}
.auth-card::-webkit-scrollbar{width:3px;}
.auth-card::-webkit-scrollbar-track{background:transparent;}
.auth-card::-webkit-scrollbar-thumb{background:rgba(188,111,241,0.3);border-radius:99px;}
.auth-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-sec);font-size:1.3rem;cursor:pointer;line-height:1;transition:color .2s;}
.auth-close:hover{color:var(--text);}
.auth-header{text-align:center;margin-bottom:2rem;}
.auth-logo{height:48px;margin-bottom:1rem;filter:drop-shadow(0 0 12px var(--accent-glow));}
.auth-header h1{font-size:1.8rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:.4rem;}
.auth-header p{color:var(--text-sec);font-size:.9rem;}
.social-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem;}
.social-btn{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:10px;border:1px solid var(--border);background:#1a1a1a;color:var(--text);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;}
.social-btn:hover{background:#222;border-color:#555;}
.social-btn.google:hover{border-color:#4285F4;}
.social-btn.microsoft:hover{border-color:#7fba00;}
.social-btn.apple:hover{border-color:#888;}
.divider{text-align:center;position:relative;margin:1.2rem 0;}
.divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border);}
.divider span{position:relative;background:var(--glass);padding:0 12px;color:var(--text-sec);font-size:.82rem;}
.tab-switch{display:flex;gap:4px;background:#0d0d0d;border-radius:10px;padding:4px;margin-bottom:1.2rem;}
.tab-pill{flex:1;padding:8px;border:none;border-radius:7px;background:transparent;color:var(--text-sec);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;}
.tab-pill.active{background:var(--accent);color:#fff;}
.email-fields{display:flex;flex-direction:column;gap:14px;}
.email-fields.hidden{display:none;}
.field-group{display:flex;flex-direction:column;gap:6px;}
.field-group label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-sec);font-weight:600;}
.field-group input{background:#0d0d0d;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.95rem;padding:11px 14px;outline:none;transition:border .2s;}
.field-group input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);}
.forgot-link{background:transparent;border:none;color:var(--accent);font-size:.8rem;cursor:pointer;text-align:right;margin-top:2px;}
.auth-submit{padding:13px;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s;text-transform:uppercase;letter-spacing:1px;}
.auth-submit:hover{background:var(--accent-hover);}
.auth-message{margin-top:1rem;padding:10px 14px;border-radius:8px;font-size:.85rem;display:none;}
.auth-message.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5;}
.auth-message.success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#6ee7b7;}
.auth-message.info{background:rgba(188,111,241,.1);border:1px solid rgba(188,111,241,.3);color:#d8b4fe;}

/* LOGIN GATE */
.login-gate{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem;}
.gate-card{max-width:420px;width:100%;text-align:center;padding:3rem 2rem;border-radius:16px;border:1px solid var(--border);}
.gate-icon{font-size:3.5rem;margin-bottom:1rem;}
.gate-card h2{font-size:1.6rem;margin-bottom:.8rem;text-transform:uppercase;letter-spacing:2px;}
.gate-card p{color:var(--text-sec);margin-bottom:2rem;font-size:.95rem;}
.gate-btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:14px 30px;font-size:1rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:background .2s;}
.gate-btn:hover{background:var(--accent-hover);}

/* MAIN PAGE — hidden until auth resolves to prevent flash */
.page-main{padding-top:80px;opacity:0;pointer-events:none;transition:opacity .3s ease;}

/* HERO */
.creator-hero{text-align:center;padding:4rem 1.5rem 3rem;}
.hero-badge{display:inline-block;background:linear-gradient(135deg,rgba(188,111,241,.2),rgba(188,111,241,.05));border:1px solid rgba(188,111,241,.4);border-radius:99px;padding:6px 18px;font-size:.82rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;}
.creator-hero h1{font-size:3.5rem;font-weight:700;letter-spacing:-1px;margin-bottom:1rem;text-transform:uppercase;}
.gradient-text{background:linear-gradient(135deg,#bc6ff1,#7c3aed,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.creator-hero p{color:var(--text-sec);font-size:1.1rem;max-width:500px;margin:0 auto;}
@media(max-width:600px){
  .creator-hero{padding:2.5rem 1rem 2rem;}
  .creator-hero h1{font-size:2rem;letter-spacing:-0.5px;line-height:1.15;}
  .creator-hero p{font-size:.95rem;}
  .hero-badge{font-size:.74rem;padding:5px 14px;}
}

/* CREATOR LAYOUT */
.creator-layout{max-width:1200px;margin:0 auto;padding:0 1.5rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
@media(max-width:900px){.creator-layout{grid-template-columns:1fr;}}
@media(max-width:640px){
  .creator-layout{padding:0 .75rem 3rem;gap:1rem;}
  .step-card{padding:1.2rem;border-radius:12px;}
  .step-header{gap:.75rem;margin-bottom:1.2rem;}
  .step-num{width:36px;height:36px;font-size:1rem;border-radius:10px;}
  .step-header h2{font-size:1.1rem;letter-spacing:1px;}
}

/* STEP CARDS */
.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;transition:border-color .3s;}
.step-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.8rem;}
.step-num{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),#7c3aed);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:1.2rem;flex-shrink:0;}
.step-header h2{font-size:1.3rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:.2rem;}
.step-sub{color:var(--text-sec);font-size:.85rem;}

/* UPLOAD ZONE */
.upload-zone{border:2px dashed var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .3s,background .3s;min-height:200px;}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:rgba(188,111,241,.04);}
.upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem;gap:12px;min-height:200px;}
.upload-icon{color:var(--text-sec);margin-bottom:.5rem;}
.upload-label{font-size:1rem;font-weight:600;color:var(--text);}
.upload-sub{font-size:.85rem;color:var(--text-sec);}
.upload-hint{font-size:.75rem;color:#555;background:#111;padding:4px 12px;border-radius:20px;}
.upload-preview{position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;}
.upload-preview.hidden{display:none;}
.upload-content.hidden{display:none;}
.upload-preview img{width:100%;height:280px;object-fit:contain;padding:1rem;}
.change-photo-btn{position:absolute;bottom:12px;right:12px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.8);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.8rem;padding:6px 12px;cursor:pointer;transition:all .2s;}
.change-photo-btn:hover{border-color:var(--accent);color:var(--accent);}

/* CONFIG GRID */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.8rem;}
.config-item{display:flex;flex-direction:column;gap:8px;}
.config-item.full-width{grid-column:1/-1;}
.config-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-sec);font-weight:700;display:flex;align-items:center;gap:6px;}
.config-input{background:#0d0d0d;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.95rem;padding:10px 14px;outline:none;transition:border .2s;font-family:'Inter',sans-serif;}
.config-input:focus{border-color:var(--accent);}
.char-count{font-size:.72rem;color:var(--text-sec);text-align:right;}
/* Config grid: single column on mobile */
@media(max-width:640px){
  .config-grid{grid-template-columns:1fr;gap:.9rem;margin-bottom:1.2rem;}
  /* full-width items stay full-width (no change needed, but reinforce) */
  .config-item.full-width{grid-column:1;}
  .config-input{font-size:.9rem;padding:10px 12px;}
}
.info-chip{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;background:#222;border-radius:50%;font-size:.7rem;font-weight:700;cursor:help;position:relative;color:var(--text-sec);}
.info-chip .info-tooltip-box{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:#1a1a1a;border:1px solid var(--border);border-radius:10px;padding:12px;width:240px;font-size:.8rem;color:var(--text-sec);opacity:0;visibility:hidden;transition:all .2s;z-index:10;pointer-events:none;line-height:1.5;}
.info-chip:hover .info-tooltip-box{opacity:1;visibility:visible;}

/* MODEL PICKER */
.model-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.model-option{background:#0d0d0d;border:1px solid var(--border);border-radius:10px;padding:10px 6px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:3px;}
.model-option:hover{border-color:#555;}
.model-option.active{border-color:var(--accent);background:rgba(188,111,241,.1);}
.model-icon{font-size:1.3rem;}
.model-name{font-size:.8rem;font-weight:700;color:var(--text);}
.model-sub{font-size:.68rem;color:var(--text-sec);}

/* TRIANGLE OPTIONS */
.tri-options{display:flex;gap:6px;}
.tri-btn{flex:1;padding:9px 4px;background:#0d0d0d;border:1px solid var(--border);border-radius:8px;color:var(--text-sec);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;}
.tri-btn:hover{border-color:#555;color:var(--text);}
.tri-btn.active{border-color:var(--accent);background:rgba(188,111,241,.1);color:var(--accent);}

/* TOGGLES */
.toggle-row{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-sec);}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:#2a2a2a;border-radius:99px;cursor:pointer;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#666;border-radius:50%;transition:.3s;}
input:checked+.toggle-slider{background:var(--accent);}
input:checked+.toggle-slider.green{background:var(--green);}
input:checked+.toggle-slider::before{transform:translateX(20px);background:#fff;}
input:not(:checked)+.toggle-slider::before{background:#888;}

/* PRIVACY BOX */
.privacy-box{background:rgba(188,111,241,.04);border:1px solid rgba(188,111,241,.15);border-radius:12px;padding:14px 16px;}
.privacy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.privacy-info{display:flex;align-items:center;gap:12px;}
.privacy-icon{font-size:1.5rem;}
.privacy-title{font-size:.95rem;font-weight:600;}
.privacy-sub{font-size:.78rem;color:var(--text-sec);}

/* GENERATE BUTTON */
.generate-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--accent),#7c3aed);border:none;border-radius:12px;color:#fff;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px rgba(188,111,241,.3);}
.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px rgba(188,111,241,.5);}
.generate-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* PROGRESS */
.progress-section{max-width:640px;margin:0 auto;padding:0 1.5rem 4rem;}
.progress-section.hidden{display:none;}
.progress-card{padding:3rem;border-radius:16px;border:1px solid var(--border);text-align:center;}
.progress-spinner{width:60px;height:60px;border:4px solid rgba(188,111,241,.2);border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem;}
@keyframes spin{to{transform:rotate(360deg);}}
.progress-card h2{font-size:1.5rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:.6rem;}
.progress-card p{color:var(--text-sec);font-size:.9rem;margin-bottom:1.8rem;}
.progress-bar-wrap{background:#1a1a1a;border-radius:99px;height:8px;overflow:hidden;margin-bottom:.6rem;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#7c3aed);border-radius:99px;transition:width .5s ease;}
.progress-percent{color:var(--accent);font-weight:700;font-size:1.1rem;margin-bottom:1.8rem;}
.progress-steps{display:flex;flex-direction:column;gap:8px;text-align:left;}
.pstep{padding:8px 14px;border-radius:8px;font-size:.85rem;color:var(--text-sec);background:#0d0d0d;transition:all .3s;}
.pstep.active{background:rgba(188,111,241,.1);color:var(--text);border-left:3px solid var(--accent);}
.pstep.done{color:var(--green);}

/* RESULT */
.result-section{max-width:1200px;margin:0 auto;padding:0 1.5rem 5rem;}
.result-section.hidden{display:none;}
.result-header{text-align:center;margin-bottom:2.5rem;}
.result-badge{display:inline-block;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:99px;padding:6px 18px;font-size:.82rem;color:var(--green);margin-bottom:1rem;font-weight:600;}
.result-header h2{font-size:2rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:.5rem;}
.result-sub{color:var(--text-sec);}
.result-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:start;}
@media(max-width:900px){.result-layout{grid-template-columns:1fr;}}
.result-viewer-wrap{}
.result-viewer{width:100%;height:480px;background:#0a0a0a;border:1px solid var(--border);border-radius:12px;overflow:hidden;position:relative;}
@media(max-width:600px){.result-viewer{height:280px;}}
.viewer-controls{text-align:center;padding:8px;font-size:.78rem;color:var(--text-sec);}
.viewer-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-sec);font-size:.9rem;}
.mini-spinner{width:32px;height:32px;border:3px solid rgba(188,111,241,.2);border-top:3px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;}

/* RESULT ACTIONS */
.result-actions-panel{display:flex;flex-direction:column;gap:1.2rem;}
.result-info-box{background:#0d0d0d;border:1px solid var(--border);border-radius:12px;padding:1.2rem;}
.result-stat{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.result-stat:last-child{border:none;}
.stat-label{font-size:.8rem;color:var(--text-sec);text-transform:uppercase;letter-spacing:.05em;}
.stat-val{font-size:.9rem;font-weight:600;color:var(--text);}
.buy-config{padding:1.5rem;border-radius:12px;border:1px solid var(--border);}
.buy-config h3{font-size:1rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1.2rem;}
.buy-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.buy-row label{font-size:.82rem;color:var(--text-sec);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.buy-select{background:#0d0d0d;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;padding:8px 12px;outline:none;cursor:pointer;}
.buy-select:focus{border-color:var(--accent);}
.qty-wrap{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.qty-btn{background:#0d0d0d;border:none;color:var(--text);padding:8px 14px;font-size:1.1rem;cursor:pointer;transition:background .2s;}
.qty-btn:hover{background:#1a1a1a;}
.qty-input{width:44px;background:#0a0a0a;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);color:var(--text);text-align:center;font-size:.95rem;padding:8px 4px;font-weight:700;outline:none;}
.buy-price-tag{font-size:1.8rem;font-weight:700;color:var(--text);font-family:'Outfit',sans-serif;margin:1rem 0;}
.buy-buttons{display:flex;flex-direction:column;gap:10px;}
.buy-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border:none;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;}
.buy-btn.cart{background:var(--accent);color:#fff;}
.buy-btn.cart:hover{background:var(--accent-hover);}
.buy-btn.whatsapp{background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3);color:#25d366;}
.buy-btn.whatsapp:hover{background:rgba(37,211,102,.2);}
.create-another-btn{background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text-sec);padding:12px;font-size:.9rem;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;}
.create-another-btn:hover{border-color:var(--accent);color:var(--accent);}

/* GLASS */
.glass{background:var(--glass);backdrop-filter:blur(20px);}
.hidden{display:none!important;}

/* ── MIS DISEÑOS DRAWER ──────────────────────────────────────────────────── */
.mis-disenos-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1500;opacity:0;visibility:hidden;transition:all .3s;backdrop-filter:blur(4px);}
.mis-disenos-backdrop.show{opacity:1;visibility:visible;}
.mis-disenos-drawer{position:fixed;top:60px;left:0;right:0;z-index:1600;display:none;max-height:calc(100vh - 80px);overflow-y:auto;animation:drawerIn .3s cubic-bezier(.4,0,.2,1);}
.mis-disenos-drawer.show{display:block;}
@keyframes drawerIn{from{transform:translateY(-20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.mis-disenos-inner{max-width:1200px;margin:0 auto;background:rgba(10,10,18,0.98);border:1px solid rgba(188,111,241,.2);border-top:none;border-radius:0 0 20px 20px;padding:1.5rem 2rem 2rem;box-shadow:0 20px 60px rgba(0,0,0,.8);}
.mis-disenos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.mis-disenos-header h2{font-size:1.2rem;text-transform:uppercase;letter-spacing:2px;}
.mis-disenos-close{background:transparent;border:none;color:var(--text-sec);font-size:1.2rem;cursor:pointer;transition:color .2s;padding:4px 8px;}
.mis-disenos-close:hover{color:var(--text);}
.mis-disenos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem;}
.mis-disenos-loading{color:var(--text-sec);font-size:.9rem;padding:2rem;text-align:center;grid-column:1/-1;}
.mis-disenos-empty{color:var(--text-sec);font-size:.9rem;padding:3rem;text-align:center;grid-column:1/-1;}
.creation-card{background:#0d0d0d;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s;}
.creation-card:hover{border-color:rgba(188,111,241,.4);}
.creation-thumb{width:100%;height:140px;object-fit:cover;background:#111;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--text-sec);}
.creation-thumb img{width:100%;height:140px;object-fit:cover;}
.creation-info{padding:10px 12px;}
.creation-name{font-size:.88rem;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.creation-meta{font-size:.75rem;color:var(--text-sec);margin-bottom:8px;}
.creation-privacy{display:flex;align-items:center;gap:6px;font-size:.75rem;margin-bottom:8px;}
.privacy-badge{padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600;}
.privacy-badge.public{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3);}
.privacy-badge.private{background:rgba(139,92,246,.1);color:#a78bfa;border:1px solid rgba(139,92,246,.3);}
.creation-toggle{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text-sec);}
.creation-actions{display:flex;gap:6px;margin-top:6px;}
.creation-btn{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-sec);font-size:.75rem;cursor:pointer;transition:all .2s;text-align:center;}
.creation-btn:hover{border-color:var(--accent);color:var(--accent);}
.creation-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.creation-btn.primary:hover{background:var(--accent-hover);}

/* ── CREATIONS LIMIT STYLING ── */
.creations-limit-box {
    background: rgba(188,111,241,0.04);
    border: 1px solid rgba(188,111,241,0.15);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.creations-limit-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-sec);
}
.creations-limit-text span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.creations-limit-text strong {
    color: var(--accent);
    font-weight: 700;
}
.creations-limit-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 99px;
    overflow: hidden;
}
.creations-limit-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #7c3aed);
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* ── TIPS & DYNAMIC INFOS BOX ── */
.tips-box {
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tips-icon {
    font-size: 1.3rem;
    line-height: 1;
}
.tips-content h4 {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.tips-content p {
    font-size: 0.76rem;
    color: var(--text-sec);
    line-height: 1.4;
}

/* ── VIEW MY DESIGNS BUTTONS ── */
.view-designs-btn-secondary {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(188, 111, 241, 0.25);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.view-designs-btn-secondary:hover {
    background: rgba(188, 111, 241, 0.08);
    border-color: rgba(188, 111, 241, 0.45);
    box-shadow: 0 0 12px rgba(188, 111, 241, 0.15);
}
.view-designs-btn-secondary:active {
    transform: scale(0.98);
}

.view-designs-btn {
    margin-top: 10px;
    margin-bottom: 5px;
    width: 100%;
    padding: 12px;
    background: rgba(188, 111, 241, 0.08);
    border: 1px solid rgba(188, 111, 241, 0.35);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.view-designs-btn:hover {
    background: rgba(188, 111, 241, 0.16);
    border-color: rgba(188, 111, 241, 0.5);
    box-shadow: 0 0 16px rgba(188, 111, 241, 0.25);
}
.view-designs-btn:active {
    transform: scale(0.98);
}

/* Force FAB visible when inside iframe/PWA on all devices */
.force-fab-visible {
    display: flex !important;
}

/* ── GALLERY BUY MODAL (VEXINWORKS STYLE) ── */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2000;
    backdrop-filter: blur(8px);
}
.modal.show {
    opacity: 1;
    visibility: visible;
}
.modal-content.glass {
    width: 95%;
    max-width: 1100px;
    max-height: 90vh;
    padding: 3rem 2.5rem 2.5rem;
    position: relative;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(18, 10, 30, 0.98) 0%, rgba(14, 14, 22, 0.99) 100%);
    border-radius: 16px;
    border: 1px solid rgba(188, 111, 241, 0.2);
    box-shadow: var(--shadow), 0 0 0 1px rgba(188, 111, 241, 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
    animation: modalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: var(--text-sec);
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
    padding: 0;
}
.close-btn:hover {
    color: var(--accent);
    transform: scale(1.1);
}

.modal-body {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
}

.buy-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px;
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b929e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
}
.buy-select:hover {
    border-color: rgba(188, 111, 241, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
}
.buy-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

/* Option elements styling inside dark selects */
.buy-select option {
    background-color: #111;
    color: #fff;
}

.qty-btn {
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    outline: none;
    transition: background 0.2s;
}
.qty-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}
.qty-input {
    width: 40px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    text-align: center;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    padding: 8px 0;
}
/* Hide spin buttons */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}
.buy-btn:hover {
    transform: translateY(-2px);
}
.buy-btn:active {
    transform: translateY(0);
}
.buy-btn.cart {
    background: linear-gradient(135deg, #bc6ff1, #8b3fc9);
    box-shadow: 0 4px 15px rgba(188, 111, 241, 0.35);
}
.buy-btn.cart:hover {
    box-shadow: 0 6px 20px rgba(188, 111, 241, 0.55);
}
.buy-btn.whatsapp {
    background: #25d366;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.buy-btn.whatsapp:hover {
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Stacking for responsiveness */
@media (max-width: 768px) {
    .modal-content.glass {
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        padding: 4rem 1.5rem 1.5rem;
        overflow-y: auto;
    }
    .modal {
        align-items: flex-end;
    }
    .modal-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .close-btn {
        top: 1rem;
        right: 1rem;
        font-size: 1.8rem;
    }
    #buyModal3DViewer {
        height: 280px !important;
    }
}

/* ── FULLSCREEN 3D VIEWER OVERLAY ── */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 3000;
    display: flex;
    flex-direction: column;
}
.fullscreen-canvas-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.fullscreen-canvas-container canvas {
    display: block;
    outline: none;
    width: 100% !important;
    height: 100% !important;
}
.fullscreen-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 28px;
    border-radius: 99px;
    border: 1px solid rgba(188, 111, 241, 0.25);
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 30px rgba(188,111,241,0.15);
    max-width: 90%;
    flex-wrap: wrap;
    justify-content: center;
}

.fullscreen-controls label {
    font-size: 0.72rem;
    color: var(--text-sec);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
    display: block;
}

.fullscreen-select-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fullscreen-controls .buy-select {
    width: 150px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 20px;
}

.fullscreen-back-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 10px 20px;
    border-radius: 99px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.fullscreen-back-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}

.fullscreen-buy-btn {
    background: linear-gradient(135deg, var(--accent), #8b3fc9);
    border: none;
    padding: 10px 24px;
    border-radius: 99px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(188,111,241,0.3);
    transition: all 0.2s;
}
.fullscreen-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(188,111,241,0.5);
}

@media (max-width: 768px) {
    .fullscreen-controls {
        bottom: 20px;
        border-radius: 16px;
        padding: 12px 16px;
        gap: 12px;
        max-width: 95%;
    }
    .fullscreen-controls .buy-select {
        width: 120px;
        font-size: 0.8rem;
    }
    .fullscreen-back-btn, .fullscreen-buy-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}