/* =========================================================
   StickerSnap Authentication — easy-to-edit design system
   Change these variables first to customize the whole page.
   ========================================================= */
:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --ink:#111318;
  --muted:#727986;
  --soft:#eef1f5;
  --line:#e1e5eb;
  --primary:#2867e8;
  --primary-2:#7047ea;
  --accent:#ffb84a;
  --green:#2f8f70;
  --radius:20px;
  --shadow:0 24px 70px rgba(20,32,55,.10);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font);color:var(--ink);background:var(--bg)}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit}

.auth-page{
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-columns:minmax(440px,48%) minmax(480px,52%);
  overflow:hidden;
}

/* =========================
   CREATIVE LEFT PANEL
   ========================= */
.creative-side{
  position:relative;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:linear-gradient(145deg,#f9fafb 0%,#eef3f8 55%,#f7f0e9 100%);
  padding:40px 6vw 28px ;
}

.creative-side:before,.creative-side:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.creative-side:before{width:420px;height:420px;right:-190px;top:-150px;background:rgba(255,190,81,.17)}
.creative-side:after{width:360px;height:360px;left:-200px;bottom:-170px;background:rgba(53,112,235,.10)}

.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-size:25px;font-weight:850;letter-spacing:-.7px;position:relative;z-index:20}
.brand-icon{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  flex-shrink:0;
}

.brand-icon img{
  display:flex;
  width:100%;
  height:100%;
  object-fit:contain;
}
.creative-copy{position:relative;z-index:10;max-width:520px;margin:40px auto 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:850;letter-spacing:.20em;color:#737b87}
.eyebrow:before{content:"";width:18px;height:2px;background:var(--accent);border-radius:10px}
.creative-copy h1{font-size:clamp(43px,5vw,70px);line-height:.98;letter-spacing:-3px;margin:13px 0 18px}
.creative-copy h1 span{color:var(--primary)}
.creative-copy p{max-width:470px;color:#6c7480;font-size:16px;line-height:1.7;margin:0}

.scene{position:absolute;left:0;right:0;bottom:0;height:58%;min-height:390px;max-height:590px;overflow:hidden}
.floor{position:absolute;left:-5%;right:-5%;bottom:-90px;height:190px;background:#eee7dc;border-radius:50% 50% 0 0/30% 30% 0 0}
.cloud{position:absolute;width:95px;height:28px;background:#fff;border:2px solid rgba(105,112,122,.12);border-radius:40px;box-shadow:0 8px 18px rgba(60,70,80,.04)}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border:2px solid rgba(105,112,122,.12);border-bottom:0;border-radius:50%}
.cloud:before{width:34px;height:34px;left:15px;top:-19px}.cloud:after{width:42px;height:42px;right:10px;top:-26px}
.cloud-a{left:15%;top:8%}.cloud-b{right:13%;top:21%;transform:scale(.7)}
.spark{position:absolute;color:#e9a82e;font-size:29px;animation:float 3.4s ease-in-out infinite}.spark-a{left:16%;top:31%}.spark-b{right:24%;top:11%;animation-delay:1s}.spark-c{left:54%;top:5%;color:#6b8fe8;animation-delay:1.7s}
.doodle{position:absolute;color:#d1a74f;font-size:40px;opacity:.8}.doodle-a{right:39%;top:24%;transform:rotate(-18deg)}.doodle-b{left:48%;top:16%;font-size:26px}

.floating-card{position:absolute;z-index:8;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);border:2px solid rgba(52,61,74,.10);border-radius:14px;padding:10px 15px;box-shadow:0 15px 32px rgba(50,62,80,.08);min-width:175px;animation:cardFloat 5s ease-in-out infinite}
.floating-card b{display:block;font-size:12px}.floating-card small{display:block;color:#8a919c;font-size:10px;margin-top:2px}.mini-icon{font-size:24px}.card-one{left:5%;top:24%}.card-two{right:4%;top:37%;animation-delay:1.1s}.card-three{left:10%;top:48%;animation-delay:2s}.card-two .mini-icon{background:#fff1d7;border-radius:10px;padding:3px}.card-three .mini-icon{background:#eaf0ff;border-radius:10px;padding:3px}

.rainbow{position:absolute;right:7%;bottom:11%;width:175px;height:145px;overflow:hidden}.rainbow i{position:absolute;border:10px solid; border-bottom:0;border-radius:100px 100px 0 0;width:175px;height:145px;bottom:0;left:0}.rainbow i:nth-child(1){border-color:#ff6f61}.rainbow i:nth-child(2){width:145px;height:120px;left:15px;border-color:#f5bd4f}.rainbow i:nth-child(3){width:115px;height:95px;left:30px;border-color:#6c91ed}.rainbow i:nth-child(4){width:85px;height:70px;left:45px;border-color:#62a884}

/* Simple editable CSS character */
.creator{position:absolute;z-index:7;left:42%;bottom:4px;width:250px;height:300px;transform:translateX(-50%)}
.creator-head{position:absolute;z-index:4;left:79px;top:26px;width:95px;height:92px;background:#f49b86;border-radius:45% 45% 47% 47%;transform:rotate(-3deg);border:3px solid rgba(20,25,30,.08)}
.creator-hair{position:absolute;z-index:6;left:76px;top:12px;width:102px;height:42px;background:#24292f;border-radius:60% 60% 35% 35%;transform:rotate(-3deg)}
.creator-hair:after{content:"";position:absolute;left:9px;top:24px;width:84px;height:30px;background:#24292f;border-radius:0 0 50% 50%}
.eye{position:absolute;top:43px;width:7px;height:10px;background:#1b2025;border-radius:50%}.eye-left{left:28px}.eye-right{right:28px}.smile{position:absolute;left:39px;top:62px;width:18px;height:9px;border-bottom:3px solid #9e4d50;border-radius:50%}
.creator-neck{position:absolute;z-index:3;left:108px;top:104px;width:39px;height:32px;background:#ee8e7c;border-radius:0 0 15px 15px}
.creator-shirt{position:absolute;z-index:2;left:49px;top:124px;width:150px;height:112px;background:#f5b647;border-radius:55px 55px 18px 18px;border:3px solid rgba(20,25,30,.08)}
.creator-shirt:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45px;background:#316a56;border-radius:0 0 16px 16px}
.shirt-badge{position:absolute;z-index:2;left:63px;top:39px;width:29px;height:29px;display:grid;place-items:center;background:#fff;border:3px solid #111;border-radius:9px;font-size:14px}
.creator-arm{position:absolute;z-index:1;width:55px;height:118px;background:#316a56;border-radius:35px;top:127px}.arm-left{left:17px;transform:rotate(28deg)}.arm-right{right:17px;transform:rotate(-25deg)}
.creator-hand{position:absolute;z-index:5;font-size:45px;line-height:1}.hand-left{left:-3px;top:98px;transform:rotate(-28deg)}.hand-right{right:-7px;top:100px;transform:scaleX(-1) rotate(-24deg)}
.creator-leg{position:absolute;z-index:1;top:219px;width:84px;height:72px;background:#3878e5;border-radius:0 0 50px 50px}.leg-left{left:40px;transform:rotate(10deg)}.leg-right{right:36px;transform:rotate(-10deg)}
.creator-shoe{position:absolute;z-index:2;bottom:0;width:75px;height:25px;background:#111;border-radius:50px 50px 15px 15px}.shoe-left{left:19px;transform:rotate(-8deg)}.shoe-right{right:14px;transform:rotate(8deg)}
.sticker-bubble{position:absolute;z-index:9;left:62%;bottom:35%;width:88px;height:70px;background:#fff;border:3px solid #242830;border-radius:18px;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:950;line-height:1.05;transform:rotate(7deg);box-shadow:8px 10px 0 #f1b44e}

@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* =========================
   AUTH SIDE
   ========================= */
.auth-side{
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:42px 6vw;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.auth-wrap{width:min(540px,100%)}
.mobile-brand{display:none}
.auth-heading{text-align:center;margin-bottom:26px}.heading-emoji{display:inline-grid;place-items:center;width:48px;height:48px;background:#fff5dc;border-radius:15px;font-size:25px;margin-bottom:10px}.auth-heading h2{font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-2px;margin:0 0 10px}.auth-heading p{margin:0;color:var(--muted);font-size:16px}
.auth-card{border:1px solid #e8ebf0;border-radius:24px;background:#fff;padding:22px;box-shadow:var(--shadow)}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#f3f5f8;padding:5px;border-radius:13px;margin-bottom:18px}.mode-btn{border:0;background:transparent;border-radius:10px;padding:11px 8px;color:#7a818d;font-weight:800}.mode-btn.active{background:#fff;color:#15181e;box-shadow:0 4px 12px rgba(30,40,60,.08)}
.social-btn{width:100%;height:54px;border:1px solid #dfe3e9;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;gap:11px;font-weight:800;color:#20242a;transition:.2s}.social-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(30,40,60,.08)}.google-mark{font-weight:950;font-size:20px;color:#4285f4}
.or-divider{display:flex;align-items:center;gap:14px;color:#9299a4;font-size:13px;margin:19px 0}.or-divider:before,.or-divider:after{content:"";height:1px;background:#e7e9ed;flex:1}
.field{margin:14px 0}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}.input-wrap{position:relative}.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8c94a1;font-weight:900;pointer-events:none}.input-wrap input{width:100%;height:54px;border:1.5px solid #dde2e9;border-radius:13px;padding:0 47px 0 42px;outline:none;background:#fbfcfd;color:#16191e;transition:.2s}.input-wrap input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(40,103,232,.10);background:#fff}.input-wrap input::placeholder{color:#a2a9b3}.password-toggle{position:absolute;right:8px;top:8px;width:38px;height:38px;border:0;border-radius:9px;background:transparent;color:#707784}.password-toggle:hover{background:#f1f3f6}
.form-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:13px 0 18px}.remember{display:flex;align-items:center;gap:7px;color:#777f8b;font-size:12px}.remember input{accent-color:var(--primary)}.text-btn,.link-btn{border:0;background:transparent;color:var(--primary);font-weight:800;padding:0}.text-btn{font-size:12px}.submit-btn{width:100%;height:56px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:15px;font-weight:900;box-shadow:0 12px 24px rgba(48,88,205,.22);transition:.2s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(48,88,205,.27)}.submit-btn:disabled{opacity:.65;transform:none;cursor:wait}.spinner[hidden]{display:none!important}.spinner{display:inline-block;width:19px;height:19px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.message{min-height:20px;margin-top:12px;text-align:center;font-size:13px;font-weight:700}.message.success{color:#27805f}.message.error{color:#c34b4b}.message.info{color:#64707e}
.switch-copy{text-align:center;color:#7b828d;font-size:13px;margin:18px 0 2px}.link-btn{font-size:13px}.trust-strip{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:#8a919c;font-size:11px;margin:18px 0}.legal{text-align:center;color:#9aa1ab;font-size:10px;line-height:1.6;margin:0}.legal a{color:#66707d;text-decoration:none;font-weight:700}

@media(max-width:1000px){
  .auth-page{
    height:auto;
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
  }

  .creative-side{
    min-height:430px;
    height:430px;
    padding:26px 7vw;
  }

  .creative-copy{
    margin-top:20px;
    max-width:560px;
  }

  .creative-copy h1{
    font-size:48px;
  }

  .scene{
    height:300px;
    min-height:300px;
  }

  .auth-side{
    height:auto;
    min-height:100vh;
  }

  .creator{
    transform:translateX(-50%) scale(.78);
    transform-origin:bottom center;
    bottom:-8px;
  }

  .floating-card{
    transform:scale(.82);
  }

  .card-one{
    left:4%;
    top:35%;
  }

  .card-two{
    right:3%;
    top:42%;
  }

  .card-three{
    display:none;
  }
}
@media(max-width:620px){
  .creative-side{display:none}
.auth-side{
  min-height:100vh;
  height:auto;
  overflow:visible;
  padding:25px 16px 30px;
  align-items:flex-start;
}
.auth-wrap{
  width:min(540px,100%);
  margin:auto 0;
}
.auth-wrap{padding-top:3px}.mobile-brand{display:inline-flex;margin:0 0 32px;font-size:22px}.mobile-brand .brand-icon{
  width:38px;
  height:38px;
}.auth-heading{margin-bottom:20px}.auth-heading h2{font-size:35px}.auth-heading p{font-size:14px}.auth-card{padding:17px;border-radius:19px}.trust-strip{gap:10px}.form-row{align-items:flex-start}.remember span{font-size:11px}.text-btn{font-size:11px}
}

/* =========================================================
   EASY CUSTOMIZATION NOTES
   - Main colors: --primary, --primary-2, --accent
   - Card roundness: --radius
   - Background: --bg
   - Left illustration is pure HTML/CSS, no image file required.
   - Change text/emoji directly in auth.html.
   ========================================================= */


/* Signup avatar chooser — built-in artwork only, no local file upload. */
.avatar-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.avatar-picker-head label{margin:0}.avatar-picker-head span{font-size:10px;font-weight:800;color:#8a919c}.avatar-picker-note{margin:5px 0 10px;color:#9299a4;font-size:11px}

.signup-avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.signup-avatar{position:relative;border:2px solid transparent;background:#f5f7fb;border-radius:12px;padding:3px;transition:.18s}.signup-avatar:hover{transform:translateY(-2px);border-color:#ccd7f5}.signup-avatar.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(40,103,232,.09)}.signup-avatar img{display:block;width:100%;aspect-ratio:1;border-radius:9px}.signup-avatar .avatar-check{display:none;position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:900}.signup-avatar.selected .avatar-check{display:block}