/* Botanical login theme, scoped to the existing login component. */
@font-face{font-family:YSLoginWenkai;src:url('./assets/wenkai.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:YSLoginArt;src:url('./assets/cormorant.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}

#app .ys-login-layout{
  --ys-paper:#f6f4ec;--ys-card:#fffcf5;--ys-ink:#2e4739;--ys-muted:#727765;--ys-line:#dce0d0;--ys-input:#fafaf3;--ys-green:#365742;
  background:var(--ys-paper);color:var(--ys-ink);isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;
  min-height:100vh;min-height:100svh;padding:64px max(5vw,24px);align-items:center;
}
#app .ys-login-layout>.absolute{display:none}
#app .ys-login-layout::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 16% 40%,#dce3ce66,transparent 52%),radial-gradient(ellipse at 96% 8%,#e8dfc65c,transparent 38%),url('./assets/paper.svg');
}
#app .ys-login-layout::after{content:"";position:absolute;inset:22px;border:1px solid #71815c1c;border-radius:3px;pointer-events:none;z-index:0}
#app .ys-login-content{grid-column:2;max-width:430px;width:100%;justify-self:center;position:relative;z-index:2;animation:ys-login-arrive .75s cubic-bezier(.2,.7,.25,1) both}
#app .ys-login-brand{margin-bottom:26px}
#app .ys-login-brand>div{
  width:54px;height:54px;margin-bottom:14px;border-radius:0;box-shadow:none;
  background:url('/welcome/mark.svg') center/contain no-repeat;
}
#app .ys-login-brand>div>img{opacity:0}
#app .ys-login-brand h1{
  font:italic 500 39px/1.15 YSLoginArt,Georgia,serif;letter-spacing:-.8px;
  background:none;color:var(--ys-ink);-webkit-text-fill-color:var(--ys-ink);margin-bottom:11px;
}
#app .ys-login-brand>p{font-size:12px;line-height:1.8;color:var(--ys-muted);max-width:330px;margin-inline:auto}
#app .ys-login-card{
  position:relative;background:var(--ys-card);border:1px solid var(--ys-line);border-radius:20px;
  padding:34px 34px 32px;box-shadow:0 20px 65px -35px #354b3340,0 3px 7px #38483205;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#app .ys-login-card::before{
  content:"";position:absolute;top:-1px;left:calc(50% - 24px);width:48px;height:3px;
  background:#859671;border-radius:0 0 5px 5px;
}
#app .ys-login-card h2{font:400 29px/1.45 YSLoginWenkai,serif;letter-spacing:2px;color:var(--ys-ink)}
#app .ys-login-card h2+p{font-size:12px;color:var(--ys-muted);margin-top:6px}
#app .ys-login-card .input-label{color:var(--ys-ink);font-size:13px;font-weight:500;margin-bottom:8px}
#app .ys-login-card .input{
  min-height:49px;border-radius:9px;background:var(--ys-input);border:1px solid var(--ys-line);color:var(--ys-ink);
  font-size:15px;line-height:1.5;transition:border-color .2s,box-shadow .2s,background-color .2s;
}
#app .ys-login-card .input::placeholder{color:#989d8c;font-size:13px}
#app .ys-login-card .input:focus{background:var(--ys-card);border-color:#849872;box-shadow:0 0 0 3px #91a17d22;--tw-ring-color:transparent;outline:none}
#app .ys-login-card .input.input-error{border-color:#c36955}
#app .ys-login-card .relative>div>svg,#app .ys-login-card .relative>button{color:#87937a}
#app .ys-login-card .relative>button{min-width:44px;justify-content:center;padding-right:0}
#app .ys-login-card .btn-primary{
  background:var(--ys-green);border:1px solid var(--ys-green);color:#fffef6;min-height:49px;
  border-radius:9px;box-shadow:0 4px 0 #2b4b3210;font-size:14px;letter-spacing:1.5px;
  transition:background-color .2s,transform .2s,box-shadow .2s;
}
#app .ys-login-card .btn-primary:not(:disabled):hover{background:#47694a;border-color:#47694a;transform:translateY(-1px);box-shadow:0 6px 16px #354c3326}
#app .ys-login-card .btn-primary:not(:disabled):active{transform:translateY(1px);box-shadow:0 1px 0 #354c3310}
#app .ys-login-card .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
#app .ys-login-card :is(button,a):focus-visible{outline:2px solid #849872;outline-offset:4px}
#app .ys-login-card a,#app .ys-login-footer a{color:#567346}
#app .ys-login-card .text-gray-500,#app .ys-login-footer{color:var(--ys-muted)}
#app .ys-login-footer{margin-top:21px;font-size:12px}
#app .ys-login-footer:empty{display:none}
#app .ys-login-copyright{color:var(--ys-muted);font-size:10px;letter-spacing:.35px;margin-top:26px}

.ys-botanical-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;user-select:none}
.ys-botanical-wash{position:absolute;inset:-20%;background:radial-gradient(ellipse at 10% 70%,#becda629,transparent 42%);animation:ys-light-breathe 18s ease-in-out infinite}
.ys-botanical-editorial{position:absolute;top:50%;left:max(8vw,30px);width:36vw;max-width:560px;transform:translateY(-50%)}
.ys-botanical-eyebrow{display:flex;align-items:center;gap:13px;font-size:9px;letter-spacing:2.8px;color:#7d886f;margin-bottom:24px}
.ys-botanical-eyebrow>span{width:27px;height:1px;background:#9ca889}
.ys-botanical-copy{font:400 clamp(38px,3.8vw,57px)/1.37 YSLoginWenkai,serif;letter-spacing:3px;color:var(--ys-ink)}
.ys-botanical-english{font:italic 500 clamp(23px,2.3vw,32px)/1.2 YSLoginArt,Georgia,serif;color:#8b906f;margin-top:17px}
.ys-botanical-illustration{position:relative;height:clamp(230px,28vw,380px);margin-top:-11px}
.ys-botanical-halo{position:absolute;inset:35px 16% 17px 2%;border:1px solid #a7b08e45;border-radius:50%;transform:rotate(-19deg)}
.ys-botanical-halo::after{content:"";position:absolute;inset:11px -10px -7px 15px;border:1px solid #a7b08e20;border-radius:50%}
.ys-botanical-specimen{position:absolute;height:114%;width:94%;left:-7%;bottom:-6%;object-fit:contain;transform-origin:50% 91%;animation:ys-specimen-sway 12s ease-in-out infinite}
.ys-botanical-annotation{position:absolute;right:0;bottom:46px;font:italic 500 22px/1.2 YSLoginArt,Georgia,serif;color:#95987a;transform:rotate(-9deg)}
.ys-botanical-caption{display:flex;align-items:center;gap:18px;font-size:8px;letter-spacing:2.1px;color:#8b937a;margin-top:12px}
.ys-botanical-caption i{flex:1;height:1px;background:#aab49755}
.ys-botanical-edge{position:absolute;width:330px;height:480px;object-fit:contain;opacity:.12;transform-origin:50% 90%;animation:ys-edge-sway 19s ease-in-out infinite}
.ys-botanical-edge-top{top:-240px;right:-100px;transform:rotate(161deg);--ys-angle:161deg}
.ys-botanical-edge-bottom{bottom:-250px;left:-80px;transform:rotate(19deg);--ys-angle:19deg;animation-delay:-7s}

.dark #app .ys-login-layout{--ys-paper:#1d2c23;--ys-card:#25362b;--ys-ink:#e8edda;--ys-muted:#a5b29a;--ys-line:#445541;--ys-input:#213127;--ys-green:#4e704c}
.dark #app .ys-login-layout::before{opacity:.16}
.dark .ys-botanical-specimen{opacity:.75}
.dark .ys-botanical-edge{opacity:.2}
.dark #app .ys-login-card a,.dark #app .ys-login-footer a{color:#b5c997}

@keyframes ys-login-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ys-specimen-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes ys-edge-sway{0%,100%{transform:rotate(var(--ys-angle))}50%{transform:rotate(calc(var(--ys-angle) + 4deg))}}
@keyframes ys-light-breathe{0%,100%{opacity:.55;transform:translate(-1%,0)}50%{opacity:1;transform:translate(1%,1%)}}

@media(min-width:1800px){#app .ys-login-layout{padding-inline:calc((100vw - 1500px)/2)}.ys-botanical-editorial{left:calc((100vw - 1360px)/2)}}
@media(max-width:1000px) and (min-width:821px){#app .ys-login-card{padding:28px 24px}.ys-botanical-annotation{font-size:18px;right:-12px}.ys-botanical-caption{font-size:7px;letter-spacing:1.2px}}
@media(max-width:820px){
  #app .ys-login-layout{display:flex;padding:45px 24px 34px;gap:0;justify-content:center}
  #app .ys-login-layout::after{inset:12px}
  #app .ys-login-content{max-width:418px}
  #app .ys-login-content::before{content:"a little space to grow.";display:block;text-align:center;font:italic 500 24px/1.2 YSLoginArt,Georgia,serif;color:#899576;margin-bottom:25px}
  #app .ys-login-brand{margin-bottom:23px}
  #app .ys-login-brand>div{width:47px;height:47px;margin-bottom:11px}
  #app .ys-login-brand h1{font-size:36px}
  #app .ys-login-brand>p{font-size:11px;max-width:285px}
  #app .ys-login-card{padding:29px 25px 27px;border-radius:17px;background:var(--ys-card)}
  #app .ys-login-card h2{font-size:28px}
  #app .ys-login-card .input{font-size:16px}
  .ys-botanical-editorial{display:none}
  .ys-botanical-edge{opacity:.2;width:270px;height:390px}
  .ys-botanical-edge-top{top:-151px;right:-109px;--ys-angle:159deg}
  .ys-botanical-edge-bottom{bottom:-139px;left:-128px;--ys-angle:27deg}
  #app .ys-login-copyright{font-size:9px;letter-spacing:0;margin-top:25px}
}
@media(max-width:360px){#app .ys-login-layout{padding:33px 20px}#app .ys-login-card{padding:25px 20px}#app .ys-login-brand h1{font-size:33px}#app .ys-login-card h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){#app .ys-login-content,.ys-botanical-specimen,.ys-botanical-edge,.ys-botanical-wash{animation:none}#app .ys-login-card :is(.input,.btn-primary){transition:none}}