*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --app-bg:#B5DBFF;
  --blue:#0063FF;
  --ink:#0063FF;
  --text:#211814;
  --muted:rgba(33,24,20,.56);
  --selected:#0063FF;
}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{
  font-family:ui-rounded,"SF Pro Rounded",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--app-bg);
  color:var(--text);
  transition:background .25s ease;
}
button,input{font:inherit}
button{cursor:pointer;border:0}
.app{min-height:100svh}
.screen{
  display:none;
  min-height:100svh;
  padding:16px 14px calc(102px + env(safe-area-inset-bottom));
  max-width:760px;
  margin:0 auto;
}
.screen.active{display:flex;flex-direction:column}
.brand{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:850;color:var(--muted);font-size:14px}
.brand-logo img{
  width:150px;
  max-width:44vw;
  height:auto;
  display:block;
  filter:brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(3165%) hue-rotate(211deg) brightness(101%) contrast(107%);
}
.intro{align-items:center;justify-content:center;text-align:center;gap:18px}
.intro-peach{width:min(170px,42vw);height:auto;filter:drop-shadow(0 28px 40px rgba(80,35,15,.16))}
.image-peach{animation:floatPeach 3.2s ease-in-out infinite}
.image-peach img{display:block;width:100%;height:auto}
h1{font-size:clamp(58px,16vw,104px);line-height:.84;letter-spacing:-.08em;margin:0}
.intro p{font-size:18px;line-height:1.35;color:var(--muted);max-width:370px;margin:0}
.primary{
  background:var(--blue);
  color:#fff;
  font-weight:950;
  border-radius:999px;
  padding:16px 22px;
  box-shadow:0 16px 35px rgba(0,99,255,.18);
}
.primary.big{font-size:18px;padding:18px 34px}
.secondary{
  background:rgba(255,255,255,.34);
  color:var(--text);
  border:1px solid rgba(255,255,255,.55);
  font-weight:950;
  border-radius:999px;
  padding:15px 18px;
  backdrop-filter:blur(14px);
}
.text-btn{background:transparent;color:var(--muted);font-weight:900;text-decoration:underline;padding:10px}
.round{
  background:var(--blue);
  border:1px solid var(--blue);
  width:44px;
  height:44px;
  border-radius:999px;
  font-weight:950;
  color:#fff;
  backdrop-filter:blur(14px);
}
.top{display:grid;grid-template-columns:44px 1fr 44px;gap:12px;align-items:center;margin-bottom:4px}
.top-center{text-align:center}
.step-count{margin:0 0 2px;color:var(--muted);font-weight:850;font-size:13px}
h2{margin:0;font-size:clamp(34px,10vw,54px);line-height:.9;letter-spacing:-.055em}
.preview-zone{flex:1;display:grid;place-items:center;min-height:320px;overflow:hidden}
.peach-preview-frame{
  position:relative;
  width:min(94vw,560px);
  aspect-ratio:1/1;
  filter:drop-shadow(0 30px 40px rgba(90,40,20,.13));
}
.peach-stack,.result-peach{position:absolute;inset:0}
.peach-stack img,.result-peach img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.peach-stack img.layer-enter,.result-peach img.layer-enter{animation:layerFadeIn .18s ease-out both}
@keyframes layerFadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatPeach{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
.peach-name-preview{
  position:absolute;
  left:0;
  right:0;
  bottom:-6%;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,6vw,34px);
  font-weight:500;
  letter-spacing:.01em;
}
.emoji-nav{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:8px 0 12px}
.emoji-nav::-webkit-scrollbar,.options-rail::-webkit-scrollbar{display:none}
.emoji-btn{
  flex:0 0 44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.36);
  border:1px solid rgba(255,255,255,.6);
  font-size:20px;
  backdrop-filter:blur(14px);
}
.emoji-btn.active{background:var(--blue);border-color:var(--blue)}
.options-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 18px;scrollbar-width:none}
.option{
  flex:0 0 86px;
  height:86px;
  background:#fff;
  border:2px solid rgba(255,255,255,.95);
  border-radius:24px;
  display:grid;
  place-items:center;
  scroll-snap-align:center;
}
.option.active{background:#fff;border-color:var(--blue);box-shadow:none}
.option img{width:70px;height:70px;object-fit:contain;border-radius:19px;background:rgba(255,255,255,.12)}
.empty{width:70px;height:70px;border-radius:19px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--muted);font-weight:950}
.bg-swatch{width:64px;height:64px;border-radius:999px;border:1px solid rgba(255,255,255,.75)}
.name-input{
  width:min(92vw,460px);
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  padding:16px 18px;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  font-weight:500;
  color:var(--text);
  outline:none;
  backdrop-filter:blur(14px);
}
.bottom-action{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;max-width:732px;margin:0 auto}
.result-preview{flex:1;display:grid;place-items:center;min-height:390px}
.result-art{
  position:relative;
  width:min(310px,74vw);
  aspect-ratio:1170/2532;
  border-radius:36px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(50,20,10,.16);
}
.result-peach{
  left:50%;
  top:46%;
  width:105%;
  height:auto;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 26px rgba(70,35,20,.18));
}
.result-name{
  position:absolute;
  left:8%;
  right:8%;
  top:68%;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  font-weight:500;
  letter-spacing:.01em;
}
.result-signature.signature-logo{
  position:absolute;
  left:50%;
  right:auto;
  bottom:7%;
  transform:translateX(-50%);
  width:150px;
  max-width:42%;
  height:auto;
  opacity:1;
  filter:brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(3165%) hue-rotate(211deg) brightness(101%) contrast(107%);
}
.result-actions{display:grid;gap:10px}
@media(min-width:780px){
  .screen{max-width:1120px;padding:28px 28px 110px}
  .lab.active,.result.active{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
  .lab.active .top,.result.active .top{grid-column:1/-1}
  .preview-zone{grid-column:1;grid-row:2 / span 3}
  .emoji-nav,.options-rail,.result-actions{grid-column:2}
  .options-rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .option{width:auto}
  .result-preview{grid-column:1;grid-row:2 / span 3}
  .bottom-action{width:min(420px,calc(100% - 56px));left:auto;right:28px}
}


/* V6.1 visual cleanup */

/* Intro: requested blue title + subtitle */
.intro h1,
.intro p{
  color:#0063FF !important;
}

/* Dynamic UI color: JS updates --ui-fg depending on background brightness */
:root{
  --ui-fg:#211814;
  --ui-muted:rgba(33,24,20,.62);
  --control-bg:rgba(255,255,255,.26);
  --control-border:rgba(255,255,255,.55);
}

body,
.step-count,
h2,
.text-btn,
.name-input{
  color:var(--ui-fg) !important;
}

.step-count,
.text-btn,
.intro p{
  color:var(--ui-muted);
}

.primary,
.secondary,
.round,
.emoji-btn,
.emoji-btn.active{
  background:var(--control-bg) !important;
  border:1px solid var(--control-border) !important;
  color:var(--ui-fg) !important;
  box-shadow:none !important;
}

/* Asset buttons: transparent, no white fill */
.option,
.option.active{
  background:transparent !important;
  box-shadow:none !important;
}

.option{
  border:1.5px solid rgba(255,255,255,.75) !important;
}

.option.active{
  border-color:var(--ui-fg) !important;
}

.option img,
.empty{
  background:transparent !important;
}

.bg-swatch{
  border:1px solid rgba(255,255,255,.75) !important;
}

/* Keep logo blue on intro */
.brand-logo img{
  filter:brightness(0) saturate(100%) invert(27%) sepia(97%) saturate(3165%) hue-rotate(211deg) brightness(101%) contrast(107%) !important;
}

/* Make placeholder readable */
.name-input::placeholder{
  color:var(--ui-muted);
}