.login-hero{--hero-fade-ms:320ms}.login-hero-stage{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#f3eadf}.login-hero-slide{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:contain;object-position:center center;background:#f3eadf;opacity:0;transition:opacity var(--hero-fade-ms) ease-in-out;will-change:opacity}.login-hero-slide.is-active{opacity:1;z-index:1}.login-hero-dots{position:absolute;right:23px;bottom:17px;display:flex;gap:5px;z-index:3}.login-hero-dot{width:6px;height:6px;border-radius:50%;background:#8c817355;transition:background .18s ease,transform .18s ease}.login-hero-dot.is-active{background:var(--rust);transform:scale(1.15)}.login-hero-caption{max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.login-hero-admin{margin-top:20px}.login-hero-admin-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.login-hero-admin-head h2{margin:.15rem 0 .4rem}.login-hero-settings-row{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:18px;align-items:end;margin-bottom:18px}.login-hero-effect-note{border:1px solid var(--line);border-radius:14px;background:#f8f4ee;padding:12px 14px;line-height:1.65}.login-hero-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.login-hero-slot{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;display:grid;gap:10px;min-width:0}.login-hero-slot-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.login-hero-slot-head b{color:var(--rust)}.login-hero-preview{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f3eee7;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:.82rem}.login-hero-preview img{width:100%;height:100%;object-fit:contain;object-position:center center;background:#f3eadf}.login-hero-file input{padding:9px;font-size:.78rem}.login-hero-delete{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:7px!important;color:#9e4d34}.login-hero-delete input{width:auto}.login-hero-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}.login-hero-actions button{min-width:180px}.login-hero-count{font-size:.88rem;color:var(--muted)}@media(max-width:900px){.login-hero-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.hero-photo.login-hero{max-height:none;overflow:visible}.login-hero-stage{aspect-ratio:16/9}.login-hero-settings-row{grid-template-columns:1fr}.login-hero-admin-head{display:block}.login-hero-slots{grid-template-columns:1fr 1fr}.login-hero-actions{align-items:stretch;flex-direction:column}.login-hero-actions button{width:100%}}@media(max-width:480px){.login-hero-slots{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.login-hero-slide{transition-duration:0ms}}

/* v4.0.2: Login hero must always show the complete original image.
   app.css has a more specific .hero-photo img { object-fit: cover; } rule,
   so this rule intentionally uses higher specificity + !important. */
.hero-photo.login-hero{
  background:#f3eadf;
}
.hero-photo.login-hero .login-hero-stage{
  background:#f3eadf!important;
}
.hero-photo.login-hero .login-hero-stage > img.login-hero-slide{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#f3eadf!important;
}
.login-hero-preview > img{
  object-fit:contain!important;
  object-position:center center!important;
  background:#f3eadf!important;
}

/* JF4199c: softly fluttering cherry blossoms and loose petals drawn in CSS.
   Values live here instead of inline styles because the site CSP blocks style attributes. */
.welcome{position:relative;overflow:hidden}
.welcome>.hero-copy,.welcome>.hero-photo{position:relative;z-index:2}
.welcome-blossoms{position:absolute;inset:-12vh 0 0;z-index:1;overflow:hidden;pointer-events:none}
.welcome-blossoms span{
  position:absolute;top:-12vh;width:var(--fall-size);height:var(--fall-size);opacity:0;
  transform-origin:52% 44%;
  animation-name:welcome-blossom-fall;animation-timing-function:linear;
  animation-iteration-count:infinite;will-change:transform,opacity
}
.welcome-blossoms .petal{height:calc(var(--fall-size) * .72);background:linear-gradient(145deg,#f7a4bc 0%,#e66d94 52%,#c83e6b 100%);border-radius:76% 24% 72% 28% / 70% 30% 76% 24%;box-shadow:inset 2px 2px 3px rgba(255,232,239,.55),inset -2px -2px 3px rgba(153,42,76,.2),0 3px 7px rgba(133,47,72,.14)}
.welcome-blossoms .petal::after{content:"";position:absolute;top:12%;left:15%;width:27%;height:25%;border-radius:50%;background:rgba(255,231,239,.62);filter:blur(.35px)}
.welcome-blossoms .blossom{background:
  radial-gradient(circle at 50% 50%,#f1cf91 0 7%,#cc7e86 8% 12%,transparent 13%),
  radial-gradient(ellipse 27% 34% at 50% 18%,#f7b0c5 0 72%,#d8537b 76% 82%,transparent 84%),
  radial-gradient(ellipse 27% 34% at 81% 41%,#f5a3bd 0 72%,#d44b75 76% 82%,transparent 84%),
  radial-gradient(ellipse 27% 34% at 69% 78%,#f7afc4 0 72%,#d9557d 76% 82%,transparent 84%),
  radial-gradient(ellipse 27% 34% at 31% 78%,#f5a0ba 0 72%,#cf416d 76% 82%,transparent 84%),
  radial-gradient(ellipse 27% 34% at 19% 41%,#f8b5c9 0 72%,#d7537b 76% 82%,transparent 84%);
  filter:drop-shadow(0 3px 4px rgba(132,48,73,.14))
}
.welcome-blossoms span:nth-child(1){left:7%;--fall-size:28px;animation-duration:29s;animation-delay:-20s;--drift-a:38px;--drift-b:-20px;--drift-c:54px;--drift-d:12px;--blossom-rest-y:8%}
.welcome-blossoms span:nth-child(2){left:18%;--fall-size:21px;animation-duration:34s;animation-delay:-9s;--drift-a:-32px;--drift-b:25px;--drift-c:-48px;--drift-d:-10px;--blossom-rest-y:23%}
.welcome-blossoms span:nth-child(3){left:29%;--fall-size:24px;animation-duration:31s;animation-delay:-26s;--drift-a:24px;--drift-b:58px;--drift-c:-18px;--drift-d:35px;--blossom-rest-y:42%}
.welcome-blossoms span:nth-child(4){left:41%;--fall-size:30px;animation-duration:36s;animation-delay:-15s;--drift-a:-44px;--drift-b:8px;--drift-c:46px;--drift-d:-24px;--blossom-rest-y:63%}
.welcome-blossoms span:nth-child(5){left:53%;--fall-size:27px;animation-duration:30s;animation-delay:-5s;--drift-a:46px;--drift-b:-36px;--drift-c:20px;--drift-d:50px;--blossom-rest-y:17%}
.welcome-blossoms span:nth-child(6){left:64%;--fall-size:18px;animation-duration:35s;animation-delay:-23s;--drift-a:-18px;--drift-b:-55px;--drift-c:34px;--drift-d:-14px;--blossom-rest-y:55%}
.welcome-blossoms span:nth-child(7){left:74%;--fall-size:27px;animation-duration:33s;animation-delay:-12s;--drift-a:32px;--drift-b:-12px;--drift-c:-52px;--drift-d:28px;--blossom-rest-y:34%}
.welcome-blossoms span:nth-child(8){left:84%;--fall-size:23px;animation-duration:32s;animation-delay:-2s;--drift-a:-38px;--drift-b:18px;--drift-c:49px;--drift-d:-31px;--blossom-rest-y:70%}
.welcome-blossoms span:nth-child(9){left:92%;--fall-size:20px;animation-duration:35s;animation-delay:-18s;--drift-a:20px;--drift-b:-46px;--drift-c:14px;--drift-d:42px;--blossom-rest-y:48%}
@keyframes welcome-blossom-fall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg) rotateX(0deg);opacity:0}
  8%{transform:translate3d(var(--drift-a),5vh,0) rotate(28deg) rotateX(24deg);opacity:.6}
  27%{transform:translate3d(var(--drift-b),25vh,0) rotate(-34deg) rotateY(58deg);opacity:.56}
  49%{transform:translate3d(var(--drift-c),49vh,0) rotate(74deg) rotateX(-48deg);opacity:.6}
  71%{transform:translate3d(var(--drift-d),73vh,0) rotate(18deg) rotateY(-62deg);opacity:.54}
  90%{transform:translate3d(var(--drift-b),96vh,0) rotate(112deg) rotateX(36deg);opacity:.5}
  100%{transform:translate3d(var(--drift-a),116vh,0) rotate(150deg) rotateY(18deg);opacity:0}
}
.login-field{gap:0}
/* Login greeting: 110% leading; retain the larger eyebrow-to-title spacing. */
.welcome .hero-copy > h1{line-height:1.1}
@media(max-width:760px){
  .hero-photo.login-hero .login-hero-stage{aspect-ratio:32/27}
  .login-box{margin:16px 0 8px;padding:14px;gap:8px}
  .login-box input{padding:10px 12px}
  .login-box button{padding:.72rem 1rem}
}
@media(prefers-reduced-motion:reduce){
  .welcome-blossoms span{top:var(--blossom-rest-y);animation:none;opacity:.5}
}