/* PeakPix feel PASS2 2026-10-31 — visible mobile + flow polish. Presentation only. */
:root{
  --pp-ease:cubic-bezier(.22,.61,.36,1);
  --pp-ease-out:cubic-bezier(.16,1,.3,1);
  --pp-spring:cubic-bezier(.34,1.45,.64,1);
  --pp-dur:240ms;
  --pp-dur-slow:420ms;
  --pp-pad:clamp(14px,4.2vw,28px);
  --pp-radius:18px;
  --pp-card:rgba(255,255,255,.06);
  --pp-card-line:rgba(170,176,255,.22);
}
@media (prefers-reduced-motion:reduce){
  :root{--pp-dur:1ms;--pp-dur-slow:1ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ========== GLOBAL: kill horizontal scroll ========== */
html,body{
  max-width:100%;
  overflow-x:clip;
}
body[data-ui-version],
body[data-ui-version] #brandEntrance.touch-entrance,
body[data-ui-version] #authScreen.touch-login,
body[data-ui-version] #jiyingWorkbench{
  max-width:100vw;
  overflow-x:clip;
  box-sizing:border-box;
}
body[data-ui-version] #brandEntrance.touch-entrance *,
body[data-ui-version] #jiyingWorkbench *{
  box-sizing:border-box;
}

/* ========== COVER / HOME: fix 320–414 clipping ========== */
html body[data-ui-version] #brandEntrance.touch-entrance{
  padding:max(10px,env(safe-area-inset-top)) var(--pp-pad) max(12px,env(safe-area-inset-bottom))!important;
  background:#05051a!important; /* fill empty bottom band */
  min-height:100dvh;
  height:100dvh;
}
html body[data-ui-version] #brandEntrance .touch-frame{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:radial-gradient(ellipse 90% 70% at 50% 20%,#1a1650 0%,#0a0928 48%,#05051a 100%)!important;
}
html body[data-ui-version] #brandEntrance .touch-heading{
  left:var(--pp-pad)!important;
  right:var(--pp-pad)!important;
  width:auto!important;
  max-width:100%!important;
  top:clamp(12%,10vh,18%)!important;
  padding-inline:2px;
}
html body[data-ui-version] #brandEntrance.touch-entrance h1,
html body[data-ui-version] #brandEntrance .touch-heading h1{
  font-size:clamp(26px,7.2vw,44px)!important;
  line-height:1.22!important;
  letter-spacing:-.03em!important;
  max-width:100%!important;
  overflow-wrap:anywhere;
  word-break:break-word;
  padding-inline:0!important;
  margin-inline:0!important;
}
/* show line break on phones up through 430px so headline never clips */
html body[data-ui-version] #brandEntrance .touch-mobile-break{
  display:block!important;
}
html body[data-ui-version] #brandEntrance .touch-subtitle{
  display:block;
  max-width:100%;
  font-size:clamp(12px,3.4vw,15px)!important;
  margin-top:12px!important;
}
html body[data-ui-version] #brandEntrance .pp-chips{
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
  padding-inline:0;
}
html body[data-ui-version] #brandEntrance .pp-chips li{
  font-size:clamp(11px,3vw,13px);
}

/* film/art must never force 640/800px min-width */
@media (max-width:820px){
  html body[data-ui-version] #brandEntrance .touch-art,
  html body[data-ui-version] #brandEntrance .touch-art img,
  html body[data-ui-version] #brandEntrance .touch-arm img,
  html body[data-ui-version] #brandEntrance #touchFilm,
  html body[data-ui-version] #brandEntrance #touchHoldFilm{
    width:100%!important;
    max-width:100%!important;
    left:50%!important;
  }
  html body[data-ui-version] #brandEntrance .touch-art{
    inset:auto 0 18%!important;
    height:42%!important;
    overflow:hidden!important;
  }
  html body[data-ui-version] #brandEntrance .pp-cover-mascot{
    width:clamp(96px,28vw,140px)!important;
    top:58%!important;
  }
}

/* footer + CTA: stack, stay inside frame, no right overflow */
html body[data-ui-version] #brandEntrance .touch-cover-footer{
  left:var(--pp-pad)!important;
  right:var(--pp-pad)!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  grid-template-columns:none!important;
  width:auto!important;
  max-width:100%!important;
}
html body[data-ui-version] #brandEntrance .touch-cover-footer>p{
  text-align:center!important;
  max-width:100%;
  font-size:clamp(12px,3.3vw,15px)!important;
}
html body[data-ui-version] #brandEntrance.touch-entrance #brandEntranceOpen{
  width:min(100%,340px)!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  margin:0 auto!important;
  padding:10px 18px!important;
  justify-content:center!important;
  gap:12px!important;
  border-radius:999px!important;
}
html body[data-ui-version] #brandEntrance .touch-index{display:none!important}

@media (max-width:414px){
  html body[data-ui-version] #brandEntrance.touch-entrance h1{
    font-size:clamp(24px,8vw,34px)!important;
  }
}
@media (max-width:320px){
  html body[data-ui-version] #brandEntrance.touch-entrance h1{font-size:22px!important}
  html body[data-ui-version] #brandEntrance.touch-entrance #brandEntranceOpen{min-height:48px!important;font-size:14px!important}
}

/* cover entrance motion (visible) */
@media (prefers-reduced-motion:no-preference){
  html body[data-ui-version] #brandEntrance .touch-heading>*{
    animation:ppFeelIn .55s var(--pp-ease-out) both;
  }
  html body[data-ui-version] #brandEntrance .touch-heading>*:nth-child(1){animation-delay:.05s}
  html body[data-ui-version] #brandEntrance .touch-heading>*:nth-child(2){animation-delay:.12s}
  html body[data-ui-version] #brandEntrance .touch-heading>*:nth-child(3){animation-delay:.2s}
  html body[data-ui-version] #brandEntrance .touch-heading>*:nth-child(4){animation-delay:.28s}
  html body[data-ui-version] #brandEntrance.touch-entrance #brandEntranceOpen{
    animation:ppFeelIn .6s var(--pp-ease-out) .35s both;
  }
}
@keyframes ppFeelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ========== INTERACTION ========== */
button,.primary-button,.account-primary,#brandEntranceOpen,.studio-wallet,[role=tab],.pp-r-nav{
  transition:transform var(--pp-dur) var(--pp-ease),box-shadow var(--pp-dur) var(--pp-ease),filter var(--pp-dur) var(--pp-ease),background var(--pp-dur) var(--pp-ease);
}
button:hover:not(:disabled),.primary-button:hover:not(:disabled){filter:brightness(1.06)}
button:active:not(:disabled),.pp-press,#brandEntranceOpen:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  button:active:not(:disabled),.pp-press{transform:none}
}

/* ========== WORKBENCH: create / tasks / result ========== */
html.pp-r[data-theme] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-field-card,
html.pp-r[data-theme] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .detail-card,
html.pp-r[data-theme] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .pp-r-card,
body[data-ui-version] #jiyingWorkbench .product-field-card,
body[data-ui-version] #jiyingWorkbench .product-task-card,
body[data-ui-version] #jiyingWorkbench .product-task-window,
body[data-ui-version] #jiyingWorkbench .studio-hero{
  border:1px solid var(--pp-card-line)!important;
  border-radius:var(--pp-radius)!important;
  background:linear-gradient(165deg,rgba(32,30,78,.88),rgba(12,12,36,.94))!important;
  box-shadow:0 10px 36px rgba(0,0,0,.28);
  transition:transform var(--pp-dur) var(--pp-ease),box-shadow var(--pp-dur-slow) var(--pp-ease);
}
html[data-theme=light].pp-r #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-field-card,
html[data-theme=light] body[data-ui-version] #jiyingWorkbench .product-field-card{
  background:#fff!important;
  border-color:rgba(88,76,214,.14)!important;
  box-shadow:0 8px 28px rgba(40,30,120,.08);
}
body[data-ui-version] #jiyingWorkbench .product-field-card:hover,
body[data-ui-version] #jiyingWorkbench .product-task-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion:reduce){
  body[data-ui-version] #jiyingWorkbench .product-field-card:hover{transform:none}
}

/* clearer hierarchy */
body[data-ui-version] #jiyingWorkbench .product-step-heading strong,
body[data-ui-version] #jiyingWorkbench .studio-welcome h1,
html.pp-r #jiyingWorkbench .pp-r-nav.is-on{
  letter-spacing:-.02em;
}
body[data-ui-version] #jiyingWorkbench .studio-welcome{
  padding:clamp(16px,3vw,28px) var(--pp-pad);
}
body[data-ui-version] #jiyingWorkbench .studio-welcome h1{
  font-size:clamp(22px,5vw,34px)!important;
  line-height:1.25!important;
}
body[data-ui-version] #jiyingWorkbench .product-form-step,
body[data-ui-version] #jiyingWorkbench .workspace-view,
html.pp-r #jiyingWorkbench .pp-r-pane{
  padding-inline:var(--pp-pad);
}

/* staggered card entrance */
@media (prefers-reduced-motion:no-preference){
  body[data-ui-version] #jiyingWorkbench .product-field-card,
  body[data-ui-version] #jiyingWorkbench .product-task-card,
  html.pp-r #jiyingWorkbench .operation-card{
    animation:ppFeelIn .45s var(--pp-ease-out) both;
  }
  body[data-ui-version] #jiyingWorkbench .product-field-card:nth-child(1),
  body[data-ui-version] #jiyingWorkbench .product-task-card:nth-child(1){animation-delay:.04s}
  body[data-ui-version] #jiyingWorkbench .product-field-card:nth-child(2),
  body[data-ui-version] #jiyingWorkbench .product-task-card:nth-child(2){animation-delay:.1s}
  body[data-ui-version] #jiyingWorkbench .product-field-card:nth-child(3),
  body[data-ui-version] #jiyingWorkbench .product-task-card:nth-child(3){animation-delay:.16s}
  body[data-ui-version] #jiyingWorkbench .product-field-card:nth-child(4),
  body[data-ui-version] #jiyingWorkbench .product-task-card:nth-child(4){animation-delay:.22s}
  body[data-ui-version] #jiyingWorkbench .product-field-card:nth-child(5),
  body[data-ui-version] #jiyingWorkbench .product-task-card:nth-child(5){animation-delay:.28s}
}

/* loading / progress */
.pp-skel{
  position:relative;overflow:hidden;border-radius:12px;background:rgba(140,140,180,.14);min-height:14px;
}
.pp-skel::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:ppSkel 1.15s infinite;
}
@keyframes ppSkel{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.pp-skel::after{animation:none;opacity:.35}}
.pp-progress{
  height:8px;border-radius:999px;background:rgba(150,156,255,.15);overflow:hidden;
}
.pp-progress>i{
  display:block;height:100%;width:var(--pp-pct,40%);border-radius:inherit;
  background:linear-gradient(90deg,#6b6dff,#e46fd0);
  transition:width .4s var(--pp-ease);
}
body[data-ui-version] #jiyingWorkbench .product-result-status,
body[data-ui-version] #jiyingWorkbench .product-task-summary{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--pp-card-line);
  background:rgba(20,18,50,.55);
}

@media (max-width:820px){
  body[data-ui-version] #jiyingWorkbench .studio-top,
  body[data-ui-version] #jiyingWorkbench .workbench-header{
    padding-inline:var(--pp-pad)!important;
    gap:10px;
  }
  body[data-ui-version] #jiyingWorkbench .product-field-card{
    padding:14px!important;
  }
  body[data-ui-version] #jiyingWorkbench .pp-r-bar,
  html.pp-r #jiyingWorkbench .pp-r-bar{
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
}

:focus-visible{outline:2px solid #8b7bff;outline-offset:2px}
/* PASS2c: absolute footer must NOT combine left+width:100% */
@media (max-width:820px){
  html body[data-ui-version] #brandEntrance.touch-entrance{
    padding:max(8px,env(safe-area-inset-top)) 0 max(8px,env(safe-area-inset-bottom))!important;
  }
  html body[data-ui-version] #brandEntrance .touch-frame{
    border-radius:0!important; /* full-bleed: kill empty outer band */
    width:100%!important;
    max-width:100vw!important;
  }
  html body[data-ui-version] #brandEntrance .touch-cover-header{
    left:var(--pp-pad)!important;
    right:var(--pp-pad)!important;
    inset-inline:var(--pp-pad)!important;
  }
  html body[data-ui-version] #brandEntrance .touch-heading{
    left:var(--pp-pad)!important;
    right:var(--pp-pad)!important;
    width:auto!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  html body[data-ui-version] #brandEntrance .pp-kicker,
  html body[data-ui-version] #brandEntrance .touch-heading>p,
  html body[data-ui-version] #brandEntrance .touch-subtitle{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    letter-spacing:.06em!important;
  }
  html body[data-ui-version] #brandEntrance.touch-entrance h1{
    font-size:clamp(22px,7vw,34px)!important;
    white-space:normal!important;
    overflow:visible!important;
    letter-spacing:-.02em!important;
  }
  html body[data-ui-version] #brandEntrance .touch-cover-footer{
    left:var(--pp-pad)!important;
    right:var(--pp-pad)!important;
    width:auto!important;          /* critical: fill between left/right */
    max-width:none!important;      /* do NOT use max-width:100% with left inset */
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  html body[data-ui-version] #brandEntrance.touch-entrance #brandEntranceOpen,
  html body[data-ui-version] #brandEntrance #brandEntranceOpen{
    position:static!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:12px 16px!important;
    box-sizing:border-box!important;
    transform:none!important;
    align-self:stretch!important;
  }
  html body[data-ui-version] #brandEntrance #touchFilm,
  html body[data-ui-version] #brandEntrance #touchHoldFilm,
  html body[data-ui-version] #brandEntrance .touch-arm img{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}
/* ==========================================================================
   PASS3 2026-11-02 — tablet (iPad) layout + clearer workbench hierarchy.
   Presentation only: no markup, script, data or API changes.
   ========================================================================== */

/* ---------- COVER: one vertical flow (header → headline → art → CTA), nothing overlaps ---------- */
html body[data-ui-version] #brandEntrance#brandEntrance .touch-frame{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-header{
  position:relative!important;
  inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  flex:none!important;
  width:100%!important;
  max-width:none!important;
  padding:clamp(14px,2.2vh,28px) var(--pp-pad) 0!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-heading{
  position:relative!important;
  inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  flex:none!important;
  width:min(100%,820px)!important;
  max-width:none!important;
  margin:clamp(10px,4vh,52px) 0 0!important;
  padding:0 var(--pp-pad)!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-heading h1{
  font-size:clamp(30px,min(8vw,7vh),60px)!important;
  line-height:1.16!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-subtitle{
  font-size:clamp(13px,calc(.9vw + 8px),18px)!important;
  margin-top:clamp(10px,1.6vh,18px)!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .pp-chips{
  margin-top:clamp(12px,2vh,22px)!important;
}
/* the card wall gets its own band and fades out before it reaches any text */
html body[data-ui-version] #brandEntrance#brandEntrance .touch-art{
  position:relative!important;
  inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  flex:1 1 0!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:120px!important;
  overflow:hidden!important;
  transform:none!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-art .pp-hero-canvas{
  position:absolute!important;
  inset:auto!important;
  left:0!important;
  top:-30%!important;
  width:100%!important;
  height:160%!important;
}
/* the mascot is an <img> inside .touch-art; never let the "media width:100%" rule stretch it */
html body[data-ui-version] #brandEntrance#brandEntrance .touch-art .pp-cover-mascot{
  position:absolute!important;
  left:50%!important;
  top:52%!important;
  width:clamp(104px,min(24vw,26vh),210px)!important;
  max-width:none!important;
  height:auto!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-footer{
  position:relative!important;
  inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  flex:none!important;
  width:min(100%,560px)!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:14px!important;
  margin:0!important;
  padding:4px var(--pp-pad) max(18px,calc(env(safe-area-inset-bottom) + 10px))!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-footer>p{
  margin:0!important;
  font-size:clamp(13px,1.5vw,15px)!important;
  line-height:1.6!important;
  letter-spacing:.06em!important;
  color:#b9bcec!important;
  text-align:center!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-footer>p br{display:none!important}
html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-footer .legal-cover-entry{
  display:block!important;
  margin-top:6px!important;
}
html body[data-ui-version] #brandEntrance#brandEntrance #brandEntranceOpen{
  position:relative!important;
  inset:auto!important;
  width:min(100%,400px)!important;
  max-width:100%!important;
  min-height:56px!important;
  align-self:center!important;
  font-size:16px!important;
}
/* short screens (phones in landscape, split view): drop the extras, keep headline + CTA */
@media (max-height:640px){
  html body[data-ui-version] #brandEntrance#brandEntrance .pp-chips{display:none!important}
  html body[data-ui-version] #brandEntrance#brandEntrance .touch-heading{margin-top:6px!important}
  html body[data-ui-version] #brandEntrance#brandEntrance .touch-heading h1{font-size:clamp(24px,7vh,40px)!important}
  html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-footer{gap:8px!important}
  html body[data-ui-version] #brandEntrance#brandEntrance #brandEntranceOpen{min-height:48px!important}
}
@media (max-height:460px){
  html body[data-ui-version] #brandEntrance#brandEntrance .pp-kicker,
  html body[data-ui-version] #brandEntrance#brandEntrance .touch-subtitle{display:none!important}
  html body[data-ui-version] #brandEntrance#brandEntrance .touch-cover-footer>p{font-size:12px!important}
}

/* ---------- WORKBENCH: one left edge for titles, headings and cards ---------- */
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .workspace-view,
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .studio-welcome{
  padding-inline:0!important;
}

/* each numbered step becomes one card, so the form reads as 1 → 2 → 3
   (same weight as the 10-28 redesign rule that flattened them; this file loads later) */
html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench :is(#productH3OmniForm,#oralIpForm)>.product-form-step:not(.pp-r-summary){
  padding:clamp(18px,2.6vw,28px)!important;
  border:1px solid rgba(170,176,255,.16)!important;
  border-radius:22px!important;
  background:linear-gradient(165deg,rgba(38,35,96,.46),rgba(14,13,42,.66))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.22)!important;
  transition:border-color var(--pp-dur-slow) var(--pp-ease),box-shadow var(--pp-dur-slow) var(--pp-ease);
}
html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench :is(#productH3OmniForm,#oralIpForm)>.product-form-step.pp-step-active:not(.pp-r-summary){
  border-color:rgba(139,123,255,.46)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 4px rgba(139,123,255,.08),0 18px 44px rgba(0,0,0,.26)!important;
}
html.pp-r[data-theme=light] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench :is(#productH3OmniForm,#oralIpForm)>.product-form-step:not(.pp-r-summary){
  border-color:rgba(88,76,214,.14)!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(40,30,120,.07)!important;
}
html.pp-r[data-theme=light] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench :is(#productH3OmniForm,#oralIpForm)>.product-form-step.pp-step-active:not(.pp-r-summary){
  border-color:rgba(107,109,255,.42)!important;
  box-shadow:0 0 0 4px rgba(107,109,255,.08),0 12px 34px rgba(40,30,120,.09)!important;
}
html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench :is(#productH3OmniForm,#oralIpForm)>.product-form-step:not(.pp-r-summary) .product-step-heading{
  align-items:center!important;
  gap:12px!important;
  margin-bottom:20px!important;
}
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-step-heading>b{
  display:inline-grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
  font-size:15px!important;
  box-shadow:0 6px 16px rgba(107,109,255,.35)!important;
}
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-step-heading strong{
  font-size:clamp(17px,calc(1.2vw + 10px),20px)!important;
  letter-spacing:-.01em!important;
}
/* optional sections: a clear tappable row instead of a bare text line between hairlines */
html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench :is(#productH3OmniForm,#oralIpForm)>.product-form-step:not(.pp-r-summary) .product-more-options{
  margin-top:14px!important;
  padding-top:0!important;
  border-top:0!important;
}
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-more-options>summary{
  min-height:48px!important;
  padding:12px 16px!important;
  border:1px solid rgba(170,176,255,.14)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.03)!important;
  color:#d4d6fb!important;
}
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-more-options[open]>summary{
  margin-bottom:14px!important;
  border-color:rgba(139,123,255,.36)!important;
}
html[data-theme=light] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-more-options>summary{
  border-color:rgba(88,76,214,.14)!important;
  background:#f6f5ff!important;
  color:#3b3a6b!important;
}
/* upload tiles read as drop targets */
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-generation-form button.video-field{
  border-style:dashed!important;
  border-color:rgba(170,176,255,.3)!important;
}
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .product-generation-form button.video-field:hover{
  border-color:rgba(170,176,255,.6)!important;
}

/* ---------- ORAL IP: optional uploads two-up on tablets instead of one tall column ---------- */
@media (min-width:600px){
  html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench #oralIpForm .product-essential-fields{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 16px!important;
  }
  html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench #oralIpForm :is(.oral-benchmark-field,.oral-person-group){
    grid-column:1/-1!important;
  }
  html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench #oralIpForm .oral-person-group{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 16px!important;
  }
  /* person photo | clothing side by side; the profile fields that appear after a photo span below */
  html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench #oralIpForm .oral-person-group>.product-field-card{grid-column:auto!important;margin-top:0!important}
  html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench #oralIpForm .oral-person-group>.oral-wardrobe-field{order:1}
  html.pp-r[data-theme] body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench #oralIpForm #oralPersonProfiles{
    order:2;
    grid-column:1/-1!important;
  }
}

/* ---------- HOME ---------- */
@media (min-width:600px) and (max-width:900px){
  html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench .pp-command{padding:22px 22px 18px 136px!important}
  html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench .pp-command-mascot{position:absolute!important;left:16px!important;bottom:12px!important;width:104px!important;margin:0!important}
  html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench .pp-command-field{flex-wrap:nowrap!important}
  html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench #ppCommandGo{width:auto!important;flex:none!important;padding-inline:26px!important}
}
@media (min-width:600px) and (max-width:820px){
  html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .studio-create-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
}
html body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .studio-create h3{
  font-size:clamp(17px,calc(1vw + 11px),20px)!important;
}
/* membership banner: the art kept a light-theme white glow that blows out on dark */
html:not([data-theme=light]) body[data-ui-version] #jiyingWorkbench#jiyingWorkbench#jiyingWorkbench#jiyingWorkbench .studio-hero .studio-art{
  background:radial-gradient(circle at 50% 52%,rgba(139,123,255,.34) 0,rgba(90,80,220,.12) 38%,transparent 66%)!important;
}

/* ---------- floating 小影 helper: never blocks taps on the page beneath ---------- */
body[data-ui-version] .pp-guide{pointer-events:none!important}
body[data-ui-version] .pp-guide>*{pointer-events:auto!important}
@media (max-width:820px){
  body[data-ui-version] .pp-guide{
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  body[data-ui-version] .pp-guide>img{width:58px!important;height:58px!important}
  body.pp-r-has-bar[data-ui-version] .pp-guide{bottom:calc(var(--pp-r-bar-h,76px) + 12px)!important}
}

/* ==========================================================================
   PASS4 2026-11-03 — login screen on tablets: the headline never sits on the
   card wall, portrait stacks the story above the form, landscape fits the form
   on one screen. Presentation only: no markup, script, data or API changes.
   ========================================================================== */

/* ---------- portrait tablets (600–1023px): story centred above the form ---------- */
@media (min-width:600px) and (max-width:1023px){
  html body[data-ui-version] #authScreen.touch-login .touch-login-header{max-width:none!important}
  html body[data-ui-version] #authScreen.touch-login .touch-login-layout{
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    max-width:560px!important;
    gap:clamp(18px,2.6vh,30px)!important;
    padding:clamp(10px,2vh,24px) 0!important;
  }
  html body[data-ui-version] #authScreen.touch-login .auth-card{max-width:480px!important}
  html body[data-ui-version] #authScreen.touch-login .touch-login-story{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    width:100%!important;
    max-width:none!important;
    text-align:center!important;
  }
  html body[data-ui-version] #authScreen.touch-login .pp-login-mascot{
    width:clamp(84px,10vh,120px)!important;
    margin:0 0 6px!important;
  }
  html body[data-ui-version] #authScreen.touch-login .touch-login-story>span{font-size:12px!important}
  html body[data-ui-version] #authScreen.touch-login .touch-login-story h2{
    font-size:clamp(26px,4.4vw,40px)!important;
    line-height:1.25!important;
    margin:12px 0 10px!important;
  }
  html body[data-ui-version] #authScreen.touch-login .touch-login-story h2 br{display:none!important}
  html body[data-ui-version] #authScreen.touch-login .touch-login-story p{
    font-size:15px!important;
    line-height:1.75!important;
  }
  /* the wall frames the form; behind the headline it is only a faint texture */
  html body[data-ui-version] #authScreen.touch-login .pp-login-canvas{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 260px,#000 480px);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 260px,#000 480px);
  }
}
@media (min-width:600px) and (max-width:1023px) and (max-height:959px){
  html body[data-ui-version] #authScreen.touch-login :is(.pp-login-mascot,.touch-login-story p){display:none!important}
  html body[data-ui-version] #authScreen.touch-login .pp-login-canvas{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 150px,#000 300px);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 150px,#000 300px);
  }
}
@media (min-width:600px) and (max-width:1023px) and (max-height:699px){
  html body[data-ui-version] #authScreen.touch-login .touch-login-story{display:none!important}
  html body[data-ui-version] #authScreen.touch-login .pp-login-canvas{-webkit-mask-image:none;mask-image:none}
}

/* ---------- landscape tablets and desktops: wall sits behind the form, headline on clean ground ---------- */
@media (min-width:1024px){
  html body[data-ui-version] #authScreen.touch-login .pp-login-canvas{
    left:22%!important;
    right:auto!important;
    width:100%!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 16%,#000 40%);
            mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 16%,#000 40%);
  }
}

/* ---------- short screens and stacked portrait: tighter form so the page fits without scrolling ---------- */
@media (min-width:761px) and (max-height:900px),(min-width:600px) and (max-width:1023px){
  html body[data-ui-version] #authScreen.touch-login{
    padding-top:max(18px,env(safe-area-inset-top))!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  html body[data-ui-version] #authScreen.touch-login .touch-login-layout{padding-block:12px!important}
  html body[data-ui-version] #authScreen.touch-login .auth-card{padding:26px 32px 20px!important}
  html body[data-ui-version] #authScreen.touch-login .auth-intro h1{font-size:28px!important;margin:6px 0!important}
  html body[data-ui-version] #authScreen.touch-login .auth-tabs{margin:18px 0 16px!important}
  html body[data-ui-version] #authScreen.touch-login #authSubmit{margin-top:4px!important}
  html body[data-ui-version] #authScreen.touch-login .auth-footer{margin-top:14px!important;padding-top:12px!important}
  html body[data-ui-version] #authScreen.touch-login .legal-auth-note{margin-top:6px!important}
}