/* V31 exact-parity layer (Milestone 3: login + signup) — reference: Whiiso-scratch-preview-home-v31.html (approved).
   Root cause: v31-public.css (earlier "visual parity" layer) overrides the preview's auth look with
   body:has([data-form=...]) rules: 16px panel gap, transparent form panel, white inputs, #683774 links,
   flat mark colours and a stage-heading gradient that resets background-clip (renders as a solid block).
   This file restores the preview's exact values. Loaded LAST on auth.html. Selectors use the same
   body:has([data-form]) prefix so they win on order, not on !important. */
body:has([data-form]){
  --sh-card:0 18px 40px rgba(60,20,90,.10);
  --sh-pop:0 28px 60px rgba(60,20,90,.22);
  --r-card:30px;--r-input:20px;
}

/* ---- frame: 22px padding + 22px gap, two equal 687px panels at 1440 ---- */
body:has([data-form]) .shell{gap:22px;padding:22px;max-width:1440px;margin:0 auto}
body:has([data-form]) .side{
  padding:22px 40px 30px;background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid #fff;border-radius:32px;box-shadow:var(--sh-card);
}
body:has([data-form]) .logo{min-height:30px;font:800 25px var(--font-body);letter-spacing:-.045em}
body:has([data-form]) .stage{
  top:22px;height:calc(100svh - 44px);border-radius:32px;border:1px solid #fff;box-shadow:var(--sh-card);
  background:
    radial-gradient(ellipse at 10% 8%,#dfe8fb,transparent 55%),
    radial-gradient(ellipse at 95% 20%,var(--lilac),transparent 55%),
    radial-gradient(ellipse at 55% 110%,var(--pink),transparent 60%),
    radial-gradient(ellipse at 4% 100%,var(--peach),transparent 50%),
    #f6f0ff;
}

/* ---- headings: ink text, gradient <mark> clipped to the glyphs ---- */
body:has([data-form]) .view h1{color:var(--ink)}
body:has([data-form]) .view h1 mark,
body:has([data-form]) .stage h2 mark{
  background:linear-gradient(100deg,#1b0036 0%,#c39cc5 60%,#eed6c1 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
body:has([data-form]) .stage h2{color:var(--ink)}
body:has([data-form]) .view .sub{color:var(--muted)}

/* ---- controls ---- */
body:has([data-form]) .btn:not(.btn--ghost){background:var(--btn-dark);color:#fff;border:0}
body:has([data-form]) .btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
body:has([data-form]) .input input{
  border:1.5px solid var(--line);border-radius:18px;background:#f6eef7;color:var(--ink);font-weight:600;
}
body:has([data-form]) .input input:hover{border-color:#d3c7f3}
body:has([data-form]) .input input:focus{background:#fff;border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,242,.14)}
body:has([data-form]) .input input::placeholder{color:#b3a3c0;font-weight:500}
body:has([data-form]) .link,
body:has([data-form]) .switch a,
body:has([data-form]) .check a{color:var(--violet)}
body:has([data-form]) .check input:checked+i{background:linear-gradient(135deg,#1b0036,#c39cc5);border-color:transparent}

/* ---- tablet / mobile frame (preview: <=920px single column, 12px padding, stage hidden) ---- */
@media (max-width:920px){
  body:has([data-form]) .shell{grid-template-columns:1fr;padding:12px;gap:0}
  body:has([data-form]) .stage{display:none}
  body:has([data-form]) .side{padding:18px 20px 26px}
}

/* Auth portrait panel cleanup: shared by /login and /signup.
   Keep the approved three-photo composition and ensure the headline stays legible. */
body:has([data-form]) .stage h2{
  top:8%;
  left:5%;
  right:5%;
  padding:0 3%;
  max-width:100%;
  font-size:clamp(28px,3vw,46px);
  line-height:1.12;
  overflow:visible;
  text-wrap:balance;
  z-index:2;
}
body:has([data-form]) .stage h2 mark{
  background:linear-gradient(100deg,#53336b 0%,#a477aa 48%,#c797a9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
body:has([data-form]) .stage .fan{
  bottom:8%;
  width:min(500px,78%);
}
@media (min-width:921px) and (max-height:750px){
  body:has([data-form]) .stage h2{top:5%;font-size:clamp(27px,2.7vw,40px)}
  body:has([data-form]) .stage .fan{bottom:4%;width:min(440px,73%)}
}

/* V39 auth framing: identical geometry on login and signup, without promo tags. */
@media (min-width:921px){
 body:has([data-form]) .shell{max-width:1600px;min-height:100svh;padding:20px;gap:24px}
 body:has([data-form]) .side{padding:22px 44px 30px;min-height:calc(100svh - 40px)}
 body:has([data-form]) .stage{position:relative;top:auto;height:auto;min-height:calc(100svh - 40px)}
 body:has([data-form]) .view{max-width:480px}
 body:has([data-form]) .stage h2{top:9%;left:8%;right:8%;padding:0;font-size:clamp(34px,2.8vw,48px);line-height:1.1}
 body:has([data-form]) .stage .fan{width:min(540px,82%);bottom:12%}
}
@media (min-width:921px) and (max-height:790px){
 body:has([data-form]) .stage .fan{bottom:8%;width:min(500px,76%)}
 body:has([data-form]) .stage h2{top:7%}
}
@media (max-width:920px){
 body:has([data-form]) .shell{max-width:100%}
 body:has([data-form]) .side{min-height:calc(100svh - 24px)}
}