/* Login screen layout and visual layer for the split frontend shell. */

.auth-screen{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100dvh;
  padding:clamp(24px,5vw,72px);
  background:
    radial-gradient(circle at 13% 12%,rgba(69,126,246,.22),transparent 29%),
    radial-gradient(circle at 88% 82%,rgba(236,22,140,.15),transparent 26%),
    linear-gradient(135deg,#081224 0%,#101d39 48%,#172a4d 100%);
}
.auth-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.auth-grid{
  position:absolute;inset:-30%;
  opacity:.18;
  background-image:linear-gradient(rgba(174,196,235,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(174,196,235,.18) 1px,transparent 1px);
  background-size:56px 56px;
  transform:perspective(620px) rotateX(58deg) rotateZ(-8deg) translateY(28%);
  transform-origin:center bottom;
}
.auth-orb{position:absolute;display:block;border-radius:50%;filter:blur(2px);opacity:.6}
.auth-orb-one{width:clamp(190px,28vw,430px);height:clamp(190px,28vw,430px);left:-8%;top:-14%;background:radial-gradient(circle at 65% 65%,rgba(91,142,255,.32),transparent 68%);animation:auth-float 12s ease-in-out infinite}
.auth-orb-two{width:clamp(230px,34vw,520px);height:clamp(230px,34vw,520px);right:-13%;bottom:-24%;background:radial-gradient(circle at 38% 35%,rgba(232,61,157,.22),transparent 68%);animation:auth-float 15s ease-in-out -3s infinite reverse}
.auth-orbit{position:absolute;border:1px solid rgba(180,205,255,.15);border-radius:50%;transform:rotate(-24deg);opacity:.8}
.auth-orbit-one{width:clamp(420px,68vw,980px);height:clamp(180px,28vw,390px);right:-24%;top:8%;animation:auth-orbit-drift 18s ease-in-out infinite}
.auth-orbit-two{width:clamp(360px,54vw,780px);height:clamp(140px,22vw,300px);left:-22%;bottom:8%;transform:rotate(22deg);animation:auth-orbit-drift 22s ease-in-out -4s infinite reverse}
.auth-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,430px);align-items:center;gap:clamp(44px,8vw,128px);width:min(1120px,100%);margin:0 auto}
.auth-story{max-width:590px;color:#fff;animation:auth-rise .7s cubic-bezier(.2,.8,.2,1) both}
.auth-story-kicker{display:flex;align-items:center;gap:9px;color:#b8c8e4;font-size:10px;font-weight:800;letter-spacing:.16em}
.auth-story-dot,.auth-secure-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#55df9a;box-shadow:0 0 0 5px rgba(85,223,154,.12),0 0 18px rgba(85,223,154,.7)}
.auth-story-mark{margin:clamp(26px,5vw,62px) 0 18px;color:#6c9cff;font-size:clamp(34px,6vw,70px);font-weight:900;letter-spacing:-.11em;line-height:.8}
.auth-story-mark span{display:inline-block;margin-left:8px;color:#ed5eae;font-size:.6em;transform:translateY(-.3em)}
.auth-story h1{max-width:560px;margin:0;color:#f6f9ff;font-size:clamp(38px,5.1vw,76px);font-weight:700;letter-spacing:-.075em;line-height:.98}
.auth-story h1 em{color:#9bbcff;font-style:normal}
.auth-story p{max-width:390px;margin:25px 0 0;color:#a8b8d2;font-size:14px;line-height:1.75}
.auth-story-rule{display:flex;align-items:center;gap:12px;margin-top:36px;color:#7588a8;font-size:9px;font-weight:800;letter-spacing:.18em}
.auth-story-rule span{width:58px;height:1px;background:linear-gradient(90deg,#5c8fff,transparent)}
.auth-card{position:relative;width:100%;padding:clamp(26px,4vw,36px);border:1px solid rgba(255,255,255,.52);border-radius:30px;background:rgba(255,255,255,.94);box-shadow:0 36px 100px rgba(0,0,0,.42),0 0 0 1px rgba(123,164,255,.12);backdrop-filter:blur(18px);animation:auth-rise .7s .1s cubic-bezier(.2,.8,.2,1) both}
.auth-card-topline{display:flex;align-items:center;gap:8px;margin-bottom:25px;color:#8795ac;font-size:9px;font-weight:900;letter-spacing:.16em}
.auth-card-line{height:1px;flex:1;background:linear-gradient(90deg,#d9e2f3,transparent)}
.auth-brand{gap:2px;margin-bottom:11px}
.auth-brand .oj-wordmark{font-size:32px;letter-spacing:-1.8px}
.auth-brand .oj-tagline{margin-top:7px;color:#77849a;font-size:9px;letter-spacing:.2em}
.auth-sub{margin:13px 0 25px;color:#718096;font-size:11px;font-weight:600;line-height:1.55}
.auth-card .field{gap:8px;margin-top:16px}
.auth-card .field label{color:#53627a;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.auth-card input,.auth-card select{min-height:48px;border:1px solid #dce5f2;border-radius:14px;background:#f7faff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.auth-card input:focus,.auth-card select:focus{border-color:#648ff6;background:#fff;box-shadow:0 0 0 4px rgba(100,143,246,.13);transform:translateY(-1px)}
.auth-submit{min-height:52px;margin-top:22px;border:0;border-radius:15px;background:linear-gradient(110deg,#467cf0,#6c63e9 54%,#c345a1);box-shadow:0 13px 28px rgba(82,107,231,.3);font-size:12px;font-weight:900;letter-spacing:.13em;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.auth-submit:hover{filter:saturate(1.08);box-shadow:0 16px 32px rgba(82,107,231,.38);transform:translateY(-2px)}
.auth-submit:active{transform:translateY(0) scale(.99)}
.small-note{color:#77849a}
.auth-card-footer{display:flex;justify-content:center;gap:8px;margin-top:21px;color:#a2aec0;font-size:8px;font-weight:800;letter-spacing:.12em}
@keyframes auth-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(12px,10px,0) scale(1.05)}}
@keyframes auth-orbit-drift{0%,100%{transform:rotate(-24deg) translate3d(0,0,0)}50%{transform:rotate(-20deg) translate3d(-16px,10px,0)}}
@media(max-width:760px){
  .auth-screen{padding:18px}
  .auth-layout{display:block;width:min(100%,440px)}
  .auth-story{display:none}
  .auth-card{padding:26px 22px;border-radius:24px}
}
@media(pointer:coarse){.auth-orbit{opacity:.45}.auth-grid{opacity:.1}.auth-card{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){
  .auth-story,.auth-card,.auth-orb,.auth-orbit{animation:none!important}
  .auth-card input,.auth-card select,.auth-submit{transition:none!important}
  .auth-submit:hover{transform:none}
}